Continue the cleanup train (#396)

* Improve links and search page controls... I know it looks kinda insane

* Fix donation padding Fixes #393

* Improve text field styling

* white icon

* Improve pagination and disabled button colors

* Round tab indicator

* Fix rounding of home page points card

* I hate browsers

* Change verbiage of legacy options

pages/_type/_id.vue

@@ -929,11 +929,19 @@ export default {
       line-height: 2rem;
     }
 
+    &:focus-visible,
     &:hover {
       svg,
       img,
       span {
-        color: var(--color-link);
+        color: var(--color-heading);
+      }
+    }
+    &:active {
+      svg,
+      img,
+      span {
+        color: var(--color-text-dark);
       }
     }
 

pages/create/project.vue

@@ -1526,10 +1526,6 @@ section.donations {
       flex: 1;
     }
   }
-
-  button {
-    margin: 0.5rem 0;
-  }
 }
 
 .footer {

pages/index.vue

@@ -436,7 +436,7 @@ export default {
 
   @media screen and (min-width: 1200px) {
     .points {
-      border-radius: var(--spacing-card-lg);
+      border-radius: var(--size-rounded-card);
       .point {
         flex-direction: row;
 

pages/search.vue

@@ -154,39 +154,41 @@
             @input="onSearchChange(1)"
           />
         </div>
-        <div class="labeled-control">
-          <span class="labeled-control__label">Sort by</span>
-          <Multiselect
-            v-model="sortType"
-            placeholder="Select one"
-            class="search-controls__sorting labeled-control__control"
-            track-by="display"
-            label="display"
-            :options="sortTypes"
-            :searchable="false"
-            :close-on-select="true"
-            :show-labels="false"
-            :allow-empty="false"
-            @input="onSearchChange(1)"
-          >
-            <template slot="singleLabel" slot-scope="{ option }">{{
-              option.display
-            }}</template>
-          </Multiselect>
-        </div>
-        <div class="labeled-control">
-          <span class="labeled-control__label">Show per page</span>
-          <Multiselect
-            v-model="maxResults"
-            placeholder="Select one"
-            class="labeled-control__control"
-            :options="[5, 10, 15, 20, 50, 100]"
-            :searchable="false"
-            :close-on-select="true"
-            :show-labels="false"
-            :allow-empty="false"
-            @input="onSearchChange(currentPage)"
-          />
+        <div class="sort-controls">
+          <div class="labeled-control">
+            <span class="labeled-control__label">Sort by</span>
+            <Multiselect
+              v-model="sortType"
+              placeholder="Select one"
+              class="search-controls__sorting labeled-control__control"
+              track-by="display"
+              label="display"
+              :options="sortTypes"
+              :searchable="false"
+              :close-on-select="true"
+              :show-labels="false"
+              :allow-empty="false"
+              @input="onSearchChange(1)"
+            >
+              <template slot="singleLabel" slot-scope="{ option }">{{
+                option.display
+              }}</template>
+            </Multiselect>
+          </div>
+          <div class="labeled-control">
+            <span class="labeled-control__label">Show per page</span>
+            <Multiselect
+              v-model="maxResults"
+              placeholder="Select one"
+              class="labeled-control__control"
+              :options="[5, 10, 15, 20, 50, 100]"
+              :searchable="false"
+              :close-on-select="true"
+              :show-labels="false"
+              :allow-empty="false"
+              @input="onSearchChange(currentPage)"
+            />
+          </div>
         </div>
       </div>
       <pagination
@@ -584,32 +586,88 @@ export default {
 
 .search-controls {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  gap: var(--spacing-card-md);
+
+  .sort-controls {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-card-md);
+    flex-wrap: wrap;
+
+    .labeled-control {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+
+      .labeled-control__label {
+        white-space: nowrap;
+      }
+    }
+  }
 
   .iconified-input {
-    margin-left: 6px;
+    flex: 1;
 
     input {
-      width: calc(100% + 8px);
+      min-width: 15rem;
+      width: 100%;
     }
   }
 }
 
 .search-controls__sorting {
-  min-width: 15rem;
+  min-width: 14rem;
 }
 
 .labeled-control__label,
 .labeled-control__control {
   display: block;
-  margin: 0.5rem 0;
 }
 
 .no-results {
   text-align: center;
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 700px) {
+  .search-controls {
+    flex-wrap: nowrap;
+    flex-direction: row;
+  }
+
+  .sort-controls {
+    min-width: fit-content;
+    max-width: fit-content;
+    flex-wrap: nowrap;
+  }
+
+  .labeled-control {
+    align-items: center;
+    display: flex;
+    flex-direction: column !important;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    max-width: fit-content;
+  }
+
+  .labeled-control__label {
+    flex-shrink: 0;
+    margin-bottom: 0 !important;
+  }
+}
+
+@media screen and (min-width: 860px) {
+  .labeled-control {
+    flex-wrap: nowrap !important;
+    flex-direction: row !important;
+  }
+}
+
+@media screen and (min-width: 1024px) {
   .sidebar-menu {
     display: block;
     margin-top: 0;
@@ -619,22 +677,16 @@ export default {
     display: none;
   }
 
-  .search-controls {
-    flex-direction: row;
-  }
-
   .labeled-control {
-    align-items: center;
-    display: flex;
+    flex-wrap: wrap !important;
+    flex-direction: column !important;
   }
+}
 
-  .labeled-control__label,
-  .labeled-control__control {
-    margin: 0 0 0 1rem;
-  }
-
-  .labeled-control__label {
-    flex-shrink: 0;
+@media screen and (min-width: 1100px) {
+  .labeled-control {
+    flex-wrap: nowrap !important;
+    flex-direction: row !important;
   }
 }
 </style>

pages/settings/index.vue

@@ -107,7 +107,7 @@
             :allow-empty="false"
           />
         </label>
-        <h3>Legacy search layout</h3>
+        <h3>Search sidebar on right side</h3>
         <label>
           <span>
             Sets the sidebar direction for search pages. Enabling this will put
@@ -120,7 +120,7 @@
             @change="changeLayout"
           />
         </label>
-        <h3>Legacy project layout</h3>
+        <h3>Project sidebar on right side</h3>
         <label>
           <span>
             Sets the sidebar direction for project pages. Enabling this will