Skip to content

Commit

Permalink
Update tutorials layout (#1462)
Browse files Browse the repository at this point in the history
  • Loading branch information
@juujisai
juujisai authored Mar 9, 2023
1 parent 78909b4 commit 2698b4a
Show file tree
Hide file tree
Showing 7 changed files with 147 additions and 93 deletions.
1 change: 1 addition & 0 deletions site/content/learn/lesson-1/index.html
View file
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
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
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
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
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
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

0 comments on commit 2698b4a

Please sign in to comment.