Improved profile margins and summary editor.
This commit is contained in:
parent
235d097f08
commit
cc7ca7544b
|
|
@ -327,7 +327,7 @@ async function removeAlert(alert) {
|
|||
}
|
||||
|
||||
.alert {
|
||||
padding: 0 .5rem 0 1rem;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -341,5 +341,4 @@ async function removeAlert(alert) {
|
|||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -339,8 +339,10 @@ function updateFilter(prop, value, reload = true) {
|
|||
max-height: 6rem;
|
||||
justify-content: center;
|
||||
margin: .5rem 1rem 0 1rem;
|
||||
/* makes empty area link to ad, bit too annoying
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,23 @@
|
|||
<template>
|
||||
<div class="editor">
|
||||
<div class="editor-header">
|
||||
<ul class="templates nolist">
|
||||
<li
|
||||
<select
|
||||
class="template-select input"
|
||||
@change="selectTemplate(Number($event.target.value), $event)"
|
||||
>
|
||||
<option
|
||||
v-for="storedTemplate in templates"
|
||||
:key="`template-${storedTemplate.id}`"
|
||||
class="template-key"
|
||||
:class="{ selected: selectedTemplate === storedTemplate.id }"
|
||||
@click="selectTemplate(storedTemplate.id)"
|
||||
>{{ storedTemplate.name }}</li>
|
||||
</ul>
|
||||
:value="storedTemplate.id"
|
||||
:selected="selectedTemplate === storedTemplate.id"
|
||||
>{{ storedTemplate.name }}</option>
|
||||
|
||||
<option
|
||||
v-if="selectedTemplate === null"
|
||||
:selected="selectedTemplate === null"
|
||||
disabled
|
||||
>Unsaved</option>
|
||||
</select>
|
||||
|
||||
<div
|
||||
class="template-add"
|
||||
|
|
@ -28,6 +36,7 @@
|
|||
height="3"
|
||||
class="input edit"
|
||||
@input="update"
|
||||
@blur="save(false)"
|
||||
/>
|
||||
|
||||
<textarea
|
||||
|
|
@ -53,7 +62,7 @@
|
|||
|
||||
<form
|
||||
class="actions save"
|
||||
@submit.prevent="save"
|
||||
@submit.prevent="save(true)"
|
||||
>
|
||||
<Icon
|
||||
v-if="selectedTemplate"
|
||||
|
|
@ -80,7 +89,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
import { ref, inject, onMounted } from 'vue';
|
||||
import { parse } from 'yaml';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
|
|
@ -91,8 +100,6 @@ import processSummaryTemplate from '#/utils/process-summary-template.js';
|
|||
|
||||
import defaultTemplate from '#/assets/summary.yaml?raw'; // eslint-disable-line import/no-unresolved
|
||||
|
||||
const emit = defineEmits(['event', 'changed']);
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
|
||||
const cookies = Cookies.withConverter({
|
||||
|
|
@ -114,6 +121,7 @@ const initialTemplate = templates.value.find((storedTemplate) => storedTemplate.
|
|||
const template = ref(initialTemplate?.template || defaultTemplate);
|
||||
const hasError = ref(false);
|
||||
const input = ref(null);
|
||||
const changed = ref(false);
|
||||
|
||||
const templateName = ref(initialTemplate?.name || `custom_${Date.now()}`);
|
||||
|
||||
|
|
@ -132,18 +140,13 @@ function selectTemplate(templateId) {
|
|||
templateName.value = nextTemplate.name;
|
||||
summary.value = getSummary();
|
||||
|
||||
emit('event', {
|
||||
type: 'select',
|
||||
data: templateId,
|
||||
});
|
||||
|
||||
cookies.set('selectedTemplate', String(templateId));
|
||||
window.location.href = `${window.location.origin}${window.location.pathname}?t=${nextTemplate.id}`;
|
||||
}
|
||||
|
||||
function update() {
|
||||
hasError.value = false;
|
||||
|
||||
emit('changed', true);
|
||||
changed.value = true;
|
||||
|
||||
try {
|
||||
summary.value = getSummary();
|
||||
|
|
@ -152,18 +155,23 @@ function update() {
|
|||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
async function save(explicit) {
|
||||
if (!explicit && !changed.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
parse(template.value);
|
||||
emit('changed', false);
|
||||
|
||||
const createdTemplate = await post('/templates', {
|
||||
name: templateName.value,
|
||||
template: template.value,
|
||||
}, {
|
||||
successFeedback: `Saved summary template '${templateName.value}'`,
|
||||
errorFeedback: `Failed to save summary template '${templateName.value}'`,
|
||||
});
|
||||
|
||||
changed.value = false;
|
||||
templates.value = await get(`/users/${pageContext.user.id}/templates`);
|
||||
|
||||
selectTemplate(createdTemplate.id);
|
||||
|
|
@ -218,6 +226,14 @@ function reset() {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('beforeunload', (event) => {
|
||||
if (changed.value) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -253,7 +269,7 @@ function reset() {
|
|||
display: flex;
|
||||
justify-content: space-between;;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
padding: 1rem 0;
|
||||
|
||||
.input {
|
||||
flex-grow: 1;
|
||||
|
|
@ -264,6 +280,10 @@ function reset() {
|
|||
.actions {
|
||||
display: flex;
|
||||
|
||||
.button {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button:not(:last-child) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
|
@ -333,9 +353,28 @@ function reset() {
|
|||
}
|
||||
}
|
||||
|
||||
.template-select {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.template-add {
|
||||
font-size: 0; /* prevent icon jump */
|
||||
margin-left: .5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media(--compact) {
|
||||
.editor {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-20) {
|
||||
.editor {
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-30) {
|
||||
|
|
|
|||
|
|
@ -59,12 +59,18 @@ async function reloadStashes() {
|
|||
<style scoped>
|
||||
.stashes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0 .5rem 1rem .5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
|
||||
gap: .5rem;
|
||||
padding: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
@media(--small-30) {
|
||||
@media(--compact) {
|
||||
.stashes {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-20) {
|
||||
.stashes {
|
||||
padding: 0 .5rem 1rem .5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,6 +96,7 @@ const popularNetworks = [
|
|||
'newsensations',
|
||||
'pervcity',
|
||||
'pornpros',
|
||||
'pornworld',
|
||||
'private',
|
||||
'realitykings',
|
||||
'teamskeet',
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
<nav
|
||||
v-if="profile.id === user?.id"
|
||||
class="domains"
|
||||
@click="confirmUnsaved"
|
||||
>
|
||||
<a
|
||||
:href="`/user/${profile.username}/stashes`"
|
||||
|
|
@ -33,19 +32,18 @@
|
|||
>Alerts</a>
|
||||
|
||||
<a
|
||||
:href="`/user/${profile.username}/summaries`"
|
||||
:href="`/user/${profile.username}/templates`"
|
||||
class="domain nolink"
|
||||
:class="{ active: domain === 'summaries' }"
|
||||
>Summaries</a>
|
||||
:class="{ active: domain === 'templates' }"
|
||||
>Templates</a>
|
||||
</nav>
|
||||
|
||||
<Stashes v-if="domain === 'stashes'" />
|
||||
<Alerts v-if="domain === 'alerts' && profile.id === user?.id" />
|
||||
|
||||
<Summaries
|
||||
v-if="domain === 'summaries' && profile.id === user?.id"
|
||||
v-if="domain === 'templates' && profile.id === user?.id"
|
||||
:release="mockupRelease"
|
||||
@changed="(changed) => summaryChanged = changed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -64,8 +62,6 @@ const domain = pageContext.routeParams.domain;
|
|||
const user = pageContext.user;
|
||||
const profile = ref(pageContext.pageProps.profile);
|
||||
|
||||
const summaryChanged = ref(false);
|
||||
|
||||
const mockupRelease = {
|
||||
id: 1,
|
||||
title: 'Nut For Human Consumption',
|
||||
|
|
@ -97,12 +93,6 @@ const mockupRelease = {
|
|||
name: 'Traxxx',
|
||||
},
|
||||
};
|
||||
|
||||
function confirmUnsaved(event) {
|
||||
if (summaryChanged.value && !confirm('You have unchanged changes in your summary editor, are you sure you want to leave the page?')) { // eslint-disable-line no-restricted-globals, no-alert
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -111,7 +101,7 @@ function confirmUnsaved(event) {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: .5rem .5rem .5rem .5rem;
|
||||
padding: .5rem 1rem;
|
||||
|
||||
.button {
|
||||
margin-left: 1rem;
|
||||
|
|
@ -125,9 +115,9 @@ function confirmUnsaved(event) {
|
|||
}
|
||||
}
|
||||
|
||||
@media(--small-30) {
|
||||
@media(--small-20) {
|
||||
.profile-section .section-header {
|
||||
padding: .5rem .5rem .5rem .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -145,7 +135,7 @@ function confirmUnsaved(event) {
|
|||
flex-direction: column;
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
margin: 0 1rem;
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
|
|
@ -193,6 +183,7 @@ function confirmUnsaved(event) {
|
|||
gap: .5rem;
|
||||
padding: .5rem 0;
|
||||
margin-top: .25rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.domain {
|
||||
|
|
@ -209,11 +200,36 @@ function confirmUnsaved(event) {
|
|||
}
|
||||
}
|
||||
|
||||
@media(--small-30) {
|
||||
.profile {
|
||||
margin: 0 .5rem;
|
||||
@media(--compact) {
|
||||
.domains {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.profile {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-20) {
|
||||
.profile-header {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.domains {
|
||||
justify-content: center;
|
||||
padding: .5rem .5rem;
|
||||
}
|
||||
|
||||
.age .icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-30) {
|
||||
.age .icon {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue