consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract component for locale switcher

Browse Source 
Note that in order to simplify the component tests (which for some
reason seem to be whitespace-sensitive), we have to omit whitespace
characters inside the `<option>` tags.

Also note we're simplifying the test with a missing language name; since
a component test doesn't involve a whole request, we don't need a
complex setup (I'm not sure we even need it in system tests).
This commit is contained in:
Javi Martín
2021-06-28 14:36:19 +02:00
parent 7abca09e03
commit ff0f2215ea
8 changed files with 130 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/assets/stylesheets/layout.scss
View File

@@ -486,24 +486,6 @@ body > header,
border-bottom: 1px solid #fff;
}
.locale {
float: left;
height: $line-height * 1.5;
margin-left: $line-height / 2;
position: relative;
&::after {
color: #808080;
content: "\61";
font-family: "icons" !important;
font-size: $small-font-size;
pointer-events: none;
position: absolute;
right: 2px;
top: 9px;
}
}
.remote-translations-button {
&.callout {
@@ -982,46 +964,6 @@ footer {
// 06. Forms
// ---------
.locale-form {
display: inline-block;
position: relative;
label {
color: #fff;
font-size: $tiny-font-size;
font-weight: normal;
}
select {
option {
background: $body-background;
color: $text;
border: 0;
outline: none;
}
}
.locale-switcher {
background: #001d33;
border: 0;
border-radius: rem-calc(4);
color: #fff;
font-size: $small-font-size;
height: $line-height;
margin-bottom: 0;
margin-top: $line-height / 4;
outline: none;
padding-left: $line-height / 4;
padding-right: calc(#{$line-height / 4} + 1em);
width: auto;
&:focus {
outline: $outline-focus;
}
}
}
form {
label {

54
app/assets/stylesheets/layout/locale_switcher.scss Normal file
View File

@@ -0,0 +1,54 @@
.locale {
float: left;
height: $line-height * 1.5;
margin-left: $line-height / 2;
position: relative;
&::after {
color: #808080;
content: "\61";
font-family: "icons" !important;
font-size: $small-font-size;
pointer-events: none;
position: absolute;
right: 2px;
top: 9px;
}
.locale-form {
display: inline-block;
position: relative;
label {
color: #fff;
font-size: $tiny-font-size;
font-weight: normal;
}
select {
background: #001d33;
border: 0;
border-radius: rem-calc(4);
color: #fff;
font-size: $small-font-size;
height: $line-height;
margin-bottom: 0;
margin-top: $line-height / 4;
outline: none;
padding-left: $line-height / 4;
padding-right: calc(#{$line-height / 4} + 1em);
width: auto;
&:focus {
outline: $outline-focus;
}
option {
background: $body-background;
color: $text;
border: 0;
outline: none;
}
}
}
}