filtering as form

web/app/static/src/main.css

 a:hover {
     @apply opacity-90;
 }
+a.link:hover {
+    @apply opacity-100;
+}
 
 
 h2,h3 {
     /* background-image: linear-gradient(to top, purple, transparent) ; */
 }
 
+.link:hover path,
+.active path {
+    stroke: white;
+}
+
+.link:hover rect,
+.active rect {
+    fill: white;
+}
+
+
 .link:hover {
     @apply bg-expurple text-white; 
 }

web/app/static/styles/main.css

 .h-40 {
   height: 10rem;
 }
+.h-5 {
+  height: 1.25rem;
+}
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
 .h-screen {
   height: 100vh;
 }
+.min-h-\[2rem\] {
+  min-height: 2rem;
+}
 .w-10 {
   width: 2.5rem;
 }
 .w-48 {
   width: 12rem;
 }
+.w-5 {
+  width: 1.25rem;
+}
 .w-\[25rem\] {
   width: 25rem;
 }
 .w-\[35rem\] {
   width: 35rem;
 }
+.w-\[4rem\] {
+  width: 4rem;
+}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
 .max-w-\[65ch\] {
   max-width: 65ch;
 }
+.shrink-0 {
+  flex-shrink: 0;
+}
 .-rotate-12 {
   --tw-rotate: -12deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .content-start {
   align-content: flex-start;
 }
 .justify-between {
   justify-content: space-between;
 }
+.gap-2 {
+  gap: 0.5rem;
+}
+.gap-4 {
+  gap: 1rem;
+}
 .gap-8 {
   gap: 2rem;
 }
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
 }
+.p-3 {
+  padding: 0.75rem;
+}
 .p-4 {
   padding: 1rem;
 }
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 .text-center {
   text-align: center;
 }
