refactor(ui): refactor sidebar on the challenge page (laike9m#42)

100gle · web-flow · commit 0b4e4ef91f96 · 2023-11-25T20:45:22.000-08:00
* chore: adjust theme switcher size

* chore: add sidebar nav

* Refactor challenge layout

* feat: improve many ui details

* chore: improve some details for sidebar

* chore: adjust index and challenge_card layout details

* Fix sidebar alignment

* Update transition duration in challenge sidebar
diff --git a/templates/challenge.html b/templates/challenge.html
@@ -15,23 +15,22 @@
   <style type="text/css">
     .challenge-container {
       display: flex;
-      padding: 1rem 2rem;
-      max-height: 100vh;
-      width: max(95vw, 95%);
+      height: 100dvh;
     }
 
     /* Sidebar Area */
     .sidebar-container {
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-right: 2rem;
+      padding-bottom: 12px;
+      border-right: 1px solid hsl(205, 20%, 94%);
     }
 
-    .sidebar-container .sidebar-challenge-list {
+    .sidebar-container .sidebar-challenge-main {
       overflow-y: auto;
-      max-width: fit-content;
-      min-width: 100px;
+      padding-left: 8px;
+      padding-right: 8px;
     }
 
     .sidebar-container .sidebar-actions {
@@ -48,6 +47,7 @@
     .challenge-area {
       display: flex;
       flex-direction: column;
+      margin: 0 2rem;
       width: 100%;
     }
 
@@ -58,9 +58,10 @@
     }
 
     .challenge-header__title>span:nth-child(1) {
-      font-size: 30px;
-      font-weight: bold;
+      font-size: 35px;
+      font-weight: 700;
       margin-right: 20px;
+      margin-top: 8px;
     }
 
     .challenge-header__exerpt {
@@ -138,18 +139,29 @@
         align-items: center;
         margin-top: 20px;
         height: 100%;
-        width: 100%;
+        padding: 8px 12px;
       }
 
       .sidebar-container {
-        overflow-y: auto;
         margin-right: 0;
         margin-bottom: 2rem;
-        min-height: 100px;
+        flex-direction: row;
+        width: 100%;
+        border-right: 0px;
+        gap: 4px;
       }
 
-      .sidebar-container .sidebar-challenge-list {
+      .sidebar-container .sidebar-challenge-main {
         height: 100%;
+        padding-left: 0px;
+        margin-right: auto;
+      }
+
+      .sidebar-container .sidebar-actions {
+        margin-top: 0px;
+        padding-top: 0px;
+        border-top: 0px;
+        width: initial;
       }
 
       .challenge-header__title {
@@ -189,11 +201,11 @@
 {% endblock %}
 
 {% block content %}
-  <div class="challenge-container container-fluid">
+  <div class="challenge-container">
     <!-- Left/Top Sidebar -->
     <div class="sidebar-container">
-      <div class="sidebar-challenge-list">
-        {% include 'components/challenge_list.html' %}
+      <div class="sidebar-challenge-main">
+        {% include 'components/challenge_sidebar.html' with context %}
       </div>
       <div class="sidebar-actions">
         {% include 'components/darkmode.html' %}
@@ -323,4 +335,4 @@
     checkWidth();  // Check the width initially
     window.addEventListener('resize', checkWidth);
   </script>
-{% endblock %}
+{% endblock %}
diff --git a/templates/components/challenge_card.html b/templates/components/challenge_card.html
@@ -25,6 +25,21 @@
     align-items: center;
     gap: 8px;
   }
+
+  @media only screen and (max-width: 1080px) and (min-width: 800px) {
+    .challenges {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media only screen and (max-width: 800px) {
+    .challenge-card .challenge-card__list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      justify-items: center;
+      width: 100%;
+    }
+  }
 </style>
 
 <div class="challenge-card">
@@ -34,4 +49,4 @@ <h3 class="challenge-card__level">{{level}}</h3>
       <a href="/{{ level }}/{{ name }}">{{ name }}</a>
     {% endfor %}
   </div>
-</div>
+</div>
diff --git a/templates/components/challenge_list.html b/templates/components/challenge_list.html
diff --git a/templates/components/challenge_sidebar.html b/templates/components/challenge_sidebar.html
@@ -0,0 +1,127 @@
+<style>
+  /* override picocss default style */
+  nav ol:first-of-type,
+  nav ul:first-of-type {
+    margin-left: 0;
+  }
+
+  .challenge-nav {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .challenge-nav ul li {
+    padding: 0px 8px;
+  }
+
+  .challenge-nav ul li:not(:first-of-type) a {
+    padding: 8px 10px;
+  }
+
+  .challenge-nav .challenge-level {
+    width: fit-content;
+    border-bottom: 1px dashed hsl(240, 2%, 90%);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 20px;
+    font-weight: bold;
+    margin: 1rem 0px;
+  }
+
+  .challenge-nav ul:nth-child(1)>li:nth-child(1) {
+    position: relative;
+  }
+
+  .sidebar-toggle {
+    display: none;
+  }
+
+
+  @media only screen and (max-width: 800px) {
+    .sidebar-toggle {
+      display: flex;
+      gap: 4px;
+      cursor: pointer;
+    }
+
+    .sidebar-toggle-close {
+      margin-left: auto;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+
+    .drawer {
+      position: fixed;
+      top: 0;
+      left: -100%;
+      width: fit-content;
+      padding: 4px 8px;
+      height: 100%;
+      /* use picocss default css variable. see: https://github.com/picocss/pico/blob/master/css/themes/default.css */
+      background: var(--background-color);
+      box-shadow: 0 0 10px #00000080;
+      transition: left 0.2s ease-in-out;
+      z-index: 1;
+      overflow-y: auto;
+    }
+
+    .drawer-container {
+      position: relative;
+    }
+
+
+    .drawer.open {
+      left: 0;
+    }
+  }
+</style>
+
+<span class="sidebar-toggle">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1024 1024">
+    <path fill="currentColor"
+          d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+  </svg>
+  <span>All Challenges</span>
+</span>
+
+<aside class="drawer">
+  <nav class="challenge-nav drawer-container">
+    {% for level, challenge_names in challenges_groupby_level.items() %}
+      <ul>
+      <!-- Compose close button with first level in row -->
+        {% if level == "basic" %}
+          <li>
+            <h5 class="challenge-level">{{ level }}</h5>
+            <span class="sidebar-toggle sidebar-toggle-close">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path fill="currentColor"
+                      d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6L6.4 19Z" />
+              </svg>
+            </span>
+          </li>
+        {% else %}
+          <li>
+            <h5 class="challenge-level">{{ level }}</h5>
+          </li>
+        {% endif %}
+        {% for name in challenge_names %}
+          <li><a href="/{{ level }}/{{ name }}">{{ name }}</a></li>
+        {% endfor %}
+      </ul>
+    {% endfor %}
+  </nav>
+</aside>
+
+<script>
+  const sidebarTogglers = document.querySelectorAll('.sidebar-toggle');
+  const drawer = document.querySelector('.drawer');
+
+  sidebarTogglers.forEach((toggler) => {
+    toggler.addEventListener('click', () => {
+      drawer.classList.toggle('open');
+    });
+  });
+</script>
diff --git a/templates/components/darkmode.html b/templates/components/darkmode.html
@@ -4,15 +4,16 @@
       display: flex;
       place-items: center;
       position: relative;
-      height: 24px;
-      width: 24px;
+      height: 20px;
+      width: 20px;
     }
 
     #theme-switch {
       display: none;
     }
 
-    .icon-sun, .icon-moon {
+    .icon-sun,
+    .icon-moon {
       position: absolute;
       left: 0;
       top: 0;
@@ -27,11 +28,11 @@
       opacity: 0;
     }
 
-    #theme-switch:checked ~ label .icon-sun {
+    #theme-switch:checked~label .icon-sun {
       opacity: 0;
     }
 
-    #theme-switch:checked ~ label .icon-moon {
+    #theme-switch:checked~label .icon-moon {
       opacity: 1;
     }
   </style>
@@ -40,8 +41,14 @@
 <div class="theme-switcher">
   <input type="checkbox" id="theme-switch" />
   <label for="theme-switch">
-    <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256"><path fill="currentColor" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z"/></svg>
-    <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256"><path fill="currentColor" d="M235.54 150.21a104.84 104.84 0 0 1-37 52.91A104 104 0 0 1 32 120a103.09 103.09 0 0 1 20.88-62.52a104.84 104.84 0 0 1 52.91-37a8 8 0 0 1 10 10a88.08 88.08 0 0 0 109.8 109.8a8 8 0 0 1 10 10Z"/></svg>
+    <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+      <path fill="currentColor"
+            d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z" />
+    </svg>
+    <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+      <path fill="currentColor"
+            d="M235.54 150.21a104.84 104.84 0 0 1-37 52.91A104 104 0 0 1 32 120a103.09 103.09 0 0 1 20.88-62.52a104.84 104.84 0 0 1 52.91-37a8 8 0 0 1 10 10a88.08 88.08 0 0 0 109.8 109.8a8 8 0 0 1 10 10Z" />
+    </svg>
   </label>
 
 
diff --git a/templates/index.html b/templates/index.html
@@ -13,7 +13,7 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      height: 100vh;
+      padding: 1rem;
       font-family: 'IBM Plex Mono', monospace;
     }
 
diff --git a/views/views.py b/views/views.py
@@ -10,7 +10,7 @@
     request,
 )
 
-from .challenge import challenge_manager, Level, ChallengeKey
+from .challenge import ChallengeKey, Level, challenge_manager
 from .sitemap import sitemapper
 
 app_views = Blueprint("app_views", __name__)

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`flex-direction: column;`
`14`	`14`	`justify-content: center;`
`15`	`15`	`align-items: center;`
`16`		`- height: 100vh;`
	`16`	`+ padding: 1rem;`
`17`	`17`	`font-family: 'IBM Plex Mono', monospace;`
`18`	`18`	`}`
`19`	`19`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`request,`
`11`	`11`	`)`
`12`	`12`
`13`		`-from .challenge import challenge_manager, Level, ChallengeKey`
	`13`	`+from .challenge import ChallengeKey, Level, challenge_manager`
`14`	`14`	`from .sitemap import sitemapper`
`15`	`15`
`16`	`16`	`app_views = Blueprint("app_views", __name__)`