From ff44fdb12c5bf63e3362f75ea1164132f84d5ab3 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 30 Mar 2020 18:11:19 +0200
Subject: [PATCH] refactor: favor CSS over syleguide components

---
 .../generic/SearchPost/SearchPost.vue         | 98 ++++++++-----------
 1 file changed, 43 insertions(+), 55 deletions(-)

diff --git a/webapp/components/generic/SearchPost/SearchPost.vue b/webapp/components/generic/SearchPost/SearchPost.vue
index 3da6056ba..23d7e7a69 100644
--- a/webapp/components/generic/SearchPost/SearchPost.vue
+++ b/webapp/components/generic/SearchPost/SearchPost.vue
@@ -1,31 +1,19 @@
 <template>
-  <ds-flex class="search-post">
-    <ds-flex-item class="search-option-label">
-      <ds-text>{{ option.title | truncate(70) }}</ds-text>
-    </ds-flex-item>
-    <ds-flex-item class="search-option-meta" width="280px">
-      <ds-flex>
-        <ds-flex-item>
-          <ds-text size="small" color="softer" class="search-post-meta">
-            <span class="comments-count">
-              {{ option.commentsCount }}
-              <base-icon name="comments" />
-            </span>
-            <span class="shouted-count">
-              {{ option.shoutedCount }}
-              <base-icon name="bullhorn" />
-            </span>
-          </ds-text>
-        </ds-flex-item>
-        <ds-flex-item>
-          <ds-text size="small" color="softer" align="right" class="search-post-author">
-            {{ option.author.name | truncate(32) }} -
-            {{ option.createdAt | dateTime('dd.MM.yyyy') }}
-          </ds-text>
-        </ds-flex-item>
-      </ds-flex>
-    </ds-flex-item>
-  </ds-flex>
+  <section class="search-post">
+    <p class="label">{{ option.title | truncate(70) }}</p>
+    <span class="metadata">
+      <span class="counts">
+        {{ option.commentsCount }}
+        <base-icon name="comments" />
+        {{ option.shoutedCount }}
+        <base-icon name="bullhorn" />
+      </span>
+      <span>
+        {{ option.author.name | truncate(32) }} -
+        {{ option.createdAt | dateTime('dd.MM.yyyy') }}
+      </span>
+    </span>
+  </section>
 </template>
 <script>
 export default {
@@ -37,35 +25,35 @@ export default {
 </script>
 <style lang="scss">
 .search-post {
-  width: 100%;
-}
-.search-option-label {
-  align-self: center;
-  padding-left: $space-x-small;
-}
-.search-option-meta {
-  align-self: center;
-  .ds-flex {
+  display: flex;
+
+  > .label {
+    flex-grow: 1;
+    padding-left: $space-x-small;
+    font-size: $font-size-base;
+  }
+
+  > .metadata {
+    display: flex;
     flex-direction: column;
+    white-space: nowrap;
+    padding-top: $space-xxx-small;
+    color: $text-color-softer;
+    font-size: $font-size-small;
+
+    > .counts {
+      display: flex;
+      flex-grow: 1;
+      justify-content: flex-end;
+      font-weight: $font-weight-bold;
+      > .base-icon {
+        margin-left: $space-xxx-small;
+      }
+
+      > .base-icon:first-child {
+        margin-right: $font-size-small;
+      }
+    }
   }
 }
-.search-post-meta {
-  float: right;
-  padding-top: 2px;
-  white-space: nowrap;
-  word-wrap: none;
-  .base-icon {
-    vertical-align: sub;
-  }
-}
-.shouted-count {
-  width: 36px;
-  display: inline-block;
-  text-align: right;
-  font-weight: $font-weight-bold;
-}
-.comments-count {
-  text-align: right;
-  font-weight: $font-weight-bold;
-}
 </style>