-.text-right {
-  text-align: right;
-}
 .text-base {
   font-size: 1.1rem;
   line-height: 1.22;
 a:hover {
   opacity: 0.9;
 }
+a.link:hover {
+  opacity: 1;
+}
 
 
 h2,h3 {
 }
 
 .active {
-  background-color: rgba(103, 48, 255,0.8);
+  background-color: rgba(103, 48, 255,0.5);
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
     /* background-image: linear-gradient(to top, purple, transparent) ; */
 }
 
+.link:hover path,
+.active path {
+    stroke: white;
+}
+
+.link:hover rect,
+.active rect {
+    fill: white;
+}
+
+
 .link:hover {
-  background-color: rgba(103, 48, 255,0.8);
+  background-color: rgba(103, 48, 255,0.5);
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
   padding-bottom: 0.5rem;
 }
 
+a.menuitem:hover {
+  opacity: 1;
+}
+
+.menuitem:hover path {
+    stroke: white;
+}
+
+.menuitem:hover rect {
+    fill: white;
+}
+
 .menuitem:hover {
-  background-color: rgba(103, 48, 255,0.8);
+  background-color: rgba(103, 48, 255,0.5);
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
     display: none;
   }
 
-  .lg\:w-\[10\.5rem\] {
-    width: 10.5rem;
+  .lg\:w-\[12rem\] {
+    width: 12rem;
   }
 
   .lg\:w-\[32rem\] {
   .lg\:pr-8 {
     padding-right: 2rem;
   }
-
-  .lg\:text-center {
-    text-align: center;
-  }
 }

web/app/static/tailwind.config.js

       },
       colors: {
         'expurple': {
-          DEFAULT: 'rgba(103, 48, 255,0.8)'
+          DEFAULT: 'rgba(103, 48, 255,0.5)'
         }
         // 'ggreen': {
         //   light: '#67e8f9',

web/app/templates/base.html

 
 {% macro view_switch() %}
 
+    <div class="flex">
         <a
-            href="{{ request.base_url }}?view=regular{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}">
-            Expanded view
+            href="{{ request.base_url }}?view=regular{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
+            class="block link flex p-3 gap-2 {% if view != 'list' %} active {% endif %}"
+        >
+    
+            <div class="w-5 h-5 inline-block">
+                <svg width="100%" height="100%" viewBox="0 0 46 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect width="21" height="36" fill="black" />
+                    <rect x="27" width="19" height="14" fill="black" />
+                    <rect x="27" y="21" width="19" height="15" fill="black" />
+                </svg>
+    
+            </div>
+    
+            Expanded
         </a>
         <a
-            href="{{ request.base_url }}?view=list{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}">
-            LIST VIEW
+            href="{{ request.base_url }}?view=list{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
+            class="block link flex p-3 gap-2 {% if view == 'list' %} active {% endif %}"
+        >
+            <div class="w-5 h-5  inline-block ">
+                <svg width="100%" height="100%" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M0 2H38" stroke="black" stroke-width="2.5" />
+                    <path d="M0 13H38" stroke="black" stroke-width="2.5" />
+                    <path d="M0 24H38" stroke="black" stroke-width="2.5" />
+                    <path d="M0 35H38" stroke="black" stroke-width="2.5" />
+                </svg>
+    
+            </div>
+    
+            List
         </a>
+    </div>
 
 {% endmacro %}
 
     </a>
 
     <!-- <div class="ml-auto mr-2">
-                        {% if current_user.is_authenticated %}
-                        <a href="{{ url_for('create.create_resource') }}" class="block link">
-                            Add resource
-                        </a>
-                        {% endif %}
-                        {% if current_user.is_authenticated %}
-                        <a href="{{ url_for('main.profile') }}" class="block link">
-                            Profile
-                        </a>
-                        {% endif %}
-                        {% if not current_user.is_authenticated %}
-                        <a href="{{ url_for('auth.login') }}" class="block link">
-                            Login
-                        </a>
-                        <a href="{{ url_for('auth.signup') }}" class="block link">
-                            Sign Up
-                        </a>
-                        {% endif %}
-                        {% if current_user.is_authenticated %}
-                        <a href="{{ url_for('auth.logout') }}" class="block link">
-                            Logout
-                        </a>
-                        {% endif %}
-                    </div> -->
+        {% if current_user.is_authenticated %}
+        <a href="{{ url_for('create.create_resource') }}" class="block link">
+            Add resource
+        </a>
+        {% endif %}
+        {% if current_user.is_authenticated %}
+        <a href="{{ url_for('main.profile') }}" class="block link">
+            Profile
+        </a>
+        {% endif %}
+        {% if not current_user.is_authenticated %}
+        <a href="{{ url_for('auth.login') }}" class="block link">
+            Login
+        </a>
+        <a href="{{ url_for('auth.signup') }}" class="block link">
+            Sign Up
+        </a>
+        {% endif %}
+        {% if current_user.is_authenticated %}
+        <a href="{{ url_for('auth.logout') }}" class="block link">
+            Logout
+        </a>
+        {% endif %}
+    </div> -->
 
     <form action="{{ url_for('search.basic_search') }}" class="hidden lg:block">
         <input type="text" name="query" class="text-center h-full text-base border-l-2 border-black pl-1"
 
 {% macro resource_list(resource, loop, show_number=true) %}
 <div class="border-b-2 border-black">
-    <a class="block h-full py-1 px-4 hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}" {% if
+    <a class="flex gap-4 h-full py-1 hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}" {% if
         resource['type']=='book' %} href="{{ url_for('book.show_book', book_id=resource['id']) }}" {% endif %} {% if
         resource['type']=='tool' %} href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}" {% endif %} {% if
         resource['type']=='practice' %} href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" {% endif
         %} hx-target="#modal-content" hx-select="main" hx-swap="innerHTML" @click="openModal()">
 
-        <span class="{% if show_number %} hidden  {% endif %} lg:w-[10.5rem] lg:text-center ">
+        <div class="w-[4rem] shrink-0 lg:w-[12rem] text-center ">
             {% if show_number %}
             {{loop.index}} / {{count}}
             {% else %}
