feat: tweak design and cohesion

Rule-34 · Jul 18, 2023 · 3d6178e · 3d6178e
1 parent 26767b3
commit 3d6178e
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 142 deletions.
diff --git a/components/pages/settings/SettingSwitch.vue b/components/pages/settings/SettingSwitch.vue
@@ -14,7 +14,7 @@
 <template>
   <SwitchGroup
     as="div"
-    class="flex flex-row items-center justify-between gap-2"
+    class="flex flex-row items-center justify-between gap-4"
   >
     <span class="flex flex-grow flex-col">
       <SwitchLabel

diff --git a/components/shared/ContentContainer.vue b/components/shared/ContentContainer.vue
@@ -1,52 +1,58 @@
-<script setup>
-  const props = defineProps({
-    title: {
-      type: String,
-      required: true
-    },
+<script lang="ts" setup>
+  export interface PageTextProps {
+    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
 
-    text: {
-      type: String,
-      required: false,
-      default: undefined
-    },
+    title: string
+    text?: string
+    links?: {
+      text: string
+      href: string
+      target?: string
+    }[]
+  }
 
-    links: {
-      type: Array,
-      required: false,
-      default: () => []
-    }
+  const props = withDefaults(defineProps<PageTextProps>(), {
+    as: 'h2'
   })
 </script>
 
 <template>
   <div class="card-body">
     <!-- Title -->
-    <h2 class="text-lg font-bold leading-8 tracking-wide text-base-content-highlight">{{ title }}</h2>
+    <component
+      :is="props.as"
+      class="text-lg font-bold leading-8 tracking-wide text-base-content-highlight"
+    >
+      {{ title }}
+    </component>
 
     <!-- Text -->
     <!-- Using v-text as using {{}} would add a `new line` character that `whitespace-pre-line` would interpret. -->
     <p
-      v-if="text"
+      v-if="props.text"
       class="whitespace-pre-line text-sm text-base-content"
-      v-text="text"
+      v-text="props.text"
     />
 
     <!-- Links -->
-    <ol v-if="links.length">
+    <ol v-if="props.links">
       <li
-        v-for="(link, index) in links"
-        :key="link.text"
+        v-for="(link, index) in props.links"
+        :key="link.href"
+        class="inline"
       >
         <NuxtLink
           :href="link.href"
+          :target="link.target"
           class="hover:hover-text-util focus-visible:focus-outline-util text-sm text-base-content underline"
         >
           {{ link.text }}
         </NuxtLink>
 
         <!-- Separator -->
-        <template v-if="index !== links.length - 1"> -</template>
+        <template v-if="index !== props.links.length - 1">
+          <span class="mx-1.5">&middot;</span>
+        </template>
       </li>
     </ol>
 

diff --git a/components/shared/ContentSeparator.vue b/components/shared/ContentSeparator.vue
diff --git a/pages/friends.vue b/pages/friends.vue
@@ -13,42 +13,48 @@
       <template #text>Friends of the Rule 34 App, and other cool sites</template>
     </PageHeader>
 
-    <div class="mt-7 space-y-6">
-      <ContentContainer
-        :links="[
-          {
-            text: 'hentaiporn.app',
-            href: 'https://hentaiporn.app/?utm_source=r34.app&utm_medium=friends'
-          }
-        ]"
-        icon="bg-svg-star"
-        text="Sister site of the Rule 34 App, has the best high-quality Hentai Videos and Images."
-        title="HentaiPorn App"
-      />
+    <ol class="mx-2 mt-4 space-y-4">
+      <li>
+        <ContentContainer
+          :links="[
+            {
+              text: 'hentaiporn.app',
+              href: 'https://hentaiporn.app/?utm_source=r34.app&utm_medium=friends'
+            }
+          ]"
+          icon="bg-svg-star"
+          text="Sister site of the Rule 34 App, has the best high-quality hentai videos and images."
+          title="HentaiPorn App"
+        />
+      </li>
 
-      <ContentContainer
-        :links="[
-          {
-            text: 'kurosearch.com',
-            href: 'https://kurosearch.com/?utm_source=r34.app&utm_medium=friends'
-          }
-        ]"
-        icon="bg-svg-star"
-        text="Friend of the Rule 34 App, has a slick interface and a lot of content."
-        title="Kurosearch"
-      />
+      <li>
+        <ContentContainer
+          :links="[
+            {
+              text: 'kurosearch.com',
+              href: 'https://kurosearch.com/?utm_source=r34.app&utm_medium=friends'
+            }
+          ]"
+          icon="bg-svg-star"
+          text="Dear friend of the Rule 34 App, has a slick interface and a lot of content."
+          title="Kurosearch"
+        />
+      </li>
 
-      <ContentContainer
-        :links="[
-          {
-            text: 'theporndude.com',
-            href: 'https://theporndude.com'
-          }
-        ]"
-        icon="bg-svg-star"
-        text="The Porn Dude lists the world's best porn sites."
-        title="ThePornDude"
-      />
-    </div>
+      <li>
+        <ContentContainer
+          :links="[
+            {
+              text: 'theporndude.com',
+              href: 'https://theporndude.com'
+            }
+          ]"
+          icon="bg-svg-star"
+          text="The Porn Dude lists the world's best porn sites."
+          title="ThePornDude"
+        />
+      </li>
+    </ol>
   </main>
 </template>
diff --git a/pages/legal.vue b/pages/legal.vue
@@ -12,57 +12,65 @@
       <template #title>Legal</template>
     </PageHeader>
 
