home, vault, and profile pages are framed out

keepr.client/src/components/KeepModal.vue

@@ -81,7 +81,7 @@ export default {
       account: computed(() => {AppState.account}),
       viewProfile() {
         // console.log(user.name)
-        // AppState.activeProfile = user
+        // AppState.activeProfile = props.keep.creator
         Modal.getOrCreateInstance(document.getElementById('keepModal')).hide()
         // logger.log(props.keep.creator.id)
         router.push({name: 'Profile', params: {id: props.keep.creator.id}})

keepr.client/src/components/KeepTile.vue

@@ -5,9 +5,7 @@
       <img :src="keep.img" class="card-img" :alt="keep.name">
       <div class="card-img-overlay d-flex justify-content-between align-items-end">
         <h5 class="card-title">{{ keep.name }}</h5>
-        <a href="#">
-          <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid">
-        </a>
+        <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid profile-pic">
       </div>
     </div>
   </div>
@@ -54,9 +52,10 @@ export default {
 .card-img {
   min-height: 160px;
   max-height: 80vh;
+  object-fit: cover;
 }
 
-.card-img-overlay img {
-  max-height: 36px;
+.profile-pic {
+  height: 36px;
 }
 </style>

keepr.client/src/components/Profile.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="component">
-    Profile
-    {{ profile?.name }}
-
-  </div>
-</template>
-
-
-<script>
-export default {
-  props: {
-    profile: {
-      id: String,
-      name: String,
-      picture: String
-    }
-  },
-  setup(props){
-    return {}
-  }
-}
-</script>
-
-
-<style lang="scss" scoped>
-
-</style>

keepr.client/src/components/ProfileKeepTile.vue

@@ -0,0 +1,60 @@
+<template>
+  <div @click="viewKeep()" class="component">
+    <div class="card bg-dark text-white">
+      <!-- TODO check if keep.img is a valid image -->
+      <img :src="keep.img" class="card-img" :alt="keep.name">
+      <div class="card-img-overlay d-flex justify-content-between align-items-end">
+        <h5 class="card-title">{{ keep.name }}</h5>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { computed, onMounted, ref } from 'vue'
+import { router } from '../router.js'
+import { AppState } from '../AppState.js'
+import { logger } from '../utils/Logger.js'
+
+export default {
+  props: {
+    keep: {
+      id: Number,
+      creatorId: String,
+      name: String,
+      description: String,
+      img: String,
+      views: Number,
+      kept: Number,
+      creator: {
+        id: String,
+        name: String,
+        picture: String
+      }
+    }
+  },
+  setup(props) {
+    return {
+      viewKeep() {
+        AppState.activeKeep = props.keep;
+        // console.log(props.keep.id)
+        // router.push({name: 'Keep'})
+      }
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.card-img {
+  min-height: 160px;
+  max-height: 80vh;
+  object-fit: cover;
+}
+
+.profile-pic {
+  height: 36px;
+}
+</style>

keepr.client/src/components/VaultTile.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="component">
+    <div class="card text-white">
+      <img :src="vault.img" :alt="vault.name" class="vault-img">
+      <div class="card-img-overlay d-flex align-items-end">
+        <h5 class="card-title">{{vault.name}}</h5>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: {
+    vault: {
+      id: Number,
+      creatorId: String,
+      name: String,
+      description: String,
+      img: String,
+      isPrivate: Boolean,
+      creator: {
+        id: String,
+        name: String,
+        picture: String
+      }
+    }
+  },
+  setup(props){
+    return {
+
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+.vault-img {
+  height: 160px;
+  object-fit: cover;
+}
+
+</style>

keepr.client/src/components/VaultsList.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="component">
-    vaults list
-
-  </div>
-</template>
-
-
-<script>
-export default {
-  setup(){
-    return {}
-  }
-}
-</script>
-
-
-<style lang="scss" scoped>
-
-</style>