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

got a bit of styling, add keep and add vault modals working

Browse Source
This commit is contained in:
Annika
2022-08-04 10:38:52 -06:00
parent 34f93f289b
commit f6fa1022aa
15 changed files with 336 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
keepr.client/index.html
+3 -3
View File
@@ -5,15 +5,15 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="https://bcw.blob.core.windows.net/public/img/9977764104160066" />
<link rel="icon" href="src/assets/img/letter-k.png" />
<title>
keepr.client
Keepr
</title>
</head>
<body>
<noscript>
<strong>We're sorry but keepr.client doesn't work properly without JavaScript
<strong>We're sorry but Keepr doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
keepr.client/src/App.vue
+2 -2
View File
@@ -6,8 +6,8 @@
<router-view />
</main>
<footer>
<div class="bg-dark text-light text-center p-4">
Made with 💖 by CodeWorks
<div class="bg-dark text-light p-4">
An <a href="https://github.com/annikyet">Annika</a> project.
</div>
</footer>
</template>
keepr.client/src/assets/img/letter-k.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

keepr.client/src/components/Attribution.vue
+2 -1
View File
@@ -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> -->
keepr.client/src/components/KeepTile.vue
+2 -2
View File
@@ -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">
keepr.client/src/components/NewKeepModal.vue
+75
View File
@@ -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>
keepr.client/src/components/NewVaultModal.vue
+78
View File
@@ -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>
keepr.client/src/components/ProfileKeepTile.vue
+2 -2
View File
@@ -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>
keepr.client/src/components/VaultKeepModal.vue
+105
View File
@@ -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>
keepr.client/src/components/VaultTile.vue
+2 -2
View File
@@ -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>
keepr.client/src/pages/HomePage.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<!-- TODO add masonry later -->
<div class="container-fluid px-md-5 pt-4">
<div class="masonry-frame">
<div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="p-2">
<div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="py-2">
<!-- <img src="../assets/img/404.svg" alt=""> TODO use this as default img in DB-->
<KeepTile :keep="k" />
</div>
keepr.client/src/pages/ProfilePage.vue
+46 -15
View File
@@ -1,21 +1,21 @@
<template>
<div class="component">
<div class="container">
<div class="row">
<div class="row mt-5">
<div class="d-flex">
<img :src="profile?.picture" :alt="profile?.name" class="profile-pic">
<div class="d-flex flex-column">
<h3>{{profile?.name}}</h3>
<h5>Vaults: {{vaults?.length}}</h5>
<h5>Keeps: {{keeps?.length}}</h5>
<img :src="profile?.picture" :alt="profile?.name" class="profile-pic rounded-3">
<div class="d-flex flex-column ps-4">
<h3 class="profile-name">{{profile?.name}}</h3>
<h5 class="profile-stats">Vaults: {{vaults?.length}}</h5>
<h5 class="profile-stats">Keeps: {{keeps?.length}}</h5>
</div>
</div>
</div>
<div class="row">
<h4>
<div class="row mt-5">
<h4 class="profile-heading">
Vaults
<i class="mdi mdi-plus"></i>
<i @click="newVault()" class="mdi mdi-plus"></i>
</h4>
<div class="col-12">
<div class="row">
@@ -26,10 +26,10 @@
</div>
</div>
<div class="row">
<h4>
<div class="row mt-5">
<h4 class="profile-heading">
Keeps
<i class="mdi mdi-plus"></i>
<i @click="newKeep()" class="mdi mdi-plus"></i>
</h4>
</div>
<!-- masonry goes here -->
@@ -38,6 +38,8 @@
</div>
</div>
<KeepModal :keep="activeKeep" />
<NewVaultModal />
<NewKeepModal />
</div>
</template>
@@ -51,6 +53,8 @@ import { useRouter, useRoute } from 'vue-router'
import { Modal } from 'bootstrap'
import { keepsService } from '../services/KeepsService';
import VaultTile from '../components/VaultTile.vue';
import NewVaultModal from '../components/NewVaultModal.vue';
import NewKeepModal from '../components/NewKeepModal.vue';
export default {
setup() {
const router = useRouter();
@@ -80,18 +84,26 @@ export default {
async viewVault(vault) {
router.push({name: 'Vault', params: {id: vault.id}})
},
newVault() {
Modal.getOrCreateInstance(document.getElementById('newVaultModal')).show()
},
newKeep() {
Modal.getOrCreateInstance(document.getElementById('newKeepModal')).show()
}
};
},
components: { VaultTile }
components: { VaultTile, NewVaultModal, NewKeepModal }
}
</script>
<style lang="scss" scoped>
.profile-pic {
height: 200px;
width: 200px;
height: 192px;
width: 192px;
object-fit: contain;
}
@@ -115,4 +127,23 @@ export default {
}
}
.profile-name {
font-size: 56px;
font-weight: 300;
}
.profile-stats {
font-size: 32px;
font-weight: 400;
}
.profile-heading {
font-size: 40px;
font-weight: 400;;
}
.mdi {
// color plus buttons here
}
</style>
keepr.client/src/services/KeepsService.js
+9
View File
@@ -20,6 +20,15 @@ class KeepsService {
logger.error(error)
}
}
async create(newKeep) {
try {
const res = await api.post('api/keeps', newKeep)
logger.log(res.data)
} catch (error) {
logger.error(error)
}
}
}
export const keepsService = new KeepsService()
keepr.client/src/services/VaultsService.js
+9
View File
@@ -20,6 +20,15 @@ class VaultsService {
logger.error(error)
}
}
async createVault(vaultData) {
try {
const res = await api.post('api/vaults', vaultData)
logger.log(res.data)
} catch (error) {
logger.error(error)
}
}
}
export const vaultsService = new VaultsService()