commit c0402eaafbc69db8b9aaa05cf5381aab74353400
parent bbdf3ae4019cd919d3dd9834be827fe7bd609815
Author: MTRNord <mtrnord1@gmail.com>
Date: Sat, 16 Dec 2023 15:50:39 +0100
Improve styling of the checkboxes
Diffstat:
2 files changed, 90 insertions(+), 133 deletions(-)
diff --git a/src/components/Checkbox.astro b/src/components/Checkbox.astro
@@ -0,0 +1,73 @@
+---
+interface Props {
+ name: string;
+ label: string;
+ checked?: boolean;
+}
+
+const { name, label, checked = false } = Astro.props;
+---
+
+<label class="form-control">
+ <input type="checkbox" name={name} checked={checked} />
+ {label}
+</label>
+
+<style lang="scss">
+ input[type="checkbox"] {
+ /* Add if not using autoprefixer */
+ -webkit-appearance: none;
+ appearance: none;
+ /* For iOS < 15 to remove gradient background */
+ background-color: #334155;
+ /* Not removed via appearance */
+ margin: 0;
+ font: inherit;
+ color: #94a3b8;
+ width: 20px;
+ height: 20px;
+ border: 1px solid #94a3b8;
+ border-radius: 4px;
+ transform: translateY(-0.5px);
+
+ display: grid;
+ place-content: center;
+ }
+
+ input[type="checkbox"]::before {
+ content: "";
+ width: 0.65em;
+ height: 0.65em;
+ transform: scale(0);
+ transition: 120ms transform ease-in-out;
+ box-shadow: inset 1em 1em #94a3b8;
+
+ /* Windows High Contrast Mode */
+ background-color: #94a3b8;
+
+ transform-origin: bottom left;
+ clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+ }
+
+ input[type="checkbox"]:checked::before {
+ transform: scale(1);
+ }
+
+ input[type="checkbox"]:focus {
+ outline: max(2px, 0.15em) solid currentColor;
+ outline-offset: max(2px, 0.15em);
+ }
+
+ .form-control {
+ font-size: 18px;
+ font-weight: 400;
+ line-height: normal;
+ display: grid;
+ grid-template-columns: 1em auto;
+ gap: 0.5em;
+ }
+
+ .form-control + .form-control {
+ margin-top: 0.25em;
+ }
+</style>
diff --git a/src/pages/results.astro b/src/pages/results.astro
@@ -3,6 +3,7 @@ import StartLayout from "../layouts/StartLayout.astro";
import { MeiliSearch, type SearchResponse } from "meilisearch";
import Pagination from "../components/Pagination.astro";
import Preview from "../components/Preview.astro";
+import Checkbox from "../components/Checkbox.astro";
interface FilterJson {
client_server?: boolean;
@@ -108,13 +109,14 @@ function format_date(time: number | undefined): string | undefined {
<header>
<h1>Matrix Spec Changes</h1>
<div id="search">
- <input type="search" name="search" value={query} required />
+ <input type="search" name="search" aria-label="Search" value={query} required />
<svg
id="search-icon"
width="24"
height="24"
viewBox="0 0 48 48"
fill="none"
+ aria-label="Search"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_2_39)">
@@ -147,143 +149,25 @@ function format_date(time: number | undefined): string | undefined {
<div class="filter-section">
<h1>Labels</h1>
<div class="filter-options">
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="client-server"
- name="client-server"
- checked={filter_parsed.client_server}
- />
- <label for="client-server">Client-Server</label>
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="server-server"
- name="server-server"
- checked={filter_parsed.server_server}
- />
- <label for="server-server">Server-Server</label>
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="application-services"
- name="application-services"
- checked={filter_parsed.application_services}
- />
- <label for="application-services"
- >Application Services</label
- >
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="e2e"
- name="e2e"
- checked={filter_parsed.e2e}
- />
- <label for="e2e">E2EE</label>
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="kind:core"
- name="kind:core"
- checked={filter_parsed.kind_core}
- />
- <label for="kind:core">kind:core</label>
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="kind:feature"
- name="kind:feature"
- checked={filter_parsed.kind_feature}
- />
- <label for="kind:featurer">kind:feature</label>
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="kind:maintenance"
- name="kind:maintenance"
- checked={filter_parsed.kind_maintenance}
- />
- <label for="kind:maintenance"
- >kind:maintenance</label
- >
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="needs-implementation"
- name="needs-implementation"
- checked={filter_parsed.needs_implementation}
- />
- <label for="needs-implementation"
- >needs-implementation</label
- >
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="proposal"
- name="proposal"
- checked={filter_parsed.proposal}
- />
- <label for="proposal">proposal</label>
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="abandoned"
- name="abandoned"
- checked={filter_parsed.abandoned}
- />
- <label for="abandoned">abandoned</label>
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="blocked"
- name="blocked"
- checked={filter_parsed.blocked}
- />
- <label for="blocked">blocked</label>
- </div>
+ <Checkbox name="client-server" label="Client-Server" checked={filter_parsed.client_server} />
+ <Checkbox name="server-server" label="Server-Server" checked={filter_parsed.server_server} />
+ <Checkbox name="application-services" label="Application Services" checked={filter_parsed.application_services} />
+ <Checkbox name="e2e" label="E2EE" checked={filter_parsed.e2e} />
+ <Checkbox name="kind:core" label="kind:core" checked={filter_parsed.kind_core} />
+ <Checkbox name="kind:feature" label="kind:feature" checked={filter_parsed.kind_feature} />
+ <Checkbox name="kind:maintenance" label="kind:maintenance" checked={filter_parsed.kind_maintenance} />
+ <Checkbox name="needs-implementation" label="needs-implementation" checked={filter_parsed.needs_implementation} />
+ <Checkbox name="proposal" label="proposal" checked={filter_parsed.proposal} />
+ <Checkbox name="abandoned" label="abandoned" checked={filter_parsed.abandoned} />
+ <Checkbox name="blocked" label="blocked" checked={filter_parsed.blocked} />
</div>
</div>
<div class="filter-section">
<h1>State</h1>
<div class="filter-options">
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="merged"
- name="merged"
- checked={filter_parsed.merged}
- />
- <label for="merged">merged</label>
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="closed"
- name="closed"
- checked={filter_parsed.closed}
- />
- <label for="closed">closed</label>
- </div>
- <div class="filter-wrapper">
- <input
- type="checkbox"
- id="other"
- name="other"
- checked={filter_parsed.other}
- />
- <label for="other">other</label>
- </div>
+ <Checkbox name="merged" label="merged" checked={filter_parsed.merged} />
+ <Checkbox name="closed" label="closed" checked={filter_parsed.closed} />
+ <Checkbox name="other" label="other" checked={filter_parsed.other} />
</div>
</div>
