Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

changer la langue entre fr et en quand on clique sur l'icone de traduction

Browse Source
This commit is contained in:
MarguoNana 2019-11-29 20:19:49 +01:00
parent 157a8d63c5
commit b78ea6273e
6 changed files with 84 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/app.component.html
View File

@ -4,14 +4,18 @@
<span class="logo_first">Frama</span>
<span class="logo_second">date</span>
</h1>
<div class="legend">proposé par <span class="legend_first">Frama</span><span class="legend_second">soft</span></div>
</a>
<div id="translate_example">
<img src="assets/img/icone-langue.svg" alt="location icon">
<img src="assets/img/icone-menu.svg" alt="menu icon">
<div class="lang-choices">
<button class="btn btn-info" (click)="switchLanguage('en')">en</button>
<button class="btn btn-info" (click)="switchLanguage('fr')">fr</button>
<div class="wrapper">
<img src="assets/img/icone-langue.svg" alt="location icon" class="lang_icon">
<img src="assets/img/icone-menu.svg" alt="menu icon" class="menu_icon">
<select name="language" class="Language-" (change)="switchLanguage($event.target.value)">
<option value="d" default class="select_language">{{"Language" | translate}}</option>
<option value="en" >English</option>
<option value="fr" >Français</option>
</select>
<span class="menu_label">Menu</span>
</div>
<h1 i18n>{{"Title"|translate}}</h1>
<div>

1
src/assets/i18n/en.json
View File

@ -1,4 +1,5 @@
{
"Language": "Language",
"Title": "Translation example",
"Intro": "Hello I am {{name}}, I am {{age}} years old.",
"home": {

3
src/assets/i18n/fr.json
View File

@ -1,5 +1,6 @@
{
"Title": "Example de traduction",
"Language": "Langue",
"Title": "Exemple de traduction",
"Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
"home": {
"title": "le titre de la home"

17
src/assets/scss/default.scss
View File

@ -9,3 +9,20 @@ html {
.text-right {
text-align: right;
}
.Language- {
padding-right: 2em;
font-family: SourceSansPro;
font-size: 11px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: var(--black);
border: none;
}
.select_language {
display: none;
}

52
src/assets/scss/molecules/_logo.scss
View File

@ -10,3 +10,55 @@
.logo_second {
color: $logo_color_2;
}
.wrapper {
display: grid;
margin-left: auto;
margin-right: auto;
width: 80px;
margin-top: 1rem;
}
.lang_icon {
grid-column: 1;
grid-row: 1;
margin-left: auto;
margin-right: auto;
}
.menu_icon {
grid-column: 2;
grid-row: 1;
margin-left: auto;
margin-right: auto;
}
.lang_label {
grid-column: 1;
grid-row: 2;
}
.menu_label {
grid-column: 2;
grid-row: 2;
font-family: SourceSansPro;
font-size: 11px;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
}
.legend_first {
color: $legend_color;
padding-right: 0rem;
padding-left: 0rem;
}
.legend_second {
color: $legend_color_2;
padding-right: 0rem;
padding-left: 0rem;
}
.legend {
font-size: 10px;
}

2
src/assets/scss/variables.scss
View File

@ -20,6 +20,8 @@ $secondary_color: $lavender-pink;
$font_color: $black;
$logo_color: $dark-lavender;
$logo_color_2: $camo;
$legend_color: $dark-lavender;
$legend_color_2: $dusty-orange;
$choice_select_border_color: $cool-grey;
$hover-color:$warm-grey;
$clicked-color:$wisteria;