new components

nginx/vue/src/assets/styles.css

@@ -129,10 +129,6 @@ p {
     @apply text-secondary;
 }
 
-button {
-    @apply text-primary bg-link text-center border;
-}
-
 a {
     @apply text-primary bg-link text-center font-heading text-xl tracking-wide;
 }

nginx/vue/src/components/Radio.vue

@@ -7,12 +7,13 @@
         <img src="/img/tmpen31z3pe.PNG" />
         <div class="m-1">
             <p>Stream is offline. Tune in Fridays @ 6:00pm, Monday @ 8:00am</p>
-            <button @click="checkStream()">Check Stream</button>
+            <Button @click="checkStream()">Check Stream</Button>
         </div>
     </div>
 </template>
 
 <script setup>
+import Button from "@/components/input/Button.vue";
 import { ref, onMounted } from "vue";
 import axios from "axios";
 

nginx/vue/src/components/admin/CreatePost.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from "@/components/input/Button.vue";
 import { ref, onMounted, computed } from "vue";
 import axios from "axios";
 import { useAuthStore } from "@/stores/auth";
@@ -27,7 +28,7 @@ async function post() {
         <h1>Create Post</h1>
         <input type="text" v-model="title" placeholder="Title" />
         <textarea v-model="content" placeholder="Content"></textarea>
-        <button @click="post">Upload</button>
+        <Button @click="post">Upload</Button>
         <!-- make textarea take up most the space -->
     </div>
 </template>

nginx/vue/src/components/admin/CreateUser.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from "@/components/input/Button.vue";
 import { ref, onMounted, computed } from "vue";
 import { useAuthStore } from "@/stores/auth";
 
@@ -22,6 +23,6 @@ function handleLogin() {
         <h1>Create User</h1>
         <input type="text" v-model="username" placeholder="Username" />
         <input type="password" v-model="password" placeholder="Password" />
-        <button @click="handleLogin">Create Account</button>
+        <Button @click="handleLogin">Create Account</Button>
     </div>
 </template>

nginx/vue/src/components/admin/Login.vue

@@ -2,6 +2,8 @@
 import { ref, onMounted, computed } from "vue";
 import { useAuthStore } from "@/stores/auth";
 
+import Button from "@/components/input/Button.vue";
+
 const auth = useAuthStore();
 const username = ref("");
 const password = ref("");
@@ -21,12 +23,12 @@ function handleLogout() {
         <p>{{ auth.user.id }}</p>
         <p>{{ auth.user.username }}</p>
         <p>{{ auth.user.admin }}</p>
-        <button @click="handleLogout">Log Out</button>
+        <Button @click="handleLogout">Log Out</Button>
     </div>
     <div v-else class="flex flex-col">
         <h1>Login</h1>
         <input type="text" v-model="username" placeholder="Username" />
         <input type="password" v-model="password" placeholder="Password" />
-        <button @click="handleLogin">Log In</button>
+        <Button @click="handleLogin">Log In</Button>
     </div>
 </template>

nginx/vue/src/components/home/Feed.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from "@/components/input/Button.vue";
 import Markdown from "@/components/util/Markdown.vue";
 import Header from "@/components/text/Header.vue";
 
@@ -51,18 +52,18 @@ onMounted(() => {
             >Created at: {{ new Date(post.createdAt).toLocaleString() }}</small
         >
         <div class="flex flex-row w-full">
-            <button class="flex-1 border-box" v-if="!leftCap" @click="prevPost">
+            <Button class="flex-1 border-box" v-if="!leftCap" @click="prevPost">
                 Prev
-            </button>
-            <button
+            </Button>
+            <Button
                 class="flex-1 border-box"
                 v-if="!rightCap"
                 @click="nextPost"
             >
                 Next
-            </button>
+            </Button>
         </div>
-        <button v-if="userOwnsPost" @click="deletePost">Delete</button>
+        <Button v-if="userOwnsPost" @click="deletePost">Delete</Button>
     </div>
 </template>
 

nginx/vue/src/components/input/Button.vue

@@ -0,0 +1,11 @@
+<script setup></script>
+
+<template>
+    <button
+        class="text-primary bg-link text-center border cursor-pointer transition-colors duration-150 ease-in-out hover:bg-bg_primary active:scale-95"
+    >
+        <slot />
+    </button>
+</template>
+
+<style scoped></style>

nginx/vue/src/components/input/ToggleButton.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+function toggle() {
+    emit("update:modelValue", !props.modelValue);
+}
+</script>
+<template>
+    <button
+        @click="toggle"
+        class="box-content border-2 border-primary w-20 h-fit rounded-full cursor-pointer"
+        :class="[props.modelValue ? 'bg-bg_secondary' : 'bg-bg_primary']"
+    >
+        <svg
+            viewBox="0 0 40 40"
+            class="w-10 h-10 transition-all duration-300 ease-in-out"
+            :class="[props.modelValue ? 'ml-10' : 'ml-0']"
+        >
+            <circle class="fill-primary" cx="20" cy="20" r="20" />
+        </svg>
+    </button>
+</template>

nginx/vue/src/components/text/ToggleHeader.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { ref } from "vue";
+import ToggleButton from "@/components/input/ToggleButton.vue";
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const toggleButtonRef = ref(null);
+
+const updateValue = (newValue) => {
+    emit("update:modelValue", newValue);
+};
+const handleClick = () => {
+    toggleButtonRef.value?.$el?.click();
+};
+</script>
+<template>
+    <div
+        class="w-full border-b border-primary cursor-pointer"
+        @click="handleClick"
+    >
+        <h1 class="pl-2 m-0">
+            <slot />
+        </h1>
+        <ToggleButton
+            class="pointer-events-none"
+            :model-value="props.modelValue"
+            @update:model-value="updateValue"
+            ref="toggleButtonRef"
+        />
+    </div>
+</template>

nginx/vue/src/components/util/Chat.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from "@/components/input/Button.vue";
 import { useMessagesStore } from "@/stores/messages";
 
 const messagesStore = useMessagesStore();
@@ -21,7 +22,7 @@ onUnmounted(() => {
         </div>
         <div class="flex flex-row">
             <input v-model="messageInput" @keyup.enter="sendMessage" />
-            <button @click="sendMessage">Send</button>
+            <Button @click="sendMessage">Send</Button>
         </div>
     </div>
 </template>

nginx/vue/src/components/util/LinkTable.vue

@@ -12,13 +12,8 @@ const keys = ["name", "link"];
 </script>
 
 <template>
-    <a
-        class="bdr-2 bg-bg_primary"
-        v-for="(row, rowIndex) in linkArr"
-        :key="rowIndex"
-        :href="row.link"
-    >
-        <p>
+    <a v-for="(row, rowIndex) in linkArr" :key="rowIndex" :href="row.link">
+        <p class="bdr-2 bg-bg_primary">
             {{ row.name }}
         </p>
     </a>

nginx/vue/src/components/util/MusicPlayer.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from "@/components/input/Button.vue";
 
 </script>
 

nginx/vue/src/components/util/Timer.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from "@/components/input/Button.vue";
 import { ref } from "vue";
 
 const timer = ref(null);
@@ -87,15 +88,15 @@ function playFinishedSound() {
                 />
                 <p>{{ secondsInput }}s</p>
             </div>
-            <button @click="startTimer">Proceed</button>
+            <Button @click="startTimer">Proceed</Button>
         </div>
         <div v-if="finished && !paused" class="flex flex-col">
             <h1>Timer finished!</h1>
-            <button @click="resetTimer">Reset</button>
+            <Button @click="resetTimer">Reset</Button>
         </div>
         <div v-if="!finished && paused" class="flex flex-col">
             <h1>Paused</h1>
-            <button @click="resetTimer">Reset</button>
+            <Button @click="resetTimer">Reset</Button>
         </div>
         <div v-if="!finished && !paused" class="flex flex-col">
             <p>
@@ -108,7 +109,7 @@ function playFinishedSound() {
                     secondsInput.toString().padStart(2, "0")
                 }}
             </p>
-            <button @click="pauseTimer">Pause</button>
+            <Button @click="pauseTimer">Pause</Button>
         </div>
     </div>
 </template>

nginx/vue/src/components/util/ToggleLinkTable.vue

@@ -1,4 +1,6 @@
 <script setup>
+import ToggleHeader from "@/components/text/ToggleHeader.vue";
+
 import { ref } from "vue";
 import LinkTable from "@/components/util/LinkTable.vue";
 
@@ -17,9 +19,10 @@ const show_links = ref(false);
 </script>
 
 <template>
-    <div class="flex flex-row">
-        <h2>{{ title }}</h2>
-        <button @click="show_links = !show_links">Toggle</button>
+    <div class="h-fit w-fit">
+        <ToggleHeader v-model="show_links" class="justify-between flex"
+            >{{ title }}
+        </ToggleHeader>
+        <LinkTable v-if="show_links" :linkArr="props.linkArr" />
     </div>
-    <LinkTable v-if="show_links" :linkArr="props.linkArr" />
 </template>

nginx/vue/src/views/Admin.vue

@@ -5,8 +5,7 @@ import CreatePost from "@/components/admin/CreatePost.vue";
 </script>
 
 <template>
-    <main class="items-center flex flex-col">
-        <div class="background halftone" />
+    <main class="halftone justify-center flex flex-row w-full h-full">
         <div class="a5page-portrait bdr-1 flex flex-col">
             <Login class="bdr-2 bg-bg_primary" />
             <!--

nginx/vue/src/views/Bookmarks.vue

@@ -240,16 +240,18 @@ const links = [
 </script>
 
 <template>
-    <main class="items-center flex flex-col">
-        <div class="background halftone" />
+    <main class="items-center flex flex-col halftone">
         <div
-            class="a4page-portrait bdr-1 flex flex-col relative overflow-scroll gap-1"
+            class="a4page-portrait bdr-1 flex flex-row flex-wrap overflow-x-auto gap-1"
         >
-            <ToggleLinkTable
-                v-for="link in links"
-                :title="link[0]"
-                :linkArr="link[1]"
-            />
+            <div class="w-full h-fit">
+                <ToggleLinkTable
+                    class="flex flex-col flex-wrap"
+                    v-for="link in links"
+                    :title="link[0]"
+                    :linkArr="link[1]"
+                />
+            </div>
         </div>
     </main>
 </template>