link button padding

fernandolievano · Apr 8, 2019 · 6582595 · 6582595
1 parent f4595b3
commit 6582595
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/components/GifCard.vue b/components/GifCard.vue
@@ -22,23 +22,23 @@
         {{ tag }}
       </span>
     </p>
-    <footer class="card-footer">
-      <div class="card-footer-item">
-        <button class="button is-medium button-gradient" @click="copyLink(gif.media[0].gif.url)">
+    <footer class="card-footer columns is-multiline is-mobile is-vcentered">
+      <div class="card-footer-item column is-3">
+        <vue-goodshare-facebook has_icon :page_url="gif.media[0].gif.url" class="button is-small" />
+      </div>
+      <div class="card-footer-item column is-3">
+        <vue-goodshare-twitter has_icon :page_url="gif.media[0].gif.url" class="button is-small" />
+      </div>
+      <div class="card-footer-item column is-3">
+        <vue-goodshare-whatsapp has_icon :page_url="gif.media[0].gif.url" class="button is-small" />
+      </div>
+      <div class="card-footer-item column is-3">
+        <button class="button is-small button-gradient" @click="copyLink(gif.media[0].gif.url)">
           <div class="icon is-small">
             <i class="fas fa-link" />
           </div>
         </button>
       </div>
-      <!-- <div class="card-footer-item">
-        <vue-goodshare-facebook has_icon :page_url="gif.media[0].gif.url" class="button is-medium" />
-      </div> -->
-      <div class="card-footer-item">
-        <vue-goodshare-twitter has_icon :page_url="gif.media[0].gif.url" class="button is-medium" />
-      </div>
-      <!-- <div class="card-footer-item">
-        <vue-goodshare-whatsapp has_icon :page_url="gif.media[0].gif.url" class="button is-medium" />
-      </div> -->
     </footer>
   </div>
 </template>
@@ -157,6 +157,9 @@ img[lazy="error"] {
 .button-gradient {
   background: linear-gradient(to bottom, #633974, #1a5276);
   color: #d6dbdf;
+  padding-left: 1.15em;
+  padding-right: 1.15em;
+  text-align: center;
 }
 
 .gif-overlay {

diff --git a/pages/tendencias/gifs.vue b/pages/tendencias/gifs.vue
@@ -2,19 +2,19 @@
 /* eslint-disable no-undef */
 <template>
   <section class="section">
-    <div class="container">
-      <div class="columns">
+    <article class="container">
+      <div class="columns is-multiline">
         <div class="column is-full">
           <h1 class="is-size-1-tablet is-size-2-mobile">
             Los gifs más populares del momento
           </h1>
         </div>
       </div>
-      <div class="columns is-multiline">
+      <div class="columns is-multiline is-centered">
         <div
           v-for="gif in gifs" 
           :key="gif.id"
-          class="column is-4-tablet is-8-mobile is-offset-2-mobile"
+          class="column is-4-tablet"
         >
           <GifCard
             :gif="gif"
@@ -23,8 +23,7 @@
           />
         </div>
       </div>
-    </div>
-    <!-- <Pagination v-if="next" page="gifs" :next-gifs="next" /> -->
+    </article>
   </section>
 </template>