diff --git a/view/app.py b/view/app.py index 8604279..b7468cb 100644 --- a/view/app.py +++ b/view/app.py @@ -47,6 +47,9 @@ def index(): search = request.args.get("search", type=str, default="") query = websearch_to_fts_query(search) if search else None + # View options + compact_diffs = request.args.get("compact_diffs") is not None + db.execute(f"SELECT count(*) FROM diffs{'_fts(?)' if query else ''}", (query,) if query else ()) diff_count = db.fetchall()[0][0] @@ -77,6 +80,7 @@ def index(): pagination=pagination, diff_count = diff_count, search=search, + compact_diffs=compact_diffs, ) diff --git a/view/static/main.css b/view/static/main.css index c7be301..fa8053d 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -242,7 +242,7 @@ details[open] summary::before { width: 1.25em; } -.input { +.text-input { border-radius: var(--radius-s); border: 1px solid var(--border-color); padding: 0.375rem 0.75rem; @@ -250,12 +250,25 @@ details[open] summary::before { transition: border-color 120ms, box-shadow 120ms; } -.input:focus { +.text-input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 2px hsl(225 90% 40% / 50%); outline: none; } +.checkbox { + font-size: var(--font-size-s); + display: flex; + align-items: center; + color: var(--color-muted); + font-weight: 500; + cursor: pointer; +} + +.checkbox input { + margin-right: 0.5rem; +} + .button { display: inline-flex; align-items: center; @@ -367,7 +380,7 @@ details[open] summary::before { /* Index */ -.filters { +.home-filters { margin-bottom: 2rem; position: sticky; top: 0; @@ -376,12 +389,20 @@ details[open] summary::before { border-bottom: 1px solid var(--border-color); } -.filters form { +.home-filters .container { + display: flex; + align-items: center; + flex-wrap: nowrap; + flex-shrink: 0; + gap: 1.5rem; +} + +.home-filters form { display: flex; gap: 0.5rem; } -.filters [name="search"] { +.home-filters [name="search"] { width: 100%; max-width: 20rem; } diff --git a/view/templates/index.html b/view/templates/index.html index abd1dbe..fbae8f8 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -3,11 +3,11 @@ {% block header_class %}header-extended{% endblock header_class %} {% block body %} -<div class="filters"> +<div class="home-filters"> <div class="container"> <form method="get"> <input - class="input" + class="text-input" type="text" id="search" name="search" @@ -22,10 +22,19 @@ <svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg> </button> </form> + <label class="checkbox"> + <input type="checkbox" name="compact_diffs" value="true" + hx-get="/" + hx-target="#diff-list" + hx-select="#diff-list" + hx-swap="outerHTML" + /> + <p>Compact diffs</p> + </label> </div> </div> -<div class="container home-diff-list"> +<div class="container home-diff-list" id="diff-list"> {% for diff in diffs %} <article class="card changeset-card"> <p class="changeset-card-actions"> @@ -41,27 +50,31 @@ </a> </p> - <div class="changeset-card-diff-s"> - <div> - <div class="text-caption">Before</div> - <div class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</div> + {% if compact_diffs %} + <div class="changeset-card-title">{{ diff.diff_html|safe }}</div> + {% else %} + <div class="changeset-card-diff-s"> + <div> + <div class="text-caption">Before</div> + <div class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</div> + </div> + <div> + <div class="text-caption">After</div> + <div class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</div> + </div> </div> - <div> - <div class="text-caption">After</div> - <div class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</div> - </div> - </div> - <table class="changeset-card-diff-m"> - <tr> - <th class="text-caption table-head">Before</th> - <td class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</td> - </tr> - <tr> - <th class="text-caption table-head">After</th> - <td class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</td> - </tr> - </table> + <table class="changeset-card-diff-m"> + <tr> + <th class="text-caption table-head">Before</th> + <td class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</td> + </tr> + <tr> + <th class="text-caption table-head">After</th> + <td class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</td> + </tr> + </table> + {% endif %} </article> {% endfor %} </div>