feat(frontend): wip: preliminary clean of card display

packages/frontend/src/components/ListItemStream.vue

@@ -1,6 +1,9 @@
 <template>
-  <v-card class="pa-5 mb-3" style="transition: all 0.2s" flat>
+  <v-card class="pa-5 " style="transition: all 0.2s" >
     <v-row>
+      <v-col cols="12" sm="8" class="align-self-center">
+        <p>Hello</p>
+      </v-col>
       <v-col cols="12" sm="8" class="align-self-center">
         <div class="subtitle-1 stream-link">
           <router-link :to="'/streams/' + stream.id">

packages/frontend/src/components/Renderer.vue

@@ -18,9 +18,9 @@
     >
       <v-fade-transition>
         <div v-show="!hasLoadedModel" class="overlay cover-all">
-          <v-fade-transition>
+          <transition name="fade">
             <div ref="cover" class="overlay-abs bg-img" v-show="hasImg"></div>
-          </v-fade-transition>
+          </transition>
           <div class="overlay-abs radial-bg"></div>
           <div class="overlay-abs" style="pointer-events: none">
             <v-btn

packages/frontend/src/views/Frontend.vue

@@ -181,7 +181,7 @@ export default {
   methods: {}
 }
 </script>
-<style scoped>
+<style>
 .logo {
   font-family: Space Grotesk, sans-serif;
   text-transform: none;
@@ -189,4 +189,11 @@ export default {
   font-weight: 500;
   font-size: 1rem;
 }
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
 </style>

packages/frontend/src/views/Streams.vue

@@ -3,11 +3,6 @@
     <v-row>
       <v-col cols="12" sm="12" md="4" lg="3" xl="2">
         <v-card rounded="lg" class="mt-5 mx-5" elevation="0" color="background">
-          <!-- <v-card-title>Streams</v-card-title> -->
-          <!-- <v-card-text>
-            You have {{ streams.totalCount }} stream{{ streams.totalCount == 1 ? `` : `s` }}
-            in total.
-          </v-card-text> -->
           <v-card-actions>
             <v-btn large rounded color="primary" block @click="newStreamDialog = true">
               <v-icon small class="mr-1">mdi-plus-box</v-icon>
@@ -83,7 +78,7 @@
           <server-invite-dialog ref="serverInviteDialog" />
         </v-card>
       </v-col>
-      <v-col cols="12" sm="12" md="8" lg="9" xl="8">
+      <v-col cols="12" sm="12" md="8" lg="9" xl="10">
         <div v-if="!$apollo.loading && streams.totalCount === 0" class="pa-4">
           <no-data-placeholder
             :message="`Hello there! It seems like you don't have any streams yet. Here's a handful of useful links to help you get started:`"
@@ -106,19 +101,19 @@
           <div v-if="$apollo.loading" class="mx-5">
             <v-skeleton-loader type="card, article, article"></v-skeleton-loader>
           </div>
-          <v-card-text v-if="streams && streams.items" class="mt-0 pt-3">
-            <div v-for="(stream, i) in streams.items" :key="i">
-              <list-item-stream :stream="stream"></list-item-stream>
-            </div>
-            <infinite-loading
-              v-if="streams.items.length < streams.totalCount"
-              @infinite="infiniteHandler"
-            >
-              <div slot="no-more">These are all your streams!</div>
-              <div slot="no-results">There are no streams to load</div>
-            </infinite-loading>
-          </v-card-text>
         </v-card>
+        <v-row v-if="streams && streams.items">
+          <v-col cols="12" sm="12" md="12" lg="6" xl="4" v-for="(stream, i) in streams.items" :key="i">
+            <list-item-stream :stream="stream"></list-item-stream>
+          </v-col>
+          <infinite-loading
+            v-if="streams.items.length < streams.totalCount"
+            @infinite="infiniteHandler"
+          >
+            <div slot="no-more">These are all your streams!</div>
+            <div slot="no-results">There are no streams to load</div>
+          </infinite-loading>
+        </v-row>
       </v-col>
     </v-row>
   </v-container>