Language changes background color of editor Fix #46

This commit is contained in:
Ruben van de Ven 2019-05-10 13:27:32 +02:00
parent 7f93efc6fd
commit 0b6963359d
3 changed files with 28 additions and 9 deletions

View file

@ -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 {

View file

@ -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();

View file

@ -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 {