YoLo making this thing actually usable.

src/components/AppCards.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <template>
+            <v-simple-table>
+                <thead>
+                <tr>
+                    <th class="text-left" style="width:30px;">Icon</th>
+                    <th class="text-left">Name</th>
+                    <th class="text-left">Description</th>
+                </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="app in apps" :key="app.name" @click="$emit('appClick', app)" style="cursor: pointer;">
+                        <td style="width:30px;">
+                            <img :src="getImageUrl(app.id)" style="max-width: 30px;">
+                        </td>
+                        <td>{{ app.name }}</td>
+                        <td>{{ app.description }}</td>
+                    </tr>
+                </tbody>
+            </v-simple-table>
+        </template>
+    </div>
+</template>
+
+<script>
+    import ServerService from '../services/Server'
+    import UserService from '../services/User'
+    import AppService from '../services/Apps'
+
+    export default {
+        data () {
+            return {
+                apps: []
+            }
+        },
+        props: [
+            'apps'
+        ],
+        methods: {
+            'getImageUrl' : function (id) {
+                return AppService.getAppImage(id);
+            },
+        },
+        mounted: function() {
+            console.log("APPCARDSW");
+        }
+    }
+</script>

src/components/Login.vue

@@ -1,6 +1,5 @@
 <template>
     <div>
-        <h1>Login</h1>
         <v-alert
                 :value="true"
                 type="error"

src/views/AppDetails.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="">
+    <div style="margin-top: 50px;">
 
         <v-container grid-list-md pa-10>
             <v-layout row wrap>

src/views/Dashboard.vue

@@ -1,59 +1,23 @@
 <template>
-  <div style="">
+  <div style="margin-top:50px;">
     <v-container grid-list-md pa-10 >
       <v-layout row wrap>
         <v-flex md12>
           <h1>Dashboard</h1>
           <br><br>
           <h3>Hello {{$store.getters.getMe["username"]}}, login to</h3>
-
+          <AppCards :apps="apps" v-on:appClick="navigateToApp"></AppCards>
-
-          <v-layout row wrap>
-            <v-flex md4 xs12 text-xs-center v-for="(item, index) in apps">
-              <v-card>
-                <v-layout>
-                  <v-flex xs5>
-                    <v-img
-                            :src="getImageUrl(item.id)"
-                            height="125px"
-                            contain
-                    ></v-img>
         </v-flex>
-                  <v-flex xs7>
-                    <v-card-title primary-title>
-                      <div>
-                        <div class="headline">{{ item.name }}</div>
-                        <div>{{ item.description }}</div>
-                      </div>
-                    </v-card-title>
-                  </v-flex>
-                </v-layout>
-                <v-divider light></v-divider>
-                <v-card-actions class="pa-3">
-
-                  <v-spacer></v-spacer>
-                  <v-btn icon>
-                    <v-icon @click="navigateToApp(item)">input</v-icon>
-                  </v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-flex>
-          </v-layout>
-        </v-flex>
-
-
       </v-layout>
     </v-container>
-
-
   </div>
-
 </template>
 
 <script>
   import ServerService from '../services/Server'
   import UserService from '../services/User'
   import AppService from '../services/Apps'
+  import AppCardsComponente from '../components/AppCards'
 
   export default {
     data () {
@@ -63,6 +27,9 @@
         apps: []
       }
     },
