3a735ea0ce
* [WIP] Transfer collections to own branch * fixes * rewrite js * Add visibility dropdown to collection edit modal * Add visibility badges to collection page * Update visibility options and icons in collection page * Add delete functionality to collection modal * Collection project deletion flow * remove "visit project" button on overflow * Remove via checklist not individually * Update manage title in settings.vue * remove collections from settings page * hook up collections page * collection header to look like project header * Refactor layout.scss and collections.vue * fix omorphia * Update * Conform collections to old design structure * Update navigation links and remove unused code * Add collection view and collections to user page * Refactor user project display logic * Add collection creation functionality and update profile labels * Add function calls to initialize user collections * Refactor collection page layout and functionality * Add initialization of user collections in create function * Fix styling issue in collection page * Update collection status to private * remove name * Refactor card component and update grid layout * Finish collections --------- Co-authored-by: Carter <safe@fea.st>
151 lines
2.8 KiB
Vue
151 lines
2.8 KiB
Vue
<template>
|
|
<div v-if="shown">
|
|
<div
|
|
:class="{
|
|
shown: actuallyShown,
|
|
noblur: !$orElse(cosmetics.advancedRendering, true),
|
|
}"
|
|
class="modal-overlay"
|
|
@click="hide"
|
|
/>
|
|
<div class="modal-container" :class="{ shown: actuallyShown }">
|
|
<div class="modal-body">
|
|
<div v-if="header" class="header">
|
|
<strong>{{ header }}</strong>
|
|
<button class="iconified-button icon-only transparent" @click="hide">
|
|
<CrossIcon />
|
|
</button>
|
|
</div>
|
|
<div class="content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else />
|
|
</template>
|
|
|
|
<script>
|
|
import CrossIcon from '~/assets/images/utils/x.svg'
|
|
|
|
export default {
|
|
components: {
|
|
CrossIcon,
|
|
},
|
|
props: {
|
|
header: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
},
|
|
setup() {
|
|
const cosmetics = useCosmetics()
|
|
|
|
return { cosmetics }
|
|
},
|
|
data() {
|
|
return {
|
|
shown: false,
|
|
actuallyShown: false,
|
|
}
|
|
},
|
|
methods: {
|
|
show() {
|
|
this.shown = true
|
|
setTimeout(() => {
|
|
this.actuallyShown = true
|
|
}, 50)
|
|
},
|
|
hide() {
|
|
this.actuallyShown = false
|
|
setTimeout(() => {
|
|
this.shown = false
|
|
}, 300)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal-overlay {
|
|
visibility: hidden;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 20;
|
|
transition: all 0.3s ease-in-out;
|
|
|
|
&.shown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
background: hsla(0, 0%, 0%, 0.5);
|
|
backdrop-filter: blur(3px);
|
|
}
|
|
|
|
&.noblur {
|
|
backdrop-filter: none;
|
|
}
|
|
}
|
|
|
|
.modal-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 21;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
|
|
&.shown {
|
|
visibility: visible;
|
|
.modal-body {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
position: fixed;
|
|
box-shadow: var(--shadow-raised), var(--shadow-inset);
|
|
border-radius: var(--size-rounded-lg);
|
|
max-height: calc(100% - 2 * var(--spacing-card-bg));
|
|
overflow-y: auto;
|
|
width: 600px;
|
|
pointer-events: auto;
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: var(--color-bg);
|
|
padding: var(--spacing-card-md) var(--spacing-card-lg);
|
|
|
|
strong {
|
|
font-size: 1.25rem;
|
|
margin: 0.67em 0;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
background-color: var(--color-raised-bg);
|
|
}
|
|
|
|
transform: translateY(50vh);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: all 0.25s ease-in-out;
|
|
|
|
@media screen and (max-width: 650px) {
|
|
width: calc(100% - 2 * var(--spacing-card-bg));
|
|
}
|
|
}
|
|
}
|
|
</style>
|