The_evening_detective/evening_detective_frontend
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update css

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-07-30 02:10:12 +07:00
parent c51cfe0620
commit f88818dbf9
16 changed files with 126 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/main.css
+39 -32
View File
@@ -12,57 +12,64 @@ body {
src: url('@/assets/fonts/a_OldTyper.ttf');
}
.center-message {
display: flex;
justify-content: center;
/* горизонтальное центрирование */
align-items: center;
/* вертикальное центрирование */
height: calc(100dvh - 100px);
text-align: center;
/* центрирование текста */
}
.content-block {
margin-top: 70px;
padding: 20px;
/* background-color: #553333; */
}
.height80 {
height: 80vh;
}
.center-block-custom {
.content-block {
margin-top: 70px;
}
.center-block-custom-big {
.center-block-custom {
margin-top: 70px;
overflow-y: auto;
height: calc(100vh - 150px);
/* Firefox */
scrollbar-width: none;
}
.center-block-custom::-webkit-scrollbar {
/* Chrome, Edge, Safari */
display: none;
}
.width700 {
padding: 10px;
margin: 0 auto;
}
.width1200 {
padding: 10px;
margin: 0 auto;
}
.display-table {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
@media (width >=1024px) {
.center-block-custom {
width: 700px;
margin: 70px auto 0;
height: calc(100dvh - 70px);
}
.center-block-custom-big {
.width700 {
width: 700px;
padding: 20px;
margin: 0 auto;
}
.width1200 {
width: 1200px;
margin: 70px auto 0;
padding: 20px;
margin: 0 auto;
}
.center-middle-block-custom {
display: grid;
place-items: center;
}
.content-block {
margin-top: 70px;
padding: 20px 0;
}
}
}
src/components/CatalogPage.vue
+4 -18
View File
@@ -27,8 +27,8 @@ getScenarios()
</script>
<template>
<div class="center-block-custom-big content-block">
<div class="scenarios-container">
<div class="center-block-custom">
<div class="width1200 display-table">
<div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioInfo(scenario.id!)"
v-bind:key="scenario.id">
<div class="scenario-image-block scenario-image" :style="{ backgroundImage: `url(${scenario.image})` }">
@@ -40,7 +40,8 @@ getScenarios()
<p class="scenario-description">{{ scenario.description }}</p>
<p class="scenario-label">
<n-tag :bordered="false" type="success" class="status-block">Автор: {{ scenario.author?.username
<n-tag :bordered="false" type="success" class="status-block">Автор: {{
scenario.author?.username
}}</n-tag>
</p>
</div>
@@ -52,17 +53,6 @@ getScenarios()
</template>
<style scoped>
.scenarios-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: auto;
padding: 0;
height: calc(100vh - 150px);
/* border: 1px solid red; */
}
.scenario-block {
position: relative;
margin: 10px;
@@ -113,10 +103,6 @@ getScenarios()
}
@media (width >=1024px) {
.scenarios-container {
height: calc(100vh - 70px);
}
.scenario-block {
width: 250px;
height: 400px;
src/components/GameInputForm.vue
+9 -2
View File
@@ -25,7 +25,7 @@ async function addClickButton() {
<BeltBlock class="input-form">
<MetalPlate class="controller-metal controller-metal-left"></MetalPlate>
<MetalPlate class="controller-metal controller-metal-right"></MetalPlate>
<div class="center-block-custom">
<div class="center-block-700">
<div class="controller">
<div class="game-input">
<input id="run" class="game-input-run" v-model="code" type="text" placeholder="Место назначения">
@@ -94,7 +94,7 @@ async function addClickButton() {
background-size: cover;
border: 0;
font-size: 18px;
font-family: a_OldTyper;
font-family: 'font_old_typer';
background-color: transparent;
}
@@ -134,4 +134,11 @@ async function addClickButton() {
.game-button-run {
cursor: pointer;
}
@media (min-width: 1025px) {
.center-block-700 {
width: 700px;
margin: 0 auto;
}
}
</style>
src/components/GamePage.vue
+6 -4
View File
@@ -39,10 +39,12 @@ async function toTeamStory(id: number, password: string) {
</script>
<template>
<div class="center-block-custom content-block">
<div v-for="team in game.teams" class="team-block" @click="toTeamStory(team.id!, team.password!)">
<div class="team-title">
{{ team.name }}
<div class="center-block-custom">
<div class="width1200">
<div v-for="team in game.teams" class="team-block" @click="toTeamStory(team.id!, team.password!)">
<div class="team-title">
{{ team.name }}
</div>
</div>
</div>
</div>
src/components/GamesPage.vue
+9 -7
View File
@@ -29,13 +29,15 @@ async function toGame(id: number) {
</script>
<template>
<div class="center-block-custom content-block">
<div v-for="game in games" class="game-block" @click="toGame(game.id!)">
<div class="game-title">
{{ game.name }}
</div>
<div class="game-description">
{{ game.description }}
<div class="center-block-custom">
<div class="width1200">
<div v-for="game in games" class="game-block" @click="toGame(game.id!)">
<div class="game-title">
{{ game.name }}
</div>
<div class="game-description">
{{ game.description }}
</div>
</div>
</div>
</div>
src/components/HeaderText.vue
+4 -2
View File
@@ -3,12 +3,14 @@
</script>
<template>
<span class="text-with-font"><slot></slot></span>
<span class="text-with-font">
<slot></slot>
</span>
</template>
<style scoped>
.text-with-font {
font-family: a_OldTyper;
font-family: 'font_old_typer';
color: #bfa07d;
font-weight: 600;
letter-spacing: 2px;
src/components/OfficePage.vue
+4 -7
View File
@@ -20,13 +20,10 @@ getPermissions()
</script>
<template>
<div class="center-block-custom content-block">
<p>Доброго времени суток, {{ authStore.username }}.</p>
<!-- <p>
{{ authStore.userRoles }}
</p>
{{ permissions }} -->
<div class="center-block-custom">
<div class="width700">
<p>Доброго времени суток, {{ authStore.username }}.</p>
</div>
</div>
<HeaderMenu active="office" />
src/components/ScenarioPage.vue
+2 -6
View File
@@ -37,7 +37,7 @@ getScenario(Number(scenarioId))
<template>
<div class="center-block-custom">
<div class="scenario-container">
<div class="width700">
<div class="scenario-title">
{{ scenario.name }}
</div>
@@ -47,7 +47,7 @@ getScenario(Number(scenarioId))
</div>
<div class="scenario-author">
<n-tag :bordered="false" type="success" class="status-block">Автор: {{ scenario.author?.username
}}</n-tag>
}}</n-tag>
</div>
</div>
</div>
@@ -56,10 +56,6 @@ getScenario(Number(scenarioId))
</template>
<style scoped>
.scenario-container {
padding: 20px;
}
.scenario-title {
font-size: 24px;
margin-bottom: 10px;
src/components/ScenariosEditorPage.vue
+33 -44
View File
@@ -272,39 +272,41 @@ async function deletePlace(place: Place) {
</script>
<template>
<div class="center-block-custom-big">
<div class="places-container">
<n-alert v-if="scenario.status == 'public'" title="Сценарий опубликован" type="warning"
style="margin-bottom: 20px;">
Не рекомендуется редактировать сценарий когда он опубликован.
</n-alert>
<div class="center-block-custom">
<div class="width700">
<div class="places-container">
<n-alert v-if="scenario.status == 'public'" title="Сценарий опубликован" type="warning"
style="margin-bottom: 20px;">
Не рекомендуется редактировать сценарий когда он опубликован.
</n-alert>
<div class="settings-block">
Точек: {{ scenario.story?.places?.length }}
<n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button">
<Icon class="settings-icon">
<Settings />
</Icon>
Настройки
</n-button>
<div class="settings-block">
Точек: {{ scenario.story?.places?.length }}
<n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button">
<Icon class="settings-icon">
<Settings />
</Icon>
Настройки
</n-button>
</div>
<PlaceBlock v-model:mode="mode" v-model:newPlaceCode="code" v-model:newPlaceName="name"
v-model:newPlaceText="text">
<n-flex justify="end">
<n-button @click="cancelAddPlace()">Отмена</n-button>
<n-button @click="addPlace()" :disabled="!code">Добавить точку</n-button>
</n-flex>
</PlaceBlock>
<PlaceBlock :place="place" v-model:mode="place.mode" v-for="place in scenario.story?.places"
v-bind:key="place.oldCode">
<n-flex justify="end">
<n-button @click="deletePlace(place)" type="error" ghost>Удалить</n-button>
<n-button @click="cancelUpdatePlace(place)">Отмена</n-button>
<n-button @click="updatePlace(place)" :disabled="place.code == ''">Сохранить</n-button>
</n-flex>
</PlaceBlock>
</div>
<PlaceBlock v-model:mode="mode" v-model:newPlaceCode="code" v-model:newPlaceName="name"
v-model:newPlaceText="text">
<n-flex justify="end">
<n-button @click="cancelAddPlace()">Отмена</n-button>
<n-button @click="addPlace()" :disabled="!code">Добавить точку</n-button>
</n-flex>
</PlaceBlock>
<PlaceBlock :place="place" v-model:mode="place.mode" v-for="place in scenario.story?.places"
v-bind:key="place.oldCode">
<n-flex justify="end">
<n-button @click="deletePlace(place)" type="error" ghost>Удалить</n-button>
<n-button @click="cancelUpdatePlace(place)">Отмена</n-button>
<n-button @click="updatePlace(place)" :disabled="place.code == ''">Сохранить</n-button>
</n-flex>
</PlaceBlock>
</div>
</div>
@@ -414,18 +416,5 @@ async function deletePlace(place: Place) {
.places-container {
display: flex;
flex-flow: column nowrap;
overflow-y: auto;
margin-top: 70px;
padding: 20px;
height: calc(100vh - 150px);
/* border: 1px solid red; */
}
@media (width >=1024px) {
.places-container {
padding: 20px 250px;
height: calc(100vh - 70px);
}
}
</style>
src/components/ScenariosPage.vue
+2 -17
View File
@@ -42,8 +42,8 @@ getScenarios()
</script>
<template>
<div class="center-block-custom-big content-block">
<div class="scenarios-container">
<div class="center-block-custom">
<div class="width1200 display-table">
<div class="scenario-block" @click="showAddScenarioModal = true">
<div class="scenario-image-block scenario-image-plus">+</div>
<div class="scenario-content-block">
@@ -88,17 +88,6 @@ getScenarios()
</template>
<style scoped>
.scenarios-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: auto;
padding: 0;
height: calc(100vh - 150px);
/* border: 1px solid red; */
}
.scenario-block {
position: relative;
margin: 10px;
@@ -152,10 +141,6 @@ getScenarios()
}
@media (width >=1024px) {
.scenarios-container {
height: calc(100vh - 70px);
}
.scenario-block {
width: 250px;
height: 400px;
src/components/TeamStoryPage.vue
+7 -14
View File
@@ -66,8 +66,9 @@ type AdvancedPlace = {
</script>
<template>
<div class="center-block-custom-big">
<div class="places-container">
<div class="center-block-custom bottom-margin">
<div class="width700">
<GameInputForm :addAction="addAction"></GameInputForm>
<PlaceBlock :place="advancedPlace.place" v-model:mode="advancedPlace.mode"
@@ -80,21 +81,13 @@ type AdvancedPlace = {
</template>
<style scoped>
.places-container {
display: flex;
flex-flow: column nowrap;
overflow-y: auto;
margin-top: 70px;
padding: 20px;
height: calc(100vh - 150px);
/* border: 1px solid red; */
.bottom-margin {
height: calc(100dvh - 70px - 76px);
}
@media (width >=1024px) {
.places-container {
padding: 20px 250px;
height: calc(100vh - 70px - 75px);
.bottom-margin {
height: calc(100dvh - 70px - 76px);
}
}
</style>
src/components/UsersPage.vue
+2 -10
View File
@@ -41,10 +41,8 @@ async function deleteRole(userId: number, role: string) {
</script>
<template>
<div class="center-block-custom content-block">
<div class="users-container">
<div class="center-block-custom">
<div class="width700">
<div v-for="user in users" v-bind:key="user.id" class="user-block">
<div class="user-field">
Позывной: {{ user.username }}
@@ -71,19 +69,13 @@ async function deleteRole(userId: number, role: string) {
</n-flex>
</div>
</div>
</div>
<HeaderMenu active="users" />
</template>
<style scoped>
.users-container {
padding-bottom: 20px;
}
.user-block {
border: 1px solid #444;
border-radius: 10px;