fix: post media and borders

Rule-34 · Dec 19, 2023 · 0fc3018 · 0fc3018
1 parent c6b3681
commit 0fc3018
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/components/pages/home/FeaturedTags.vue b/components/pages/home/FeaturedTags.vue
@@ -27,18 +27,20 @@
     >
       <NuxtLink
         :href="tag.path"
-        class="focus-visible:focus-outline-util hover:hover-text-util hover:hover-bg-util block overflow-hidden rounded-md border border-transparent"
+        class="focus-visible:focus-outline-util hover:hover-text-util hover:hover-bg-util block rounded-md"
       >
         <figure>
+          <!-- Fix(rounded borders): add the same rounded borders that the parent has -->
           <NuxtImg
             :alt="'Featured tag: ' + tag.name"
             :src="getRandomImage(tag.images)"
-            class="h-auto w-full"
+            class="h-auto w-full rounded-t-md"
             loading="lazy"
             style="aspect-ratio: 800/1200"
           />
 
-          <figcaption class="truncate px-2 py-1.5 text-center text-sm font-medium">
+          <!-- Fix(not taking available width because of truncate): use negative margin -->
+          <figcaption class="-mr-4 truncate px-1.5 py-1.5 text-center text-sm font-medium">
             {{ tag.name }}
           </figcaption>
         </figure>

diff --git a/components/pages/home/SimpleSearch.vue b/components/pages/home/SimpleSearch.vue
@@ -110,7 +110,7 @@
               class="relative cursor-default select-none py-2 pl-8"
             >
               <span :class="['block truncate', selected && 'font-semibold']">
-                Create “{{ customTagFromQuery.name }}” tag
+                Search “{{ customTagFromQuery.name }}” tag
               </span>
 
               <span

diff --git a/components/pages/posts/PromotedContent.vue b/components/pages/posts/PromotedContent.vue
@@ -87,7 +87,7 @@
 </script>
 
 <template>
-  <figure class="promo -mx-1 overflow-hidden rounded-md ring-1 ring-base-0/20">
+  <figure class="-mx-1 rounded-md border border-base-0/20">
     <!-- -->
 
     <!-- Media -->

diff --git a/components/pages/posts/post/Post.vue b/components/pages/posts/post/Post.vue
@@ -104,7 +104,7 @@
 </script>
 
 <template>
-  <figure class="overflow-hidden rounded-md border border-base-0/20">
+  <figure class="rounded-md border border-base-0/20">
     <PostMedia
       :mediaAlt="mediaFile.alt"
       :mediaPosterSrc="mediaFile.posterFile"

diff --git a/components/pages/posts/post/PostMedia.vue b/components/pages/posts/post/PostMedia.vue
@@ -144,13 +144,14 @@
 
     <!-- Image -->
     <template v-else-if="isImage">
+      <!-- Fix(rounded borders): add the same rounded borders that the parent has -->
       <NuxtImg
         :alt="mediaAlt"
         :class="[mediaHasLoaded ? 'opacity-100' : 'opacity-0']"
         :height="mediaSrcHeight"
         :src="localSrc"
         :width="mediaSrcWidth"
-        class="h-auto w-full transition-opacity duration-700 ease-in-out"
+        class="h-auto w-full rounded-t-md transition-opacity duration-700 ease-in-out"
         decoding="async"
         loading="lazy"
         referrerpolicy="no-referrer"
@@ -162,13 +163,14 @@
     <!-- Video -->
     <template v-else-if="isVideo">
       <!-- TODO: Add load animation -->
+      <!-- Fix(rounded borders): add the same rounded borders that the parent has -->
       <video
         v-intersection-observer="onIntersectionObserver"
         :height="mediaSrcHeight"
         :poster="mediaPosterSrc"
         :src="localSrc"
         :width="mediaSrcWidth"
-        class="h-auto w-full"
+        class="h-auto w-full rounded-t-md"
         controls
         loop
         playsinline