Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update tutorials layout #1462

Merged
merged 1 commit into from
Mar 9, 2023
Merged

Update tutorials layout #1462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions site/content/learn/lesson-1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
hidden_sidenav: true
previous_lesson: "/learn/lesson-3/"
next_lesson: "/learn/lesson-2/"
accordion_section: "headingOne"
---

<p>Test text</p>
1 change: 1 addition & 0 deletions site/content/learn/lesson-2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
url: "learn/lesson-2/"
layout: tutorial
hidden_sidenav: true
accordion_section: "headingOne"
---

<p>Test text</p>
1 change: 1 addition & 0 deletions site/content/learn/lesson-3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
url: "learn/lesson-3/"
layout: tutorial
hidden_sidenav: true
accordion_section: "headingOne"
---

<p>Test text</p>
1 change: 1 addition & 0 deletions site/content/learn/lesson-4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
url: "learn/lesson-4/"
layout: tutorial
hidden_sidenav: true
accordion_section: "headingTwo"
---

<p>Test text</p>
55 changes: 35 additions & 20 deletions site/layouts/_default/tutorial.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,29 +35,31 @@

<main class="mt-[58px] py-5">
<div class="contents">
<section id="mdb-tutorial-content" class="container mx-auto">
<div class="grid grid-cols-12 gap-1">
<section
id="mdb-tutorial-content"
class="mx-auto min-[576px]:max-w-[540px] min-[768px]:max-w-[720px] min-[992px]:max-w-[960px] min-[1200px]:max-w-[1140px] min-[1400px]:max-w-[1320px] ">
<div class="grid grid-cols-12">
<!-- Column: Sidebar -->
<div class="col-span-4 mx-5 mb-5 hidden lg:block">
<div class="col-span-4 mb-5 hidden px-5 lg:block">
<div id="tutorials-menu">
{{ partial "tutorial/tutorial-navigation.html" . }}
</div>
</div>
<!-- Column: Sidebar -->

<!-- Column: Content -->
<div class="col-span-8 mb-5">
<div class="col-span-8 mb-5 px-6">
{{ .Content }}


<hr class="hr my-5" />
<hr class="hr my-12" />

<!-- Section: Nav buttons -->
<section class="flex justify-between">
<div>
<a
type="button"
class="inline-block flex rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary-600 outline-none transition duration-300 ease-in-out hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none focus:ring-0 active:bg-neutral-200 active:text-primary-800"
class="flex rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary outline-none transition duration-300 ease-in-out hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none focus:ring-0 active:bg-neutral-200 active:text-primary-800"
data-te-ripple-init
href="https://twitter.com/ascensus_mdb"
rel="nofollow"
Expand All @@ -67,7 +69,7 @@
focusable="false"
data-prefix="fas"
data-icon="caret-left"
class="ml-1 mr-1 h-4 w-4"
class="ml-1 mr-1 h-3.5 w-3.5"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512">
Expand All @@ -83,14 +85,14 @@
{{ if and (isset .Params "previous_lesson") (ne .Params.previous_lesson "") }}
<a
type="button"
class="mr-3 flex items-center rounded bg-primary-600 px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-md outline-none transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
class="mr-3 flex items-center rounded bg-primary-100 px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary-700 shadow-md outline-none transition duration-150 ease-in-out hover:bg-primary-accent-100 hover:shadow-lg focus:bg-primary-accent-100 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-accent-200 active:shadow-lg"
href="{{ .Params.previous_lesson }}"
><svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-left"
class="-mr-1 h-4 w-4"
class=" h-4 w-4"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512">
Expand All @@ -105,15 +107,15 @@
{{ if and (isset .Params "next_lesson") (ne .Params.next_lesson "") }}
<a
type="button"
class="flex items-center rounded bg-primary-600 px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-md outline-none transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
class="flex items-center rounded bg-primary px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-[0_4px_9px_-4px_#3b71ca] outline-none transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
href="{{ .Params.next_lesson }}">
Next
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-right"
class="ml-1 -mr-3 h-4 w-4"
class="ml-3 -mr-3 h-4 w-4"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512">
Expand All @@ -127,7 +129,7 @@
</section>
<!-- Section: Nav buttons -->

<hr class="hr my-5" />
<hr class="hr my-12" />

