Add filter parsing/serializing with UI

tfwright · Nov 17, 2024 · 841fe8d · 841fe8d
1 parent b1b458c
commit 841fe8d
Show file tree

Hide file tree

Showing 7 changed files with 375 additions and 71 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -490,11 +490,34 @@ input[type="submit"] {
     @apply font-semibold;
   }
 
-  #pagination-modal label {
+  #settings-modal label {
     @apply bg-inherit;
     @apply w-1/2;
   }
 
+  #list-filters > div:nth-child(1) {
+      @apply flex;
+      @apply justify-evenly;
+  }
+
+  #list-filters div > div:nth-child(1) {
+    @apply flex;
+  }
+
+  #list-filters > div > div:nth-child(2) {
+      @apply flex;
+      @apply justify-evenly;
+  }
+
+  #list-filters div > div:nth-child(2) > * {
+    @apply w-1/4;
+    @apply leading-5;
+  }
+
+  #list-filters > div:last-of-type {
+    @apply justify-start;
+  }
+
   .resource__table dd {
     @apply mb-5;
   }
@@ -670,6 +693,10 @@ input[type="submit"] {
     @apply pb-6;
   }
 
+  .field__array--row input:not(first-of-type) {
+    @apply mr-2;
+  }
+
   .field__array--group a.button__add {
     @apply absolute;
     @apply -left-0;
@@ -841,21 +868,44 @@ input[type="submit"] {
   @apply mr-2;
 }
 
-.modal input {
-  @apply grow;
+.modal__title {
+  @apply text-lg;
+  @apply font-bold;
+  @apply border-b-2;
 }
 
-.modal__title {
+.modal__tabs {
+  @apply border-b-2;
+}
+
+.modal__tabs > .modal__title--active {
   @apply text-lg;
   @apply font-bold;
   @apply border-b-2;
+  @apply inline-block;
+  @apply mr-2;
+  @apply border-0;
+}
+
+.modal__tabs > .modal__title {
+  @apply inline-block;
+  @apply mr-2;
+  @apply border-0;
+  @apply cursor-pointer;
 }
 
 .modal form > div {
   @apply flex;
   @apply my-1;
+  @apply items-center;
 }
 
+.modal form > input[type="submit"] {
+  @apply w-24;
+  @apply mx-auto;
+}
+
+
 .modal form > div:last-of-type {
   @apply mb-3;
 }

diff --git a/dist/css/app.css b/dist/css/app.css
@@ -1242,11 +1242,34 @@ input[class$="-loading"] + div nav:before {
   font-weight: 600;
 }
 
-#pagination-modal label {
+#settings-modal label {
   background-color: inherit;
   width: 50%;
 }
 
+#list-filters > div:nth-child(1) {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+#list-filters div > div:nth-child(1) {
+  display: flex;
+}
+
+#list-filters > div > div:nth-child(2) {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+#list-filters div > div:nth-child(2) > * {
+  width: 25%;
+  line-height: 1.25rem;
+}
+
+#list-filters > div:last-of-type {
+  justify-content: flex-start;
+}
+
 .resource__table dd {
   margin-bottom: 1.25rem;
 }
@@ -1448,6 +1471,10 @@ input[class$="-loading"] + div nav:before {
   padding-bottom: 1.5rem;
 }
 
+.field__array--row input:not(first-of-type) {
+  margin-right: 0.5rem;
+}
+
 .field__array--group a.button__add {
   position: absolute;
   left: -0px;
@@ -1717,6 +1744,10 @@ input[class$="-loading"] + div nav:before {
   opacity: 1;
 }
 
+.opacity-30 {
+  opacity: 0.3;
+}
+
 .filter {
   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);
 }
@@ -1837,21 +1868,45 @@ input[type="submit"] {
   margin-right: 0.5rem;
 }
 
-.modal input {
-  flex-grow: 1;
+.modal__title {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  border-bottom-width: 2px;
 }
 
-.modal__title {
+.modal__tabs {
+  border-bottom-width: 2px;
+}
+
+.modal__tabs > .modal__title--active {
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 700;
   border-bottom-width: 2px;
+  display: inline-block;
+  margin-right: 0.5rem;
+  border-width: 0px;
+}
+
+.modal__tabs > .modal__title {
+  display: inline-block;
+  margin-right: 0.5rem;
+  border-width: 0px;
+  cursor: pointer;
 }
 
 .modal form > div {
   display: flex;
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
+  align-items: center;
+}
+
+.modal form > input[type="submit"] {
+  width: 6rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .modal form > div:last-of-type {