-            <span class="capitalize inline-block min-w-[5rem] px-4 text-right">{{ resource['type'] }}</span>
+            <div class="capitalize inline-block min-w-[5rem] px-4 ">{{ resource['type'] }}</div>
             {% endif %}
-        </span>
+        </div>
 
 
-        <span class="{{ resource.type }}">
-            {{ resource.name }}
-        </span>
-        {% if resource['year'] %}
-            {{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
-        {% endif %}
+        <div>
+            <span class="{{ resource.type }}">
+                {{ resource.name }}
+            </span>
+            {% if resource['year'] %}
+                {{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
+            {% endif %}
+        </div>
     </a>
 </div>
 {% endmacro %}
     <div class="w-full  border-b-2 border-black fade-right">
         <div class="content w-full py-8   overflow-x-auto">
             <div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col w-fit pr-40 " >
-                <div class=" related hidden lg:block ">
+                <div class="w-[4rem] shrink-0 lg:w-[12rem] text-center px-2 py-4 ">
                     {% if show_number %}
                     <p>{{loop.index}} / {{count}}</p>
                     {% else %}
 
 
 <!DOCTYPE html>
-<html lang="en-gb">
+<html lang="en">
 
 <head>
     {{ moment.include_moment() }}
         //     console.log(e)
         // })
         // htmx.logAll()
+
         function base() {
             return {
                 menuOpen: false,
 <body 
     class="text-base overflow-y-scroll" 
     x-data="base()" 
-    hx-boost="true"
     
+    hx-boost="true"
     hx-select="#all"
     hx-target="#all"
     hx-swap="outerHTML"

web/app/templates/index.html

         </div>
     </div>
 
-    {{ view_switch() }}
+    <div class="flex gap-4 items-center min-h-[2rem] mb-8 mb-8 border-b-2 border-black ">
+        {{ view_switch() }}
+    </div>
+
 
     {% if view == 'list' %}
     {% for resource in resources %}

web/app/templates/resources.html

   </div>
 </div> -->
 
+
 {% macro filter_dropdown(id, filter, plural='') %}
-  <select name="{{ id }}" hx-trigger="change">
+  <select 
+    name="{{ id }}"  
+  >
     <option 
-      value="" {% if request.args.get(id, '' )=='' %} selected {% endif %}
-      hx-get="{{ request.base_url }}?{% for key in request.args %}{% if key != id %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
-      hx-push-url="true"
-
+      value="" 
+      {% if request.args.get(id, '' )=='' %} selected {% endif %}
+      
     >
       {% if plural != '' %}
         {{ plural }}
     </option>
     {% for thing in filter %}
     <option 
-      value="{{ thing[0] }}" {% if request.args.get(id)==thing[0]|string %} selected {% endif %}
-      hx-get="{{ request.base_url }}?{{ id }}={{ thing[0] }}{% for key in request.args %}{% if key != id %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
-      hx-push-url="true"
+      value="{{ thing[0] }}" 
+      {% if request.args.get(id)==thing[0]|string %} selected {% endif %}
     >
       {{ thing[1] }}
     </option>
 {% endmacro%}
 
 {% macro filter_dropdown_nokey(id, filter, plural='') %}
-  <select name="{{ id }}" hx-trigger="changed">
-    <option value="" {% if request.args.get(id, '' ) == '' %} selected {% endif %}
-      hx-get="{{ request.base_url }}?{% for key in request.args %}{% if key != id %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
-      hx-push-url="true"
+  <select 
+    name="{{ id }}" 
+  >
+    <option 
+      value="" 
+      {% if request.args.get(id, '' ) == '' %} selected {% endif %}
     >
       {% if plural != '' %}
         {{ plural }}
       {% endif%}
     </option>
     {% for thing in filter %}
-    <option value="{{ thing }}" {% if request.args.get(id)==thing|string %} selected {% endif %}
-      hx-get="{{ request.base_url }}?{{ id }}={{ thing }}{% for key in request.args %}{% if key != id %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
-      hx-push-url="true"
+    <option 
+      value="{{ thing }}" 
+      {% if request.args.get(id)==thing|string %} selected {% endif %}
     >
       {{ thing }}
     </option>
   </select>
 {% endmacro%}
 
-    <div class="border-b-2 border-black grid lg:grid-cols-[52rem,30rem]  content-start">
+    <div class="border-b-2 border-black grid lg:grid-cols-[52rem,30rem] content-start">
       <div class="mx-2 lg:ml-[13rem] text my-8 meta lg:max-w-[30rem]">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies egestas felis at dignissim. Morbi ut bibendum
         nisl. Integer ac sollicitudin risus. Vivamus et est est. Ut vitae lacus nec justo tincidunt interdum. Fusce sapien odio,
       </div>
     </div>
 
-    <div class="" >
-        <div 
-          id="resources" 
-          hx-boost="false"
-        >
-
-          {{ view_switch() }}
+    <form 
+      action="{{request.base_url}}" 
+      method="GET"
 
-          <div class="flex gap-8">
-            
-              
-              {% if practices_filter%}
-                {{ filter_dropdown('practice', practices_filter, 'Practices') }}
-              {% endif %}
-              {% if year_filter %}
-                {{ filter_dropdown_nokey('year', year_filter, 'Year') }}
-              {% endif %}
-              {% if typology_filter %}
-                {{ filter_dropdown_nokey('typology', typology_filter, 'Typologies') }}
-              {% endif %}
-              {% if languages_filter %}
-                {{ filter_dropdown_nokey('scriptingLanguage', languages_filter, 'Scripting languages') }}
-              {% endif %}
-              {% if licenses_filter %}
-                {{ filter_dropdown_nokey('license', licenses_filter, 'Licenses') }}
-              {% endif %}
-              {% if status_filter %}
-                {{ filter_dropdown_nokey('status', status_filter, 'Maintenance status') }}
-              {% endif %}
-            
-          </div>
+      hx-trigger="change" 
+      hx-push-url="true"
+    
 
-          <div>
-              {% if view == 'list' %}
-                {% for resource in resources %}
-                  {{ resource_list(resource, loop) }}
-                {% endfor %}
-              {% else %}
-                {% for resource in resources %}
-                  {{ resource_with_related(resource, loop) }}
-                {% endfor %}
-              {% endif %}
-          </div>
-        </div>
-    </div>
+    >
+      <input type="hidden" name="view" value="{{ view }}">
+      <div class="flex flex-wrap gap-4 items-center min-h-[2rem] mb-8 border-b-2 border-black ">
+      
+        {{ view_switch() }}
+      
+        {% if practices_filter%}
+        {{ filter_dropdown('practice', practices_filter, 'Practices') }}
+        {% endif %}
+        {% if year_filter %}
+        {{ filter_dropdown_nokey('year', year_filter, 'Year') }}
+        {% endif %}
+        {% if typology_filter %}
+        {{ filter_dropdown_nokey('typology', typology_filter, 'Typologies') }}
+        {% endif %}
+        {% if languages_filter %}
+        {{ filter_dropdown_nokey('scriptingLanguage', languages_filter, 'Scripting languages') }}
+        {% endif %}
+        {% if licenses_filter %}
+        {{ filter_dropdown_nokey('license', licenses_filter, 'Licenses') }}
+        {% endif %}
+        {% if status_filter %}
+        {{ filter_dropdown_nokey('status', status_filter, 'Maintenance status') }}
+        {% endif %}
+      
+        <a href="{{ request.base_url }}?view={{ view }}">Reset</a>
+      
+      </div>
+      
+      <div>
+        {% if view == 'list' %}
+        {% for resource in resources %}
+        {{ resource_list(resource, loop) }}
+        {% endfor %}
+        {% else %}
+        {% for resource in resources %}
+        {{ resource_with_related(resource, loop) }}
+        {% endfor %}
+        {% endif %}
+      </div>
 
+    </form>
 
 {% endblock %}