-    <div class="mt-7 space-y-6">
+    <ol class="mx-2 mt-4 space-y-4">
       <!-- Generated terms of service -->
-      <ContentContainer
-        :links="[
-          {
-            text: 'Terms of service',
-            href: '/terms-of-service'
-          }
-        ]"
-        text="You can find the Terms Of Service (TOS) in the next link"
-        title="Terms of service"
-      />
+      <li>
+        <ContentContainer
+          :links="[
+            {
+              text: 'Terms of service',
+              href: '/terms-of-service'
+            }
+          ]"
+          text="You can find the Terms Of Service (TOS) in the next link"
+          title="Terms of service"
+        />
+      </li>
 
       <!-- Generated terms of service -->
-      <ContentContainer
-        :links="[
-          {
-            text: 'Privacy policy',
-            href: '/privacy-policy'
-          }
-        ]"
-        text="You can find the Privacy policy in the next link"
-        title="Privacy policy"
-      />
+      <li>
+        <ContentContainer
+          :links="[
+            {
+              text: 'Privacy policy',
+              href: '/privacy-policy'
+            }
+          ]"
+          text="You can find the Privacy policy in the next link"
+          title="Privacy policy"
+        />
+      </li>
 
       <!-- Analytics -->
-      <ContentContainer
-        :links="[
-          {
-            text: 'Opt Out',
-            href: '/privacy-policy#opt-out'
-          }
-        ]"
-        text="Self hosted Matomo analytics are used, configured to NOT gather, or store, any personal info
+      <li>
+        <ContentContainer
+          :links="[
+            {
+              text: 'Opt Out',
+              href: '/privacy-policy#opt-out'
+            }
+          ]"
+          text="Self hosted Matomo analytics are used, configured to NOT gather, or store, any personal info
 
 				 Feel free to opt out on the next link"
-        title="Analytics"
-      />
+          title="Analytics"
+        />
+      </li>
 
       <!-- Contact -->
-      <ContentContainer
-        :links="[
-          {
-            text: 'contact@r34.app',
-            href: 'mailto:contact@r34.app'
-          }
-        ]"
-        text="Reach me to discuss questions, suggestions, requests, comments, or any other concern"
-        title="Contact"
-      />
-    </div>
+      <li>
+        <ContentContainer
+          :links="[
+            {
+              text: 'contact@r34.app',
+              href: 'mailto:contact@r34.app'
+            }
+          ]"
+          text="Reach me to discuss questions, suggestions, requests, comments, or any other concern"
+          title="Contact"
+        />
+      </li>
+    </ol>
 
     <PageHeader
       as="h2"
@@ -71,20 +79,22 @@
       <template #title>Miscelaneous</template>
     </PageHeader>
 
-    <div class="mt-7 space-y-6">
+    <ol class="mx-2 mt-4 space-y-4">
       <!-- Remove media -->
-      <ContentContainer
-        :links="[
-          {
-            text: 'Github repository',
-            href: 'https://github.com/AlejandroAkbal/Rule-34-App'
-          }
-        ]"
-        text="If you're the owner of a site where we get the media content and would like to cease these actions, please contact us with proof that you're the owner of that site and a message regarding the cease to actions
+      <li>
+        <ContentContainer
+          :links="[
+            {
+              text: 'Github repository',
+              href: 'https://github.com/AlejandroAkbal/Rule-34-App'
+            }
+          ]"
+          text="If you're the owner of a site where we get the media content and would like to cease these actions, please contact us with proof that you're the owner of that site and a message regarding the cease to actions
 
       Keep in mind that all the content we get is from public released APIs from the site itself"
-        title="Media content disclaimer"
-      />
-    </div>
+          title="Media content disclaimer"
+        />
+      </li>
+    </ol>
   </main>
 </template>
diff --git a/pages/premium/index.vue b/pages/premium/index.vue
@@ -21,7 +21,7 @@
   useSeoMeta({
     title: 'Premium',
 
-    description: 'Enhance your experience with the Premium subscription'
+    description: 'Enhance your experience'
   })
 
   definePageMeta({
@@ -62,7 +62,7 @@
 
             <p class="mx-auto mt-4 max-w-2xl text-center text-lg leading-8">
               <!-- TODO: Improve description -->
-              Enhance your experience with the Premium subscription
+              Enhance your experience
             </p>
           </div>
 

diff --git a/pages/settings.vue b/pages/settings.vue
@@ -40,8 +40,8 @@
     </PageHeader>
 
     <!-- Settings -->
-    <section class="mt-7 flex-auto">
-      <ol class="space-y-6">
+    <section class="mx-2 mt-4 flex-auto">
+      <ol class="space-y-4">
         <!-- navigationTouchGestures -->
         <li>
           <SettingSwitch v-model="userSettings.navigationTouchGestures">
@@ -76,7 +76,7 @@
     </section>
 
     <!-- Reset -->
-    <section class="mt-24 flex flex-row items-center justify-between gap-2">
+    <section class="mx-2 mt-24 flex flex-row items-center justify-between gap-2">
       <label for="reset">
         <span class="font-medium leading-8 text-base-content-highlight">
           Reset
@@ -96,7 +96,7 @@
       </button>
     </section>
 
-    <footer>
+    <footer class="mt-2">
       <span class="block text-center text-sm text-base-content-highlight"> v{{ appVersion }} </span>
     </footer>
   </main>