merge

web/app/static/src/main.css

@@ -58,6 +58,10 @@ b,strong {
     font-weight: normal !important;
 }
 
+select {
+    @apply p-1;
+}
+
 
 .book {
     font-family: 'ag-fett', 'Arial Black';
@@ -317,10 +321,6 @@ details[open]::details-content {
 }
 
 
-
-
-
-
  /* The switch - the box around the slider */
  .switch {
      position: relative;

web/app/static/styles/main.css

@@ -510,9 +510,6 @@ video {
 .pointer-events-none {
   pointer-events: none;
 }
-.invisible {
-  visibility: hidden;
-}
 .static {
   position: static;
 }
@@ -537,12 +534,6 @@ video {
 .top-10 {
   top: 2.5rem;
 }
-.top-12 {
-  top: 3rem;
-}
-.top-14 {
-  top: 3.5rem;
-}
 .z-10 {
   z-index: 10;
 }
@@ -577,17 +568,10 @@ video {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
-.mb-16 {
-  margin-bottom: 4rem;
-}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -642,6 +626,9 @@ video {
 .h-10 {
   height: 2.5rem;
 }
+.h-14 {
+  height: 3.5rem;
+}
 .h-20 {
   height: 5rem;
 }
@@ -658,15 +645,6 @@ video {
 .h-screen {
   height: 100vh;
 }
-.h-8 {
-  height: 2rem;
-}
-.h-16 {
-  height: 4rem;
-}
-.h-14 {
-  height: 3.5rem;
-}
 .w-10 {
   width: 2.5rem;
 }
@@ -698,12 +676,6 @@ video {
 .w-full {
   width: 100%;
 }
-.min-w-\[10rem\] {
-  min-width: 10rem;
-}
-.min-w-\[7rem\] {
-  min-width: 7rem;
-}
 .min-w-\[5rem\] {
   min-width: 5rem;
 }
@@ -727,9 +699,6 @@ video {
 .grid-flow-col {
   grid-auto-flow: column;
 }
-.grid-cols-\[auto\2c 1fr\] {
-  grid-template-columns: auto 1fr;
-}
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
@@ -742,9 +711,6 @@ video {
 .items-stretch {
   align-items: stretch;
 }
-.justify-start {
-  justify-content: flex-start;
-}
 .justify-center {
   justify-content: center;
 }
@@ -754,10 +720,6 @@ video {
 .gap-8 {
   gap: 2rem;
 }
-.gap-x-8 {
-  -moz-column-gap: 2rem;
-       column-gap: 2rem;
-}
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -806,15 +768,9 @@ video {
   -o-object-fit: contain;
      object-fit: contain;
 }
-.p-2 {
-  padding: 0.5rem;
-}
 .p-4 {
   padding: 1rem;
 }
-.p-8 {
-  padding: 2rem;
-}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -823,6 +779,10 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -835,10 +795,6 @@ video {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -948,6 +904,10 @@ b,strong {
     font-weight: normal !important;
 }
 
+select {
+  padding: 0.25rem;
+}
+
 
 .book {
     font-family: 'ag-fett', 'Arial Black';
@@ -1317,10 +1277,6 @@ details[open]::details-content {
 }
 
 
-
-
-
-
  /* The switch - the box around the slider */
  .switch {
      position: relative;
@@ -1430,10 +1386,6 @@ details[open]::details-content {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .lg\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
   .lg\:grid-cols-\[52rem\2c 30rem\] {
     grid-template-columns: 52rem 30rem;
   }

web/app/templates/base.html

@@ -12,6 +12,19 @@
 # Boostrap select: https://stackoverflow.com/questions/67942546/bootstrap-5-select-dropdown-with-the-multiple-attribute-collapsed
 -->
 
+{% macro view_switch() %}
+
+        <a
+            href="{{ request.base_url }}?view=regular{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}">
+            Expanded view
+        </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
+        </a>
+
+{% endmacro %}
+
 {% macro menu() %}
     <a href="{{ url_for('tool.get_tools') }}{% if view == 'list' %}?view=list{% endif %}"
         class="{{ 'active' if request.path == url_for('tool.get_tools') }} menuitem tool medium-title hidden lg:block">
@@ -324,7 +337,7 @@
 <body 
     class="text-base overflow-y-scroll" 
     x-data="base()" 
-    hx-boost="true"
+
     hx-select="#all"
     hx-target="#all"
     hx-swap="outerHTML"