fix(info Modal): remove spaces before dots, make it shorter, center i…

…t better
move-fast-and-break-things · Nov 9, 2024 · c3c3e3f · c3c3e3f
1 parent 8624a5b
commit c3c3e3f
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 18 deletions.
diff --git a/components/GlobalHeader.vue b/components/GlobalHeader.vue
@@ -68,15 +68,14 @@ const onCloseAboutModal = () => {
   <ModalDialog
     :open="aboutModalOpen"
     :on-close="onCloseAboutModal"
+    extra-modal-class="h-[400px]"
   >
     <div class="flex flex-grow flex-col justify-between">
       <div class="flex flex-col gap-2">
         <p>Aibyss is a survival game where you compete by coding your AI in <span class="font-semibold">JavaScript</span>.</p>
 
         <p>
-          The game is played in real time, and you can see how your AI performs against other players' AIs. It is played in a 2D grid, and your AI can move around, attack other AIs, and collect resources. The game is written in TypeScript. If you want to contribute, check out the list of open issues and the contributing guide <AnchorLink href="https://github.com/move-fast-and-break-things/aibyss">
-            here
-          </AnchorLink>.
+          The game is played in real time, and you can see how your AI performs against other players' AIs. It is played in a 2D grid, and your AI can move around, attack other AIs, and collect resources. The game is written in TypeScript. If you want to contribute, check out the list of open issues and the contributing guide <AnchorLink href="https://github.com/move-fast-and-break-things/aibyss">here</AnchorLink>.
         </p>
 
         <p>Good luck, and have fun!</p>
@@ -87,27 +86,19 @@ const onCloseAboutModal = () => {
           The logo and the art for the social preview image created by <AnchorLink
             href="https://github.com/Bee133"
             rel="nofollow noreferrer"
-          >
-            Ivan Pchelka
-          </AnchorLink>.
+          >Ivan Pchelka</AnchorLink>.
         </p>
         <p>
           The <AnchorLink
             href="https://fontstruct.com/fontstructions/show/1716995"
             rel="nofollow noreferrer"
-          >
-            FontStruction "RetroPix"
-          </AnchorLink> by <AnchorLink
+          >FontStruction "RetroPix"</AnchorLink> by <AnchorLink
             href="https://brandonkleeman.com/"
             rel="nofollow noreferrer"
-          >
-            Brandon Kleeman
-          </AnchorLink> is licensed under a <AnchorLink
+          >Brandon Kleeman</AnchorLink> is licensed under a <AnchorLink
             href="http://creativecommons.org/licenses/by/3.0/"
             rel="nofollow noreferrer"
-          >
-            Creative Commons Attribution license
-          </AnchorLink>.
+          >Creative Commons Attribution license</AnchorLink>.
         </p>
       </div>
     </div>

diff --git a/components/ModalDialog.vue b/components/ModalDialog.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-const { open, onClose } = defineProps<{ open: boolean; onClose: () => void }>();
+const { open, onClose, extraModalClass } = defineProps<{ open: boolean; onClose: () => void; extraModalClass?: string }>();
 </script>
 
 <template>
   <div
     v-if="open"
-    class="absolute z-10 w-full h-full top-0 left-0 bg-slate-400 bg-opacity-20"
+    class="flex absolute z-10 w-full h-full top-0 left-0 bg-slate-400 bg-opacity-20 items-center justify-center"
     @click.self="onClose"
   >
-    <div class="bg-white z-10 flex flex-col max-w-xl max-h-[calc(100vh-140px)] h-[600px] shadow p-4 pt-2 mx-auto mt-[110px]">
+    <div :class="`bg-white z-10 flex flex-col max-w-xl max-h-[calc(100vh-140px)] h-[600px] shadow p-4 pt-2 mb-16 ${extraModalClass}`">
       <div class="flex flex-row justify-end mb-2">
         <ButtonLink @click="onClose">
           close

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -1,9 +1,70 @@
 // @ts-check
 import withNuxt from "./.nuxt/eslint.config.mjs";
 
+const INLINE_ELEMENTS = [
+  "AnchorLink",
+  "pre",
+  "textarea",
+  "router-link",
+  "RouterLink",
+  "nuxt-link",
+  "NuxtLink",
+  "u-link",
+  "ULink",
+  "a",
+  "abbr",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "canvas",
+  "cite",
+  "code",
+  "data",
+  "del",
+  "dfn",
+  "em",
+  "i",
+  "iframe",
+  "ins",
+  "kbd",
+  "label",
+  "map",
+  "mark",
+  "noscript",
+  "object",
+  "output",
+  "picture",
+  "q",
+  "ruby",
+  "s",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "svg",
+  "time",
+  "u",
+  "var",
+  "video",
+];
+
 export default withNuxt({
   rules: {
     "curly": "error",
+    "vue/multiline-html-element-content-newline": ["error", {
+      ignoreWhenEmpty: true,
+      ignores: INLINE_ELEMENTS,
+      allowEmptyLines: false,
+    }],
+    "vue/singleline-html-element-content-newline": ["warn", {
+      ignoreWhenNoAttributes: true,
+      ignoreWhenEmpty: true,
+      ignores: INLINE_ELEMENTS,
+      externalIgnores: [],
+    }],
     "@typescript-eslint/no-non-null-assertion": "error",
   },
 });