mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 11:09:18 +02:00
Replace site-search BEM classes with semantic header form[role="search"] selectors
CSS: .site-search → header form[role="search"],
.site-search__icon → header form[role="search"] svg,
.site-search__input → header form[role="search"] input,
.site-search__input::placeholder → header form[role="search"] input::placeholder
HTML: Removed class="site-search", class="site-search__icon", and
class="site-search__input" from header.php and search-bar.php.
The form already uses role="search" and contains a single svg + input,
so the semantic selectors are unambiguous.
This commit is contained in:
8
TODO.md
8
TODO.md
@@ -18,9 +18,9 @@
|
|||||||
- [ ] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure` — already wrapped in `<figure>` inside `<aside>`
|
- [ ] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure` — already wrapped in `<figure>` inside `<aside>`
|
||||||
- [ ] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption` — native `<figcaption>` element
|
- [ ] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption` — native `<figcaption>` element
|
||||||
- [ ] **`search.css`**: Replace `.repertoire-col > h2` styling — already targets `section > h2`, can use `.repertoire-index section > h2`
|
- [ ] **`search.css`**: Replace `.repertoire-col > h2` styling — already targets `section > h2`, can use `.repertoire-index section > h2`
|
||||||
- [ ] **`common.css`**: Replace `.site-search__icon` with `header form[role="search"] svg`
|
- [x] **`common.css`**: Replace `.site-search__icon` with `header form[role="search"] svg`
|
||||||
- [ ] **`common.css`**: Replace `.site-search__input` with `header form[role="search"] input`
|
- [x] **`common.css`**: Replace `.site-search__input` with `header form[role="search"] input`
|
||||||
- [ ] **`common.css`**: Replace `.site-search` with `header form[role="search"]`
|
- [x] **`common.css`**: Replace `.site-search` with `header form[role="search"]`
|
||||||
- [ ] **`system.php`**: Move inline `<style>` block to `system.css` (already in TODO, reinforced here)
|
- [ ] **`system.php`**: Move inline `<style>` block to `system.css` (already in TODO, reinforced here)
|
||||||
|
|
||||||
### Template HTML changes to match
|
### Template HTML changes to match
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
- [ ] In `tfe.php`, remove `class="tfe-media-block"` — target via `aside figure`
|
- [ ] In `tfe.php`, remove `class="tfe-media-block"` — target via `aside figure`
|
||||||
- [ ] In `tfe.php`, remove `class="tfe-file-caption"` — target via `aside figcaption`
|
- [ ] In `tfe.php`, remove `class="tfe-file-caption"` — target via `aside figcaption`
|
||||||
- [ ] In `index.php`, remove `class="card__caption"` — target via `li > a > p`
|
- [ ] In `index.php`, remove `class="card__caption"` — target via `li > a > p`
|
||||||
- [ ] In `search-bar.php` and `header.php`, remove `class="site-search__icon"` and `class="site-search__input"`
|
- [x] In `search-bar.php` and `header.php`, remove `class="site-search"`, `class="site-search__icon"` and `class="site-search__input"`
|
||||||
|
|
||||||
## PHP Components (Reusable Partials/Includes)
|
## PHP Components (Reusable Partials/Includes)
|
||||||
|
|
||||||
|
|||||||
@@ -114,7 +114,7 @@ header nav ul a[aria-current="page"] {
|
|||||||
/* ============================================================
|
/* ============================================================
|
||||||
SEARCH BAR (shared)
|
SEARCH BAR (shared)
|
||||||
============================================================ */
|
============================================================ */
|
||||||
.site-search {
|
header form[role="search"] {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
@@ -126,7 +126,7 @@ header nav ul a[aria-current="page"] {
|
|||||||
color: #9557b5;
|
color: #9557b5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-search__icon {
|
header form[role="search"] svg {
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
@@ -134,7 +134,7 @@ header nav ul a[aria-current="page"] {
|
|||||||
stroke: #9557b5;
|
stroke: #9557b5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-search__input {
|
header form[role="search"] input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
@@ -144,7 +144,7 @@ header nav ul a[aria-current="page"] {
|
|||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-search__input::placeholder {
|
header form[role="search"] input::placeholder {
|
||||||
color: #9557b5;
|
color: #9557b5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -56,17 +56,16 @@ $_thesisId = $_GET['id'] ?? null;
|
|||||||
// Search bar — public section only
|
// Search bar — public section only
|
||||||
$searchBarValue = $searchBarValue ?? $_GET['query'] ?? '';
|
$searchBarValue = $searchBarValue ?? $_GET['query'] ?? '';
|
||||||
?>
|
?>
|
||||||
<form class="site-search" method="GET" action="/search.php"
|
<form method="GET" action="/search.php"
|
||||||
role="search" aria-label="Recherche">
|
role="search" aria-label="Recherche">
|
||||||
<label for="site-search-input" class="sr-only">Recherche</label>
|
<label for="site-search-input" class="sr-only">Recherche</label>
|
||||||
<svg class="site-search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||||
aria-hidden="true" focusable="false">
|
aria-hidden="true" focusable="false">
|
||||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||||
</svg>
|
</svg>
|
||||||
<input
|
<input
|
||||||
id="site-search-input"
|
id="site-search-input"
|
||||||
class="site-search__input"
|
|
||||||
type="text"
|
type="text"
|
||||||
name="query"
|
name="query"
|
||||||
placeholder="Recherche..."
|
placeholder="Recherche..."
|
||||||
|
|||||||
@@ -3,17 +3,16 @@
|
|||||||
// $searchValue: current search query (optional)
|
// $searchValue: current search query (optional)
|
||||||
$_sbValue = $searchBarValue ?? $_GET['query'] ?? '';
|
$_sbValue = $searchBarValue ?? $_GET['query'] ?? '';
|
||||||
?>
|
?>
|
||||||
<form class="site-search" method="GET" action="/search.php"
|
<form method="GET" action="/search.php"
|
||||||
role="search" aria-label="Recherche">
|
role="search" aria-label="Recherche">
|
||||||
<label for="site-search-input" class="sr-only">Recherche</label>
|
<label for="site-search-input" class="sr-only">Recherche</label>
|
||||||
<svg class="site-search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||||
aria-hidden="true" focusable="false">
|
aria-hidden="true" focusable="false">
|
||||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||||
</svg>
|
</svg>
|
||||||
<input
|
<input
|
||||||
id="site-search-input"
|
id="site-search-input"
|
||||||
class="site-search__input"
|
|
||||||
type="text"
|
type="text"
|
||||||
name="query"
|
name="query"
|
||||||
placeholder="Recherche..."
|
placeholder="Recherche..."
|
||||||
|
|||||||
Reference in New Issue
Block a user