Annika/keepr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
Annika
2022-08-04 11:12:27 -06:00
parent f6fa1022aa
commit 339bda72ea
4 changed files with 118 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
keepr.client/src/components/KeepModal.vue
+2 -2
View File
@@ -2,8 +2,8 @@
<div class="component"> <div class="component">
<div class="modal fade" id="keepModal" tabindex="-1" aria-labelledby="keepModalLabel" aria-hidden="true"> <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-dialog modal-xl modal-dialog-centered">
<div class="modal-content"> <div class="modal-content border-0">
<div class="card"> <div class="card border-0">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<img :src="keep?.img" :alt="keep?.name" class="img-fluid"> <img :src="keep?.img" :alt="keep?.name" class="img-fluid">
keepr.client/src/components/KeepStatsBar.vue
+51
View File
@@ -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>
keepr.client/src/components/VaultKeepModal.vue
+44 -31
View File
@@ -1,49 +1,44 @@
<template> <template>
<div class="component"> <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-dialog modal-xl modal-dialog-centered">
<div class="modal-content"> <div class="modal-content border-0">
<div class="card"> <div class="card border-0">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<img :src="keep?.img" :alt="keep?.name" class="img-fluid"> <img :src="keep?.img" :alt="keep?.name" class="img-fluid">
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="card-body"> <div class="card-body h-100">
<div class="d-flex flex-column justify-content-between"> <div class="d-flex flex-column justify-content-between h-100">
<div> <div>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="d-flex justify-content-center"> <KeepStatsBar :keep="keep" />
<p>social medi</p> <h5 class=" py-4 card-title text-center">{{ keep?.name }}</h5>
<p>social medi</p> <div class="">
<p>social medi</p>
</div>
<h5 class="card-title text-center">{{ keep?.name }}</h5>
<p class="card-text">{{ keep?.description }}</p> <p class="card-text">{{ keep?.description }}</p>
</div> </div>
<hr> <hr>
<div class="d-flex justify-content-between"> <!-- tags go here -->
<button class="btn btn-primary">add to vault</button> </div>
<div class="d-flex justify-content-between align-items-end">
<button class="btn btn-outline-primary">add to vault</button>
<!-- account is empty... --> <!-- account is empty... -->
<button v-show="account?.id == keep?.creator?.id" class="btn btn-primary">trashcan</button> <button v-show="account?.id == keep?.creator?.id" class="btn btn-primary">trashcan</button>
<div @click="viewProfile(keep?.creator)"> <div @click="viewProfile(keep?.creator)" class="d-flex align-items-end">
<img :src="keep?.creator?.picture" :alt="keep?.creator?.name"> <img :src="keep?.creator?.picture" :alt="keep?.creator?.name"
<p>{{ keep?.creator?.name }}</p> class="profile-pic rounded-3 me-2">
</div> <p class="mb-0 profile-text">{{ keep?.creator?.name }}</p>
</div> </div>
</div> </div>
<!-- tags --> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -57,6 +52,7 @@ import { computed } from 'vue'
import { Modal } from 'bootstrap' import { Modal } from 'bootstrap'
import { logger } from '../utils/Logger.js' import { logger } from '../utils/Logger.js'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import KeepStatsBar from './KeepStatsBar.vue'
export default { export default {
props: { props: {
keep: { keep: {
@@ -76,18 +72,19 @@ export default {
}, },
setup(props) { setup(props) {
// console.log(AppState.account) // console.log(AppState.account)
const router = useRouter() const router = useRouter();
return { return {
account: computed(() => {AppState.account}), account: computed(() => { AppState.account; }),
viewProfile() { viewProfile() {
// console.log(user.name) // console.log(user.name)
// AppState.activeProfile = props.keep.creator // AppState.activeProfile = props.keep.creator
Modal.getOrCreateInstance(document.getElementById('keepModal')).hide() Modal.getOrCreateInstance(document.getElementById("vaultKeepModal")).hide();
// logger.log(props.keep.creator.id) // 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> </script>
@@ -102,4 +99,20 @@ export default {
.img-fluid { .img-fluid {
width: 100%; 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> </style>
keepr.client/src/pages/VaultPage.vue
+22 -10
View File
@@ -1,22 +1,24 @@
<template> <template>
<div class="component"> <div class="component">
<div class="container"> <div class="container">
<div class="row"> <div class="row mt-5">
<div class="col-12 d-flex justify-content-between"> <div class="col-12 d-flex justify-content-between">
<div> <div>
<h4>{{ vault.name }}</h4> <h4 class="vault-title">{{ vault.name }}</h4>
<h6>Keeps: vaultKeep stoufe</h6> <h6 class="vault-stats">Keeps: vaultKeep stoufe</h6>
</div> </div>
<i @click="" class="mdi mdi-delete"></i> <div class="d-flex align-items-start">
<button @click="deleteVault()" class="btn btn-outline-dark">Delete Vault</button>
</div> </div>
</div> </div>
<div class="masonry-frame"> </div>
<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" /> <KeepTile :keep="k" />
</div> </div>
</div> </div>
</div> </div>
<KeepModal :keep="activeKeep" /> <VaultKeepModal :keep="activeKeep" />
</div> </div>
</template> </template>
@@ -46,7 +48,7 @@ export default {
viewKeep(keep) { viewKeep(keep) {
AppState.activeKeep = 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> <style lang="scss" scoped>
.masonry-frame { .masonry-frame {
columns: 6; columns: 4;
div { div {
break-inside: avoid; break-inside: avoid;
@@ -66,7 +68,7 @@ export default {
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.masonry-frame { .masonry-frame {
columns: 4 columns: 3;
} }
} }
@@ -75,4 +77,14 @@ export default {
columns: 2; columns: 2;
} }
} }
.vault-title {
font-size: 48px;
font-weight: 300;
}
.vault-stats {
font-size: 20px;
font-weight: 300;
}
</style> </style>