Skip to content

Commit 2953150

Browse files
yepzdkyepzdk
authored
Merge pull request #552 from itk-dev/feature/early_inclusion_dialogue_toggle_button
Add template and styling for toggle button
2 parents 1d714c3 + 898e7b0 commit 2953150

6 files changed

Lines changed: 144 additions & 9 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ Versioning](https://semver.org/spec/v2.0.0.html).
66

77
## [Unreleased]
88

9+
* [PR-552](https://github.com/itk-dev/deltag.aarhus.dk/pull/552)
10+
* Add styling for dialog proposal categories
11+
912
* [PR-551](https://github.com/itk-dev/deltag.aarhus.dk/pull/551)
1013
* Remove old video field and disabled Azure video module
1114
* Enable Comments module

‎web/themes/custom/hoeringsportal/assets/css/_bootstrap-custom.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ $color-white: $white;
5454
$color-petroleum-100: oklch(98% 0.017 196.88);
5555
$color-petroleum-200: oklch(90% 0.017 196.88);
5656
$color-petroleum-800: oklch(43% 0.063 196.55);
57+
$color-petroleum-900: oklch(30% 0.0406 197.75);
5758
$color-peach-100: oklch(94% 0.02 56.12);
5859
$color-peach-200: oklch(90% 0.02 56.12);
5960
$color-peach-600: oklch(50% 0.02 56.12);

‎web/themes/custom/hoeringsportal/assets/css/module/_btn.scss‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
.btn-sm {
2323
@extend .btn-sm;
2424

25-
padding: $spacer * 0.5 $spacer * .75;
25+
padding: $spacer * 0.5 $spacer * 0.75;
2626

2727
&.btn-primary {
2828
position: relative;
@@ -40,3 +40,68 @@
4040
}
4141
}
4242
}
43+
44+
.btn-toggle {
45+
background: $color-petroleum-800;
46+
border: none;
47+
border-radius: 4px;
48+
padding: 0;
49+
cursor: pointer;
50+
51+
&:has(input.btn-check:checked) {
52+
background: $color-petroleum-900;
53+
}
54+
55+
input.btn-check {
56+
&:checked + .toggle-badge {
57+
color: white;
58+
background-color: $color-petroleum-800;
59+
border: 1px solid $color-petroleum-800;
60+
transform: translateY(-2px);
61+
62+
&:hover {
63+
background-color: $color-petroleum-800;
64+
}
65+
}
66+
}
67+
68+
label.toggle-badge {
69+
display: block;
70+
background: white;
71+
border-radius: 4px;
72+
font-weight: 400;
73+
font-size: $font-size-small;
74+
border: 1px solid $color-petroleum-800;
75+
color: $color-petroleum-800;
76+
padding: 8px 12px;
77+
margin-bottom: 0;
78+
79+
@media (prefers-reduced-motion: no-preference) {
80+
transition:
81+
transform 300ms cubic-bezier(0.3, 0.7, 0.4, 1),
82+
background-color 0.1s ease-in;
83+
}
84+
}
85+
86+
&:hover label.toggle-badge {
87+
color: $color-petroleum-800;
88+
background-color: $color-petroleum-100;
89+
border: 1px solid $color-petroleum-800;
90+
91+
@media (prefers-reduced-motion: no-preference) {
92+
transform: translateY(-2px);
93+
transition:
94+
transform 200ms cubic-bezier(0.3, 0.7, 0.4, 1.5),
95+
background-color 0.2s ease-out;
96+
}
97+
}
98+
99+
&:active label.toggle-badge {
100+
@media (prefers-reduced-motion: no-preference) {
101+
transform: translateY(-2px);
102+
transition:
103+
transform 34ms,
104+
background-color 0.2s ease-out;
105+
}
106+
}
107+
}

‎web/themes/custom/hoeringsportal/assets/css/module/_dialogue.scss‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.proposal-layout {
2-
max-width: 840px!important;
2+
max-width: 840px !important;
33
}
44

55
.breadcrumb {
@@ -18,7 +18,7 @@
1818
}
1919

2020
.ajax-progress-throbber {
21-
display:none;
21+
display: none;
2222
}
2323
}
2424

@@ -31,16 +31,17 @@
3131
label,
3232
legend {
3333
font-weight: 700;
34-
margin-bottom: .5rem;
34+
margin-bottom: 0.5rem;
3535

3636
span.optional {
37-
margin-left: .5rem;
37+
margin-left: 0.5rem;
3838
font-weight: normal;
3939
}
4040
}
4141

4242
.form-required:after {
4343
content: "";
44+
margin-bottom: 0.5rem;
4445
}
4546

4647
.image-widget {
@@ -72,16 +73,30 @@
7273
@extend .btn;
7374
@extend .btn-primary;
7475

75-
padding: .25rem .5rem;
76-
font-size: .875rem;
77-
border-radius: .2rem;
76+
padding: 0.25rem 0.5rem;
77+
font-size: 0.875rem;
78+
border-radius: 0.2rem;
7879
position: inherit;
7980

8081
&:after {
8182
display: none;
8283
}
8384
}
8485
}
86+
#edit-field-dialogue-proposal-category--wrapper .fieldset-wrapper {
87+
display: flex;
88+
flex-direction: column;
89+
gap: $spacer;
90+
91+
.form-checkboxes {
92+
display: flex;
93+
gap: $spacer;
94+
order: 2;
95+
}
96+
.description {
97+
order: 1;
98+
}
99+
}
85100
}
86101

