misc
This commit is contained in:
Annika
@@ -1,5 +1,5 @@
|
||||
$body-bg: #e5e5e5;
|
||||
$primary: #3ba5dc;
|
||||
$primary: #a12d6b;
|
||||
$secondary: #8392ab;
|
||||
$success: #00f867;
|
||||
$info: #5d0149;
|
||||
|
||||
@@ -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="d-flex flex-column justify-content-between">
|
||||
<div class="card-body h-100 p-0">
|
||||
<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 mx-5 card-title text-center">{{ keep?.name }}</h5>
|
||||
<div class="">
|
||||
<p class="card-text mx-5">{{ keep?.description }}</p>
|
||||
</div>
|
||||
<h5 class="card-title text-center">{{ keep?.name }}</h5>
|
||||
<p class="card-text">{{ keep?.description }}</p>
|
||||
<hr class="mx-5">
|
||||
<!-- tags go here -->
|
||||
</div>
|
||||
<slot></slot>
|
||||
</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>
|
||||
</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>
|
||||
@@ -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>
|
||||
@@ -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 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-eye"></i><span class="stats-text">{{keep.views}}</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 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;
|
||||
|
||||
@@ -58,4 +58,9 @@ export default {
|
||||
.profile-pic {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #fffffff0;
|
||||
text-shadow: 1px 1px 3px #000000e0;
|
||||
}
|
||||
</style>
|
||||
@@ -57,4 +57,9 @@ export default {
|
||||
.profile-pic {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #fffffff0;
|
||||
text-shadow: 1px 1px 3px #000000e0;
|
||||
}
|
||||
</style>
|
||||
@@ -90,11 +90,6 @@ export default {
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modal-content {
|
||||
// width: 84vw;
|
||||
// height: calc(100vh - 16vw);
|
||||
// margin: 8vw;
|
||||
}
|
||||
|
||||
.img-fluid {
|
||||
width: 100%;
|
||||
|
||||
@@ -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>
|
||||
@@ -43,4 +43,9 @@ export default {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #fffffff0;
|
||||
text-shadow: 1px 1px 3px #000000e0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -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() {
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await keepsService.getAll()
|
||||
await keepsService.getAll();
|
||||
// document.getElementById('keepModal').
|
||||
|
||||
} catch (error) {
|
||||
logger.error(error)
|
||||
}
|
||||
})
|
||||
|
||||
catch (error) {
|
||||
logger.error(error);
|
||||
}
|
||||
});
|
||||
return {
|
||||
keeps: computed(() => AppState.keeps),
|
||||
activeKeep: computed(() => AppState.activeKeep),
|
||||
|
||||
viewKeep(keep) {
|
||||
AppState.activeKeep = keep
|
||||
Modal.getOrCreateInstance(document.getElementById('keepModal')).show()
|
||||
}
|
||||
}
|
||||
AppState.activeKeep = keep;
|
||||
Modal.getOrCreateInstance(document.getElementById("keepModal")).show();
|
||||
}
|
||||
};
|
||||
},
|
||||
components: { KeepModalButtons }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user