Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS optimization

Browse source
This commit is contained in:
Janus C. H. Knudsen 2026-01-14 00:47:06 +01:00
parent e739ce2ac7
commit 29f9c79764
22 changed files with 1175 additions and 642 deletions
Download patch file Download diff file Expand all files Collapse all files

67
PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
View file

@ -4,6 +4,73 @@ Reference for alle genbrugelige komponenter. **LAV ALDRIG EN NY KOMPONENT HVIS D
---
## Base Patterns (components.css)
**VIGTIGT:** Disse base patterns skal ALTID bruges som foundation for nye features.
### Grid + Subgrid Table Pattern
Alle tabeller skal bruge dette pattern:
```html
<swp-feature-table>
<swp-feature-table-header> <!-- extends swp-table-header-base -->
<swp-feature-cell>Kolonne 1</swp-feature-cell>
</swp-feature-table-header>
<swp-feature-table-body> <!-- extends swp-table-body-base -->
<swp-feature-row> <!-- extends swp-table-row-base -->
<swp-feature-cell>Data</swp-feature-cell>
</swp-feature-row>
</swp-feature-table-body>
</swp-feature-table>
```
**CSS Pattern:**
```css
swp-feature-table {
display: grid;
grid-template-columns: /* feature-specific */;
}
swp-feature-table-header,
swp-feature-table-body {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
swp-feature-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
}
```
### List Item Pattern
Alle lister (notifikationer, bookinger, attentions) bruger:
```html
<swp-feature-list> <!-- display: contents -->
<swp-feature-item> <!-- extends swp-list-item-base -->
<!-- content -->
</swp-feature-item>
</swp-feature-list>
```
### Icon Container Pattern
Standard icon wrapper (40×40px cirkel):
```html
<swp-icon-container>
<i class="ph ph-icon"></i>
</swp-icon-container>
```
---
## Page Structure (page.css)
| Element | Beskrivelse | Eksempel |