VienDesu/vnshed
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: containers refactor

Browse source
This commit is contained in:
OleSTEEP 2025-10-13 21:40:31 +03:00
parent 5be65229f4
commit 09c0f12692
11 changed files with 126 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/lib/components/containers/files.svelte Normal file
View file

@ -0,0 +1,9 @@
<script>
import File from '$lib/components/file.svelte';
import AddButton from '$lib/components/add_button.svelte';
</script>
<div class="input rounded">
<File />
<AddButton type="file"/>
</div>

25
frontend/src/lib/components/containers/images.svelte Normal file
View file

@ -0,0 +1,25 @@
<script lang="ts">
import Image from "../image.svelte";
let { value = $bindable([]) } = $props();
</script>
<div class="img-conatiner rounded">
<Image />
</div>
<style>
/* Горизонтальный список */
.img-conatiner {
display: flex;
overflow-x: scroll;
align-content: center;
padding: 0.5rem;
}
.img-conatiner :global(*) {
margin: 0;
margin-right: 0.5rem;
}
</style>

39
frontend/src/lib/components/containers/marks.svelte Normal file
View file

@ -0,0 +1,39 @@
<script lang="ts">
import Mark from "../mark.svelte";
import AddButton from "../add_button.svelte";
let { value = $bindable([]), label = "" } = $props();
let items: string[] = $state([]);
</script>
<div class="marks-container input rounded">
<p>{label}</p>
{#each items as item}
<Mark text={item}/>
{/each}
<AddButton handler={() => {
items.push("");
value = items;
}} />
</div>
<style>
/* Горизонтальный список */
.marks-container {
display: flex;
overflow-x: scroll;
align-content: center;
padding: 0.5rem;
}
.marks-container :global(*) {
margin: 0;
margin-right: 0.5rem;
}
.marks-container p {
align-content: center;
}
</style>

8
frontend/src/lib/components/containers/queue.svelte Normal file
View file

@ -0,0 +1,8 @@
<script>
import QueueItem from '$lib/components/queue_item.svelte';
</script>
<div class="input rounded">
<QueueItem date="28.11.24" name="Fate/Stay Night (Судьба/Ночь схватки)"/>
<QueueItem date="30.11.24" name="Fate/Hollow Ataraxia (Судьба/Святая атараксия)"/>
</div>

15
frontend/src/lib/components/create_button.svelte
View file

@ -1,10 +1,21 @@
<!-- Кнопка "Создать" -->
<script lang="ts">
let { onclick } = $props();
let { data = $bindable() } = $props();
function send_json() {
fetch('http://127.0.0.1:8000/new', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': "<origin>"
},
body: JSON.stringify(data)
});
}
</script>
<div class="create">
<button class="rounded" id="create" {onclick}>Создать</button>
<button class="rounded" id="create" onclick={send_json}>Создать</button>
</div>
<style>

34
frontend/src/lib/components/horisontal_bar.svelte
View file

