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
dist/assets/index-BcRBx0o9.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
dist/assets/index-BnoMdxQu.js → dist/assets/index-DxZltc9L.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
dist/assets/index-pBAjzfYV.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
dist/index.html
Vendored
+2 -2
View File
@@ -5,8 +5,8 @@
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вечерний детектив</title> <title>Вечерний детектив</title>
<script type="module" crossorigin src="/assets/index-BnoMdxQu.js"></script> <script type="module" crossorigin src="/assets/index-DxZltc9L.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-pBAjzfYV.css"> <link rel="stylesheet" crossorigin href="/assets/index-BcRBx0o9.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
src/assets/main.css
+39 -32
View File
@@ -12,57 +12,64 @@ body {
src: url('@/assets/fonts/a_OldTyper.ttf'); 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 { .height80 {
height: 80vh; height: 80vh;
} }
.center-block-custom { .content-block {
margin-top: 70px; margin-top: 70px;
} }
.center-block-custom-big { .center-block-custom {
margin-top: 70px; 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) { @media (width >=1024px) {
.center-block-custom { .center-block-custom {
width: 700px;
margin: 70px auto 0; margin: 70px auto 0;
height: calc(100dvh - 70px);
} }
.center-block-custom-big { .width700 {
width: 700px;
padding: 20px;
margin: 0 auto;
}
.width1200 {
width: 1200px; width: 1200px;
margin: 70px auto 0; padding: 20px;
margin: 0 auto;
} }
.center-middle-block-custom { .center-middle-block-custom {
display: grid; display: grid;
place-items: center; 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> </script>
<template> <template>
<div class="center-block-custom-big content-block"> <div class="center-block-custom">
<div class="scenarios-container"> <div class="width1200 display-table">
<div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioInfo(scenario.id!)" <div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioInfo(scenario.id!)"
v-bind:key="scenario.id"> v-bind:key="scenario.id">
<div class="scenario-image-block scenario-image" :style="{ backgroundImage: `url(${scenario.image})` }"> <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-description">{{ scenario.description }}</p>
<p class="scenario-label"> <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> }}</n-tag>
</p> </p>
</div> </div>
@@ -52,17 +53,6 @@ getScenarios()
</template> </template>
<style scoped> <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 { .scenario-block {
position: relative; position: relative;
margin: 10px; margin: 10px;
@@ -113,10 +103,6 @@ getScenarios()
} }
@media (width >=1024px) { @media (width >=1024px) {
.scenarios-container {
height: calc(100vh - 70px);
}
.scenario-block { .scenario-block {
width: 250px; width: 250px;
height: 400px; height: 400px;
src/components/GameInputForm.vue
+9 -2
View File
@@ -25,7 +25,7 @@ async function addClickButton() {
<BeltBlock class="input-form"> <BeltBlock class="input-form">
<MetalPlate class="controller-metal controller-metal-left"></MetalPlate> <MetalPlate class="controller-metal controller-metal-left"></MetalPlate>
<MetalPlate class="controller-metal controller-metal-right"></MetalPlate> <MetalPlate class="controller-metal controller-metal-right"></MetalPlate>
<div class="center-block-custom"> <div class="center-block-700">
<div class="controller"> <div class="controller">
<div class="game-input"> <div class="game-input">
<input id="run" class="game-input-run" v-model="code" type="text" placeholder="Место назначения"> <input id="run" class="game-input-run" v-model="code" type="text" placeholder="Место назначения">
@@ -94,7 +94,7 @@ async function addClickButton() {
background-size: cover; background-size: cover;
border: 0; border: 0;
font-size: 18px; font-size: 18px;
font-family: a_OldTyper; font-family: 'font_old_typer';
background-color: transparent; background-color: transparent;
} }
@@ -134,4 +134,11 @@ async function addClickButton() {
.game-button-run { .game-button-run {
cursor: pointer; cursor: pointer;
} }
@media (min-width: 1025px) {
.center-block-700 {
width: 700px;
margin: 0 auto;
}
}
</style> </style>
src/components/GamePage.vue
+6 -4
View File
@@ -39,10 +39,12 @@ async function toTeamStory(id: number, password: string) {
</script> </script>
<template> <template>
<div class="center-block-custom content-block"> <div class="center-block-custom">
<div v-for="team in game.teams" class="team-block" @click="toTeamStory(team.id!, team.password!)"> <div class="width1200">
<div class="team-title"> <div v-for="team in game.teams" class="team-block" @click="toTeamStory(team.id!, team.password!)">
{{ team.name }} <div class="team-title">
{{ team.name }}
</div>
</div> </div>
</div> </div>
</div> </div>
src/components/GamesPage.vue
+9 -7
View File
@@ -29,13 +29,15 @@ async function toGame(id: number) {
</script> </script>
<template> <template>
<div class="center-block-custom content-block"> <div class="center-block-custom">
<div v-for="game in games" class="game-block" @click="toGame(game.id!)"> <div class="width1200">
<div class="game-title"> <div v-for="game in games" class="game-block" @click="toGame(game.id!)">
{{ game.name }} <div class="game-title">
</div> {{ game.name }}
<div class="game-description"> </div>
{{ game.description }} <div class="game-description">
{{ game.description }}
</div>
</div> </div>
</div> </div>
</div> </div>
src/components/HeaderText.vue
+4 -2
View File
@@ -3,12 +3,14 @@
</script> </script>
<template> <template>
<span class="text-with-font"><slot></slot></span> <span class="text-with-font">
<slot></slot>
</span>
</template> </template>
<style scoped> <style scoped>
.text-with-font { .text-with-font {
font-family: a_OldTyper; font-family: 'font_old_typer';
color: #bfa07d; color: #bfa07d;
font-weight: 600; font-weight: 600;
letter-spacing: 2px; letter-spacing: 2px;
src/components/OfficePage.vue
+4 -7
View File
@@ -20,13 +20,10 @@ getPermissions()
</script> </script>
<template> <template>
<div class="center-block-custom content-block"> <div class="center-block-custom">
<p>Доброго времени суток, {{ authStore.username }}.</p> <div class="width700">
<!-- <p> <p>Доброго времени суток, {{ authStore.username }}.</p>
{{ authStore.userRoles }} </div>
</p>
{{ permissions }} -->
</div> </div>
<HeaderMenu active="office" /> <HeaderMenu active="office" />
src/components/ScenarioPage.vue
+2 -6
View File
@@ -37,7 +37,7 @@ getScenario(Number(scenarioId))
<template> <template>
<div class="center-block-custom"> <div class="center-block-custom">
<div class="scenario-container"> <div class="width700">
<div class="scenario-title"> <div class="scenario-title">
{{ scenario.name }} {{ scenario.name }}
</div> </div>
@@ -47,7 +47,7 @@ getScenario(Number(scenarioId))
</div> </div>
<div class="scenario-author"> <div class="scenario-author">
<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> }}</n-tag>
</div> </div>
</div> </div>
</div> </div>
@@ -56,10 +56,6 @@ getScenario(Number(scenarioId))
</template> </template>
<style scoped> <style scoped>
.scenario-container {
padding: 20px;
}
.scenario-title { .scenario-title {
font-size: 24px; font-size: 24px;
margin-bottom: 10px; margin-bottom: 10px;
src/components/ScenariosEditorPage.vue
+33 -44
View File
@@ -272,39 +272,41 @@ async function deletePlace(place: Place) {
</script> </script>
<template> <template>
<div class="center-block-custom-big"> <div class="center-block-custom">
<div class="places-container"> <div class="width700">
<n-alert v-if="scenario.status == 'public'" title="Сценарий опубликован" type="warning" <div class="places-container">
style="margin-bottom: 20px;"> <n-alert v-if="scenario.status == 'public'" title="Сценарий опубликован" type="warning"
Не рекомендуется редактировать сценарий когда он опубликован. style="margin-bottom: 20px;">
</n-alert> Не рекомендуется редактировать сценарий когда он опубликован.
</n-alert>
<div class="settings-block"> <div class="settings-block">
Точек: {{ scenario.story?.places?.length }} Точек: {{ scenario.story?.places?.length }}
<n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button"> <n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button">
<Icon class="settings-icon"> <Icon class="settings-icon">
<Settings /> <Settings />
</Icon> </Icon>
Настройки Настройки
</n-button> </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> </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>
</div> </div>
@@ -414,18 +416,5 @@ async function deletePlace(place: Place) {
.places-container { .places-container {
display: flex; display: flex;
flex-flow: column nowrap; 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> </style>
src/components/ScenariosPage.vue
+2 -17
View File
@@ -42,8 +42,8 @@ getScenarios()
</script> </script>
<template> <template>
<div class="center-block-custom-big content-block"> <div class="center-block-custom">
<div class="scenarios-container"> <div class="width1200 display-table">
<div class="scenario-block" @click="showAddScenarioModal = true"> <div class="scenario-block" @click="showAddScenarioModal = true">
<div class="scenario-image-block scenario-image-plus">+</div> <div class="scenario-image-block scenario-image-plus">+</div>
<div class="scenario-content-block"> <div class="scenario-content-block">
@@ -88,17 +88,6 @@ getScenarios()
</template> </template>
<style scoped> <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 { .scenario-block {
position: relative; position: relative;
margin: 10px; margin: 10px;
@@ -152,10 +141,6 @@ getScenarios()
} }
@media (width >=1024px) { @media (width >=1024px) {
.scenarios-container {
height: calc(100vh - 70px);
}
.scenario-block { .scenario-block {
width: 250px; width: 250px;
height: 400px; height: 400px;
src/components/TeamStoryPage.vue
+7 -14
View File
@@ -66,8 +66,9 @@ type AdvancedPlace = {
</script> </script>
<template> <template>
<div class="center-block-custom-big"> <div class="center-block-custom bottom-margin">
<div class="places-container">
<div class="width700">
<GameInputForm :addAction="addAction"></GameInputForm> <GameInputForm :addAction="addAction"></GameInputForm>
<PlaceBlock :place="advancedPlace.place" v-model:mode="advancedPlace.mode" <PlaceBlock :place="advancedPlace.place" v-model:mode="advancedPlace.mode"
@@ -80,21 +81,13 @@ type AdvancedPlace = {
</template> </template>
<style scoped> <style scoped>
.places-container { .bottom-margin {
display: flex; height: calc(100dvh - 70px - 76px);
flex-flow: column nowrap;
overflow-y: auto;
margin-top: 70px;
padding: 20px;
height: calc(100vh - 150px);
/* border: 1px solid red; */
} }
@media (width >=1024px) { @media (width >=1024px) {
.places-container { .bottom-margin {
padding: 20px 250px; height: calc(100dvh - 70px - 76px);
height: calc(100vh - 70px - 75px);
} }
} }
</style> </style>
src/components/UsersPage.vue
+2 -10
View File
@@ -41,10 +41,8 @@ async function deleteRole(userId: number, role: string) {
</script> </script>
<template> <template>
<div class="center-block-custom content-block"> <div class="center-block-custom">
<div class="width700">
<div class="users-container">
<div v-for="user in users" v-bind:key="user.id" class="user-block"> <div v-for="user in users" v-bind:key="user.id" class="user-block">
<div class="user-field"> <div class="user-field">
Позывной: {{ user.username }} Позывной: {{ user.username }}
@@ -71,19 +69,13 @@ async function deleteRole(userId: number, role: string) {
</n-flex> </n-flex>
</div> </div>
</div> </div>
</div> </div>
<HeaderMenu active="users" /> <HeaderMenu active="users" />
</template> </template>
<style scoped> <style scoped>
.users-container {
padding-bottom: 20px;
}
.user-block { .user-block {
border: 1px solid #444; border: 1px solid #444;
border-radius: 10px; border-radius: 10px;