Language changes background color of editor Fix #46
This commit is contained in:
parent
7f93efc6fd
commit
0b6963359d
3 changed files with 28 additions and 9 deletions
|
@ -124,7 +124,13 @@ img.icon {
|
||||||
|
|
||||||
#story {
|
#story {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(100% - 430px); }
|
width: calc(100% - 380px); }
|
||||||
|
#story.en-GB {
|
||||||
|
background: #02547e; }
|
||||||
|
#story.fr-FR {
|
||||||
|
background: #5a434d; }
|
||||||
|
#story.de-DE {
|
||||||
|
background: slategray; }
|
||||||
#story #controls {
|
#story #controls {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
|
@ -260,12 +266,12 @@ img.icon {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1.33333em;
|
width: 2.66667em;
|
||||||
line-height: 1em; }
|
line-height: 2em; }
|
||||||
.flag-icon:before {
|
.flag-icon:before {
|
||||||
content: '\00a0'; }
|
content: '\00a0'; }
|
||||||
.flag-icon.flag-icon-squared {
|
.flag-icon.flag-icon-squared {
|
||||||
width: 1em; }
|
width: 2em; }
|
||||||
.flag-icon.en-GB {
|
.flag-icon.en-GB {
|
||||||
background-image: url("/images/gb.svg"); }
|
background-image: url("/images/gb.svg"); }
|
||||||
.flag-icon.de-DE {
|
.flag-icon.de-DE {
|
||||||
|
|
|
@ -1700,6 +1700,9 @@ class Graph {
|
||||||
document.getElementById('current_lang').appendChild(crel('span', {
|
document.getElementById('current_lang').appendChild(crel('span', {
|
||||||
'class': 'flag-icon ' + this.language_code
|
'class': 'flag-icon ' + this.language_code
|
||||||
}));
|
}));
|
||||||
|
let storyEl = document.getElementById('story');
|
||||||
|
storyEl.classList.remove(... panopticon.languages.map((l) => l['code']))
|
||||||
|
storyEl.classList.add(this.language_code);
|
||||||
|
|
||||||
if(typeof skipDistances == 'undefined' || !skipDistances) {
|
if(typeof skipDistances == 'undefined' || !skipDistances) {
|
||||||
this.distances = this.calculateDistancesFromStart();
|
this.distances = this.calculateDistancesFromStart();
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
$status_width: 430px;
|
$status_width: 380px;
|
||||||
$status_width_open: 860px;
|
$status_width_open: 860px;
|
||||||
|
|
||||||
body{
|
body{
|
||||||
|
@ -78,7 +78,7 @@ img.icon{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
width: 380px;
|
width: $status_width;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
@ -203,6 +203,16 @@ img.icon{
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(100% - #{$status_width});
|
width: calc(100% - #{$status_width});
|
||||||
|
|
||||||
|
&.en-GB{
|
||||||
|
background:#02547e;
|
||||||
|
}
|
||||||
|
&.fr-FR{
|
||||||
|
background:#5a434d;
|
||||||
|
}
|
||||||
|
&.de-DE{
|
||||||
|
background:slategray;
|
||||||
|
}
|
||||||
|
|
||||||
#controls{
|
#controls{
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
|
@ -422,13 +432,13 @@ img.icon{
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: (4 / 3) * 1em;
|
width: (4 / 3) * 2em;
|
||||||
line-height: 1em;
|
line-height: 2em;
|
||||||
&:before {
|
&:before {
|
||||||
content: '\00a0';
|
content: '\00a0';
|
||||||
}
|
}
|
||||||
&.flag-icon-squared {
|
&.flag-icon-squared {
|
||||||
width: 1em;
|
width: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.en-GB {
|
&.en-GB {
|
||||||
|
|
Loading…
Reference in a new issue