Merge pull request #42 from VaagenIM/develop

Resolved #26, also changed dyslexia friendly font to 'Lexia'
VaagenIM · Sep 24, 2024 · 277d3cd · 277d3cd
2 parents 0fe14bd + 057c7a7
commit 277d3cd
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 85 deletions.
diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css
@@ -46,10 +46,23 @@
   letter-spacing: -10px;
 }
 
+@font-face {
+  font-family: 'Lexia';
+  src: url('/static/fonts/LEXIA___.ttf') format('TrueType');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lexia';
+  src: url('/static/fonts/LEXIB___.ttf') format('TrueType');
+  font-weight: 700;
+  font-style: normal;
+}
+
 [data-font-theme="dyslexia"] * {
-  font-family: "Lexend", sans-serif;
-  letter-spacing: 1px;
-  font-weight: 400 !important;
+  font-family: "Lexia", "Comic Sans MS", sans-serif;
+  letter-spacing: 0.5px;
 }
 
 [data-font-theme="default"] * {
@@ -248,6 +261,7 @@
 
 .piggy-breadcrumb:hover {
   color: var(--piggy-text-breadcrumb-hover);
+  transition: color 0.2s ease;
 }
 
 .piggy-breadcrumb-no-hover {
@@ -263,10 +277,7 @@
   cursor: pointer;
   border-radius: 5px;
   transition: background-color 0.3s ease;
-  position: relative;
-  display: block;
-  margin-right: 0;
-  margin-left: auto;
+  flex-shrink: 0;
 }
 
 #settings-btn:hover {

diff --git a/piggy/static/fonts/LEXIA___.ttf b/piggy/static/fonts/LEXIA___.ttf
diff --git a/piggy/static/fonts/LEXIB___.ttf b/piggy/static/fonts/LEXIB___.ttf
diff --git a/piggy/templates/partials/parts/breadcrumbs.html b/piggy/templates/partials/parts/breadcrumbs.html
@@ -1,32 +1,34 @@
-{# TODO: fix this mess. #}
-{% if request.path.strip("/") %}
-  <nav
-    class="piggy-navbar flex px-5 py-3"
-    aria-label="Breadcrumb"
-  >
-    <ol class="inline-flex items-center space-x-1 md:space-x-2">
-      <li class="inline-flex items-center">
-        <a
-          href="/"
-          class="piggy-breadcrumb inline-flex items-center text-sm font-medium"
+<nav class="piggy-navbar flex items-center justify-between px-3 py-2">
+  {# Breadcrumbs elements #}
+  <ol class="flex flex-wrap items-center space-x-1 md:space-x-2 flex-1 overflow-x-auto">
+    {# Home element #}
+    <li class="inline-flex items-center">
+      <a
+        href="/"
+        class="piggy-breadcrumb inline-flex items-center text-sm font-medium"
+      >
+        {# Home Icon #}
+        <svg
+          class="w-3 h-3 me-2.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 20 20"
         >
-          <svg
-            class="w-3 h-3 me-2.5"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-          >
-            <path
-              d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
-            />
-          </svg>
-          Hjem
-        </a>
-      </li>
+          <path
+            d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
+          />
+        </svg>
+        Hjem
+      </a>
+    </li>
+
+    {# if we are not at home #}
+    {% if request.path.strip('/') %}
+      {# Go through the path and figure out where we are #}
+      {% set path_segments = request.path.strip('/').split('/') %}
 
-      {# Mess starts here, for the most part #}
-      {% for p in request.path.strip("/").split("/") %}
+      {% for p in path_segments %}
         {% set url = "/" + request.base_url.split(p)[0].split(request.host_url)[1] + p %}
         {% if p == ASSIGNMENT_URL_PREFIX %}
           {% set p = "Oppgaver" %}
@@ -36,60 +38,42 @@
           {% set p = meta.get(get_template_name_from_index(loop.index)).name %}
         {% endif %}
 
-        {% if not loop.last %}
-          <li>
-            <div class="flex items-center">
-              <svg
-                class="piggy-breadcrumb-no-hover rtl:rotate-180 block w-3 h-3 mx-1"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 6 10"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m1 9 4-4-4-4"
-                />
-              </svg>
-              <a
-                href="{{ url }}"
-                class="piggy-breadcrumb ms-1 text-sm font-medium"
+        <li class="flex items-center">
+          {# Arrow Icon #}
+          <svg
+            class="piggy-breadcrumb-no-hover rtl:rotate-180 w-3 h-3 mx-1"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 6 10"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m1 9 4-4-4-4"
+            />
+          </svg>
+          {# Check if we need to create a link #}
+          {% if not loop.last %}
+              <a 
+                href="{{ url }}" 
+                class="piggy-breadcrumb ms-1 text-sm font-medium md:text-base break-words"
               >
                 {{ p }}
               </a>
-            </div>
-          </li>
-        {% else %}
-          <li aria-current="page">
-            <div class="flex items-center">
-              <svg
-                class="piggy-breadcrumb-no-hover rtl:rotate-180 w-3 h-3 mx-1"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 6 10"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m1 9 4-4-4-4"
-                />
-              </svg>
+          {% else %}
               <span
-                class="piggy-breadcrumb-no-hover ms-1 text-sm font-medium"
-                >{{ p }}</span
+                class="piggy-breadcrumb-no-hover ms-1 text-sm font-medium md:text-base break-words"
               >
-            </div>
-          </li>
-        {% endif %}
+                {{ p }}
+              </span>
+          {% endif %}
+        </li>
       {% endfor %}
-    </ol>
-
-    {% include 'partials/parts/settings.html' %}
-  </nav>
-{% endif %}
+    {% endif %}
+  </ol>
+  {# Settings button #}
+  {% include 'partials/parts/settings.html' %}
+</nav>