Improved profile margins and summary editor.

components/alerts/alerts.vue

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

components/scenes/scenes.vue

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

components/scenes/summaries.vue

@@ -1,15 +1,23 @@
 <template>
 	<div class="editor">
 		<div class="editor-header">
-			<ul class="templates nolist">
+			<select
-				<li
+				class="template-select input"
+				@change="selectTemplate(Number($event.target.value), $event)"
+			>
+				<option
 					v-for="storedTemplate in templates"
 					:key="`template-${storedTemplate.id}`"
-					class="template-key"
+					:value="storedTemplate.id"
-					:class="{ selected: selectedTemplate === storedTemplate.id }"
+					:selected="selectedTemplate === storedTemplate.id"
-					@click="selectTemplate(storedTemplate.id)"
+				>{{ storedTemplate.name }}</option>
-				>{{ storedTemplate.name }}</li>
+
-			</ul>
+				<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;
-
+	changed.value = true;
-	emit('changed', 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) {

components/stashes/stashes.vue

@@ -59,12 +59,18 @@ async function reloadStashes() {
 <style scoped>
 .stashes {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-	gap: 1rem;
+	gap: .5rem;
-	padding: 0 .5rem 1rem .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;
 	}

pages/entities/+Page.vue

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

pages/users/@username/+Page.vue

@@ -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' }"
+					:class="{ active: domain === 'templates' }"
-				>Summaries</a>
+				>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) {
+@media(--compact) {
-	.profile {
+	.domains {
-		margin: 0 .5rem;
+		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;
 	}