87102
.dialogue-proposals {
@@ -117,7 +132,7 @@
117132
}
118133

119134
#map {
120-
height: 300px!important;
135+
height: 300px !important;
121136
}
122137

123138
.comments .indented {

‎web/themes/custom/hoeringsportal/templates/components/toggle-button.html.twig‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="btn-toggle">
2+
<input class="btn-check" type="checkbox" id="{{ label['#id'] }}" autocomplete="off">
3+
<label class="btn toggle-badge" for="{{ label['#id'] }}">{{ label['#title'] }}</label>
4+
</div>

‎web/themes/custom/hoeringsportal/templates/form/form-element--checkbox.html.twig‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{#
2+
/**
3+
* @file
4+
* Theme override for a form element.
5+
*
6+
* Available variables:
7+
* - attributes: HTML attributes for the containing element.
8+
* - errors: (optional) Any errors for this form element, may not be set.
9+
* - prefix: (optional) The form element prefix, may not be set.
10+
* - suffix: (optional) The form element suffix, may not be set.
11+
* - required: The required marker, or empty if the associated form element is
12+
* not required.
13+
* - type: The type of the element.
14+
* - name: The name of the element.
15+
* - label: A rendered label element.
16+
* - label_display: Label display setting. It can have these values:
17+
* - before: The label is output before the element. This is the default.
18+
* The label includes the #title and the required marker, if #required.
19+
* - after: The label is output after the element. For example, this is used
20+
* for radio and checkbox #type elements. If the #title is empty but the
21+
* field is #required, the label will contain only the required marker.
22+
* - invisible: Labels are critical for screen readers to enable them to
23+
* properly navigate through forms but can be visually distracting. This
24+
* property hides the label for everyone except screen readers.
25+
* - attribute: Set the title attribute on the element to create a tooltip but
26+
* output no label element. This is supported only for checkboxes and radios
27+
* in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
28+
* It is used where a visual label is not needed, such as a table of
29+
* checkboxes where the row and column provide the context. The tooltip will
30+
* include the title and required marker.
31+
* - description: (optional) A list of description properties containing:
32+
* - content: A description of the form element, may not be set.
33+
* - attributes: (optional) A list of HTML attributes to apply to the
34+
* description content wrapper. Will only be set when description is set.
35+
* - description_display: Description display setting. It can have these values:
36+
* - before: The description is output before the element.
37+
* - after: The description is output after the element. This is the default
38+
* value.
39+
* - invisible: The description is output after the element, hidden visually
40+
* but available to screen readers.
41+
* - disabled: True if the element is disabled.
42+
* - title_display: Title display setting.
43+
*
44+
* @see template_preprocess_form_element()
45+
*/
46+
#}
47+
{% extends 'themes/custom/hoeringsportal/templates/components/toggle-button.html.twig' %}

0 commit comments

Comments
 (0)