feat: new feature and pin effect

Tim-Saijun · Aug 18, 2023 · c4b962f · c4b962f
1 parent 38539c6
commit c4b962f
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 42 deletions.
diff --git a/src/components/ArticleCard/src/Article.vue b/src/components/ArticleCard/src/Article.vue
@@ -1,33 +1,54 @@
 <template>
   <li class="article-container">
-    <span v-if="post.pinned" class="article-tag">
-      <b>
-        <SvgIcon icon-class="pin" />
-        {{ t('settings.pinned') }}
-      </b>
-    </span>
-    <span v-else-if="post.feature" class="article-tag">
-      <b>
-        <SvgIcon icon-class="hot" />
-        {{ t('settings.featured') }}
-      </b>
-    </span>
     <div class="article">
+      <!-- <span  >
+
+      </span>
+      <span v-else-if="post.feature" class="article-tag">
+        <b>
+          <SvgIcon icon-class="hot" />
+          {{ t('settings.featured') }}
+        </b>
+      </span> -->
       <div class="article-thumbnail">
         <img v-if="post.cover" v-lazy="post.cover" alt="" />
         <img v-else src="@/assets/default-cover.jpg" />
         <span class="thumbnail-screen" :style="gradientBackground" />
       </div>
       <div class="article-content">
         <span>
+          <b v-if="post.pinned" class="article-tag">
+            <span>
+              <SvgIcon
+                icon-class="hot"
+                width="1.1rem"
+                height="1.1rem"
+                class="-mb-0.5 mr-1"
+              />
+              <span>{{ t('settings.pinned') }}</span>
+            </span>
+          </b>
+          <b v-if="post.feature" class="article-tag">
+            <span>
+              <SvgIcon
+                icon-class="hot"
+                width="1.1rem"
+                height="1.1rem"
+                class="-mb-0.5"
+              />
+              <span>{{ t('settings.featured') }}</span>
+            </span>
+          </b>
           <b v-if="post.categories && post.categories.length > 0">
             {{ post.categories[0].name }}
           </b>
           <b v-else-if="post.categories && post.categories.length <= 0">
             {{ t('settings.default-category') }}
           </b>
           <ob-skeleton v-else tag="b" height="20px" width="35px" />
+        </span>
 
+        <span class="flex flex-wrap">
           <ul v-if="post.tags && post.tags.length > 0">
             <li v-for="tag in post.min_tags" :key="tag.slug">
               <em># </em><span>{{ tag.name }}</span>

diff --git a/src/components/ArticleCard/src/HorizontalArticle.vue b/src/components/ArticleCard/src/HorizontalArticle.vue
@@ -1,17 +1,5 @@
 <template>
   <div class="article-container">
-    <span v-if="post.pinned" class="article-tag">
-      <b>
-        <SvgIcon icon-class="pin" />
-        {{ t('settings.pinned') }}
-      </b>
-    </span>
-    <span v-else-if="post.feature" class="article-tag">
-      <b>
-        <SvgIcon icon-class="hot" />
-        {{ t('settings.featured') }}
-      </b>
-    </span>
     <div class="feature-article">
       <div class="feature-thumbnail">
         <img v-if="post.cover" class="ob-hz-thumbnail" v-lazy="post.cover" />
@@ -20,14 +8,38 @@
       </div>
       <div class="feature-content">
         <span>
+          <b v-if="post.pinned" class="article-tag">
+            <span>
+              <SvgIcon
+                icon-class="hot"
+                width="1.1rem"
+                height="1.1rem"
+                class="-mb-0.5 mr-1"
+              />
+              <span>{{ t('settings.pinned') }}</span>
+            </span>
+          </b>
+          <b v-if="post.feature" class="article-tag">
+            <span>
+              <SvgIcon
+                icon-class="hot"
+                width="1.1rem"
+                height="1.1rem"
+                class="-mb-0.5"
+              />
+              <span>{{ t('settings.featured') }}</span>
+            </span>
+          </b>
           <b v-if="post.categories && post.categories.length > 0">
             {{ post.categories[0].name }}
           </b>
           <b v-else-if="post.categories && post.categories.length <= 0">
             {{ t('settings.default-category') }}
           </b>
           <ob-skeleton v-else tag="b" height="20px" width="35px" />
+        </span>
 
+        <span class="flex flex-wrap">
           <ul>
             <template v-if="post.tags && post.tags.length > 0">
               <li

diff --git a/src/styles/components/article.scss b/src/styles/components/article.scss
@@ -1,27 +1,15 @@
 .article-container {
-  @apply relative h-full rounded-2xl list-none;
+  @apply relative h-full rounded-2xl list-none transform-gpu;
   &:hover {
-    .article-tag {
-      transform: translateY(-60%);
+    .article-content span b.article-tag span span,
+    .feature-content span b.article-tag span span{
+      @apply opacity-100 mr-0;
     }
     .article,
     .feature-article {
       transform: scale(1.015);
     }
   }
-  .article-tag {
-    @apply absolute flex items-start left-6 -top-1 pt-1 pb-3 px-1 rounded-md text-xs text-white font-bold shadow-lg uppercase transform;
-    background: var(--main-gradient);
-    > b {
-      @apply py-1 px-3 rounded text-white stroke-current;
-      width: 100%;
-      height: 100%;
-      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
-      background: rgba(0, 0, 0, 0.5);
-    }
-    z-index: 0;
-    transition: transform 200ms ease-in-out;
-  }
 }
 
 .article {
@@ -55,9 +43,26 @@
       filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.1));
       b {
         @apply text-ob text-xs uppercase;
+        &.article-tag {
+          @apply relative py-0.5 px-1.5 text-ob-bright mr-2;
+          span {
+            @apply relative z-10 text-xs;
+            position: relative;
+            z-index: 10;
+            span {
+              @apply -mr-[26px] opacity-0;
+              transition: 0.3s all ease-in-out;
+            }
+          }
+          &::after {
+            @apply absolute top-0 left-0 w-full h-full z-0 opacity-60 rounded-md;
+            content: '';
+            background: var(--main-gradient);
+          }
+        }
       }
       ul {
-        @apply inline-flex pl-2;
+        @apply inline-flex pr-2;
         font-size: 0.65rem;
         li {
           em {
@@ -111,9 +116,29 @@
     @apply flex flex-col relative px-6 pb-6 lg:p-12 z-40 row-span-2 lg:row-auto;
     b {
       @apply text-ob uppercase;
+      &.article-tag {
+        @apply relative py-0.5 px-1.5 text-ob-bright mr-3;
+
+        span {
+          @apply relative z-10 text-xs;
+          position: relative;
+          z-index: 10;
+
+          span {
+            @apply -mr-[26px] opacity-0;
+            transition: 0.3s all ease-in-out;
+          }
+        }
+
+        &::after {
+          @apply absolute top-0 left-0 w-full h-full z-0 opacity-60 rounded-md;
+          content: '';
+          background: var(--main-gradient);
+        }
+      }
     }
     ul {
-      @apply inline-flex pl-4;
+      @apply inline-flex pr-4;
       li {
         em {
           @apply not-italic opacity-50;