style(user): flex schedule pickers

lemredd · Dec 9, 2022 · d5bc591 · d5bc591
1 parent 054c7e2
commit d5bc591
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 30 deletions.
diff --git a/components/settings/schedule_picker.vue b/components/settings/schedule_picker.vue
@@ -1,9 +1,13 @@
 <template>
 	<div class="schedule-picker">
-		<ReceivedErrors v-if="receivedErrors.length" :received-errors="receivedErrors"/>
+		<ReceivedErrors
+			v-if="receivedErrors.length"
+			:received-errors="receivedErrors"
+			class="status-message-container"/>
 		<ReceivedSuccessMessages
 			v-if="successMessages.length"
-			:received-success-messages="successMessages"/>
+			:received-success-messages="successMessages"
+			class="status-message-container"/>
 
 		<button
 			v-if="!isNew && !isEditing"
@@ -103,7 +107,14 @@
 	@import "@styles/btn.scss";
 	.schedule-picker {
 		@apply flex flex-col;
-		margin: 2em 0;
+		@apply my-8;
+
+		position: relative;
+
+		.status-message-container {
+			margin-top: -40px;
+			position: absolute;
+		}
 	}
 
 	.time-selector{
@@ -244,7 +255,8 @@ function updateTime() {
 		}
 	})
 	.then(() => {
-		fillSuccessMessages(receivedErrors, successMessages)
+		const customMessage = "Time updated successfully."
+		fillSuccessMessages(receivedErrors, successMessages, customMessage, true)
 		stopEditing()
 	})
 	.catch(responseWithErrors => extractAllErrorDetails(
@@ -274,7 +286,9 @@ function saveNewSchedule() {
 	.then(({ body }) => {
 		const { data } = body
 		emit("pushNewSchedule", data)
-		fillSuccessMessages(receivedErrors, successMessages)
+
+		const customMessage = "New schedule has been saved."
+		fillSuccessMessages(receivedErrors, successMessages, customMessage, true)
 		discard()
 		toggleEditing()
 	})
@@ -288,7 +302,8 @@ function saveNewSchedule() {
 function deleteSchedule() {
 	fetcher.archive([ String(props.scheduleId) ])
 	.then(() => {
-		fillSuccessMessages(receivedErrors, successMessages)
+		const customMessage = "Schedule has been deleted."
+		fillSuccessMessages(receivedErrors, successMessages, customMessage, true)
 		setTimeout(() => assignPath("/settings/profile"), MILLISECOND_IN_A_SECOND)
 	})
 	.catch(responseWithErrors => extractAllErrorDetails(responseWithErrors, receivedErrors))

diff --git a/components/settings/schedule_picker_group.vue b/components/settings/schedule_picker_group.vue
@@ -6,24 +6,26 @@
 			</h3>
 		</div>
 
-		<SchedulePicker
-			v-for="schedule in daySchedules"
-			:key="schedule.id"
-			:disabled="disabled"
-			:schedule-id="schedule.id"
-			:day-name="schedule.dayName"
-			:schedule-start="schedule.scheduleStart"
-			:schedule-end="schedule.scheduleEnd"
-			class="filled-schedule-picker"/>
+		<div class="schedule-pickers">
+			<SchedulePicker
+				v-for="schedule in daySchedules"
+				:key="schedule.id"
+				:disabled="disabled"
+				:schedule-id="schedule.id"
+				:day-name="schedule.dayName"
+				:schedule-start="schedule.scheduleStart"
+				:schedule-end="schedule.scheduleEnd"
+				class="schedule-picker filled-schedule-picker"/>
 
-		<SchedulePicker
-			:is-new="true"
-			:disabled="disabled"
-			:day-name="dayName"
-			:schedule-start="convertTimeToMinutes('00:00')"
-			:schedule-end="convertTimeToMinutes('00:00')"
-			class="new-schedule-picker"
-			@push-new-schedule="pushNewSchedule"/>
+			<SchedulePicker
+				:is-new="true"
+				:disabled="disabled"
+				:day-name="dayName"
+				:schedule-start="convertTimeToMinutes('00:00')"
+				:schedule-end="convertTimeToMinutes('00:00')"
+				class="schedule-picker new-schedule-picker"
+				@push-new-schedule="pushNewSchedule"/>
+		</div>
 	</div>
 </template>
 
@@ -33,14 +35,25 @@
 		@apply mt-4 mb-12;
 		@apply border-b border-b-gray-500;
 
-		.day {
-			@apply text-lg;
+		.schedule-picker-header {
+			@apply flex flex-col justify-between mb-5;
+
+			.day {
+				@apply text-lg;
+			}
 		}
-	}
 
-	.schedule-picker-header {
-		@apply flex flex-col justify-between mb-5;
+		.schedule-pickers {
+			@apply flex flex-wrap justify-start;
+
+			.schedule-picker {
+				@screen sm {
+					@apply ml-4;
+				}
+			}
+		}
 	}
+
 </style>
 
 <script setup lang="ts">

diff --git a/pages/settings/profile.page.vue b/pages/settings/profile.page.vue
@@ -138,6 +138,12 @@
 			}
 		}
 
+		.pictures {
+			@screen md {
+				@apply flex justify-between;
+			}
+		}
+
 		.consultation-schedules {
 			@apply mt-16;
 		}
@@ -152,10 +158,10 @@
 	}
 
 	.input-profile-picture {
-		@apply flex flex items-center ml-4;
+		@apply flex flex items-center sm:ml-4;
 	}
 	.input-signature {
-		@apply flex flex items-center ml-4 sm: ml-14;
+		@apply flex flex items-center sm:ml-4 sm: ml-14;
 	}
 
 	.upload-btn {