Merge pull request #329 from JonathanBout/master

JonathanBout · Nov 11, 2024 · 999cbdd · 999cbdd
2 parents 7ca5cc2 + 88ca7ff
commit 999cbdd
Show file tree

Hide file tree

Showing 22 changed files with 404 additions and 272 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
         "axios": "^1.7.7",
         "bootstrap-icons": "^1.11.3",
         "eslint-plugin-vue": "^9.30.0",
-        "flag-icons": "^7.2.3",
         "npm-run-all": "^4.1.5",
         "parse-css-color": "^0.2.1",
         "read-last-lines": "^1.8.0",
@@ -32,8 +31,8 @@
         "@babel/types": "^7.26.0",
         "@tsconfig/node18": "^18.2.4",
         "@types/node": "^22.9.0",
-        "@vitejs/plugin-vue": "^5.1.4",
-        "@vue/tsconfig": "^0.5.1",
+        "@vitejs/plugin-vue": "^5.1.5",
+        "@vue/tsconfig": "^0.6.0",
         "autoprefixer": "^10.4.20",
         "eslint-config-prettier": "^9.1.0",
         "less": "^4.2.0",

diff --git a/public/images/flags/gb.svg b/public/images/flags/gb.svg
diff --git a/public/images/flags/nl.svg b/public/images/flags/nl.svg
diff --git a/src/assets/base.less b/src/assets/base.less
@@ -1,4 +1,3 @@
-@import "/node_modules/flag-icons/css/flag-icons.min.css";
 @import "variables.less";
 
 /* color palette from <https://github.com/vuejs/theme> */
@@ -55,7 +54,8 @@
         local("Cascadia Code"),
         url("https://static.jonathanbout.dev/CascadiaCode/woff2/CascadiaCode.woff2") format("woff2"),
         url("https://static.jonathanbout.dev/CascadiaCode/ttf/CascadiaCode.ttf") format("truetype"),
-url("https://static.jonathanbout.dev/CascadiaCode/CascadiaCode.ttf") format("truetype"),        url("https://static.jonathanbout.dev/CascadiaCode/otf/static/CascadiaCodeNF-Regular.otf") format("opentype"),
+        url("https://static.jonathanbout.dev/CascadiaCode/CascadiaCode.ttf") format("truetype"),
+        url("https://static.jonathanbout.dev/CascadiaCode/otf/static/CascadiaCodeNF-Regular.otf") format("opentype"),
         local("Cascadia Mono"),
         monospace;
 }