+    components: {
+      "AppCards": AppCardsComponente
+    },
     methods: {
       'getImageUrl' : function (id) {
         return AppService.getAppImage(id);
@@ -85,13 +52,13 @@
 </script>
 
 <style>
-.header {
+  .header {
     background-image: url('~@/assets/manhattan-407703_1920.jpg');
     background-repeat: no-repeat;
     margin-top: -100px;
     height: 30vh;
     text-align: center;
-}
+  }
     .header h1{
       padding-top: 200px;
       font-size: 56px !important;
@@ -102,21 +69,21 @@
     .header h1 .small{
       font-weight: 300 !important;
     }
-.header h2{
+  .header h2{
     padding-top: 30px;
     font-size: 34px !important;
     font-weight: 300;
     line-height: 32px !important;
     letter-spacing: normal !important;
-}
+  }
-h1{
+  h1{
     font-weight: 300;
     line-height: 32px !important;
     letter-spacing: normal !important;
-}
+  }
-h2{
+  h2{
     font-weight: 300;
     line-height: 32px !important;
     letter-spacing: normal !important;
-}
+  }
 </style>

src/views/ListApps.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="">
+    <div style="margin-top: 50px;">
         <v-container grid-list-md pa-10>
             <v-layout row wrap>
                 <v-flex md12>
@@ -9,37 +9,7 @@
                     <p>Here you can Administrate your apps</p>
                 </v-flex>
             </v-layout>
-            <v-layout row wrap>
+            <AppCards :apps="apps" v-on:appClick="navigateToAppSettingPage"></AppCards>
-                <v-flex md4 xs12 text-xs-center v-for="(item, index) in apps">
-                <v-card>
-                    <v-layout>
-                        <v-flex xs5>
-                            <v-img
-                                    :src="getImageUrl(item.id)"
-                                    height="125px"
-                                    contain
-                            ></v-img>
-                        </v-flex>
-                        <v-flex xs7>
-                            <v-card-title primary-title>
-                                <div>
-                                    <div class="headline">{{ item.name }}</div>
-                                    <div>{{ item.description }}</div>
-                                </div>
-                            </v-card-title>
-                        </v-flex>
-                    </v-layout>
-                    <v-divider light></v-divider>
-                    <v-card-actions class="pa-3">
-
-                        <v-spacer></v-spacer>
-                        <v-btn icon>
-                            <v-icon @click="$router.push({name: 'appDetails', params: {id: item.id}})">settings</v-icon>
-                        </v-btn>
-                    </v-card-actions>
-                </v-card>
-            </v-flex>
-            </v-layout>
         </v-container>
 
 
@@ -49,15 +19,23 @@
 
 <script>
     import AppService from '../services/Apps'
+    import AppCardsComponente from '../components/AppCards'
+
     export default {
         data () {
             return {
-                apps: []
+                apps: [],
             }
         },
+        components: {
+            "AppCards": AppCardsComponente
+        },
         methods: {
             getImageUrl: function(id) {
                 return AppService.getAppImage(id); // "https://account.keks.cloud/gui/apps/"+id+"/icon";
+            },
+            navigateToAppSettingPage: function(app) {
+                this.$router.push({name: 'appDetails', params: {id: app.id}});
             }
         },
         mounted: function() {

src/views/Login.vue

@@ -1,18 +1,35 @@
 <template>
-  <div style="">
+  <div style="min-height: 100pc;" class="bg">
   <div class="header2">
   </div>
     <v-container grid-list-md>
       <v-layout row wrap>
         <v-flex md4></v-flex>
-        <v-flex md4 v-if="!$store.state.loggedIn">
+        <v-flex md4 v-if="!$store.state.loggedIn" style="">
-          <Login></Login>
+          <template>
+            <v-card
+                    class="mx-auto"
+            >
+              <v-card-title>Login</v-card-title>
+              <v-card-text><Login></Login></v-card-text>
+            </v-card>
+          </template>
+
         </v-flex>
         <v-flex md4 v-if="$store.state.loggedIn">
-          <p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p>
+          <template>
+            <v-card
+                    class="mx-auto"
+            >
+              <v-card-title>Login</v-card-title>
+              <v-card-text><p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p></v-card-text>
+            </v-card>
+          </template>
+
         </v-flex>
 
 
+
       </v-layout>
     </v-container>
 
@@ -69,6 +86,9 @@
 </script>
 
 <style>
+  .bg {
+    background-image: url('~@/assets/texture-1485529_1920.jpg');
+  }
 .header2 {
   background-image: url('~@/assets/texture-1485529_1920.jpg');
   background-repeat: no-repeat;