diff options
Diffstat (limited to 'templates/form.html')
| -rw-r--r-- | templates/form.html | 226 |
1 files changed, 128 insertions, 98 deletions
diff --git a/templates/form.html b/templates/form.html index cd29e67..f7bbbf1 100644 --- a/templates/form.html +++ b/templates/form.html @@ -13,138 +13,168 @@ {% set current_stars = film.stars if film and film.stars else 0 %} <input type="hidden" id="stars" name="stars" value="{{ current_stars }}"> - <div class="form-heading"> - <p class="eyebrow">Diary Entry</p> - <div class="form-heading-row"> - <h1>{{ page_title }}</h1> - <div class="star-control" role="group" aria-label="Rate film" data-form-stars data-current-stars="{{ current_stars }}"> - {% for value in range(1, 4) %} - <button - type="button" - class="star-button {% if current_stars >= value %}is-active{% endif %}" - data-stars="{{ value }}" - aria-label="{{ value }} star{% if value > 1 %}s{% endif %}" - aria-pressed="{% if current_stars >= value %}true{% else %}false{% endif %}" - >✦</button> - {% endfor %} + <section class="form-hero"> + <div class="form-heading"> + <p class="eyebrow">Diary Entry</p> + <div class="form-heading-row"> + <div> + <h1>{{ page_title }}</h1> + <p class="form-intro">Search TMDB first, then tune the entry like a ledger instead of filling a blank spreadsheet.</p> + </div> + <div class="star-control" role="group" aria-label="Rate film" data-form-stars data-current-stars="{{ current_stars }}"> + {% for value in range(1, 4) %} + <button + type="button" + class="star-button {% if current_stars >= value %}is-active{% endif %}" + data-stars="{{ value }}" + aria-label="{{ value }} star{% if value > 1 %}s{% endif %}" + aria-pressed="{% if current_stars >= value %}true{% else %}false{% endif %}" + >✦</button> + {% endfor %} + </div> </div> </div> - </div> + </section> - <div class="tmdb-panel"> - <label for="tmdb-query">TMDB title search</label> + <section class="form-panel tmdb-panel"> + <div class="form-panel-head"> + <p class="eyebrow">Lookup</p> + <h2>TMDB title search</h2> + </div> <div class="search-row"> <input id="tmdb-query" type="search" autocomplete="off" placeholder="Search by title"> <button id="tmdb-search" type="button">Search</button> </div> <div id="tmdb-results" class="tmdb-results" aria-live="polite"></div> <div id="duplicate-notice" class="notice" hidden></div> - </div> + </section> - <div class="form-grid"> - <div class="field span-2"> - <label for="title">Display title</label> - <input id="title" name="title" required value="{{ film.title if film else '' }}"> + <section class="form-panel"> + <div class="form-panel-head"> + <p class="eyebrow">Identity</p> + <h2>Core film record</h2> </div> + <div class="form-grid"> + <div class="field span-2"> + <label for="title">Display title</label> + <input id="title" name="title" required value="{{ film.title if film else '' }}"> + </div> - <div class="field span-2"> - <label for="original_title">Original title</label> - <input id="original_title" name="original_title" value="{{ film.original_title if film and film.original_title else '' }}"> - </div> + <div class="field span-2"> + <label for="original_title">Original title</label> + <input id="original_title" name="original_title" value="{{ film.original_title if film and film.original_title else '' }}"> + </div> - <div class="field"> - <label for="director">Director</label> - <input id="director" name="director" value="{{ film.director if film and film.director else '' }}"> - </div> + <div class="field"> + <label for="director">Director</label> + <input id="director" name="director" value="{{ film.director if film and film.director else '' }}"> + </div> - <div class="field"> - <label for="year">Year</label> - <input id="year" name="year" inputmode="numeric" value="{{ film.year if film and film.year else '' }}"> - </div> + <div class="field"> + <label for="year">Year</label> + <input id="year" name="year" inputmode="numeric" value="{{ film.year if film and film.year else '' }}"> + </div> - <div class="field"> - <label for="country">Country</label> - <input id="country" name="country" value="{{ film.country if film and film.country else '' }}"> - </div> + <div class="field"> + <label for="country">Country</label> + <input id="country" name="country" value="{{ film.country if film and film.country else '' }}"> + </div> - <div class="field"> - <label for="genre">Genre</label> - <input id="genre" name="genre" value="{{ film.genre if film and film.genre else '' }}"> - </div> + <div class="field"> + <label for="genre">Genre</label> + <input id="genre" name="genre" value="{{ film.genre if film and film.genre else '' }}"> + </div> - <div class="field"> - <label for="language">Language</label> - <input id="language" name="language" value="{{ film.language if film and film.language else '' }}"> - </div> + <div class="field"> + <label for="language">Language</label> + <input id="language" name="language" value="{{ film.language if film and film.language else '' }}"> + </div> - <div class="field"> - <label for="runtime">Runtime</label> - <input id="runtime" name="runtime" type="number" min="0" inputmode="numeric" value="{{ film.runtime if film and film.runtime is not none else '' }}"> + <div class="field"> + <label for="runtime">Runtime</label> + <input id="runtime" name="runtime" type="number" min="0" inputmode="numeric" value="{{ film.runtime if film and film.runtime is not none else '' }}"> + </div> </div> + </section> - <div class="field"> - <label for="date_watched">Watched</label> - <input id="date_watched" name="date_watched" type="date" value="{{ film.date_watched if film and film.date_watched else '' }}" - {% if not (film and film.date_watched) %}data-default-today{% endif %}> + <section class="form-panel"> + <div class="form-panel-head"> + <p class="eyebrow">Log</p> + <h2>Watch context</h2> </div> + <div class="form-grid"> + <div class="field"> + <label for="date_watched">Watched</label> + <input id="date_watched" name="date_watched" type="date" value="{{ film.date_watched if film and film.date_watched else '' }}" + {% if not (film and film.date_watched) %}data-default-today{% endif %}> + </div> - <div class="field"> - <label for="shelf">Shelf</label> - {% set current_shelf = shelf_override if shelf_override else (film.shelf if film and film.shelf else 'diary') %} - <select id="shelf" name="shelf"> - <option value="diary" {% if current_shelf == 'diary' %}selected{% endif %}>Diary</option> - <option value="queue" {% if current_shelf == 'queue' %}selected{% endif %}>Queue</option> - <option value="abandoned" {% if current_shelf == 'abandoned' %}selected{% endif %}>Abandoned</option> - </select> - </div> + <div class="field"> + <label for="shelf">Shelf</label> + {% set current_shelf = shelf_override if shelf_override else (film.shelf if film and film.shelf else 'diary') %} + <select id="shelf" name="shelf"> + <option value="diary" {% if current_shelf == 'diary' %}selected{% endif %}>Diary</option> + <option value="queue" {% if current_shelf == 'queue' %}selected{% endif %}>Queue</option> + <option value="abandoned" {% if current_shelf == 'abandoned' %}selected{% endif %}>Abandoned</option> + </select> + </div> - <div class="field checkbox-field"> - <label class="check-label" for="rewatch"> - <input id="rewatch" name="rewatch" type="checkbox" value="on" {% if film and film.rewatch %}checked{% endif %}> - Rewatch - </label> - </div> + <div class="field checkbox-field"> + <label class="check-label" for="rewatch"> + <input id="rewatch" name="rewatch" type="checkbox" value="on" {% if film and film.rewatch %}checked{% endif %}> + Rewatch + </label> + </div> - <div class="field"> - <label for="rewatch_count">Rewatch count</label> - <input id="rewatch_count" name="rewatch_count" type="number" min="0" inputmode="numeric" value="{{ film.rewatch_count if film and film.rewatch_count is not none else 0 }}"> - </div> + <div class="field"> + <label for="rewatch_count">Rewatch count</label> + <input id="rewatch_count" name="rewatch_count" type="number" min="0" inputmode="numeric" value="{{ film.rewatch_count if film and film.rewatch_count is not none else 0 }}"> + </div> - <div class="field span-2"> - <label for="watched_with">Watched with</label> - <input id="watched_with" name="watched_with" placeholder="Solo, Maya, Film club" value="{{ film.watched_with if film and film.watched_with else '' }}"> - </div> + <div class="field span-2"> + <label for="watched_with">Watched with</label> + <input id="watched_with" name="watched_with" placeholder="Solo, Maya, Film club" value="{{ film.watched_with if film and film.watched_with else '' }}"> + </div> - <div class="field"> - <label for="how_found">How found</label> - <input id="how_found" name="how_found" placeholder="Recommendation, festival, streaming queue" value="{{ film.how_found if film and film.how_found else '' }}"> - </div> + <div class="field"> + <label for="how_found">How found</label> + <input id="how_found" name="how_found" placeholder="Recommendation, festival, streaming queue" value="{{ film.how_found if film and film.how_found else '' }}"> + </div> - <div class="field"> - <label for="context">Context</label> - <input id="context" name="context" placeholder="Criterion, Festival, Kiarostami deep-dive" value="{{ film.context if film and film.context else '' }}"> + <div class="field"> + <label for="context">Context</label> + <input id="context" name="context" placeholder="Criterion, Festival, Kiarostami deep-dive" value="{{ film.context if film and film.context else '' }}"> + </div> </div> + </section> - <div class="field span-2"> - <label for="poster_url">Poster URL</label> - <input id="poster_url" name="poster_url" value="{{ film.poster_url if film and film.poster_url else '' }}"> + <section class="form-panel"> + <div class="form-panel-head"> + <p class="eyebrow">Archive</p> + <h2>Poster and notes</h2> </div> + <div class="form-grid form-grid-archive"> + <div class="field span-2"> + <label for="poster_url">Poster URL</label> + <input id="poster_url" name="poster_url" value="{{ film.poster_url if film and film.poster_url else '' }}"> + </div> - <div class="poster-preview-field"> - <div class="poster-frame poster-preview"> - {% if film and film.poster_url %} - <img id="poster-preview" src="{{ film.poster_url }}" alt="Poster preview"> - {% else %} - <img id="poster-preview" alt="Poster preview"> - {% endif %} + <div class="poster-preview-field"> + <div class="poster-frame poster-preview"> + {% if film and film.poster_url %} + <img id="poster-preview" src="{{ film.poster_url }}" alt="Poster preview"> + {% else %} + <img id="poster-preview" alt="Poster preview"> + {% endif %} + </div> </div> - </div> - <div class="field notes-field"> - <label for="notes">Notes</label> - <textarea id="notes" name="notes" rows="10">{{ film.notes if film and film.notes else '' }}</textarea> + <div class="field notes-field"> + <label for="notes">Notes</label> + <textarea id="notes" name="notes" rows="10">{{ film.notes if film and film.notes else '' }}</textarea> + </div> </div> - </div> + </section> <div class="form-actions"> <a href="{{ '/films/' ~ film.id if film and film.id else '/' }}">Cancel</a> |