add tags to previews and headlines

danesjenovdan · Apr 30, 2020 · 0d289fe · 0d289fe
1 parent 204bf01
commit 0d289fe
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/src/components/NgArticleHeadline.vue b/src/components/NgArticleHeadline.vue
@@ -22,6 +22,9 @@
         ></div>
       </div>
       <div class="article-content">
+        <div class="tags">
+          <div class="tag">FACT REPORTING AND ANALISYS</div>
+        </div>
         <h4 class="article-title">Lorem ipsum dolor sit amet</h4>
         <router-link class="read-more" :to="`/event/${articleId}`">
           Read more
@@ -104,6 +107,19 @@ export default {
     .article-content {
       margin-left: 1rem;
 
+      .tags {
+        display: flex;
+        margin-bottom: 0.25rem;
+
+        .tag {
+          display: inline-block;
+          font-size: 0.65rem;
+          background-color: #07f;
+          color: #fff;
+          padding: 0.25rem 0.5rem;
+        }
+      }
+
       .article-title {
         display: inline;
         margin: 0;

diff --git a/src/components/NgArticlePreview.vue b/src/components/NgArticlePreview.vue
@@ -21,6 +21,9 @@
           <!-- TODO: replace (>) with icon -->
         </router-link>
       </div>
+      <div v-if="showTags" class="tags">
+        <div class="tag">FACT REPORTING AND ANALISYS</div>
+      </div>
       <div class="article-content">
         <h4 class="article-title">Lorem ipsum dolor sit amet</h4>
         <div class="article-description">
@@ -49,6 +52,10 @@ export default {
       type: String,
       default: '',
     },
+    showTags: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
@@ -110,6 +117,18 @@ export default {
     }
   }
 
+  .tags {
+    margin: 0.75rem 0 0.5rem;
+
+    .tag {
+      display: inline-block;
+      font-size: 0.75rem;
+      background-color: #07f;
+      color: #fff;
+      padding: 0.25rem 0.5rem;
+    }
+  }
+
   .article-info {
     padding: 0 0.65rem 0.65rem;
 

diff --git a/src/components/NgListing.vue b/src/components/NgListing.vue
@@ -16,7 +16,12 @@
             </div>
             <div class="event-articles">
               <div class="event-article-container" v-for="n in 3" :key="n">
-                <ng-article-preview v-if="i === 0" :article-id="event.id" :image="event.image" />
+                <ng-article-preview
+                  v-if="i === 0"
+                  :article-id="event.id"
+                  :image="event.image"
+                  show-tags
+                />
                 <ng-article-headline v-else :article-id="event.id" :image="event.image" />
               </div>
             </div>