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="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">
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>
<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>
</div>
<h5 class="card-title text-center">{{ keep?.name }}</h5>
<KeepStatsBar :keep="keep" />
<h5 class=" py-4 card-title text-center">{{ keep?.name }}</h5>
<div class="">
<p class="card-text">{{ keep?.description }}</p>
</div>
<hr>
<div class="d-flex justify-content-between">
<button class="btn btn-primary">add to vault</button>
<!-- tags go here -->
</div>
<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>
</div>
<!-- tags -->
<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>
</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>
keepr.client/src/pages/VaultPage.vue
+22 -10
View File
@@ -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>
<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 class="masonry-frame">
<div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="p-2">
</div>
<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>