layout changes

AlekEagle · Jan 17, 2025 · 7734eb6 · 7734eb6
1 parent f267e3c
commit 7734eb6
Show file tree

Hide file tree

Showing 13 changed files with 256 additions and 84 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -526,7 +526,7 @@
     padding: var(--padding) 0;
     position: fixed;
     justify-content: flex-start;
-    top: 100vh;
+    top: 110vh;
     left: 0;
     flex-direction: column;
     margin: 0;
@@ -709,6 +709,11 @@
     -moz-appearance: textfield;
   }
 
+  input[type='color'] {
+    box-sizing: content-box;
+    block-size: 24px;
+  }
+
   textarea {
     font-family: var(--font-heading);
     font-weight: 600;

diff --git a/src/components/FileContentBox.vue b/src/components/FileContentBox.vue
@@ -8,9 +8,9 @@
     <div class="file-content-box-preview-container">
       <!-- DEBUG IMAGE -->
       <img
-        v-if="props.debug"
+        v-if="debug"
         class="file-content-box-preview"
-        src="https://via.placeholder.com/512"
+        src="https://fakeimg.pl/256x256?font=noto&font_size=21"
         alt="Preview"
       />
       <!-- CAME INTO VIEW -->
@@ -42,7 +42,7 @@
     </div>
     <div class="file-content-box-content">
       <!-- DEBUG TEXT -->
-      <template v-if="props.debug">
+      <template v-if="debug">
         <p class="file-content-box-primary-text">Friendly File Name</p>
         <p class="file-content-box-secondary-text">
           Saved As: <code>abc.xyz</code>
@@ -51,18 +51,18 @@
       <template v-else>
         <p
           class="file-content-box-primary-text"
-          v-text="props.file?.name ?? props.file?.id ?? 'No File Loaded'"
+          v-text="file?.name ?? file?.id ?? 'No File Loaded'"
         />
         <p class="file-content-box-secondary-text">
-          Saved As: <code v-text="props.file?.id ?? 'No File Loaded'" />
+          Saved As: <code v-text="file?.id ?? 'No File Loaded'" />
         </p>
       </template>
     </div>
     <div class="file-content-box-content-overflow-shadow" />
     <div class="file-content-box-checkbox">
       <label @click.prevent.stop="checkModel">
         <input
-          :checked="model.includes(props.file?.id ?? '')"
+          :checked="model.includes(file?.id ?? debugId!)"
           type="checkbox"
         />
         <span></span>
@@ -95,8 +95,9 @@
   const user = userStore();
   const cameIntoView = ref(false);
 
-  const props = defineProps<{
+  const { debug, debugId, file, toStaff } = defineProps<{
     debug?: boolean;
+    debugId?: string;
     file?: Cumulonimbus.Data.File;
     toStaff?: boolean;
   }>();
@@ -116,21 +117,18 @@
 
   const location = computed(() => {
     return router.resolve({
-      name: props.toStaff ? 'staff-space-file' : 'user-space-file',
+      name: toStaff ? 'staff-space-file' : 'user-space-file',
       query: {
-        id: props.file?.id,
+        id: file?.id,
       },
     });
   });
 
   async function linkClicked(e: MouseEvent) {
     console.log('linkClicked');
-    if (props.debug) return;
+    if (debug) return;
     if (e.ctrlKey)
-      return window.open(
-        `https://cdn.alekeagle.me/${props.file?.id}`,
-        '_blank',
-      );
+      return window.open(`https://cdn.alekeagle.me/${file?.id}`, '_blank');
     await router.push(location.value);
   }
 
@@ -139,7 +137,7 @@
       previewFailed.value = true;
     }
     try {
-      const thumb = await user.client!.getThumbnail(props.file!.id);
+      const thumb = await user.client!.getThumbnail(file!.id);
       const blob = new Blob([thumb], { type: 'image/webp' });
       imgBlob.value = URL.createObjectURL(blob);
     } catch (error) {
@@ -163,10 +161,10 @@
 
   function checkModel() {
     console.log('checkModel');
-    if (model.value.includes(props.file?.id ?? '')) {
-      model.value = model.value.filter((id) => id !== props.file?.id);
+    if (model.value.includes(file?.id ?? debugId!)) {
+      model.value = model.value.filter((id) => id !== (file?.id ?? debugId!));
     } else {
-      model.value.push(props.file?.id ?? '');
+      model.value.push(file?.id ?? debugId!);
     }
   }
 
@@ -350,11 +348,15 @@
     transition: border 0.25s;
   }
 
-  .file-content-box-checkbox label input:checked ~ span:after {
+  .file-content-box-checkbox:hover label span {
+    border: 1px solid var(--ui-border-hover);
+  }
+
+  .file-content-box-checkbox label input:checked ~ span::after {
     transform: scale(0);
   }
 
-  .file-content-box-checkbox label span:after {
+  .file-content-box-checkbox label span::after {
     content: '';
     position: relative;
     display: block;
@@ -365,6 +367,10 @@
     width: 5px;
     height: 5px;
     transform: scale(6);
-    transition: transform 0.4s ease-in-out, background-color 0.25s;
+    transition: transform 0.4s ease-in, background-color 0.25s;
+  }
+
+  .file-content-box-checkbox:hover label span::after {
+    background-color: var(--ui-background-hover);
   }
 </style>
diff --git a/src/components/Form.vue b/src/components/Form.vue
@@ -38,7 +38,7 @@
     if (!form.value!.reportValidity()) return;
     const formElements = form.value!.elements as HTMLFormControlsCollection;
     const data: {
-      [key: string]: string | number | boolean | undefined;
+      [key: string]: string | string[] | number | boolean | undefined;
     } = {};
     for (let i = 0; i < formElements.length; i++) {
       const element = formElements[i];
@@ -73,7 +73,17 @@
             break;
         }
       } else if (element instanceof HTMLSelectElement) {
-        data[element.name] = element.value === '' ? undefined : element.value;
+        if (element.multiple) {
+          const selected: string[] = [];
+          for (let i = 0; i < element.options.length; i++) {
+            if (element.options[i].selected) {
+              selected.push(element.options[i].value);
+            }
+          }
+          data[element.name] = selected;
+        } else {
+          data[element.name] = element.value === '' ? undefined : element.value;
+        }
       } else if (element instanceof HTMLTextAreaElement) {
         data[element.name] = element.value === '' ? undefined : element.value;
       }

diff --git a/src/components/Marquee.vue b/src/components/Marquee.vue
@@ -35,7 +35,7 @@
   // No Store Modules to import here.
 
   // External Modules
-  import { ref, computed, onMounted, watchEffect } from 'vue';
+  import { ref, onMounted, watchEffect, watch, onUnmounted } from 'vue';
 
   // Props
   const {
@@ -141,15 +141,28 @@
       loop < 1 ? 'infinite' : loop + '',
     );
   });
+  watch(
+    () => clone,
+    () => {
+      cloneAmt.value = calcCloneAmt();
+    },
+  );
+
+  function resizeHandler() {
+    cloneAmt.value = calcCloneAmt();
+  }
 
   // Component Lifecycle Hooks
   onMounted(() => {
     // Calculate the amount of clones needed
     cloneAmt.value = calcCloneAmt();
     // Create an event listener for when the marquee is resized
-    window.addEventListener('resize', () => {
-      cloneAmt.value = calcCloneAmt();
-    });
+    window.addEventListener('resize', resizeHandler);
+  });
+
+  onUnmounted(() => {
+    // Remove the event listener when the component is unmounted
+    window.removeEventListener('resize', resizeHandler);
   });
 </script>
 

diff --git a/src/components/Paginator.vue b/src/components/Paginator.vue
@@ -1,20 +1,18 @@
 <template>
   <p v-text="pageIndicatorText" />
   <div class="paginator-controls paginator-controls-top">
-    <button @click="prevPage" :disabled="0 >= page || props.disabled">
-      Prev
-    </button>
+    <button @click="prevPage" :disabled="0 >= page || disabled"> Prev </button>
     <input
       type="number"
       inputmode="numeric"
       :value="pageCount"
       min="0"
       :max="displayMax"
-      :disabled="props.disabled"
+      :disabled="disabled"
       @change="onInputChange"
       @input="validateInput"
     />
-    <button @click="nextPage" :disabled="maxPage <= page || props.disabled">
+    <button @click="nextPage" :disabled="maxPage <= page || disabled">
       Next
     </button>
   </div>
@@ -30,21 +28,19 @@
   </slot>
 
   <div class="paginator-controls paginator-controls-bottom">
-    <button @click="prevPage" :disabled="0 >= page || props.disabled">
-      Prev
-    </button>
+    <button @click="prevPage" :disabled="0 >= page || disabled"> Prev </button>
     <input
       type="number"
       inputmode="numeric"
       :value="pageCount"
       min="0"
       :max="displayMax"
       step="1"
-      :disabled="props.disabled"
+      :disabled="disabled"
       @change="onInputChange"
       @input="validateInput"
     />
-    <button @click="nextPage" :disabled="maxPage <= page || props.disabled">
+    <button @click="nextPage" :disabled="maxPage <= page || disabled">
       Next
     </button>
   </div>
@@ -71,27 +67,30 @@
   });
 
   const emit = defineEmits(['pageChange']);