@ -1,34 +0,0 @@
<script lang="ts">
import HorisontalItem from "./horisontal_item.svelte";
import AddButton from "./add_button.svelte";
import Image from "./image.svelte";
let { value = $bindable([]), label = "", type = "text" } = $props();
let items: string[] = $state([]);
</script>
<div class="horisontal-bar {type == "text" ? "input" : ""} rounded">
<p>{label}</p>
{#if type == "text"}
{#each items as item}
<HorisontalItem text={item}/>
{/each}
<AddButton handler={() => {
items.push("");
value = items;
}} />
{:else if type == "image"}
<Image />
{/if}
</div>
<style>
/* Горизонтальный список */
:global(.horisontal-bar) {
display: flex;
overflow-x: scroll;
align-content: center;
padding: 0.5rem;
}
</style>

1
frontend/src/lib/components/img_button.svelte
View file

@ -22,6 +22,7 @@
.imgbutton img {
margin-left: auto;
margin-right: auto;
margin: 0;
width: 2rem;
}

2
frontend/src/lib/components/horisontal_item.svelte → frontend/src/lib/components/mark.svelte
View file

@ -23,7 +23,7 @@
<div>
<input type="text"
class="dyn-input rounded"
style="width: {text.length}ch;"
style="width: {text.length}ch;margin:0;"
bind:value={text}
oninput={autocomplete}>
{#if compl_data}

5
frontend/src/lib/components/queue_item.svelte
View file

@ -7,7 +7,7 @@
let { date, name } = $props();
</script>
<div class="queue-item horisontal-bar rounded">
<div class="queue-item rounded">
<p>{date}</p>
<p class="ellipsis">{name}</p>
<ImgButton style="edit" name="Изменить" image={edit_btn}/>
@ -19,9 +19,12 @@
.queue-item {
margin: 0;
padding: 0;
display: flex;
align-content: center;
}
.queue-item p {
align-content: center;
margin: 0.5rem;
}

16
frontend/src/lib/css/global.css
View file

@ -48,19 +48,26 @@ button {
/* Поле с заполняемыми полями */
.fields {
width: 100%;
height: fit-content;
display: flex;
flex-direction: column;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 1rem;
padding-bottom: 5rem;
}
/* Отступ между полями */
.fields * {
margin: 1rem;
margin-bottom: 0;
.fields .input {
margin: 0;
margin-bottom: 1rem;
}
.horisontal-bar {
display: flex;
align-content: center;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.horisontal-bar * {
@ -70,6 +77,7 @@ button {
.horisontal-bar p {
align-content: center;
margin-bottom: 1rem;
}
/* Текст с троеточием в конце */

44
frontend/src/routes/+layout.svelte
View file

@ -1,12 +1,13 @@
<script>
import favicon from '$lib/assets/favicon.svg';
import Image from '$lib/components/image.svelte';
import HorisontalBar from '$lib/components/horisontal_bar.svelte';
import Calendar from '$lib/components/calendar.svelte';
import CreateButton from '$lib/components/create_button.svelte';
import Calendar from '$lib/components/calendar.svelte';
import QueueItem from '$lib/components/queue_item.svelte';
import AddButton from '$lib/components/add_button.svelte';
import File from '$lib/components/file.svelte';
import Image from '$lib/components/image.svelte';
import FileContainer from '$lib/components/containers/files.svelte';
import QueueContainer from '$lib/components/containers/queue.svelte';
import MarksContainer from '$lib/components/containers/marks.svelte';
import ImageContainer from '$lib/components/containers/images.svelte';
let { children } = $props();
@ -18,17 +19,6 @@
tags: [],
badges: []
})
function send_json() {
fetch('http://127.0.0.1:8000/new', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': "<origin>"
},
body: JSON.stringify(page_data)
});
}
</script>
<svelte:head>
@ -59,12 +49,12 @@
</select>
</div>
<HorisontalBar label="Жанры" bind:value={page_data["genres"]}/>
<HorisontalBar label="Теги" bind:value={page_data["tags"]}/>
<HorisontalBar label="Баджи" bind:value={page_data["badges"]}/>
<MarksContainer label="Жанры" bind:value={page_data["genres"]}/>
<MarksContainer label="Теги" bind:value={page_data["tags"]}/>
<MarksContainer label="Баджи" bind:value={page_data["badges"]}/>
<p>Скриншоты</p>
<HorisontalBar type="image" />
<ImageContainer />
<!-- Календарь с датой -->
<p>Дата публикации</p>
@ -72,21 +62,15 @@
<!-- Файлы -->
<p>Файлы</p>
<div class="input rounded">
<File />
<AddButton type="file"/>
</div>
<FileContainer />
<!-- Очередь публикации -->
<p>Очередь публикации</p>
<div class="input rounded">
<QueueItem date="28.11.24" name="Fate/Stay Night (Судьба/Ночь схватки)"/>
<QueueItem date="30.11.24" name="Fate/Hollow Ataraxia (Судьба/Святая атараксия)"/>
</div>
<QueueContainer />
</div>
<CreateButton onclick={send_json}/>
<CreateButton bind:data={page_data}/>
<style>
@import '$lib/css/global.css';