fix: overflow on card tags

geekiam · Mar 3, 2021 · 55df016 · 55df016
1 parent 5bc7236
commit 55df016
Show file tree

Hide file tree

Showing 22 changed files with 121 additions and 86 deletions.
diff --git a/components/feed/post/card.vue b/components/feed/post/card.vue
@@ -16,7 +16,7 @@
           <div
             class="flex items-center justify-start mt-4 top-auto text-green-700"
           >
-            <tags :tags="post.tags" />
+            <div class="flex-initial"><tags :tags="post.tags" /></div>
           </div>
         </div>
       </div>

diff --git a/components/feed/post/microbes/tags.vue b/components/feed/post/microbes/tags.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="mt-4 mb-4 px-2">
-    <nuxt-link
-      v-for="tag in tags"
-      :key="tag.id"
-      :to="{ name: 'tags-slug', params: { slug: tag } }"
-      class="mr-2 lowercase"
-      v-html="`#${tag}`"
-    >
-    </nuxt-link>
+    <ul class="grid grid-cols-3 gap-1">
+      <li v-for="tag in tags" :key="tag.id" class="col-span-1 text-sm">
+        <nuxt-link
+          :to="{ name: 'tags-slug', params: { slug: tag } }"
+          class="lowercase"
+          v-html="`#${tag}`"
+        >
+        </nuxt-link>
+      </li>
+    </ul>
   </div>
 </template>
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@tailwindcss/forms": "^0.2.1",
     "@tailwindcss/typography": "^0.2.0",
     "core-js": "^3.8.3",
-    "netlify-cli": "^3.8.5",
+    "netlify-cli": "^3.10.3",
     "nuxt": "^2.14.12",
     "prism-themes": "^1.5.0",
     "reading-time": "^1.3.0"

diff --git a/pages/_slug.vue b/pages/_slug.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-1 my-1 px-1 py-1">
+  <div class="mx-1 my-1 px-2 py-2">
     <post-title :post="article" />
     <div class="prose">
       <nuxt-content class="text-justify" :document="article" />

diff --git a/static/media/images/javascript/brew-formulae.png b/static/media/images/javascript/brew-formulae.png
diff --git a/static/media/images/javascript/fauna-create-collection.png b/static/media/images/javascript/fauna-create-collection.png
diff --git a/static/media/images/javascript/fauna-create-schema.png b/static/media/images/javascript/fauna-create-schema.png
diff --git a/static/media/images/javascript/faunadb-tutorial.png b/static/media/images/javascript/faunadb-tutorial.png
diff --git a/static/media/images/javascript/netlify-deploy-prod.png b/static/media/images/javascript/netlify-deploy-prod.png
diff --git a/static/media/images/javascript/netlify-deploy-test-browser.png b/static/media/images/javascript/netlify-deploy-test-browser.png
diff --git a/static/media/images/javascript/netlify-deploy-test.png b/static/media/images/javascript/netlify-deploy-test.png
diff --git a/static/media/images/javascript/netlify-deploy.png b/static/media/images/javascript/netlify-deploy.png
diff --git a/static/media/images/javascript/netlify-dev.png b/static/media/images/javascript/netlify-dev.png
diff --git a/static/media/images/javascript/netlify-functions-dev.png b/static/media/images/javascript/netlify-functions-dev.png
diff --git a/static/media/images/javascript/netlify-production-function.png b/static/media/images/javascript/netlify-production-function.png
diff --git a/static/media/images/javascript/nodejs.png b/static/media/images/javascript/nodejs.png
diff --git a/static/media/images/javascript/rest-api.png b/static/media/images/javascript/rest-api.png
diff --git a/static/media/images/javascript/trustless-auth-terminal.png b/static/media/images/javascript/trustless-auth-terminal.png
diff --git a/static/media/images/javascript/vue-registration-form-dev-tools.png b/static/media/images/javascript/vue-registration-form-dev-tools.png
diff --git a/static/media/images/javascript/vue-registration-form.png b/static/media/images/javascript/vue-registration-form.png
diff --git a/static/media/images/javascript/yarn-install.png b/static/media/images/javascript/yarn-install.png