got a bit of styling, add keep and add vault modals working
This commit is contained in:
Annika
@@ -1 +1,2 @@
|
||||
<!-- <a href="https://www.freepik.com/vectors/404">404 vector created by freepik - www.freepik.com</a> -->
|
||||
<!-- <a href="https://www.freepik.com/vectors/404">404 vector created by freepik - www.freepik.com</a> -->
|
||||
<!-- <a href="https://www.flaticon.com/free-icons/k" title="k icons">K icons created by Icon.doit - Flaticon</a> -->
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div @click="viewKeep()" class="component">
|
||||
<div class="card bg-dark text-white">
|
||||
<div class="card bg-dark text-white border-0 rounded-3">
|
||||
<!-- TODO check if keep.img is a valid image -->
|
||||
<img :src="keep.img" class="card-img" :alt="keep.name">
|
||||
<img :src="keep.img" class="card-img rounded-3" :alt="keep.name">
|
||||
<div class="card-img-overlay d-flex justify-content-between align-items-end">
|
||||
<h5 class="card-title">{{ keep.name }}</h5>
|
||||
<img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid profile-pic">
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="component">
|
||||
<div class="modal fade" id="newKeepModal" tabindex="-1" aria-labelledby="newKeepModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="cardp p-3">
|
||||
<div class="d-flex justify-content-end">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<h3 class="card-title">New Keep</h3>
|
||||
<!-- <form> -->
|
||||
<div class="mb-1">
|
||||
<label for="keepTitle" class="form-label">Title</label>
|
||||
<input type="text" id="keepTitle" name="keepTitle" v-model="name" placeholder="Title..."
|
||||
class="form-control">
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="keepImg" class="form-label">Image URL</label>
|
||||
<input type="text" id="keepImg" name="keepImg" v-model="img" placeholder="URL..." class="form-control">
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="vaultIsPrivate" class="form-check-label">Description</label>
|
||||
<textarea name="keepDescription" id="keepDescription" v-model="description"
|
||||
placeholder="Keep Description..." rows="5" class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="keepTags" class="form-label">Tags</label>
|
||||
<input type="text" id="keepTags" name="keepTags" v-model="img" placeholder="Tags..." class="form-control">
|
||||
</div>
|
||||
<button @click="createKeep()" class="btn btn-primary">Create</button>
|
||||
<!-- </form> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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'
|
||||
import { vaultsService } from '../services/VaultsService'
|
||||
import { keepsService } from '../services/KeepsService'
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
name: "",
|
||||
img: "",
|
||||
description: "",
|
||||
tags: "",
|
||||
|
||||
async createKeep() {
|
||||
let newKeep = {
|
||||
name: this.name,
|
||||
img: this.img,
|
||||
description: this.description
|
||||
// ,tags: this.tags
|
||||
}
|
||||
await keepsService.create(newKeep)
|
||||
|
||||
// reload vaults
|
||||
// close modal
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="component">
|
||||
<div class="modal fade" id="newVaultModal" tabindex="-1" aria-labelledby="newVaultModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="cardp p-3">
|
||||
<div class="d-flex justify-content-end">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<h3 class="card-title">New Vault</h3>
|
||||
<!-- <form> -->
|
||||
<div class="mb-1">
|
||||
<label for="vaultTitle" class="form-label">Title</label>
|
||||
<input type="text" id="vaultText" name="vaultText" v-model="name" placeholder="Title..." class="form-control">
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="vaultImg" class="form-label">Image URL</label>
|
||||
<input type="text" id="vaultImg" name="vaultImg" v-model="img" placeholder="URL..." class="form-control">
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<input type="checkbox" id="vaultIsPrivate" name="vaultIsPrivate" v-model="isPrivate" class="form-check-input">
|
||||
<label for="vaultIsPrivate" class="form-check-label">Private?</label>
|
||||
<p id="vaultIsPrivateInline" class="form-text">Private Vaults can only be seen by you</p>
|
||||
</div>
|
||||
<button @click="createVault()" class="btn btn-primary">Create</button>
|
||||
<!-- </form> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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'
|
||||
import { vaultsService } from '../services/VaultsService'
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
name: "",
|
||||
img: "",
|
||||
isPrivate: false,
|
||||
|
||||
async createVault() {
|
||||
let newVault = {}
|
||||
// assign default if img not specified
|
||||
// if (this.img == "") {
|
||||
// newVault = {
|
||||
// name: this.name,
|
||||
// isPrivate: this.isPrivate
|
||||
// }
|
||||
// } else {
|
||||
newVault = {
|
||||
name: this.name,
|
||||
img: this.img,
|
||||
isPrivate: this.isPrivate
|
||||
}
|
||||
// }
|
||||
|
||||
await vaultsService.createVault(this.newVault)
|
||||
|
||||
// reload vaults
|
||||
// close modal
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div @click="viewKeep()" class="component">
|
||||
<div class="card bg-dark text-white">
|
||||
<div class="card bg-dark text-white border-0 rounded-3">
|
||||
<!-- TODO check if keep.img is a valid image -->
|
||||
<img :src="keep.img" class="card-img" :alt="keep.name">
|
||||
<img :src="keep.img" class="card-img rounded-3" :alt="keep.name">
|
||||
<div class="card-img-overlay d-flex justify-content-between align-items-end">
|
||||
<h5 class="card-title">{{ keep.name }}</h5>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<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="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>
|
||||
<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>
|
||||
<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>
|
||||
<!-- 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>
|
||||
</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) {
|
||||
// console.log(AppState.account)
|
||||
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>
|
||||
.modal-content {
|
||||
// width: 84vw;
|
||||
// height: calc(100vh - 16vw);
|
||||
// margin: 8vw;
|
||||
}
|
||||
|
||||
.img-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="component">
|
||||
<div class="card text-white">
|
||||
<img :src="vault.img" :alt="vault.name" class="vault-img">
|
||||
<div class="card text-white rounded-3 border-0">
|
||||
<img :src="vault.img" :alt="vault.name" class="vault-img rounded-3">
|
||||
<div class="card-img-overlay d-flex align-items-end">
|
||||
<h5 class="card-title">{{vault.name}}</h5>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user