styling
This commit is contained in:
Annika
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
@@ -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 @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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user