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 {
|
||||
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 {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
|
@ -260,12 +266,12 @@ img.icon {
|
|||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 1.33333em;
|
||||
line-height: 1em; }
|
||||
width: 2.66667em;
|
||||
line-height: 2em; }
|
||||
.flag-icon:before {
|
||||
content: '\00a0'; }
|
||||
.flag-icon.flag-icon-squared {
|
||||
width: 1em; }
|
||||
width: 2em; }
|
||||
.flag-icon.en-GB {
|
||||
background-image: url("/images/gb.svg"); }
|
||||
.flag-icon.de-DE {
|
||||
|
|
|
@ -1700,6 +1700,9 @@ class Graph {
|
|||
document.getElementById('current_lang').appendChild(crel('span', {
|
||||
'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) {
|
||||
this.distances = this.calculateDistancesFromStart();
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
$status_width: 430px;
|
||||
$status_width: 380px;
|
||||
$status_width_open: 860px;
|
||||
|
||||
body{
|
||||
|
@ -78,7 +78,7 @@ img.icon{
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 380px;
|
||||
width: $status_width;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
|
@ -203,6 +203,16 @@ img.icon{
|
|||
position: relative;
|
||||
width: calc(100% - #{$status_width});
|
||||
|
||||
&.en-GB{
|
||||
background:#02547e;
|
||||
}
|
||||
&.fr-FR{
|
||||
background:#5a434d;
|
||||
}
|
||||
&.de-DE{
|
||||
background:slategray;
|
||||
}
|
||||
|
||||
#controls{
|
||||
position:absolute;
|
||||
top: 5px;
|
||||
|
@ -422,13 +432,13 @@ img.icon{
|
|||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: (4 / 3) * 1em;
|
||||
line-height: 1em;
|
||||
width: (4 / 3) * 2em;
|
||||
line-height: 2em;
|
||||
&:before {
|
||||
content: '\00a0';
|
||||
}
|
||||
&.flag-icon-squared {
|
||||
width: 1em;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
&.en-GB {
|
||||
|
|
Loading…
Reference in a new issue