diff options
| -rw-r--r-- | static/styles.css | 13 | ||||
| -rw-r--r-- | templates/form.html | 42 |
2 files changed, 32 insertions, 23 deletions
diff --git a/static/styles.css b/static/styles.css index 24340e7..480ace0 100644 --- a/static/styles.css +++ b/static/styles.css @@ -148,11 +148,22 @@ button:hover { color: var(--text); } -.page-heading, +.page-heading { + padding: 48px 0 26px; +} + .form-heading { + display: flex; + align-items: flex-end; + justify-content: space-between; padding: 48px 0 26px; } +.form-heading .star-button { + font-size: 1.6rem; + width: 1.4em; +} + .page-heading-row, .stats-panel-header { display: flex; diff --git a/templates/form.html b/templates/form.html index 23e6d2d..da76f66 100644 --- a/templates/form.html +++ b/templates/form.html @@ -4,11 +4,6 @@ {% block content %} <section class="form-shell"> - <div class="form-heading"> - <p class="eyebrow">Diary Entry</p> - <h1>{{ page_title }}</h1> - </div> - {% if error %} <div class="notice error">{{ error }}</div> {% endif %} @@ -25,6 +20,26 @@ <form class="film-form" method="post" action="{{ action }}"> <input id="tmdb_id" name="tmdb_id" type="hidden" value="{{ film.tmdb_id if film and film.tmdb_id else '' }}"> + <div class="form-heading"> + <div> + <p class="eyebrow">Diary Entry</p> + <h1>{{ page_title }}</h1> + </div> + {% set current_stars = film.stars if film and film.stars else 0 %} + <input type="hidden" id="stars" name="stars" value="{{ current_stars }}"> + <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 class="form-grid"> <div class="field span-2"> <label for="title">Display title</label> @@ -82,23 +97,6 @@ </select> </div> - <div class="field"> - <label>Stars</label> - {% set current_stars = film.stars if film and film.stars else 0 %} - <input type="hidden" id="stars" name="stars" value="{{ current_stars }}"> - <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 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 %}> |