скрытие магазина
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
/* =========================================================
|
||||
MoonWell — Night Elf themed landing
|
||||
Two moods controllable via Tweaks: "forest" (cozy/warm) & "temple" (arcane/modern)
|
||||
Night forest visual system shared by the landing and portal
|
||||
========================================================= */
|
||||
|
||||
:root {
|
||||
@@ -1619,85 +1619,6 @@ section {
|
||||
.footer-brand { grid-column: span 2; }
|
||||
}
|
||||
|
||||
/* ------------------------- tweaks panel ------------------------- */
|
||||
.tweaks {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
background: rgba(7,10,24,0.95);
|
||||
border: 1px solid var(--panel-border-strong);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px 18px;
|
||||
min-width: 240px;
|
||||
backdrop-filter: blur(16px);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
|
||||
font-family: var(--f-sans);
|
||||
display: none;
|
||||
}
|
||||
.tweaks.open { display: block; }
|
||||
.tweaks-title {
|
||||
font-family: var(--f-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--moon);
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.tweaks-title button { color: var(--text-mute); font-size: 14px; }
|
||||
.tweak-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-top: 1px solid var(--panel-border);
|
||||
font-size: 13px;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
.tweak-row:first-of-type { border-top: 0; }
|
||||
.tweak-row label { letter-spacing: 0.04em; }
|
||||
.tweak-seg {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--panel-border-strong);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tweak-seg button {
|
||||
padding: 5px 10px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--f-mono);
|
||||
color: var(--text-mute);
|
||||
transition: all var(--t-fast);
|
||||
}
|
||||
.tweak-seg button.active {
|
||||
background: var(--moon);
|
||||
color: var(--bg-0);
|
||||
}
|
||||
.tweak-switch {
|
||||
width: 34px; height: 18px;
|
||||
border-radius: 999px;
|
||||
background: var(--panel-border-strong);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: background var(--t-fast);
|
||||
}
|
||||
.tweak-switch::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px; left: 2px;
|
||||
width: 14px; height: 14px;
|
||||
background: var(--text-soft);
|
||||
border-radius: 50%;
|
||||
transition: transform var(--t-fast);
|
||||
}
|
||||
.tweak-switch.on { background: var(--moon); }
|
||||
.tweak-switch.on::after { transform: translateX(16px); background: var(--bg-0); }
|
||||
|
||||
/* ------------------------- particles canvas ------------------------- */
|
||||
#particles {
|
||||
position: fixed;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { Head, router } from '@inertiajs/vue3';
|
||||
import { Head, router, useForm } from '@inertiajs/vue3';
|
||||
import AdminLayout from '../../Layouts/AdminLayout.vue';
|
||||
import CategoryForm from './Components/CategoryForm.vue';
|
||||
import ProductForm from './Components/ProductForm.vue';
|
||||
@@ -14,9 +14,15 @@ const props = defineProps({
|
||||
products: { type: Array, default: () => [] },
|
||||
categoryStoreUrl: { type: String, required: true },
|
||||
productStoreUrl: { type: String, required: true },
|
||||
shopEnabled: { type: Boolean, required: true },
|
||||
availabilityUpdateUrl: { type: String, required: true },
|
||||
productTypes: { type: Array, required: true },
|
||||
});
|
||||
|
||||
const availabilityForm = useForm({
|
||||
enabled: props.shopEnabled,
|
||||
});
|
||||
|
||||
const stats = [
|
||||
{ label: 'Категории', value: props.categories.length },
|
||||
{ label: 'Позиции', value: props.products.length },
|
||||
@@ -28,6 +34,17 @@ function destroy(url, message) {
|
||||
router.delete(url, { preserveScroll: true });
|
||||
}
|
||||
}
|
||||
|
||||
function updateAvailability(event) {
|
||||
const previousValue = !event.target.checked;
|
||||
|
||||
availabilityForm.patch(props.availabilityUpdateUrl, {
|
||||
preserveScroll: true,
|
||||
onError: () => {
|
||||
availabilityForm.enabled = previousValue;
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -46,6 +63,26 @@ function destroy(url, message) {
|
||||
<div class="admin-page wrap">
|
||||
<section class="admin-section">
|
||||
<StatCards :items="stats" />
|
||||
<article class="portal-card admin-panel corners">
|
||||
<span class="admin-kicker">Глобальная доступность</span>
|
||||
<h2 class="h-serif">Магазин и пополнение</h2>
|
||||
<p>
|
||||
При выключении игровой магазин становится недоступен, а форма пополнения скрывается в личном кабинете.
|
||||
</p>
|
||||
<label class="admin-check">
|
||||
<input
|
||||
v-model="availabilityForm.enabled"
|
||||
type="checkbox"
|
||||
:disabled="availabilityForm.processing"
|
||||
@change="updateAvailability"
|
||||
/>
|
||||
<span class="admin-check__box"></span>
|
||||
<span>{{ availabilityForm.enabled ? 'Доступны' : 'Выключены' }}</span>
|
||||
</label>
|
||||
<small v-if="availabilityForm.errors.enabled" class="admin-field-error">
|
||||
{{ availabilityForm.errors.enabled }}
|
||||
</small>
|
||||
</article>
|
||||
<div class="admin-notice">
|
||||
Изменения записываются прямо в базу <code>store</code>. После сохранения перезагрузи данные магазина командой модуля или перезапусти worldserver.
|
||||
</div>
|
||||
|
||||
@@ -173,7 +173,7 @@ function updatePassword() {
|
||||
<div class="portal-balance">{{ wallet.formatted_amount }}</div>
|
||||
<p>Слёз Элуны</p>
|
||||
|
||||
<form class="portal-deposit" method="POST" :action="urls.deposit">
|
||||
<form v-if="wallet.deposit_enabled" class="portal-deposit" method="POST" :action="urls.deposit">
|
||||
<input type="hidden" name="_token" :value="csrfToken" />
|
||||
<label class="portal-field">
|
||||
<span>Сумма пополнения, ₽</span>
|
||||
@@ -192,7 +192,7 @@ function updatePassword() {
|
||||
Пополнить <span v-html="arrowSvg"></span>
|
||||
</button>
|
||||
</form>
|
||||
<div class="portal-rate">
|
||||
<div v-if="wallet.deposit_enabled" class="portal-rate">
|
||||
<span>1 ₽ = {{ wallet.tears_per_ruble }} Слёз Элуны</span>
|
||||
<span>От {{ wallet.minimum_deposit }} до {{ wallet.formatted_maximum_deposit }} ₽</span>
|
||||
</div>
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
<script setup>
|
||||
import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({ tweaks: { type: Object, default: () => ({}) } });
|
||||
const open = ref(false);
|
||||
const state = reactive({
|
||||
variant: 'forest',
|
||||
particles: true,
|
||||
moon: true,
|
||||
...props.tweaks,
|
||||
...readStoredTweaks(),
|
||||
});
|
||||
|
||||
function readStoredTweaks() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem('moonwell.tweaks') || '{}');
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function applyTweaks() {
|
||||
document.body.dataset.variant = state.variant;
|
||||
document.body.dataset.particles = state.particles ? 'true' : 'false';
|
||||
document.body.dataset.moon = state.moon ? 'true' : 'false';
|
||||
}
|
||||
|
||||
const onKey = (event) => {
|
||||
if (event.key === '`' || (event.altKey && event.key.toLowerCase() === 't')) {
|
||||
open.value = !open.value;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
applyTweaks();
|
||||
window.addEventListener('keydown', onKey);
|
||||
});
|
||||
onBeforeUnmount(() => window.removeEventListener('keydown', onKey));
|
||||
|
||||
watch(state, () => {
|
||||
applyTweaks();
|
||||
try {
|
||||
localStorage.setItem('moonwell.tweaks', JSON.stringify(state));
|
||||
} catch {
|
||||
// Appearance preferences are non-critical.
|
||||
}
|
||||
}, { deep: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="tweaks-fab" aria-label="Tweaks" title="Настройки внешнего вида (alt+T)" @click="open = !open">✦</button>
|
||||
<div :class="['tweaks', { open }]">
|
||||
<div class="tweaks-title">
|
||||
<span>Tweaks</span>
|
||||
<button aria-label="Close" @click="open = false">×</button>
|
||||
</div>
|
||||
<div class="tweak-row">
|
||||
<label>Настроение</label>
|
||||
<div class="tweak-seg">
|
||||
<button :class="{ active: state.variant === 'forest' }" @click="state.variant = 'forest'">Лес</button>
|
||||
<button :class="{ active: state.variant === 'temple' }" @click="state.variant = 'temple'">Храм</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tweak-row">
|
||||
<label>Частицы и анимации</label>
|
||||
<div :class="['tweak-switch', { on: state.particles }]" role="switch" :aria-checked="state.particles" @click="state.particles = !state.particles"></div>
|
||||
</div>
|
||||
<div class="tweak-row">
|
||||
<label>Луна на фоне</label>
|
||||
<div :class="['tweak-switch', { on: state.moon }]" role="switch" :aria-checked="state.moon" @click="state.moon = !state.moon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -10,14 +10,12 @@ import Join from './Components/Join.vue';
|
||||
import Nav from './Components/Nav.vue';
|
||||
import News from './Components/News.vue';
|
||||
import Realm from './Components/Realm.vue';
|
||||
import Tweaks from './Components/Tweaks.vue';
|
||||
|
||||
const props = defineProps({
|
||||
realm: { type: Object, required: true },
|
||||
playUrl: { type: String, required: true },
|
||||
posts: { type: Array, default: () => [] },
|
||||
newsIndexUrl: { type: String, required: true },
|
||||
tweaks: { type: Object, default: () => ({}) },
|
||||
registerEndpoint: { type: String, required: true },
|
||||
legalUrls: { type: Object, required: true },
|
||||
csrfToken: { type: String, required: true },
|
||||
@@ -65,5 +63,4 @@ onBeforeUnmount(() => revealObserver?.disconnect());
|
||||
<Join :register-endpoint="registerEndpoint" :csrf-token="csrfToken" :invite-required="inviteRequired" :auth="auth" :flash="flash" :legal-urls="legalUrls" />
|
||||
<News :posts="posts" :index-url="newsIndexUrl" />
|
||||
<Footer :play-url="playUrl" :legal-urls="legalUrls" />
|
||||
<Tweaks :tweaks="tweaks" />
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user