<!-- Section: About author -->
<section class="">
Expand All @@ -137,13 +139,13 @@
<img
src="https://pbs.twimg.com/profile_images/1154666340298493952/F57OFDN7_400x400.jpg"
alt="John Doe"
class="mr-3 rounded-full"
class="mr-4 rounded-full shadow-[0px_2px_25px_-5px_rgba(0,0,0,0.16),_0px_25px_21px_-5px_rgba(0,0,0,0.1)]"
style="width: 90px; height: 90px;" />
<!-- Body -->
<div>
<div class="mb-4 flex justify-between">
<div class="mb-2 flex justify-between">
<div>
<p class="mb-2 font-bold" style="color: #757575;">
<p class="mb-4 font-bold" style="color: #757575;">
About author
</p>
<h5 class="font-bold">Michal Szymanski</h5>
Expand All @@ -153,8 +155,7 @@ <h5 class="font-bold">Michal Szymanski</h5>
href="https://twitter.com/ascensus_mdb"
target="_blank"
rel="nofollow"
class=" flex"
style=" color: #3b71ca ;">
class="flex text-primary">
<svg
aria-hidden="true"
focusable="false"
Expand Down Expand Up @@ -186,7 +187,7 @@ <h5 class="font-bold">Michal Szymanski</h5>
>Dancer</a
>, nerd & book lover.
</p>
<p class="mt-3">
<p class="mt-4">
Author of hundreds of articles on programming, business,
marketing and productivity. In the past, an educator
working with troubled youth in orphanages and correctional
Expand Down Expand Up @@ -235,6 +236,9 @@ <h5 class="font-bold">Michal Szymanski</h5>
links.forEach((link) => {
if (progress.includes(link.getAttribute("href"))) {
link.setAttribute("data-te-seen-lesson", true);
const childrenSvg = link.querySelector("svg");
childrenSvg.classList.add("w-4", "h-4");
childrenSvg.classList.remove("w-2.5", "h-2.5", "opacity-40");
const childrenSvgPath = link.querySelector("path");
childrenSvgPath.setAttribute("d", checkedLessonSvgPath);
childrenSvgPath.setAttribute("style", "color:#3b71ca;");
Expand All @@ -247,8 +251,16 @@ <h5 class="font-bold">Michal Szymanski</h5>
);

if (link.href === window.location.href) {
currentCollapseToggler.click();
link.classList.add("bg-primary-100", "dark:bg-neutral-700");
link.classList.add(
"bg-[#f3f6fc]",
"hover:bg-[#f3f6fc]",
"focus:bg-[#f3f6fc]",
"text-[#2c58a0]",
"dark:bg-neutral-700",
"dark:text-primary-300",
"dark:hover:bg-neutral-700",
"dark:focus:bg-neutral-700"
);
}
});

Expand All @@ -259,6 +271,9 @@ <h5 class="font-bold">Michal Szymanski</h5>
"[data-te-accordion-header]"
);
const buttonHeader = accordionHeader.querySelector("button");
const buttonSvg = buttonHeader.querySelector("svg");
buttonSvg.classList.add("w-4", "h-4");
buttonSvg.classList.remove("w-2.5", "h-2.5", "opacity-40");
const buttonHeaderSvgPath = buttonHeader.querySelector("path");
buttonHeaderSvgPath.setAttribute("d", checkedLessonSvgPath);
buttonHeaderSvgPath.setAttribute("style", "color:#3b71ca;");
Expand Down
36 changes: 20 additions & 16 deletions site/layouts/partials/tutorial/tutorial-nav-link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
<a href="{{ .href }}" class="flex w-full items-center rounded-lg p-4">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="circle"
class="mr-2 h-3 w-3"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
style="color: #757575;">
<path
id="dupa"
fill="currentColor"
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<a
href="{{ .href }}"
class="flex w-full items-center rounded-lg py-2 px-4 text-[0.9rem] leading-[1.6] outline-none transition-colors duration-500 ease-in-out hover:bg-neutral-100 focus:bg-neutral-100 motion-reduce:transition-none dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<span class="mr-2 mt-[-1px] flex h-3.5 w-3.5 items-center justify-center">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="circle"
class="mx-auto h-2.5 w-2.5 opacity-40"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
style="color: #757575;">
<path
id="dupa"
fill="currentColor"
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
</span>
{{ .text | markdownify }}
{{ .Title }}
</a>
Loading