Merge pull request #87 from Jorgeural/feat/78

Retoques aspecto

Author: baumannzone

src/components/HomeCommunities/Index.vue

@@ -7,7 +7,9 @@
     </v-layout>
     <v-layout
       row
-      wrap>
+      wrap
+      justify-space-around
+    >
       <v-flex
         v-for="(community, index) in communities"
         :key="index"
@@ -26,30 +28,30 @@
 </template>
 
 <script>
-  import HomeCommunitiesCard from '~/components/HomeCommunities/HomeCommunitiesCard.vue'
-  import { mapGetters } from 'vuex'
+import HomeCommunitiesCard from "~/components/HomeCommunities/HomeCommunitiesCard.vue";
+import { mapGetters } from "vuex";
 
-
-  export default {
-    components: {
-      HomeCommunitiesCard,
-    },
-    data() {
-        return {
-        } 
-    },
-    computed: {
-      ...mapGetters( [ 'communities' ] ),
-    }
+export default {
+  components: {
+    HomeCommunitiesCard
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters(["communities"])
   }
+};
 </script>
 
 <style lang="stylus" scoped>
-  .home-communities
-    &__title
-      color #003ea5
-      margin 0 auto
-      font-size 40px
-      margin-bottom 40px
+.home-communities {
+  &__title {
+    color: #003ea5;
+    margin: 0 auto;
+    font-size: 40px;
+    margin-bottom: 40px;
+  }
+}
 </style>
 

src/components/HomeFeatures/HomeFeaturesCard.vue

@@ -31,6 +31,7 @@ export default {
 
 <style lang="stylus" scoped>
 .feature-card
+  height 95%
   background-color rgba(#fff, 0.75)
   margin 10px 20px
   padding 25px

src/components/HomeFeatures/Index.vue

@@ -6,16 +6,16 @@
       <h2 class="home-features__title">Open Source Weekends</h2>
     </v-layout>
     <v-layout
-      fill-height
       row
-      wrap>
+      wrap
+      justify-space-around
+    >
       <v-flex
         v-for="(feature, index) in features"
         :key="index"
-        fill-height
         sm12
         md4
-        class="text-xs-center">
+        class="home-features__wrapper text-xs-center">
         <home-features-card
           :title="feature.title"
           :icon="feature.icon"
@@ -49,4 +49,8 @@ import features from '../../db/features.json'
     font-size 40px
     margin-bottom 40px
 
+    &__wrapper{
+      height auto
+    }
+
 </style>

src/components/HomeGuilds/HomeGuildsCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="guilds-card">
-    <v-card>
+    <v-card class="guilds-card__wrapper">
       <v-img
         :src="img"
         aspect-ratio="2.75"
@@ -14,9 +14,8 @@
         </div>
       </v-card-title>
 
-      <v-card-actions>
+      <v-card-actions v-if="github">
         <v-btn
-          v-if="github"
           :href="github"
           title="github"
           target="_blank"
@@ -57,12 +56,16 @@ export default {
 
 <style lang="stylus" scoped>
 .guilds-card
+  height 95%
   background-color rgba(#fff, 0.75)
   margin 10px 20px
   border-radius 3px
   overflow hidden
   box-shadow 0 15px 40px rgba(#000, .15)
 
+  &__wrapper 
+    height 100%
+
   &__img
     min-height 200px
 

src/components/HomeGuilds/Index.vue

@@ -25,71 +25,76 @@
         v-for="(guild, index) in getGuilds"
         :key="index"
         sm12
-        md4>
+        md4
+        class="home-guilds__wrapper">
         <home-guilds-card
           :title="guild.name"
           :description="guild.description"
           :img="guild.avatar"
-          :github="guild.github"
-          class="home-guilds__card" />
+          :github="guild.github"/>
       </v-flex>
     </v-layout>
   </v-container>
 </template>
 
 
 <script>
-import HomeGuildsCard from '~/components/HomeGuilds/HomeGuildsCard.vue'
-import { mapGetters } from 'vuex'
+import HomeGuildsCard from "~/components/HomeGuilds/HomeGuildsCard.vue";
+import { mapGetters } from "vuex";
 
+export default {
+  components: {
+    HomeGuildsCard
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters(["allGuilds"]),
 
-  export default {
-    components: {
-      HomeGuildsCard
-    },
-    data () {
-      return {
+    getGuilds() {
+      let guilds = [];
 
+      for (let x = 0; x <= 2; x++) {
+        let i = Math.random() * (0 - (this.allGuilds.length - 1));
+        i = Math.round(i);
+        i = Math.abs(i);
+        guilds.push(this.allGuilds[i]);
       }
-    },
-    computed: {
-      ...mapGetters( [ 'allGuilds' ] ),
-
-      getGuilds(){
-        let guilds= []
-
-        for(let x=0; x<= 2;x++){
-          let i = Math.random() * (0 - (this.allGuilds.length -1))
-          i = Math.round(i)
-          i = Math.abs(i)
-          guilds.push(this.allGuilds[i])
-        }
-        return guilds
-      }
-    },
+      return guilds;
+    }
   }
-
+};
 </script>
 
 <style lang="stylus" scoped>
-.home-guilds
-  &__title-row
-    padding-left 20px
-    margin-bottom 40px
-    color #f7f7f7
+.home-guilds {
+  &__title-row {
+    padding-left: 20px;
+    margin-bottom: 40px;
+    color: #f7f7f7;
+  }
 
-  &__icon-wrapper
-    display flex
-    align-items center
-    justify-content center
+  &__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-  &__icon
-    font-size 72px
+  &__icon {
+    font-size: 72px;
+  }
 
-  &__title-wrapper
-    padding 0 15px
+  &__title-wrapper {
+    padding: 0 15px;
+  }
 
-  &__title
-    font-size 40px
+  &__title {
+    font-size: 40px;
+  }
 
+  &__wrapper {
+    height: auto;
+  }
+}
 </style>

src/components/HomeSponsors/Index.vue

@@ -6,7 +6,9 @@
     </div>
     <v-layout
       row
-      wrap>
+      wrap
+      justify-space-around
+    >
       <v-flex
         v-for="(sponsor, index) in sponsors"
         :key="index"