misc

keepr.client/src/assets/scss/_variables.scss

@@ -1,5 +1,5 @@
 $body-bg: #e5e5e5;
-$primary: #3ba5dc;
+$primary: #a12d6b;
 $secondary: #8392ab;
 $success: #00f867;
 $info: #5d0149;

keepr.client/src/components/KeepModal.vue

@@ -2,48 +2,33 @@
   <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 border-0">
+        <div class="modal-content border-0 p-2">
           <div class="card border-0">
             <div class="row">
               <div class="col-6">
-                <img :src="keep?.img" :alt="keep?.name" class="img-fluid">
+                <img :src="keep?.img" :alt="keep?.name" class="img-fluid rounded-3">
               </div>
               <div class="col-6">
-                <div class="card-body">
+                <div class="card-body h-100 p-0">
-                  <div class="d-flex flex-column justify-content-between">
+                  <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">
+                      <KeepStatsBar :keep="keep" />
-                        <p>social medi</p>
+                      <h5 class=" py-4 mx-5 card-title text-center">{{ keep?.name }}</h5>
-                        <p>social medi</p>
+                      <div class="">
-                        <p>social medi</p>
+                        <p class="card-text mx-5">{{ keep?.description }}</p>
                       </div>
-                      <h5 class="card-title text-center">{{ keep?.name }}</h5>
+                      <hr class="mx-5">
-                      <p class="card-text">{{ keep?.description }}</p>
+                      <!-- tags go here -->
-                    </div>
-                    <hr>
-                    <div class="d-flex justify-content-between">
-                      <button class="btn btn-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>
+                    <slot></slot>
                   </div>
-                  <!-- tags -->
                 </div>
               </div>
             </div>
           </div>
-
-
-
-
-
         </div>
       </div>
     </div>
@@ -57,6 +42,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,30 +62,31 @@ 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("keepModal")).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>
  
  
  <style lang="scss" scoped>
- .modal-content {
-   // width: 84vw;
-   // height: calc(100vh - 16vw);
-   // margin: 8vw;
- }
  
  .img-fluid {
    width: 100%;
  }
+ 
+ .card-title {
+   font-size: 32px;
+   font-weight: 300;
+ }
  </style>

