feat(header): responsiveness tweaks for xs viewports

esnvutbrno · Nov 14, 2023 · c6d4953 · c6d4953
1 parent 30337b9
commit c6d4953
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 13 deletions.
diff --git a/fiesta/apps/sections/templates/sections/universities.html b/fiesta/apps/sections/templates/sections/universities.html
@@ -15,7 +15,7 @@
 {% endblock upper_head %}
 
 {% block breadcrumbs_right %}
-  <a class="btn btn-success btn-sm btn-outline"
+  <a class="btn btn-success btn-xs sm:btn-sm btn-outline"
      href="{% url "sections:new-section-university" %}"
      x-data="modal($el.href)"
      x-bind="bind">{% translate "Add university" %}</a>

diff --git a/fiesta/templates/fiesta/parts/breadcrumbs.html b/fiesta/templates/fiesta/parts/breadcrumbs.html
@@ -1,14 +1,14 @@
 {% load breadcrumbs %}
-<nav class="flex my-1" aria-label="Breadcrumb">
+<nav class="my-1 mr-1" aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-3">
     {% breadcrumb_items as items %}
     {% for item in items %}
       <li {% if forloop.last %}aria-current="page"{% endif %}>
         <div class="inline-flex items-center">
           {% if forloop.first %}
             <a href="{{ item.url }}"
-               class="inline-flex items-center text-sm font-medium text-base-content hover:text-primary-focus">
-              <svg class="mr-2 w-6 h-6"
+               class="inline-flex items-center text-xs md:text-sm font-medium text-base-content hover:text-primary-focus whitespace-nowrap">
+              <svg class="mr-2 w-4 h-4 md:w-6 md:h-6"
                    fill="currentColor"
                    viewBox="0 0 22 20"
                    xmlns="http://www.w3.org/2000/svg">
@@ -18,15 +18,15 @@
               {{ item }}
             </a>
           {% else %}
-            <svg class="w-6 h-6 text-gray-400"
+            <svg class="w-4 h-4 md:w-6 md:h-6 text-base-content"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
               </path>
             </svg>
             <a href="{{ item.url }}"
-               class="ml-1 text-sm font-medium md:ml-2 text-base-content hover:text-primary-focus">{{ item.title }}</a>
+               class="ml-1 font-medium md:ml-2 text-base-content hover:text-primary-focus text-xs md:text-sm">{{ item.title }}</a>
           {% endif %}
         </div>
       </li>

diff --git a/fiesta/templates/fiesta/parts/logo.html b/fiesta/templates/fiesta/parts/logo.html
@@ -2,11 +2,12 @@
 {% load static %}
 <a href="{% get_home_url %}"
    class="flex flex-row items-baseline text-base-content group">
-  <span class=" inline-block h-full w-[1lh] ">{% include "single-toucan.svg" %}</span>
+  {# toucan only md+  #}
+  <span class="hidden md:inline-block h-full w-[1lh] ">{% include "single-toucan.svg" %}</span>
   {% if request.in_space_of_section %}
-    <span class="text-3xl font-bold whitespace-nowrap ml-2">{{ request.in_space_of_section }}</span>
+    <span class="text-2xl md:text-3xl font-bold whitespace-nowrap md:ml-2">{{ request.in_space_of_section }}</span>
   {% else %}
-    <span class="text-3xl font-bold ml-2">Fiesta</span>
+    <span class="text-2xl md:text-3xl font-bold ml-2">Fiesta</span>
   {% endif %}
   <span class="inline-block h-full w-[1lh] transform transition-transform origin-[50%_33.33%] duration-500 ease-in-out group-hover:rotate-[270deg]">
     {% include "single-plus.svg" %}

diff --git a/fiesta/templates/fiesta/parts/user_status.html b/fiesta/templates/fiesta/parts/user_status.html
@@ -2,7 +2,7 @@
 {% load utils %}
 {% if request.user.is_authenticated %}
   <button type="button"
-          class="flex mr-3 text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-base-300"
+          class="flex mr-2 md:mr-0 text-sm rounded-full  focus:ring-4 focus:ring-base-300"
           aria-expanded="false"
           @click="user = !user"
           @click.outside="user = false">

diff --git a/webpack/src/css/_Forms.css b/webpack/src/css/_Forms.css
@@ -73,8 +73,9 @@
     .Forms__file-state {
         /* status located in right */
         @apply
-        w-auto self-center border-secondary border-[1px] border-b-0 pl-4 rounded-t
-        flex flex-row items-center gap-x-2
+        w-auto self-end md:self-center border-secondary border-[1px] border-b-0 rounded-t
+        pl-2 md:pl-4
+        flex flex-row items-center gap-x-1 md:gap-x-2
         ;
 
         height: 2em;
@@ -93,7 +94,10 @@
 
     .Forms__file-state label {
         /* clear btn */
-        @apply lowercase btn btn-sm btn-link text-gray-700 rounded-none rounded-tr-sm;
+        @apply
+            lowercase btn btn-sm btn-link text-gray-700 rounded-none rounded-tr-sm
+            px-1 md:px-2
+        ;
     }
 
     .Forms__file-state input[type=checkbox]:checked + label {