From 339bda72ea49f05aa89147e7998d6e6631f0c73c Mon Sep 17 00:00:00 2001
From: Annika <nikzneko@gmail.com>
Date: Thu, 4 Aug 2022 11:12:27 -0600
Subject: [PATCH] styling

---
 keepr.client/src/components/KeepModal.vue     |  4 +-
 keepr.client/src/components/KeepStatsBar.vue  | 51 +++++++++++++
 .../src/components/VaultKeepModal.vue         | 73 +++++++++++--------
 keepr.client/src/pages/VaultPage.vue          | 32 +++++---
 4 files changed, 118 insertions(+), 42 deletions(-)
 create mode 100644 keepr.client/src/components/KeepStatsBar.vue

diff --git a/keepr.client/src/components/KeepModal.vue b/keepr.client/src/components/KeepModal.vue
index f4c4030..06f0f47 100644
--- a/keepr.client/src/components/KeepModal.vue
+++ b/keepr.client/src/components/KeepModal.vue
@@ -2,8 +2,8 @@
   <div class="component">
     <div class="modal fade" id="keepModal" tabindex="-1" aria-labelledby="keepModalLabel" aria-hidden="true">
       <div class="modal-dialog modal-xl modal-dialog-centered">
-        <div class="modal-content">
-          <div class="card">
+        <div class="modal-content border-0">
+          <div class="card border-0">
             <div class="row">
               <div class="col-6">
                 <img :src="keep?.img" :alt="keep?.name" class="img-fluid">
