many new components, renames and yays

nginx/vue/src/assets/styles.css

@@ -81,6 +81,10 @@ body {
     height: 100vh;
 }
 
+main {
+    @apply overflow-y-scroll;
+}
+
 input {
     @apply text-secondary border-primary border;
 }
@@ -241,7 +245,7 @@ td {
 }
 
 .background {
-    @apply fixed inset-0 -z-10 pointer-events-none;
+    @apply fixed inset-0 z-0;
 }
 
 .halftone {

nginx/vue/src/components/Navbar.vue

@@ -20,7 +20,7 @@ const inHome = computed(() => {
 </script>
 
 <template>
-    <nav class="flex flex-row w-fit">
+    <nav class="flex flex-row w-fit h-fit background">
         <RouterLink class="bdr-2 bg-bg_primary" to="/" v-if="!inHome">
             <a>HOME</a>
         </RouterLink>

nginx/vue/src/components/home/Consumption.vue

@@ -1,5 +1,7 @@
 <script setup>
+import AutoScroll from "@/components/util/AutoScroll.vue";
 import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
+import Header from "@/components/text/Header.vue";
 
 const data = [
     {
@@ -57,9 +59,9 @@ const data = [
 
 <template>
     <div class="flex flex-col items-center">
-        <h2>Consumption</h2>
+        <Header>Consumption</Header>
-        <div class="overflow-scroll flex-1 border-box">
+        <AutoScroll>
             <OptionalLinkTable :data="data" />
-        </div>
+        </AutoScroll>
     </div>
 </template>

nginx/vue/src/components/home/Favorites.vue

@@ -1,5 +1,7 @@
 <script setup>
+import Header from "@/components/text/Header.vue";
 import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
+import AutoScroll from "@/components/util/AutoScroll.vue";
 const favs = [
     {
         type: "Daioh",
@@ -62,9 +64,9 @@ const favs = [
 
 <template>
     <div class="flex flex-col items-center">
-        <h2>favs</h2>
+        <Header>favs</Header>
-        <div class="overflow-scroll w-full flex-1 border-box">
+        <AutoScroll class="w-full flex-1">
             <OptionalLinkTable class="w-full" :data="favs" />
-        </div>
+        </AutoScroll>
     </div>
 </template>

nginx/vue/src/components/home/Gym.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Header from "@/components/text/Header.vue";
 import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
 const gym = [
     { name: "Row", type: "30 min" },
@@ -9,7 +10,7 @@ const gym = [
 
 <template>
     <div class="flex flex-col items-center">
-        <h2>Gym</h2>
+        <Header>Gym</Header>
         <p class="m-3">I'm not a gym geek but I always do:</p>
         <div class="overflow-scroll w-full flex-1 border-box">
             <OptionalLinkTable class="w-full" :data="gym" />

nginx/vue/src/components/util/AutoScroll.vue

@@ -0,0 +1,51 @@
+<template>
+    <div ref="container" class="overflow-y-auto">
+        <slot />
+    </div>
+</template>
+
+<script setup>
+import { useTemplateRef, onMounted, onBeforeUnmount } from "vue";
+
+const container = useTemplateRef("container");
+
+const SPEED = 1; // px per frame
+const PAUSE = 2000; // ms at top/bottom
+const FRAME_TIME = 50; // ms at top/bottom
+
+let direction = 1; // 1 = down, -1 = up
+let paused = false;
+let rafId;
+let timeoutId;
+
+function tick() {
+    const el = container.value;
+
+    el.scrollTop += SPEED * direction;
+
+    const reachedBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+    const reachedTop = el.scrollTop <= 0;
+
+    if (reachedBottom || reachedTop) {
+        direction *= -1;
+
+        timeoutId = setTimeout(() => {
+            paused = false;
+            rafId = setTimeout(tick, FRAME_TIME);
+        }, PAUSE);
+
+        return;
+    }
+
+    rafId = setTimeout(tick, FRAME_TIME);
+}
+
+onMounted(() => {
+    rafId = setTimeout(tick, FRAME_TIME);
+});
+
+onBeforeUnmount(() => {
+    clearTimeout(rafId);
+    clearTimeout(timeoutId);
+});
+</script>

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

@@ -4,7 +4,7 @@
 
 <template>
     <audio/>
-    <div class="musicPlayerGrid w-50">
+    <div class="musicPlayerGrid">
         <div class="album_cover">
             <img src="/img/Untitled.png"></img>
         </div>

nginx/vue/src/components/util/Time.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Header from "@/components/text/Header.vue";
 import { ref } from "vue";
 
 const time = ref("");
@@ -23,8 +24,8 @@ setInterval(updateDateTime, 60000);
 </script>
 
 <template>
-    <div class="flex flex-col">
+    <div class="items-center flex flex-col bg-bg_primary border-primary border">
-        <h4>{{ time }}</h4>
+        <h1>{{ time }}</h1>
-        <h4>{{ weekday }} {{ day }}, {{ month }}</h4>
+        <h1>{{ weekday }} {{ day }}, {{ month }}</h1>
     </div>
 </template>

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

@@ -62,37 +62,53 @@ function playFinishedSound() {
 </script>
 
 <template>
-    <div class="flex flex-col gap-1 p-1">
+    <div
-        <h4 class="items-center">Timer</h4>
+        class="flex flex-col gap-1 items-center border-primary border p-1 bg-bg_primary"
-        <!-- Min input and Second input-->
+    >
-        <div v-if="finished && paused" class="flex flex-row">
+        <h2 class="items-center">Timer</h2>
-            <input v-model="minutesInput" type="number" min="0" max="59" />
+        <div v-if="finished && paused" class="flex flex-col">
-            <input v-model="secondsInput" type="number" min="0" max="59" />
+            <div class="flex flex-row p-2">
+                <input
+                    class="w-full"
+                    v-model="minutesInput"
+                    type="range"
+                    min="0"
+                    max="59"
+                />
+                <p>{{ minutesInput }}m</p>
+            </div>
+            <div class="flex flex-row p-2">
+                <input
+                    class="w-full"
+                    v-model="secondsInput"
+                    type="range"
+                    min="0"
+                    max="59"
+                />
+                <p>{{ secondsInput }}s</p>
+            </div>
+            <button @click="startTimer">Proceed</button>
         </div>
         <div v-if="finished && !paused" class="flex flex-col">
             <h1>Timer finished!</h1>
+            <button @click="resetTimer">Reset</button>
         </div>
-        <div v-if="!finished && paused">
+        <div v-if="!finished && paused" class="flex flex-col">
             <h1>Paused</h1>
+            <button @click="resetTimer">Reset</button>
         </div>
         <div v-if="!finished && !paused" class="flex flex-col">
-            <h1>
+            <p>
                 {{ minutes.toString().padStart(2, "0") }}:{{
                     seconds.toString().padStart(2, "0")
                 }}
-            </h1>
+            </p>
-            <h1>
+            <p>
                 {{ minutesInput.toString().padStart(2, "0") }}:{{
                     secondsInput.toString().padStart(2, "0")
                 }}
-            </h1>
+            </p>
-        </div>
+            <button @click="pauseTimer">Pause</button>
-        <div class="flex flex-col">
-            <button v-if="paused" @click="startTimer">Proceed</button>
-            <button v-if="!finished && !paused" @click="pauseTimer">
-                Pause
-            </button>
-            <button v-if="finished ^ paused" @click="resetTimer">Reset</button>
         </div>
     </div>
 </template>

nginx/vue/src/views/Home.vue

@@ -12,22 +12,11 @@ import Feed from "@/components/home/Feed.vue";
 import Collage from "@/components/home/Collage.vue";
 import Favorites from "@/components/home/Favorites.vue";
 import Gym from "@/components/home/Gym.vue";
-import Watching from "@/components/home/Watching.vue";
+import Consumption from "@/components/home/Consumption.vue";
 </script>
 
 <template>
-    <div class="background halftone">
+    <main class="halftone justify-center flex flex-row w-full h-full p-10">
-        <img src="/img/memes/fire-woman.gif" class="br w-80" />
-        <div class="flex flex-col tr sidebar">
-            <Time />
-            <Timer />
-            <!-- <Chat class="bdr-2 bg-bg_primary" /> -->
-            <MusicPlayer />
-        </div>
-    </div>
-    <div class="-z-10 halftone" />
-
-    <main class="items-center flex flex-col">
         <div class="page a4page-portrait bdr-1 homeGrid relative">
             <Intro class="intro" />
             <Listening class="listening" />
@@ -35,27 +24,31 @@ import Watching from "@/components/home/Watching.vue";
             <Feed class="feed" />
             <Links class="links" />
             <Collage class="collage" />
-            <Watching class="watching" />
+            <Consumption class="consumption" />
             <Favorites class="favorites" />
             <Gym class="gym" />
         </div>
+        <div
+            class="flex flex-col w-1/12 sidebar border-primary place-content-between h-full sticky m-10"
+        >
+            <div class="flex flex-col">
+                <Time />
+                <Timer />
+                <!-- <Chat class="bdr-2 bg-bg_primary" /> -->
+                <!-- <MusicPlayer /> -->
+            </div>
+            <img src="/img/memes/fire-woman.gif" class="w-80" />
+        </div>
     </main>
 </template>
 
 <style scoped>
-.page > * {
+.homeGrid > * {
     @apply border-2 border-dotted;
     border-color: var(--primary);
     background-color: var(--bg_primary);
 }
 
-.sidebar > * {
-    @apply border-2;
-    background-color: var(--bg_primary);
-    border: 7px solid;
-    border-image: url("/img/borders/border4.gif") 7 round;
-}
-
 .homeGrid {
     display: grid;
     grid-gap: 5px;
@@ -63,14 +56,15 @@ import Watching from "@/components/home/Watching.vue";
     grid-template-rows: repeat(10, 1fr);
 }
 
-@media (max-width: 850px) {
+@media (max-width: 1000px) {
     .homeGrid {
         width: 100%;
         display: flex;
         flex-direction: column;
     }
     .tr,
-    .br {
+    .br,
+    .sidebar {
         display: none;
     }
 }
@@ -105,7 +99,7 @@ import Watching from "@/components/home/Watching.vue";
     grid-row: 5 / span 4;
 }
 
-.watching {
+.consumption {
     grid-column: span 4;
     grid-row: span 2;
 }