keepr.client/src/components/KeepModalButtons.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="d-flex justify-content-between align-items-end">
+
+    <div class="d-flex align-items-end">
+
+      <div class="btn-group me-5" role="group">
+        <button id="addToVaultGroup" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"
+          aria-expanded="false">Add to Vault</button>
+        <ul class="dropdown-menu" aria-labelledby="addToVaultGroup">
+          <!-- <li v-for="v in userVaults"><a @click="addToVault(v.id)" class="dropdown-item">{{v.name}}</a></li> -->
+        </ul>
+      </div>
+
+      <!-- account is empty... -->
+
+      <i v-show="account.id == keep.creatorId" class="mdi mdi-delete-outline text-secondary" title="Delete"></i>
+
+    </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>
+</template>
+
+
+<script>
+import { AppState } from '../AppState'
+import { computed } from 'vue'
+import { Modal } from 'bootstrap'
+import { logger } from '../utils/Logger.js'
+import { useRouter } from 'vue-router'
+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) {
+    const router = useRouter()
+    return {
+      account: computed(() => AppState.account ),
+      viewProfile() {
+        // console.log(user.name)
+        // 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 } });
+      }
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.profile-pic {
+  height: 36px;
+  width: 36px;
+  object-fit: contain;
+}
+
+.profile-text {
+  font-size: 18px;
+  font-weight: 300;
+}
+
+.mdi-delete-outline {
+  font-size: 36px;
+  line-height: 36px;
+}
+</style>

keepr.client/src/components/KeepStatsBar.vue

@@ -1,9 +1,9 @@
 <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 text-primary 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 text-primary 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>
+      <span class="mx-2"><i class="mx-1 text-primary mdi mdi-connection"></i><span class="stats-text">0</span></span>
     </div>
 
   </div>
@@ -38,9 +38,6 @@ export default {
 
 
 <style lang="scss" scoped>
-.mdi {
-  // apply mdi color
-}
 
 .stats-text {
   color: #606060;

keepr.client/src/components/KeepTile.vue

@@ -58,4 +58,9 @@ export default {
 .profile-pic {
   height: 36px;
 }
+
+.card-title {
+  color: #fffffff0;
+  text-shadow: 1px 1px 3px #000000e0;
+}
 </style>

keepr.client/src/components/ProfileKeepTile.vue

@@ -57,4 +57,9 @@ export default {
 .profile-pic {
   height: 36px;
 }
+
+.card-title {
+  color: #fffffff0;
+  text-shadow: 1px 1px 3px #000000e0;
+}
 </style>

keepr.client/src/components/VaultKeepModal.vue

@@ -90,11 +90,6 @@ export default {
  
  
  <style lang="scss" scoped>
- .modal-content {
-   // width: 84vw;
-   // height: calc(100vh - 16vw);
-   // margin: 8vw;
- }
  
  .img-fluid {
    width: 100%;

keepr.client/src/components/VaultKeepModalButtons.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="d-flex justify-content-between align-items-end">
+    <button class="btn btn-outline-secondary">Remove from Vault</button>
+
+    <!-- account is empty... -->
+    <button v-show="account?.id == keep?.creator?.id" class="btn btn-primary">trashcan</button>
+
+    <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>
+</template>
+
+
+<script>
+import { AppState } from '../AppState'
+import { computed } from 'vue'
+import { Modal } from 'bootstrap'
+import { logger } from '../utils/Logger.js'
+import { useRouter } from 'vue-router'
+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) {
+    const router = useRouter()
+    return {
+      account: computed(() => { AppState.account; }),
+      viewProfile() {
+        // console.log(user.name)
+        // 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 } });
+      }
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+ .profile-pic {
+   height: 36px;
+   width: 36px;
+   object-fit: contain;
+ }
+ 
+ .profile-text {
+   font-size: 18px;
+   font-weight: 300;
+ }
+</style>

keepr.client/src/components/VaultTile.vue

@@ -43,4 +43,9 @@ export default {
   object-fit: cover;
 }
 
+.card-title {
+  color: #fffffff0;
+  text-shadow: 1px 1px 3px #000000e0;
+}
+
 </style>

keepr.client/src/pages/HomePage.vue

@@ -8,7 +8,9 @@
       </div>
     </div>
   </div>
-  <KeepModal :keep="activeKeep" />
+  <KeepModal :keep="activeKeep">
+    <KeepModalButtons :keep="activeKeep" />
+  </KeepModal>
 </template>
 
 <script>
@@ -17,29 +19,29 @@ import { AppState } from '../AppState.js'
 import { logger } from '../utils/Logger.js'
 import { keepsService } from '../services/KeepsService.js'
 import { Modal } from 'bootstrap'
+import KeepModalButtons from '../components/KeepModalButtons.vue'
 export default {
-  name: 'Home',
+    name: "Home",
-  setup() {
+    setup() {
-    onMounted(async () => {
+        onMounted(async () => {
-      try {
+            try {
-        await keepsService.getAll()
+                await keepsService.getAll();
-        // document.getElementById('keepModal').
+                // document.getElementById('keepModal').
-        
+            }
-      } catch (error) {
+            catch (error) {
-        logger.error(error)
+                logger.error(error);
-      }
+            }
-    })
+        });
-
+        return {
-    return {
+            keeps: computed(() => AppState.keeps),
-      keeps: computed(() => AppState.keeps),
+            activeKeep: computed(() => AppState.activeKeep),
-      activeKeep: computed(() => AppState.activeKeep),
+            viewKeep(keep) {
-
+                AppState.activeKeep = keep;
-      viewKeep(keep) {
+                Modal.getOrCreateInstance(document.getElementById("keepModal")).show();
-        AppState.activeKeep = keep
+            }
-        Modal.getOrCreateInstance(document.getElementById('keepModal')).show()
+        };
-      }
+    },
-    }
+    components: { KeepModalButtons }
-  }
 }
 </script>
 

keepr.client/src/pages/VaultPage.vue

@@ -8,7 +8,7 @@
             <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>
+            <button v-if="account.id == vault.creatorId" @click="deleteVault()" class="btn btn-outline-secondary">Delete Vault</button>
           </div>
         </div>
       </div>
@@ -18,7 +18,9 @@
         </div>
       </div>
     </div>
-  <VaultKeepModal :keep="activeKeep" />
+  <KeepModal :keep="activeKeep">
+  <VaultKeepModalButtons :keep="activeKeep" />
+  </KeepModal>
   </div>
 </template>
 
@@ -34,6 +36,7 @@ import { keepsService } from '../services/KeepsService';
 import { vaultsService } from '../services/VaultsService'
 import KeepTile from '../components/KeepTile.vue';
 import KeepModal from '../components/KeepModal.vue';
+import KeepModalButtons from '../components/KeepModalButtons.vue';
 export default {
   setup() {
     const route = useRoute();
@@ -45,14 +48,15 @@ export default {
       vault: computed(() => AppState.activeVault),
       keeps: computed(() => AppState.vaultKeeps),
       activeKeep: computed(() => AppState.activeKeep),
+      account: computed(() => AppState.account),
 
       viewKeep(keep) {
         AppState.activeKeep = keep
-        Modal.getOrCreateInstance(document.getElementById('vaultKeepModal')).show()
+        Modal.getOrCreateInstance(document.getElementById('keepModal')).show()
       }
     };
   },
-  components: { KeepTile, KeepModal }
+  components: { KeepTile, KeepModal, KeepModalButtons }
 }
 </script>