frontend: containers refactor

frontend/src/lib/components/containers/files.svelte

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

frontend/src/lib/components/containers/images.svelte

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

frontend/src/lib/components/containers/marks.svelte

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

frontend/src/lib/components/containers/queue.svelte

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

frontend/src/lib/components/create_button.svelte

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

frontend/src/lib/components/horisontal_bar.svelte

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

frontend/src/lib/components/img_button.svelte

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

frontend/src/lib/components/mark.svelte

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

frontend/src/lib/components/queue_item.svelte

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

frontend/src/lib/css/global.css

@@ -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 * {
+.fields .input {
-    margin: 1rem;
+    margin: 0;
-    margin-bottom: 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;
 }
 
 /* Текст с троеточием в конце */

frontend/src/routes/+layout.svelte

@@ -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 CreateButton from '$lib/components/create_button.svelte';
 	import Calendar from '$lib/components/calendar.svelte';
-    import QueueItem from '$lib/components/queue_item.svelte';
+	import CreateButton from '$lib/components/create_button.svelte';
-    import AddButton from '$lib/components/add_button.svelte';
+	import Image from '$lib/components/image.svelte';
-	import File from '$lib/components/file.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"]}/>
+	<MarksContainer label="Жанры" bind:value={page_data["genres"]}/>
-	<HorisontalBar label="Теги" bind:value={page_data["tags"]}/>
+	<MarksContainer label="Теги" bind:value={page_data["tags"]}/>
-	<HorisontalBar label="Баджи" bind:value={page_data["badges"]}/>
+	<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">
+	<FileContainer />
-		<File />
-		<AddButton type="file"/>
-	</div>
 
 	<!-- Очередь публикации -->
 	<p>Очередь публикации</p>
-	<div class="input rounded">
+	<QueueContainer />
-		<QueueItem date="28.11.24" name="Fate/Stay Night (Судьба/Ночь схватки)"/>
-		<QueueItem date="30.11.24" name="Fate/Hollow Ataraxia (Судьба/Святая атараксия)"/>
-	</div>
 
 </div>
 
-<CreateButton onclick={send_json}/>
+<CreateButton bind:data={page_data}/>
 
 <style>
 	@import '$lib/css/global.css';