diff --git a/keepr.client/src/components/KeepStatsBar.vue b/keepr.client/src/components/KeepStatsBar.vue
new file mode 100644
index 0000000..d16582c
--- /dev/null
+++ b/keepr.client/src/components/KeepStatsBar.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="component">
+    <div class="d-flex justify-content-center">
+      <span class="mx-2"><i class="mx-1 mdi mdi-eye"></i><span class="stats-text">{{keep.views}}</span></span>
+      <span class="mx-2"><i class="mx-1 mdi mdi-lock"></i><span class="stats-text">{{keep.kept}}</span></span>
+      <span class="mx-2"><i class="mx-1 mdi mdi-connection"></i><span class="stats-text">0</span></span>
+    </div>
+
+  </div>
+</template>
+
+
+<script>
+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 {
+
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.mdi {
+  // apply mdi color
+}
+
+.stats-text {
+  color: #606060;
+  font-weight: 400;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/keepr.client/src/components/VaultKeepModal.vue b/keepr.client/src/components/VaultKeepModal.vue
index f4c4030..f19d1fe 100644
--- a/keepr.client/src/components/VaultKeepModal.vue
+++ b/keepr.client/src/components/VaultKeepModal.vue
@@ -1,49 +1,44 @@
  <template>
   <div class="component">
-    <div class="modal fade" id="keepModal" tabindex="-1" aria-labelledby="keepModalLabel" aria-hidden="true">
+    <div class="modal fade" id="vaultKeepModal" tabindex="-1" aria-labelledby="vaultKeepModalLabel" aria-hidden="true">
       <div class="modal-dialog modal-xl modal-dialog-centered">
-        <div class="modal-content">
-          <div class="card">
+        <div class="modal-content border-0">
+          <div class="card border-0">
             <div class="row">
               <div class="col-6">
                 <img :src="keep?.img" :alt="keep?.name" class="img-fluid">
               </div>
               <div class="col-6">
-                <div class="card-body">
-                  <div class="d-flex flex-column justify-content-between">
+                <div class="card-body h-100">
+                  <div class="d-flex flex-column justify-content-between h-100">
                     <div>
                       <div class="d-flex justify-content-end">
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                       </div>
-                      <div class="d-flex justify-content-center">
-                        <p>social medi</p>
-                        <p>social medi</p>
-                        <p>social medi</p>
+                      <KeepStatsBar :keep="keep" />
+                      <h5 class=" py-4 card-title text-center">{{ keep?.name }}</h5>
+                      <div class="">
+                        <p class="card-text">{{ keep?.description }}</p>
                       </div>
-                      <h5 class="card-title text-center">{{ keep?.name }}</h5>
-                      <p class="card-text">{{ keep?.description }}</p>
+                      <hr>
+                      <!-- tags go here -->
                     </div>
-                    <hr>
-                    <div class="d-flex justify-content-between">
-                      <button class="btn btn-primary">add to vault</button>
+                    <div class="d-flex justify-content-between align-items-end">
+
+                      <button class="btn btn-outline-primary">add to vault</button>
                       <!-- account is empty... -->
                       <button v-show="account?.id == keep?.creator?.id" class="btn btn-primary">trashcan</button>
-                      <div @click="viewProfile(keep?.creator)">
-                        <img :src="keep?.creator?.picture" :alt="keep?.creator?.name">
-                        <p>{{ keep?.creator?.name }}</p>
-                      </div>  
+                      <div @click="viewProfile(keep?.creator)" class="d-flex align-items-end">
+                        <img :src="keep?.creator?.picture" :alt="keep?.creator?.name"
+                          class="profile-pic rounded-3 me-2">
+                        <p class="mb-0 profile-text">{{ keep?.creator?.name }}</p>
+                      </div>
                     </div>
                   </div>
-                  <!-- tags -->
                 </div>
               </div>
             </div>
           </div>
-
-
-
-
-
         </div>
       </div>
     </div>
@@ -57,6 +52,7 @@ import { computed } from 'vue'
 import { Modal } from 'bootstrap'
 import { logger } from '../utils/Logger.js'
 import { useRouter } from 'vue-router'
+import KeepStatsBar from './KeepStatsBar.vue'
 export default {
   props: {
     keep: {
@@ -76,18 +72,19 @@ export default {
   },
   setup(props) {
     // console.log(AppState.account)
-    const router = useRouter()
+    const router = useRouter();
     return {
-      account: computed(() => {AppState.account}),
+      account: computed(() => { AppState.account; }),
       viewProfile() {
         // console.log(user.name)
         // AppState.activeProfile = props.keep.creator
-        Modal.getOrCreateInstance(document.getElementById('keepModal')).hide()
+        Modal.getOrCreateInstance(document.getElementById("vaultKeepModal")).hide();
         // logger.log(props.keep.creator.id)
-        router.push({name: 'Profile', params: {id: props.keep.creator.id}})
+        router.push({ name: "Profile", params: { id: props.keep.creator.id } });
       }
-    }
-  }
+    };
+  },
+  components: { KeepStatsBar }
 }
 </script>
  
@@ -102,4 +99,20 @@ export default {
  .img-fluid {
    width: 100%;
  }
+ 
+ .card-title {
+   font-size: 32px;
+   font-weight: 300;
+ }
+ 
+ .profile-pic {
+   height: 36px;
+   width: 36px;
+   object-fit: contain;
+ }
+ 
+ .profile-text {
+   font-size: 18px;
+   font-weight: 300;
+ }
  </style>
\ No newline at end of file
diff --git a/keepr.client/src/pages/VaultPage.vue b/keepr.client/src/pages/VaultPage.vue
index cae9064..4d811f3 100644
--- a/keepr.client/src/pages/VaultPage.vue
+++ b/keepr.client/src/pages/VaultPage.vue
@@ -1,22 +1,24 @@
 <template>
   <div class="component">
     <div class="container">
-      <div class="row">
+      <div class="row mt-5">
         <div class="col-12 d-flex justify-content-between">
           <div>
-            <h4>{{ vault.name }}</h4>
-            <h6>Keeps: vaultKeep stoufe</h6>
+            <h4 class="vault-title">{{ vault.name }}</h4>
+            <h6 class="vault-stats">Keeps: vaultKeep stoufe</h6>
+          </div>
+          <div class="d-flex align-items-start">
+            <button @click="deleteVault()" class="btn btn-outline-dark">Delete Vault</button>
           </div>
-          <i @click="" class="mdi mdi-delete"></i>
         </div>
       </div>
-      <div class="masonry-frame">
-        <div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="p-2">
+      <div class="masonry-frame mt-5">
+        <div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="p-2 ps-0">
           <KeepTile :keep="k" />
         </div>
       </div>
     </div>
-  <KeepModal :keep="activeKeep" />
+  <VaultKeepModal :keep="activeKeep" />
   </div>
 </template>
 
@@ -46,7 +48,7 @@ export default {
 
       viewKeep(keep) {
         AppState.activeKeep = keep
-        Modal.getOrCreateInstance(document.getElementById('keepModal')).show()
+        Modal.getOrCreateInstance(document.getElementById('vaultKeepModal')).show()
       }
     };
   },
@@ -57,7 +59,7 @@ export default {
 
 <style lang="scss" scoped>
 .masonry-frame {
-  columns: 6;
+  columns: 4;
 
   div {
     break-inside: avoid;
@@ -66,7 +68,7 @@ export default {
 
 @media (max-width: 991.98px) {
   .masonry-frame {
-    columns: 4
+    columns: 3;
   }
 }
 
@@ -75,4 +77,14 @@ export default {
     columns: 2;
   }
 }
+
+.vault-title {
+  font-size: 48px;
+  font-weight: 300;
+}
+
+.vault-stats {
+  font-size: 20px;
+  font-weight: 300;
+}
 </style>
\ No newline at end of file