Improved profile margins and summary editor.

This commit is contained in:
DebaucheryLibrarian 2024-09-02 00:18:39 +02:00
parent 235d097f08
commit cc7ca7544b
6 changed files with 111 additions and 48 deletions

View File

@ -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>

View File

@ -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;
*/
}
}

View File

@ -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) {

View File

@ -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;
}

View File

@ -96,6 +96,7 @@ const popularNetworks = [
'newsensations',
'pervcity',
'pornpros',
'pornworld',
'private',
'realitykings',
'teamskeet',

View File

@ -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;
}