-  const props = defineProps({
-    itemCount: {
-      type: Number,
-      default: 0,
-    },
-    disabled: Boolean,
-  });
+  const {
+    itemCount = 0,
+    disabled,
+    pageOverride,
+  } = defineProps<{
+    itemCount?: number;
+    disabled?: boolean;
+    pageOverride?: number;
+  }>();
 
   const router = useRouter(),
     displayPref = displayPrefStore(),
     pageCount = computed(() => page.value + 1),
     maxPage = computed(() => {
-      let a = Math.ceil(props.itemCount / displayPref.itemsPerPage) - 1;
+      if (pageOverride) return pageOverride - 1;
+      let a = Math.ceil(itemCount / displayPref.itemsPerPage) - 1;
       if (isNaN(a)) return 0;
       else return a;
     }),
     displayMax = computed(() => (maxPage.value < 0 ? 1 : maxPage.value + 1)),
     pageIndicatorText = computed(
       () =>
-        `Page ${pageCount.value.toLocaleString()} of ${displayMax.value.toLocaleString()} (${props.itemCount.toLocaleString()} item${
-          props.itemCount === 1 ? '' : 's'
+        `Page ${pageCount.value.toLocaleString()} of ${displayMax.value.toLocaleString()} (${itemCount.toLocaleString()} item${
+          itemCount === 1 ? '' : 's'
         })`,
     );
 

diff --git a/src/views/test/FileContentBoxes.vue b/src/views/test/FileContentBoxes.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="file-content-box-container">
     <template v-for="i in 12">
-      <FileContentBox debug v-model="model" />
+      <FileContentBox debug :debug-id="i + ''" v-model="model" />
     </template>
   </div>
 </template>

diff --git a/src/views/test/FormEmphasizedBox.vue b/src/views/test/FormEmphasizedBox.vue
@@ -5,17 +5,51 @@
       @submit="(data) => toast.show(JSON.stringify(data))"
       ref="emphasizedForm"
     >
-      <input type="text" placeholder="A text box" name="text" />
+      <input type="text" name="text" placeholder="Text" />
       <br />
-      <input type="password" placeholder="A password box" name="password" />
+      <input type="number" name="number" placeholder="Number" />
       <br />
-      <input type="number" placeholder="A number box" name="number" />
+      <input type="password" name="password" placeholder="Password" />
       <br />
-      <input type="email" placeholder="An email box" name="email" />
+      <input type="email" name="email" placeholder="Email" />
       <br />
-      <Switch name="switch">A switch</Switch>
+      <input type="url" name="url" placeholder="URL" />
       <br />
-      <button>Submit</button>
+      <input type="tel" name="tel" placeholder="Telephone" />
+      <br />
+      <input type="search" name="search" placeholder="Search" />
+      <br />
+      <input type="date" name="date" />
+      <br />
+      <input type="time" name="time" />
+      <br />
+      <input type="datetime-local" name="datetime-local" />
+      <br />
+      <input type="month" name="month" />
+      <br />
+      <input type="week" name="week" />
+      <br />
+      <input type="color" name="color" />
+      <br />
+      <input type="range" name="range" />
+      <br />
+      <textarea name="textarea" placeholder="Textarea"></textarea>
+      <br />
+      <select name="select">
+        <option value="">Select</option>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </select>
+      <br />
+      <!-- multiselect -->
+      <select name="multiselect" multiple>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </select>
+
+      <Switch name="switch">Switch</Switch>
     </Form>
     <button @click="emphasizedForm!.submit()">Submit outside of form</button>
   </EmphasizedBox>

diff --git a/src/views/test/LoadingMessage.vue b/src/views/test/LoadingMessage.vue
@@ -8,10 +8,16 @@
     <h3>Without Spinner.</h3>
     <h1><LoadingMessage /></h1>
   </EmphasizedBox>
+
+  <EmphasizedBox>
+    <h3>Only Spinner.</h3>
+    <LoadingSpinner />
+  </EmphasizedBox>
 </template>
 
 <script lang="ts" setup>
   // Vue Components
   import EmphasizedBox from '@/components/EmphasizedBox.vue';
   import LoadingMessage from '@/components/LoadingMessage.vue';
+  import LoadingSpinner from '@/components/LoadingSpinner.vue';
 </script>