display time slices

mocks/old-stuff/config/defaultConfigs.ts

@@ -22,7 +22,12 @@ const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth();
 const currentDay = new Date().getDate();
 
-export const basicSlicesOfDay: TimeSlices[] = [{ literal: 'matin' }, { literal: 'midi' }, { literal: 'soir' }];
+export const basicSlicesOfDay: TimeSlices[] = [
+	{ literal: 'matin' },
+	{ literal: 'midi' },
+	{ literal: 'après-midi' },
+	{ literal: 'soir' },
+];
 export const otherSlicesOfDay: TimeSlices[] = [
 	{ literal: 'aux aurores' },
 	{ literal: 'au petit dej' },

src/app/core/services/storage.service.ts

@@ -8,6 +8,7 @@ import { Choice } from '../models/choice.model';
 import { Vote } from '../models/vote.model';
 import { environment } from '../../../environments/environment';
 import {
+	basicSlicesOfDay,
 	DateChoice,
 	moreTimeOfDay,
 	otherDefaultDates,
@@ -33,7 +34,7 @@ export class StorageService {
 	public dateList: DateChoice[] = otherDefaultDates;
 
 	@LocalStorage()
-	public timeSlices: TimeSlices[] = moreTimeOfDay;
+	public timeSlices: TimeSlices[] = basicSlicesOfDay;
 
 	@LocalStorage()
 	public vote_stack: Stack = new Stack();

src/app/features/administration/form/date-select/date-select.component.html

@@ -111,6 +111,7 @@
 					</button>
 				</div>
 			</div>
+
 			<div class="range-time" *ngIf="!form.value.hasSeveralHours">
 				<h2>
 					<span class="count-dates-txt">
@@ -130,21 +131,20 @@
 						[cdkDropListData]="timeList"
 						(cdkDropListDropped)="dropTimeItem($event)"
 					>
-						<div *ngFor="let time of timeList; index as time_id" class="time-choice" cdkDrag>
+						<div *ngFor="let time of timeList; index as time_id" class="time-choice movable" cdkDrag>
 							<div class="columns">
-								<div class="column movable">
-									<label [for]="'timeChoices_' + time_id">
-										<i class="fa fa-clock-o" aria-hidden="true"></i>
+								<div class="column">
+									<label class="button pull-left" [for]="'timeChoices_' + time_id">
+										<i class="icon fa fa-arrows-v" aria-hidden="true"></i>
 									</label>
 									<input
+										class="pull-left"
 										[(ngModel)]="time.literal"
 										name="timeChoices_{{ time_id }}"
 										type="text"
 										id="timeChoices_{{ time_id }}"
 									/>
-								</div>
-								<div class="column">
-									<button (click)="timeList.splice(time_id, 1)" class="btn btn-warning">
+									<button (click)="timeList.splice(time_id, 1)" class="button is-warning">
 										<i class="fa fa-times" aria-hidden="true"></i>
 									</button>
 								</div>
@@ -214,6 +214,7 @@
 						</div>
 					</div>
 				</div>
+				<!--				date picker calendrier-->
 				<!--				<div class="column calendar-column">-->
 				<!--					<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">-->
 				<!--						plage de jours-->

src/app/features/administration/form/date-select/date-select.component.scss

@@ -1,7 +1,7 @@
 :host {
 	.time-choice {
-		background: rgba(255, 255, 255, 0.8);
-		border: solid 1px #dedede;
+		background: rgba(255, 255, 255, 1);
+		//border: solid 1px #dedede;
 		padding: 0.5em;
 		//padding: 20px 10px;
 		border-bottom: solid 1px #ccc;
@@ -10,6 +10,17 @@
 		cursor: move;
 		background: white;
 		font-size: 14px;
+		padding-top: 1em;
+		padding-bottom: 1em;
+		input {
+			display: inline-block;
+			width: 70% !important;
+			margin-right: 1ch;
+			margin-left: 1ch;
+		}
+		.button {
+			margin: 0;
+		}
 	}
 	.btn i + span {
 		margin-left: 1ch;
@@ -24,7 +35,8 @@
 		box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
 			0 3px 14px 2px rgba(0, 0, 0, 0.12);
 		border: 2px solid #ccc;
-		background: rgba(255, 255, 255, 0.8);
+		background: blue;
+		display: block;
 	}
 
 	.cdk-drag-placeholder {