Skip to content

[color-buttons] Replace radios for buttons in theme selector #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+16 −9
Open

[color-buttons] Replace radios for buttons in theme selector #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
58a2024
webmentions
stacyk Oct 4, 2022
2838e6a
take over toggle button for color theme selecting WIP
stacyk Oct 4, 2022
fe137cc
Merge branch 'main' into color-buttons
jgerigmeyer Oct 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions content/_includes/site/ccs.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% import 'forms.macros.njk' as forms %}
{% import 'toggle.macros.njk' as toggle %}

<details data-ccs="menu" class="has-dropdown" hidden>
<summary data-btn="menu xsmall summary">
Expand All @@ -9,19 +10,23 @@
{% call forms.fieldset(
legend='Color Mode',
name='ccs-modes',
attrs={'data-radio': 'group'}
attrs={'data-group': 'buttons'}
) %}
{% for mode in ['light', 'dark', 'auto'] %}
{{ forms.radio(
label=mode,

<button {{ toggle.btn(
id=[mode, 'mode'] | join('-'),
group='ccs-modes',
attrs={'data-ccs-colors': true if (mode == 'auto') else mode},
input_attrs={
'data-ccs-input': [mode, 'mode'] | join('-'),
'checked': true if (mode == 'auto') else false
attrs={
'data-ccs-colors': true if (mode == 'auto') else mode,
'data-ccs-input': id,
'aria-pressed': true if (mode == 'auto') else false,
'data-toggle-synced': 'true' if synced else 'false'
}
) }}
>
{{ mode }}
</button>
Comment on lines +13 to +29
Copy link
Member Author

@stacyk stacyk Oct 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jgerigmeyer This doesn't really work and I'd love some help on getting this functional before I style it as the markup may change based on how far off I am on this :)

The goal was to replace the radio buttons with actual buttons (for reasons linked in the Trello card (https://lea.verou.me/2022/07/button-group/
https://tink.uk/perceived-affordances-and-the-functionality-mismatch/)

And then style them a bit differently.

I know I hijacked the toggle macro, but I am pretty sure we weren't using that (yet?) and I wanted a place to start.

Copy link
Member

@jgerigmeyer jgerigmeyer Oct 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than updating this in OddSite, I think we should first adjust CCS to allow using buttons instead of just radio inputs.

{% endfor %}
{% endcall %}

Expand Down
4 changes: 3 additions & 1 deletion content/_includes/toggle.macros.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ params:
'aria-controls': id,
'aria-pressed': 'true' if expanded else 'false',
'role': none if button else 'button',
'data-toggle-synced': 'true' if synced else 'false'
'data-toggle-synced': 'true' if synced else 'false',
'data-ccs-colors': true if (mode == 'auto') else mode,
'data-ccs-input': id
} -%}
{{ utility.show_attrs(attrs) }}
{%- endmacro %}
Expand Down
2 changes: 1 addition & 1 deletion src/mentions/webmentions.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"lastFetched": "2022-09-30T18:18:39.100Z",
"lastFetched": "2022-10-04T17:20:21.483Z",
"children": [
{
"type": "entry",
Expand Down