Filip/matrix-spec
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-spec synced 2026-03-26 13:04:10 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Improve feature profile summary table styling

Browse source 
The 'Feature Profiles' section of the 'Client-Server API' specification
contains a table, showing whether a module is required or optional for
every profile. Previously the table was hard to read since "Required"
looks visually very similar to "Optional".

This commit improves the readability of the table by automatically
applying a darker background color to table cells containing "Required"
via a new Hugo shortcode.

Signed-off-by: Martin Fischer <martin@push-f.com>
This commit is contained in:
Martin Fischer 2023-07-13 12:22:26 +02:00
parent 746524928c
commit 608818a06c
4 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
assets/scss/custom.scss
View file

@ -512,3 +512,24 @@ dd {
border-radius: 0.25rem; // was $border-radius, but that var isn't accessible here. border-radius: 0.25rem; // was $border-radius, but that var isn't accessible here.
} }
} }
/* Styling for the summary-table shortcode */
.summary-table {
tr {
// Unset the .table-striped styling that docsy applies by default.
background-color: unset !important;
}
.required {
background-color: rgba($black, 0.07);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
td {
position: relative;
padding: .3rem 0.75rem !important;
}
}

2
config.toml
View file

@ -28,6 +28,8 @@ weight = 1
[markup.goldmark.renderer] [markup.goldmark.renderer]
# Enables us to render raw HTML # Enables us to render raw HTML
unsafe = true unsafe = true
[markup.goldmark.parser.attribute]
block = true # used by the summary-table shortcode
[markup.highlight] [markup.highlight]
# See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
# If the style is changed, remember to regenerate the CSS with: # If the style is changed, remember to regenerate the CSS with:

2
content/client-server-api/_index.md
View file

@ -2565,6 +2565,7 @@ that profile.
#### Summary #### Summary
{{<summary-table>}}
| Module / Profile | Web | Mobile | Desktop | CLI | Embedded | | Module / Profile | Web | Mobile | Desktop | CLI | Embedded |
|------------------------------------------------------------|-----------|----------|----------|----------|----------| |------------------------------------------------------------|-----------|----------|----------|----------|----------|
| [Instant Messaging](#instant-messaging) | Required | Required | Required | Required | Optional | | [Instant Messaging](#instant-messaging) | Required | Required | Required | Required | Optional |
@ -2603,6 +2604,7 @@ that profile.
| [Event Annotations and reactions](#event-annotations-and-reactions) | Optional | Optional | Optional | Optional | Optional | | [Event Annotations and reactions](#event-annotations-and-reactions) | Optional | Optional | Optional | Optional | Optional |
| [Threading](#threading) | Optional | Optional | Optional | Optional | Optional | | [Threading](#threading) | Optional | Optional | Optional | Optional | Optional |
| [Reference Relations](#reference-relations) | Optional | Optional | Optional | Optional | Optional | | [Reference Relations](#reference-relations) | Optional | Optional | Optional | Optional | Optional |
{{</summary-table>}}
*Please see each module for more details on what clients need to *Please see each module for more details on what clients need to
implement.* implement.*

6
layouts/shortcodes/summary-table.html Normal file
View file

@ -0,0 +1,6 @@
{{/*
This template is used to visually emphasize table cells containing the text "Required".
*/}}
{{ print (replace .Inner "Required" "<span class=required></span>Required") "{.summary-table}" | markdownify }}