update Redesign to v1.2.0-dev

fet2020/search/urls.py

@@ -1,7 +1,10 @@
 from django.urls import path, re_path
 
+from . import apps
 from . import views
 
+app_name = apps.SearchConfig.name
+
 urlpatterns = [
     path("", views.index, name="index"),
 ]

fet2020/static/css/styles.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
+! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -187,6 +187,8 @@ textarea {
   /* 1 */
   font-size: 100%;
   /* 1 */
+  font-weight: inherit;
+  /* 1 */
   line-height: inherit;
   /* 1 */
   color: inherit;
@@ -353,13 +355,6 @@ input::-moz-placeholder, textarea::-moz-placeholder {
   /* 2 */
 }
 
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
 input::placeholder,
 textarea::placeholder {
   opacity: 1;
@@ -415,14 +410,6 @@ video {
   height: auto;
 }
 
-/*
-Ensure the default browser behavior of the `hidden` attribute.
-*/
-
-[hidden] {
-  display: none;
-}
-
 [type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -458,11 +445,6 @@ input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1;
 }
 
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-  color: #6b7280;
-  opacity: 1;
-}
-
 input::placeholder,textarea::placeholder {
   color: #6b7280;
   opacity: 1;
@@ -513,7 +495,6 @@ select {
   background-origin: border-box;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   flex-shrink: 0;
   height: 1rem;
@@ -635,6 +616,102 @@ p a:hover {
 }
 
 *, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::-webkit-backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -782,6 +859,23 @@ p a:hover {
   flex: none;
 }
 
+.searchbar-toggle {
+  position: absolute;
+  top: 1.25rem;
+  left: 1rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  --tw-text-opacity: 1;
+  color: rgb(0 101 153 / var(--tw-text-opacity));
+}
+
+@media (prefers-color-scheme: dark) {
+  .searchbar-toggle {
+    --tw-text-opacity: 1;
+    color: rgb(71 194 255 / var(--tw-text-opacity));
+  }
+}
+
 .navbar-toggle {
   position: absolute;
   top: 1.25rem;
@@ -823,7 +917,8 @@ p a:hover {
   margin-bottom: 0.5rem;
 }
 
-.navbar-content li > a {
+.navbar-content li > a, 
+.navbar-content li > button {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
   display: block;
@@ -915,6 +1010,11 @@ p a:hover {
     justify-content: space-between;
   }
 
+  .navBar-sm .searchbar-toggle {
+    left: 0px;
+    display: none;
+  }
+
   .navBar-sm .navbar-toggle {
     right: 0px;
     display: none;
@@ -1009,6 +1109,11 @@ p a:hover {
     justify-content: space-between;
   }
 
+  .navBar-md .searchbar-toggle {
+    left: 0px;
+    display: none;
+  }
+
   .navBar-md .navbar-toggle {
     right: 0px;
     display: none;
@@ -1097,12 +1202,27 @@ p a:hover {
   }
 }
 
+.navBar-md .visible-expandedOnly {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .navBar-md .visible-expandedOnly {
+    display: block;
+  }
+}
+
 @media (min-width: 1024px) {
   .navBar-lg > div {
     flex-direction: row;
     justify-content: space-between;
   }
 
+  .navBar-lg .searchbar-toggle {
+    left: 0px;
+    display: none;
+  }
+
   .navBar-lg .navbar-toggle {
     right: 0px;
     display: none;
@@ -1191,6 +1311,16 @@ p a:hover {
   }
 }
 
+.navBar-lg .visible-expandedOnly {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .navBar-lg .visible-expandedOnly {
+    display: block;
+  }
+}
+
 /***** PAGE-TITLE *****/
 
 .page-title {
@@ -1599,7 +1729,6 @@ ul.sideBarNav > ul > li.active > a:first-child {
 /***** CALENDAR *****/
 
 .calendar-preview > div {
-  position: -webkit-sticky;
   position: sticky;
   top: 1rem;
 }
@@ -1717,7 +1846,8 @@ ul.sideBarNav > ul > li.active > a:first-child {
   border-radius: 0.25rem;
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
   --tw-gradient-from: #1f2937;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(31 41 55 / 0));
+  --tw-gradient-to: rgb(31 41 55 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
 .article-cover-desc-items {
@@ -1851,7 +1981,11 @@ ul.sideBarNav > ul > li.active > a:first-child {
   }
 }
 
-[class^=db-page-content] h2, [class^=db-page-content] h3, [class^=db-page-content] h4, [class^=db-page-content] h5, [class^=db-page-content] h6 {
+[class^=db-page-content] h2, 
+[class^=db-page-content] h3, 
+[class^=db-page-content] h4, 
+[class^=db-page-content] h5, 
+[class^=db-page-content] h6 {
   margin-top: 0.5rem;
   line-height: 1;
   --tw-text-opacity: 1;
@@ -1859,7 +1993,11 @@ ul.sideBarNav > ul > li.active > a:first-child {
 }
 
 @media (prefers-color-scheme: dark) {
-  [class^=db-page-content] h2, [class^=db-page-content] h3, [class^=db-page-content] h4, [class^=db-page-content] h5, [class^=db-page-content] h6 {
+  [class^=db-page-content] h2, 
+[class^=db-page-content] h3, 
+[class^=db-page-content] h4, 
+[class^=db-page-content] h5, 
+[class^=db-page-content] h6 {
     --tw-text-opacity: 1;
     color: rgb(229 231 235 / var(--tw-text-opacity));
   }
@@ -1878,12 +2016,13 @@ ul.sideBarNav > ul > li.active > a:first-child {
   font-weight: 500;
 }
 
-[class^=db-page-content] h4, [class^=db-page-content] h5, [class^=db-page-content] h6 {
+[class^=db-page-content] h4,  [class^=db-page-content] h5,  [class^=db-page-content] h6 {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
 
-[class^=db-page-content] b, [class^=db-page-content] strong {
+[class^=db-page-content] b, 
+[class^=db-page-content] strong {
   font-weight: 600;
 }
 
@@ -2614,6 +2753,10 @@ footer .copyright {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.visible {
+  visibility: visible;
+}
+
 .static {
   position: static;
 }
@@ -2631,7 +2774,6 @@ footer .copyright {
 }
 
 .sticky {
-  position: -webkit-sticky;
   position: sticky;
 }
 
@@ -2695,14 +2837,6 @@ footer .copyright {
   margin: -1rem;
 }
 
-.-m-3 {
-  margin: -0.75rem;
-}
-
-.-m-1 {
-  margin: -0.25rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -2808,6 +2942,10 @@ footer .copyright {
   margin-top: 2rem;
 }
 
+.mt-\[33vh\] {
+  margin-top: 33vh;
+}
+
 .ml-0\.5 {
   margin-left: 0.125rem;
 }
@@ -2888,6 +3026,18 @@ footer .copyright {
   height: 0.75rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
 .h-7 {
   height: 1.75rem;
 }
@@ -2896,24 +3046,12 @@ footer .copyright {
   height: 9rem;
 }
 
-.h-44 {
-  height: 11rem;
-}
-
-.h-6 {
-  height: 1.5rem;
-}
-
-.h-12 {
-  height: 3rem;
-}
-
 .h-16 {
   height: 4rem;
 }
 
-.h-8 {
+.h-44 {
-  height: 2rem;
+  height: 11rem;
 }
 
 .min-h-screen {
@@ -2946,6 +3084,14 @@ footer .copyright {
   width: 0.75rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
 .w-7 {
   width: 1.75rem;
 }
@@ -2966,6 +3112,10 @@ footer .copyright {
   width: 6rem;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
 .w-\[3\.5rem\] {
   width: 3.5rem;
 }
@@ -2974,18 +3124,6 @@ footer .copyright {
   width: 12rem;
 }
 
-.w-6 {
-  width: 1.5rem;
-}
-
-.w-8 {
-  width: 2rem;
-}
-
-.w-10 {
-  width: 2.5rem;
-}
-
 .max-w-prose {
   max-width: 65ch;
 }
@@ -3121,6 +3259,12 @@ footer .copyright {
   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));
 }
 
+.scale-0 {
+  --tw-scale-x: 0;
+  --tw-scale-y: 0;
+  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));
+}
+
 .scale-90 {
   --tw-scale-x: .9;
   --tw-scale-y: .9;
@@ -3362,6 +3506,10 @@ footer .copyright {
   align-self: stretch;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .overflow-y-hidden {
   overflow-y: hidden;
 }
@@ -3418,6 +3566,10 @@ footer .copyright {
   border-width: 2px;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
 .border-dashed {
   border-style: dashed;
 }
@@ -3482,6 +3634,15 @@ footer .copyright {
   background-color: rgb(2 132 199 / var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-inherit {
+  background-color: inherit;
+}
+
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -3542,7 +3703,8 @@ footer .copyright {
 
 .from-black {
   --tw-gradient-from: #000;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));
+  --tw-gradient-to: rgb(0 0 0 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
 .bg-cover {
@@ -3574,6 +3736,10 @@ footer .copyright {
   padding: 2rem;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -3613,6 +3779,11 @@ footer .copyright {
   padding-right: 0.5rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -3671,11 +3842,6 @@ footer .copyright {
   line-height: 2.5rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -3785,6 +3951,11 @@ footer .copyright {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
 .text-blue-50 {
   --tw-text-opacity: 1;
   color: rgb(239 246 255 / var(--tw-text-opacity));
@@ -3825,6 +3996,10 @@ footer .copyright {
   color: rgb(0 85 128 / var(--tw-text-opacity));
 }
 
+.text-inherit {
+  color: inherit;
+}
+
 .text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -3870,6 +4045,10 @@ footer .copyright {
   opacity: 0.8;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -3905,6 +4084,30 @@ footer .copyright {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.backdrop-blur-none {
+  --tw-backdrop-blur: blur(0);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.backdrop-saturate-50 {
+  --tw-backdrop-saturate: saturate(.5);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.backdrop-saturate-100 {
+  --tw-backdrop-saturate: saturate(1);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition {
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -3969,10 +4172,6 @@ footer .copyright {
   font-style: italic;
 }
 
-.placeholder\:italic:-ms-input-placeholder {
-  font-style: italic;
-}
-
 .placeholder\:italic::placeholder {
   font-style: italic;
 }
@@ -4037,6 +4236,10 @@ footer .copyright {
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
 }
 
+.focus\:border-transparent:focus {
+  border-color: transparent;
+}
+
 .focus\:border-sky-700:focus {
   --tw-border-opacity: 1;
   border-color: rgb(3 105 161 / var(--tw-border-opacity));
@@ -4047,12 +4250,23 @@ footer .copyright {
   border-color: rgb(191 219 254 / var(--tw-border-opacity));
 }
 
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .focus\:ring:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:ring-blue-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
@@ -4281,6 +4495,12 @@ footer .copyright {
     color: rgb(239 68 68 / var(--tw-text-opacity));
   }
 
+  .dark\:shadow-none {
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
   .dark\:hover\:bg-gray-800:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -4357,7 +4577,6 @@ footer .copyright {
   }
 
   .sm\:sticky {
-    position: -webkit-sticky;
     position: sticky;
   }
 
@@ -4384,6 +4603,11 @@ footer .copyright {
     margin-bottom: 1rem;
   }
 
+  .sm\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .sm\:my-8 {
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -4483,6 +4707,10 @@ footer .copyright {
     max-width: none;
   }
 
+  .sm\:max-w-md {
+    max-width: 28rem;
+  }
+
   .sm\:flex-1 {
     flex: 1 1 0%;
   }
@@ -4770,6 +4998,10 @@ footer .copyright {
     width: 40%;
   }
 
+  .lg\:max-w-lg {
+    max-width: 32rem;
+  }
+
   .lg\:flex-grow-0 {
     flex-grow: 0;
   }
@@ -4838,6 +5070,10 @@ footer .copyright {
     width: 33.333333%;
   }
 
+  .xl\:max-w-xl {
+    max-width: 36rem;
+  }
+
   .xl\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }

fet2020/static/js/alpine-csp.js

@@ -3186,6 +3186,18 @@
         }
       }
     }));
+    alpine_default.data("search", () => ({
+      showSearch: false,
+      openShowSearch() {
+        this.showSearch = true;
+      },
+      closeShowSearch() {
+        this.showSearch = false;
+      },
+      getShowSearch() {
+        return this.showSearch;
+      }
+    }));
   
     // packages/csp/builds/cdn.js
     window.Alpine = src_default2;

fet2020/templates/base.html

@@ -4,7 +4,33 @@
 {% load static %}
 
 {% block body %}
-    <body x-data="modal" x-ref="overflow">
+    <body x-data="search" x-ref="overflow" @keyup.escape="closeShowSearch">
+        <!-- SEARCH-BAR -->
+        <div class="fixed w-screen h-screen z-30 backdrop-blur-sm backdrop-saturate-50"
+            x-show="showSearch"
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="transform backdrop-blur-none backdrop-saturate-100"
+            x-transition:enter-end="transform backdrop-blur-sm backdrop-saturate-50"
+            x-transition:leave="transition ease-in duration-150"
+            x-transition:leave-start="transform backdrop-blur-sm backdrop-saturate-50"
+            x-transition:leave-end="transform backdrop-blur-none backdrop-saturate-100"
+        >
+            <form action="{% url 'search:index' %}" class="flex items-center opacity-90 gap-x-4 mt-[33vh] sm:max-w-md lg:max-w-lg xl:max-w-xl mx-4 sm:mx-auto py-2 px-4 shadow-lg dark:shadow-none bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg dark:border-2 dark:border-gray-700"
+                @click.outside="closeShowSearch"
+                x-show="showSearch"
+                x-transition:enter="transition transform ease-out duration-300"
+                x-transition:enter-start="scale-0 opacity-0"
+                x-transition:enter-end="scale-100 opacity-90"
+                x-transition:leave="transition transform ease-in duration-150"
+                x-transition:leave-start="scale-100 opacity-90"
+                x-transition:leave-end="scale-0 opacity-0"
+            >
+                <input class="flex-grow bg-inherit text-inherit h-10 p-0 border-0 focus:outline-none focus:border-transparent focus:ring-0" type="search" name="q" placeholder="Nach Person, Artikel oder Fotoalbum suchen...">
+                <button type="submit" class="flex-none">
+                    <i class="fa-solid fa-magnifying-glass text-gray-500 dark:text-gray-600"></i>
+                </button>
+            </form>
+        </div>
         <!-- NAVBAR -->
         {% if not request.user.is_authenticated %}
         <nav class="navBar-md" x-data="myNavBar">
@@ -12,6 +38,11 @@
         <nav class="navBar-lg" x-data="myNavBar">
         {% endif %}
             <div>
+                <button class="searchbar-toggle"
+                    @click.prevent="openShowSearch"
+                >
+                    <i class="fa-solid fa-magnifying-glass"></i>
+                </button>
                 <a href="{% url 'home' %}">
                     <img src="{% static 'img/FET-Logo-2014_64_light.svg' %}" alt="FET-Logo" class="navbar-logo p-2 dark:hidden">
                     <img src="{% static 'img/FET-Logo-2014_64_dark.svg' %}" alt="FET-Logo" class="navbar-logo p-2 hidden dark:block">
@@ -36,6 +67,8 @@
                         <li class="{% if '/kontakt/' in request.path %}active{% endif %}"><a href="{{ pages.first.url }}">{{ pages.first.title }}</a></li>
                     {% endif %}
 
+                    <li class="visible-expandedOnly"><button @click.prevent="openShowSearch"><span class="hidden md:inline"><i class="fa-solid fa-magnifying-glass"></i></span></button></li>
+
                     {% if not request.user.is_authenticated %}
                         <li><a href="{% url 'authentications:login' %}?next={{ request.path }}">Anmelden</a></li>
                     {% else %}

fet2020/templates/members/index.html

@@ -6,7 +6,7 @@
 
 {% block content %}
 	<!-- Main Content -->
-	<main class="container mx-auto w-full px-4 mt-8 flex-1">
+	<main x-data="modal" class="container mx-auto w-full px-4 mt-8 flex-1">
 		<h1 class="page-title">Über uns</h1>
         <div class="sm:flex sm:flex-row justify-center my-8">
             <aside class="flex-none max-w-min sm:mr-8">

fet2020/templates/posts/index.html

@@ -4,7 +4,7 @@
 
 {% block content %}
 	<!-- Main Content -->
-	<main class="container mx-auto w-full px-4 my-8 flex-1">
+	<main x-data="modal" class="container mx-auto w-full px-4 my-8 flex-1">
 		<h1 class="page-title">News</h1>
 		<div class="sm:flex sm:flex-row-reverse justify-center">
 			<aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0">

fet2020/templates/search/album.html

@@ -12,7 +12,9 @@
     </div>
     <article class="flex-grow-0 sm:m-2">
         <h2 class="line-clamp-1 hover:underline decoration-1 text-gray-800 dark:text-gray-200 sm:font-medium"><i class="fa-solid fa-images mr-2"></i>{{ result.title }}</h2>
-        <div class="line-clamp-2 mt-0.5 text-gray-700 dark:text-gray-300 min-h-12">{{ result.description|safe }}</div>
+        <div class="line-clamp-2 mt-0.5 text-gray-700 dark:text-gray-300 min-h-12">
+            {{ result.description|safe }}
+        </div>
         <div class="mt-1">
             <small class="text-sm sm:text-base text-gray-600 dark:text-gray-400 hidden sm:block">{{ result.photographer|default:'' }} am {{ result.event_date }}</small>
             <small class="text-sm sm:text-base text-gray-600 dark:text-gray-400 sm:hidden">{{ result.photographer|default:'' }} am {{ result.event_date|date:"d. M. Y" }}</small>

fet2020/templates/search/index.html

@@ -7,13 +7,11 @@
 	<main class="container mx-auto w-full px-4 my-8 flex-1">
 		<h1 class="page-title">Suchergebnisse</h1>
 		<section>
-			<div class="w-full sticky py-4 md:py-8 -mt-4 md:-mt-8 top-0 z-20 bg-gray-100 dark:bg-gray-900">
+			<div class="w-full sticky py-4 md:py-8 -mt-4 md:-mt-8 top-0 z-10 bg-gray-100 dark:bg-gray-900">
-                <form method="get" action="." class="flex gap-x-2 mx-auto max-w-prose">
+				<form class="flex gap-x-2 mx-auto max-w-prose">
-                    <table>
+					<input type="search" id="id_q" name="{{ form.q.name }}" value="{{ form.q.value|default:'' }}" class="block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-blue-200 focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50 placeholder:italic" autofocus placeholder="Frag mich etwas...">
-                        <input type="search" id="id_q" name="{{ form.q.name }}" value="{{ form.q.value|default:'' }}" class="block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-blue-200 focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50 placeholder:italic" autofocus placeholder="Frag mich etwas...">
+					<input type="submit" class="flex-grow-0 btn btn-primary" value="Suchen">
-                        <input type="submit" class="flex-grow-0 btn btn-primary" value="Suche">
+				</form>
-                    </table>
-                </form>
 			</div>
 
             {% if form.q.value %}
@@ -29,9 +27,9 @@
                         {% include 'search/album.html' %}
                     {% endif %}
                 {% empty %}
-                    <article class="flex-grow-0 sm:m-2">
+                    <div class="text-lg text-gray-800 dark:text-gray-200 text-center my-8">
-                        <h2 class="line-clamp-1 decoration-1 text-gray-800 dark:text-gray-200 sm:font-medium"></i>Keine Ergebnisse gefunden.</h2>
+                        <i class="fa-solid fa-ban mr-2"></i> Keine Ergebnisse gefunden!
-                    </article>
+                    </div>
                 {% endfor %}
                 </div>
             {% endif %}

fet2020/templates/search/member.html

@@ -1,6 +1,6 @@
-<a class="flex gap-x-2 group" href="{{ result.get_absolute_url }}">
+<a class="flex gap-x-4 group" href="{{ result.get_absolute_url }}">
-    <div class="flex-none rounded-full aspect-square bg-center bg-no-repeat bg-cover bg-gray-300 dark:bg-gray-700" style="background-image: url('{{ result.image.url }}')"></div>
+    <div class="flex-none w-20 rounded-full aspect-square bg-center bg-no-repeat bg-cover bg-gray-300 dark:bg-gray-700" style="background-image: url('{{ result.image.url }}')"></div>
-    <article class="flex-grow-0 sm:m-2">
+    <article class="flex-grow-0 self-center">
         <h2 class="line-clamp-1 hover:underline decoration-1 text-gray-800 dark:text-gray-200 font-medium">{{ result.firstname }} {{ result.surname }}</h2>
         <ul class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">
             <li><i class="fa-fw fa-solid fa-user-tag text-gray-600 dark:text-gray-400 mr-1" title="Spitzname: "></i>{{ result.nickname }}</li>

fet2020/templates/search/post.html

@@ -3,9 +3,13 @@
     <article class="flex-grow-0 sm:m-2">
         <h2 class="line-clamp-1 hover:underline decoration-1 text-gray-800 dark:text-gray-200 sm:font-medium"><i class="fa-solid fa-up-right-from-square mr-2"></i>{{ result.title|truncatechars:50 }}</h2>
         {% if result.body %}
-            <div class="line-clamp-2 mt-0.5 text-gray-700 dark:text-gray-300 min-h-12">{{ result.body|safe|truncatechars:120 }}</div>
+            <div class="line-clamp-2 mt-0.5 text-gray-700 dark:text-gray-300 min-h-12">
+                {{ result.body|safe|truncatechars:120 }}
+            </div>
         {% elif result.agenda_html %}
-            <div class="line-clamp-2 mt-0.5 text-gray-700 dark:text-gray-300 min-h-12">{{ result.agenda_html|safe|truncatechars:120 }}</div>
+            <div class="line-clamp-2 mt-0.5 text-gray-700 dark:text-gray-300 min-h-12">
+                {{ result.agenda_html|safe|truncatechars:120 }}
+            </div>
         {% endif %}
         <div class="mt-1">
             <small class="text-sm sm:text-base text-gray-600 dark:text-gray-400 hidden sm:block">{{ result.author }} am {{ result.date }}</small>

fet2020/templates/tasks/index.html

@@ -4,7 +4,7 @@
 
 {% block content %}
 <!-- Main Content -->
-<main class="container mx-auto w-full px-4 my-8 flex-1">
+<main x-data="modal" class="container mx-auto w-full px-4 my-8 flex-1">
     <h1 class="page-title">Tasks</h1>
     <div class="sm:flex sm:flex-row-reverse justify-center">
         <aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0">