responsive calendar squares

src/app/features/administration/form/steps/step-three/step-three.component.html

@@ -30,7 +30,7 @@
 	</div>
 </div>
 <app-nav-steps
-	[actionBeforeNextStep]="changeDateInputMode"
+	[actionBeforeNextStep]="convertDateInputs"
 	[next_step_number]="pollService.step_current + 1"
 	[previous_step_number]="pollService.step_current - 1"
 ></app-nav-steps>

src/app/features/administration/form/steps/step-three/step-three.component.ts

@@ -22,12 +22,14 @@ export class StepThreeComponent implements OnInit {
 	drop(event: CdkDragDrop<string[]>) {
 		// moveItemInArray(this.pollService.choices, event.previousIndex, event.currentIndex);
 	}
-
-	changeDateInputMode() {
+	convertDateInputs() {
 		this.pollService.mode_calendar
 			? this.pollService.convertCalendarToText()
 			: this.pollService.convertTextToCalendar();
+	}
 
+	changeDateInputMode() {
+		this.convertDateInputs();
 		this.pollService.mode_calendar = !this.pollService.mode_calendar;
 	}
 }

src/app/features/administration/nav-steps/nav-steps.component.html

@@ -5,7 +5,7 @@
 			class="button button-previous is-secondary pull-left"
 			[routerLink]="['/administration/step/' + previous_step_number]"
 		>
-			Précédent
+			{{ 'nav.previous' | translate }}
 		</button>
 
 		<button
@@ -16,10 +16,10 @@
 			(click)="runNextAction()"
 		>
 			<span *ngIf="is_finish_step">
-				Enregistrer
+				{{ 'nav.save' | translate }}
 			</span>
 			<span *ngIf="!is_finish_step">
-				Suivant
+				{{ 'nav.next' | translate }}
 			</span>
 		</button>
 	</div>

src/app/features/administration/stepper/stepper.component.html

@@ -79,9 +79,9 @@
 				<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
 			</div>
 			<div class="column has-text-right">
-				<app-language-selector class="nav-button is-hidden-mobile"></app-language-selector>
+				<app-language-selector class="nav-button"></app-language-selector>
 				<a class="nav-button cancel-button" (click)="showCancelDialog()">
-					Annuler <i class="fa fa-times"></i>
+					{{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
 				</a>
 			</div>
 		</div>
@@ -91,7 +91,7 @@
 
 	<!--	modale pour quitter la création-->
 	<p-dialog
-		header="Quitter?"
+		header="{{ 'nav.leave' | translate }}?"
 		[modal]="true"
 		[(visible)]="display_cancel_dialog"
 		[breakpoints]="{ '960px': '75vw' }"

src/app/features/administration/stepper/stepper.component.scss

@@ -54,8 +54,8 @@
 
 	.nav-button {
 		margin-top: 0;
-		line-height: 5rem;
-		height: 5rem;
+		line-height: 4.5rem;
+		height: 4.5rem;
 		display: inline-block;
 		padding-left: 1em;
 		&app-language-selector {
@@ -63,8 +63,8 @@
 		}
 	}
 	.cancel-button {
-		line-height: 4rem;
-		height: 4rem;
+		line-height: 4.5rem;
+		height: 4.5rem;
 
 		&:hover {
 			color: $font_color;

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -1,13 +1,20 @@
-<div class="selector">
+<div class="selector language-selector-container">
 	<span class="lang-button" (click)="nextLang()">
 		{{ 'LANGUAGES.' + currentLang | translate }}
-		<i class="fa fa-language lang-selector-icon clickable" title="sélection de langue"></i>
+		<!--		<i class="fa fa-language lang-selector-icon clickable" title="sélection de langue"></i>-->
+		<i class="fa fa-chevron-down"></i>
 	</span>
 
 	<div class="buttons has-addons">
-		<label for="lang_selector" class="hidden"
-			>{{ 'selector.lang' | translate }} {{ 'LANGUAGES.' + language | translate }}</label
-		>
+		<label for="lang_selector" class="hidden">
+			{{ 'selector.lang' | translate }}
+			<span class="lang-title-long is-hidden-mobile">
+				{{ 'LANGUAGES.' + language | translate }}
+			</span>
+			<span class="lang-title-short is-visible-mobile">
+				{{ 'LANGUAGES_SHORT.' + language | translate }}
+			</span>
+		</label>
 		<select class="is-hidden" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
 			<option *ngFor="let language of availableLanguages" value="{{ language }}">
 				<!--				{{ language }} - -->

src/app/shared/components/selectors/language-selector/language-selector.component.scss

@@ -1,5 +1,18 @@
+@import './../../../../../styles/variables';
+
 #lang_selector {
 	background: white;
 	max-width: 15em;
 	width: 15em !important;
 }
+
+.language-selector-container {
+	cursor: pointer;
+	color: $primary-color;
+	&:hover {
+		color: $secondary_color;
+	}
+	i {
+		color: $primary-color;
+	}
+}

src/assets/i18n/EN.json

@@ -9,6 +9,12 @@
 		"create_button": "Create a new poll",
 		"search_button": "Search"
 	},
+	"nav": {
+		"leave": "Leave",
+		"previous": "Previous",
+		"next": "Next",
+		"save": "Save"
+	},
 	"PAGE_NOT_FOUND": {
 		"DEFAULT": "This page doesn’t exist.",
 		"POLL": "This poll doesn’t exist."

src/assets/i18n/FR.json

@@ -11,6 +11,12 @@
 		"create_button": "Créer un nouveau sondage ",
 		"search_button": "Rechercher"
 	},
+	"nav": {
+		"leave": "Quitter",
+		"previous": "Précédent",
+		"next": "Suivant",
+		"save": "Enregistrer"
+	},
 	"PAGE_NOT_FOUND": {
 		"DEFAULT": "Cette page n’existe pas.",
 		"POLL": "Ce sondage n’existe pas."
@@ -600,12 +606,27 @@
 		"ES": "Espagnol",
 		"EN": "English",
 		"GL": "gl",
-		"HU": "hu",
+		"HU": "Hungarian",
 		"IT": "Italien",
 		"NL": "Néérlandais",
 		"OC": "oc",
 		"SV": "sv"
 	},
+	"LANGUAGES_SHORT": {
+		"DE": "De",
+		"FR": "Fr",
+		"BR": "Br",
+		"CA": "Ca",
+		"EL": "el",
+		"ES": "Es",
+		"EN": "En",
+		"GL": "gl",
+		"HU": "hu",
+		"IT": "It",
+		"NL": "Nl",
+		"OC": "oc",
+		"SV": "sv"
+	},
 	"calendar_widget": {
 		"startsWith": "Commence par",
 		"contains": "Contains",

src/styles/partials/_datepicker.scss

@@ -68,7 +68,7 @@ p-calendar,
 	.p-datepicker-calendar {
 		td {
 			width: $cell-size;
-			padding: 0.15rem;
+			padding: 0.15rem 0.25rem;
 		}
 
 		td span,

src/styles/partials/_responsive.scss

@@ -1,8 +1,21 @@
 // small screens
-@media (min-width: 600px) {
+@media (min-width: 380px) {
 	.feedback-container {
 		//position: fixed;
 	}
+
+	.p-datepicker {
+		.p-datepicker-calendar {
+			td {
+				width: $cell-size-desktop;
+			}
+			td span,
+			.p-ripple {
+				width: $cell-size-desktop;
+				height: $cell-size-desktop;
+			}
+		}
+	}
 }
 // wide screen like desktop
 @media (min-width: $widescreen) {

src/styles/variables.scss

@@ -76,7 +76,8 @@ $header-nav-inner-height: 4rem;
 $widescreen-width-main-column: 75rem;
 
 // datepicker
-$cell-size: 40px;
+$cell-size: 30px;
+$cell-size-desktop: 40px;
 
 // css vars
 :root {