comicinfo-editor-v2/src/lib/MetadataInput.svelte

<script lang="ts">
  import {writable} from "svelte/store";
  import type {Writable} from "svelte/store";
  import IntegerInput from "./IntegerInput.svelte";

  let volumeNumber = 0;
  let chapterNumber = 0;
  let pageCount = 0;
  let chapterCount = 0;
</script>

<div class="metadataInput">
  <h1>Metadata</h1>

  <label for="series">Series:</label>
  <input id="series" type="text"><br>

  <label for="title">Title:</label>
  <input id="title" type="text"><br>

  <label for="volume">Volume:</label>
  <IntegerInput id="volume" bind:value={volumeNumber} />
  <label for="chapter">Chapter:</label>
  <IntegerInput id="chapter" bind:value={chapterNumber} /> /

  <IntegerInput id="chapter_count" bind:value={chapterCount} negative={true}/><br>

  <label for="page_count">Page Count</label>
  <IntegerInput id="page_count" bind:value={pageCount} /><br>

  <label for="summary">Summary:</label><br>
  <label for="summary"></label><input id="series" type="text"><br>

  <label for="release_date">Release Date:</label>
  <input id="release_date" type="text"><br>

  <label for="author">Author:</label>
  <input id="author" type="text">

  <label for="typesetter">Typesetter:</label>
  <input id="typesetter" type="text">

  <label for="editor">Editor:</label>
  <input id="editor" type="text"><br>

  <label for="translator">Translator</label>
  <input id="translator" type="text">

  <label for="publisher">Publisher</label>
  <input id="publisher" type="text"><br>

  <label for="tags">Tags</label>
  <input id="tags" type="text"><br>

  <label for="genre">Genre</label>
  <input id="genre" type="text">

  <label for="lang">Language</label>
  <input id="lang" type="text"><br>

  <label for="age_rating">Age Rating</label>
  <input id="age_rating" type="text"><br>

  <input type="submit" value="Save"/>
</div>

<style>
  .metadataInput {
    height: 100%;

    overflow: auto;
  }

  .metadataInput label, input[type="submit"] {
    margin-left: 4rem;
  }

  .metadataInput h1 {
    position: sticky;
    top: 0;

    margin: 0;

    border-bottom: 2px solid black;

    background-color: var(--color-bg);
    padding: 1.3rem;
  }
</style>