Skip to content

Commit

Permalink
Layout for list of filters mappage
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucascumsille
lucascumsille committed Mar 12, 2024
1 parent 6a69f8e commit c403c3a
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 163 deletions.
2 changes: 1 addition & 1 deletion templates/web/base/reports/_list-filters.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
[% END %]
[% END %]

<div class="report-list-filters-wrapper">
<div class="report-list-filters-wrapper govuk-fieldset-wrapper govuk-small">

[% IF use_form_wrapper %]
<form method="get" action="">
Expand Down
200 changes: 38 additions & 162 deletions web/cobrands/sass/_report_list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ $govuk-input-focus-box-shadow: #fd0 !default;
}

.report-list-filters, #bulk-assign-form {
padding: 16px;
margin-bottom: 0;
font-size: 14px;
line-height: 1.8em;
Expand Down Expand Up @@ -68,7 +67,6 @@ $govuk-input-focus-box-shadow: #fd0 !default;

.multi-select-button {
box-sizing: border-box;
max-width: 100%;
padding: flip(0.4em 1.5em 0.4em 0.6em, 0.4em 0.6em 0.4em 1.5em);
vertical-align: top;
}
Expand Down Expand Up @@ -100,6 +98,10 @@ $govuk-input-focus-box-shadow: #fd0 !default;

}

#bulk-assign-form {
padding: 16px;
}

input.bulk-assign {
float: right;
margin: 2em;
Expand All @@ -112,194 +114,68 @@ input.bulk-assign {
margin-bottom: 1em;
}

.sort-container {
float: left;
}

#show_old_reports_wrapper {
float: right;
margin-top: 20px;

.govuk-label.govuk-checkboxes__label {
font-size: 13px;
}
}

@media (min-width: 48em) {
.report-list-filters {
display: flex;
flex-direction: row;
gap: 1em;

.multi-select-group {
flex-basis: 50%;
}

.multi-select-button {
width: 100%;
}

&.sort-container {
display: flex;
flex-direction: column;
gap: 0;
float: left;
}
}

#show_old_reports_wrapper {
padding-top: 24px;
padding-left: 0;
padding-left: 24px; // Align vertically with the option above
margin-top: 34px;
float: none;

.govuk-label.govuk-checkboxes__label {
font-size: 0.85em;
font-size: 1rem;
}
}
}

// GOVUK
// The idea of ths sinzin variables is making more evident the relation between the sizes and positions more than actually allowing cobrands to change their sizes.

.govuk-fieldset-wrapper {
padding: 1rem;

@media (min-width: 48em) {

.multi-select-filter-group {
display: flex;
flex-direction: row;
gap: 1rem;
margin-bottom: 1rem;
}

.report-list-filters {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
flex-basis: 50%;
}

.multi-select-button, .govuk-select {
max-width: none;
min-width: auto;
width: 200px;
white-space: normal;
}
}
}

.govuk-multi-select {
.govuk-fieldset__legend {
padding: 0.5rem 0 0 0.5rem;
}
}

$govuk-small-input-size: 44px;
$govuk-small-input-visible-size: 24px;

.govuk-multi-select__label {
// Rule outside the .govuk-multi-select so it also target the "All option"
input[type="checkbox"], input[type="radio"] {
width: $govuk-small-input-size;
height: $govuk-small-input-size;
position: absolute;
z-index: 1;
top: 0;
left: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
}

.govuk-multi-select__label {
display: inline-block;
padding: 10px 0px 10px $govuk-small-input-size;
cursor: pointer;
touch-action: manipulation;
font-size: 1.1875rem;
line-height: 1.3157894737;
position: relative;

&:has(> input[type="checkbox"]:checked),
&:has(> input[type="radio"]:checked) {
&::after {
opacity: 1;
}
}

&:has(> input[type="checkbox"]){
&:after {
// Check icon
content: "";
box-sizing: border-box;
position: absolute;
top: $govuk-small-input-visible-size / 2;
left: $govuk-small-input-visible-size / 2;
clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%);
border: solid 10px $govuk-input-border-color;
opacity: 0;
}
}

&:has(> input[type="radio"]){
&:after {
// Circle icon
content: "";
position: absolute;
top: 15px;
left: 15px;
width: 14px;
height: 14px;
clip-path: circle(50%);
opacity: 0;
background-color: $govuk-input-border-color;
}
}

&:before {
content: "";
box-sizing: border-box;
position: absolute;
top: ($govuk-small-input-size - $govuk-small-input-visible-size) / 2;
left: ($govuk-small-input-size - $govuk-small-input-visible-size) / 2;
width: $govuk-small-input-visible-size;
height: $govuk-small-input-visible-size;
border: 2px solid $govuk-input-border-color;
}

&:hover {
&:before {
box-shadow: 0 0 0 10px $govuk-input-hover-box-shadow;
}
.multi-select-filter-group {
display: flex;
flex-direction: row;
gap: 1rem;
margin-bottom: 1rem;
}

&:focus-within {
&:before {
outline: 3px solid $govuk-input-border-color;
box-shadow: 0 0 0 7px $govuk-input-focus-box-shadow;
outline-offset: -1px;
}
.report-list-filters {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
flex-basis: 50%;
}

&:focus-within:hover {
&:before {
box-shadow: 0 0 0 5px $govuk-input-focus-box-shadow, 0 0 0 10px $govuk-input-hover-box-shadow;
}
.multi-select-button, .govuk-select {
width: 150px;
}
}

// .govuk-multi-select--checkboxes {
// .govuk-multi-select__label {
// &:after {
// content: "";
// box-sizing: border-box;
// position: absolute;
// top: $govuk-small-input-visible-size / 2;
// left: $govuk-small-input-visible-size / 2;
// clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%);
// border: solid 10px $govuk-input-border-color;
// opacity: 0;
// }
// }
// }

.govuk-multi-select--radio, .multi-select-presets {
.govuk-multi-select__label {
&:before {
border-radius: 50%;
@media (min-width: 48em) {
.multi-select-button, .govuk-select {
width: 200px;
}
}
}

.govuk-multi-select {
display: flex;
flex-direction: column;
}

0 comments on commit c403c3a

Please sign in to comment.