@@ -79,7 +79,7 @@ url("https://static.jonathanbout.dev/CascadiaCode/CascadiaCode.ttf") format("tru
         outline: 2px dashed var(--color-link);
         outline-offset: 4px;
         outline-style: dashed;
-        z-index: 100;
+        z-index: 1000;
     }
 
     &:focus:not(:focus-visible) {
@@ -227,6 +227,10 @@ h1 {
     margin-top: 50px;
 
     max-width: min(100%, 1000px);
+
+    @media (width < @breakpoint) {
+        width: 90%;
+    }
 }
 
 .page-root:not(.custom-animation) {
@@ -262,12 +266,125 @@ h1 {
     }
 }
 
+.form-description {
+    margin-bottom: 1.5em;
+    text-align: center;
+}
+
 form {
     overflow: auto;
     &,
     & > * {
         min-width: fit-content;
     }
+
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+
+    align-items: center;
+
+    .form-body {
+        border: 1px solid @border-color;
+        border-radius: 1em;
+        padding: 2em;
+        width: 100%;
+        margin-bottom: 0.5em;
+    }
+
+    label {
+        &:not(:last-of-type) {
+            margin-bottom: 1rem;
+        }
+        display: grid;
+
+        width: 100%;
+
+        grid-template-columns: 1fr 3fr;
+
+        @media (width >= @breakpoint) {
+            & > :not(span) {
+                margin-left: 5rem;
+                margin-left: 10rch;
+            }
+        }
+    }
+
+    input,
+    textarea {
+        padding: 0.5rem;
+        border: 1px solid @border-color;
+        border-radius: 0.25rem;
+        background-color: var(--color-background);
+    }
+
+    textarea {
+        resize: vertical;
+        min-height: 25vh;
+        overflow-y: auto;
+    }
+
+    button {
+        grid-column: span 2;
+        padding: 0.5rem;
+        margin-bottom: 2rem;
+        border: none;
+        border-radius: 0.25rem;
+        cursor: pointer;
+
+        i {
+            margin-inline-start: 0.4ch;
+        }
+    }
+
+    .error {
+        grid-column: span 2;
+        margin-top: 4px;
+        color: var(--color-error);
+
+        animation: none;
+
+        transition:
+            scale 0.2s,
+            opacity 1s;
+
+        transform-origin: left center;
+
+        &.visible {
+            scale: 1 1;
+        }
+
+        &.hidden {
+            scale: 0 0;
+            opacity: 0;
+        }
+    }
+
+    .buttons {
+        display: flex;
+        justify-content: space-evenly;
+        gap: 1ch;
+    }
+
+    .yummy-stuff {
+        position: fixed;
+        top: -1px;
+        left: -1px;
+        height: 1px;
+        width: 1px;
+        color: transparent;
+        overflow: hidden;
+        background-color: transparent;
+    }
+
+    @media (width < @breakpoint) {
+        label {
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto auto;
+            grid-auto-flow: column;
+        }
+    }
 }
 
 [inert],

diff --git a/src/components/AuthorizedImage.vue b/src/components/AuthorizedImage.vue
@@ -11,13 +11,12 @@ const props = defineProps<{
 
 const image = ref<HTMLImageElement>()
 
-server.getBlob(props.src)
-    .then((blob) => {
-        if (!image.value) {
-            return
-        }
-        image.value.src = blob
-    })
+server.getBlob(props.src).then((blob) => {
+    if (!image.value) {
+        return
+    }
+    image.value.src = blob
+})
 </script>
 
 <template>

diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { LOCALES, type Localized, changeLanguage, currentLocale } from "@/localizer"
-import { RouterLink } from "vue-router";
+import { RouterLink } from "vue-router"
 const creditsYear = new Date().getFullYear()
 
 defineProps<{
@@ -22,8 +22,10 @@ const iconsByLocale: Localized<string> = {
                         :class="'link no-external-icon' + (currentLocale === locale ? ' current' : '')"
                         @click="changeLanguage(locale)"
                     >
-                        <i :class="'fi fi-' + iconsByLocale[locale]" />
-                        {{ $t("language." + locale) }}
+                        <img class="flag" :src="`/images/flags/${iconsByLocale[locale]}.svg`" />
+                        <span>
+                            {{ $t("language." + locale) }}
+                        </span>
                     </button>
                 </li>
             </ul>
@@ -59,6 +61,10 @@ const iconsByLocale: Localized<string> = {
     }
 }
 
+.flag {
+    width: 1.5em;
+}
+
 .links {
     display: flex;
     flex-wrap: nowrap;
@@ -118,6 +124,9 @@ const iconsByLocale: Localized<string> = {
         cursor: pointer;
         font-size: 0.9em;
         margin-inline: 5px;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5em;
     }
 
     padding-bottom: 1em;

diff --git a/src/components/PrivacyComponent.vue b/src/components/PrivacyComponent.vue
@@ -12,9 +12,7 @@ function getParagraphs(paragraphs: string): string[] {
         <h1>
             {{ title }}
         </h1>
-        <div class="state">
-            {{ $t("privacy.lastUpdated") }}: {{ lastUpdate }}
-        </div>
+        <div class="state">{{ $t("privacy.lastUpdated") }}: {{ lastUpdate }}</div>
         <p v-for="paragraph in transformedParagraphs" :key="paragraph">
             {{ paragraph }}
         </p>