Schedules mobile UI completed

src/app/schedules/schedules.component.html

@@ -18,7 +18,7 @@
 				<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays">
 					{{ preceedingDay }}
 				</span>
-				<span [dtsSelectItem]="selectedMonthDay" [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth }" *ngFor="let selectedMonthDay of selectedMonthDays; let i = index;">
+				<span [dtsSelectItem]="selectedMonthDay" [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth }" *ngFor="let selectedMonthDay of selectedMonthDays">
 					{{ selectedMonthDay }}
 				</span>
 				<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">
@@ -39,6 +39,13 @@
 
 	<div class="schedule-list-holder">
 
+		<div class="widget-heading-holder">
+			<header> Shop Events </header>
+			<button class="round-button" (click)="showSchedulePopup = true">
+				<i class="icon ion-md-add"></i> Add Events
+			</button>
+		</div>
+
 		<section class="mini-calendar">
 			<div class="month">
 				<button (click)="selectPreviousMonth()"> <i class="icon ion-ios-arrow-back"></i> </button>
@@ -52,7 +59,7 @@
 			</div>
 			<div class="dates">
 				<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
-				<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth }" *ngFor="let selectedMonthDay of selectedMonthDays">
+				<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth, 'active': this.selectedDatesForSchedule.includes(selectedMonthDay) }" *ngFor="let selectedMonthDay of selectedMonthDays" (click)="toggleDates(selectedMonthDay)">
 					{{ selectedMonthDay }}
 				</span>
 				<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">

src/app/schedules/schedules.component.scss

@@ -3,15 +3,24 @@
 	margin-left: auto;
 	display: flex;
 	align-items: stretch;
+
+	@media screen and (max-width: 1023px) {
+		width: 100%;
+		height: 100%;
+	}
 }
 
 .calendar-holder {
-	width: 65%;
+	width: calc(100% - 400px);
 	margin-right: auto;
 	position: relative;
 	height: calc(100vh - 70px);
 	overflow: auto;
 
+	@media screen and (max-width: 1023px) {
+		display: none;
+	}
+
 	.widget-heading-holder {
 		width: 100%;
 	}
@@ -54,14 +63,22 @@
 }
 
 .schedule-list-holder {
-	width: 30%;
+	width: 350px;
 	background-color: white;
 	height: calc(100vh - 70px);
 	overflow: auto;
+	@media screen and (max-width: 1023px) {
+		width: 100%;
+		height: 100%;
+	}
 
 	&:hover {
 		&::-webkit-scrollbar {
 		  display: block;
+
+		   @media screen and (max-width: 1023px) {
+		  	 display: none;
+		   }
 		}
 	}
 
@@ -82,6 +99,29 @@
 	&::-webkit-scrollbar-thumb:hover {
 		background-color: rgba(black, 0.5);
 	}
+
+	.widget-heading-holder {
+		display: none;
+
+		@media screen and (max-width: 1023px) {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			width: 100%;
+			padding: 20px 5%;
+			margin: 0;
+			justify-content: space-between;
+			background-color: #efefef;
+
+			header {
+				margin-bottom: 0;
+			}
+
+			button {
+				background-color: var(--brand-blue);
+			}
+		}
+	}
 }
 
 .calendar {
@@ -189,11 +229,15 @@
 
 .mini-calendar {
     background-color: white;
-	width: 90%;
+	width: 280px;
 	margin: 30px auto 20px;
 	padding-bottom: 20px;
 	border-bottom: 1px solid #cecece;
 
+	@media screen and (max-width: 1023px) {
+		margin: 20px auto;
+	}
+
 	.month {
 	    padding: 5px 0 20px;
 		display: flex;
@@ -224,10 +268,10 @@
 
     .days {
         display: flex;
-        width: 100%;
+        width: 280px;
 
         span {
-            width: calc(100% / 7);
+			width: 40px;
             text-align: center;
             font-size: 12px;
             color: var(--grey);
@@ -237,25 +281,42 @@
 
     .dates {
         display: flex;
-        width: 100%;
+        width: 280px;
         flex-wrap: wrap;
+		pointer-events: none;
+
+		@media screen and (max-width: 1023px) {
+			pointer-events: all;
+		}
 
         span {
 			display: block;
 			cursor: pointer;
             font-size: 12px;
-            width: calc(100% / 7);
+            width: 40px;
             color: var(--dark-grey);
 			font-weight: 400;
             position: relative;
-			padding: 10px 0;
 			text-align: center;
+			transition: background-color 0.3s, color 0.3s;
+			border-radius: 50%;
+			height: 40px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 
 			&.current-date {
 				border: 2px solid var(--brand-blue);
 				border-radius: 50%;
 			}
 
+			&.active {
+				@media screen and (max-width: 1023px) {
+					background-color: var(--brand-blue);
+					color: white;
+				}
+			}
+
             &.non-current-date {
                 color: #cecece;
             }
@@ -541,10 +602,21 @@
 		width: 100%;
 		justify-content: space-between;
 
+		@media screen and (max-width: 1023px) {
+			justify-content: center;
+		}
+
 		button:last-child {
 			background-color: white;
 			color: var(--brand-blue);
 			border: 1px solid var(--brand-blue);
 		}
+
+		button {
+			@media screen and (max-width: 1023px) {
+				margin: 0 10px;
+				padding: 0 15px;
+			}
+		}
 	}
 }

src/app/schedules/schedules.component.ts

@@ -46,8 +46,8 @@ export class SchedulesComponent implements OnInit {
 		this.selectedDatesForSchedule = dates;
 	}
 
-	selectDay(selectedMonthDay: number) {
-		this.selectedDate = selectedMonthDay;
+	toggleDates(date: number) {
+		this.selectedDatesForSchedule.includes(date)? this.selectedDatesForSchedule.splice(this.selectedDatesForSchedule.indexOf(date), 1): this.selectedDatesForSchedule.push(date);
 	}
 
 	renderCalendar() {

src/app/widgets-holder/widgets-holder.component.html

@@ -39,6 +39,9 @@
 			<li [ngClass]="{'active' : selected_nav === 'settings'}" (click)="selected_nav = 'settings'">
 				<i class="icon ion-ios-cog"></i> <label> Settings </label>
 			</li>
+			<li [ngClass]="{'active' : selected_nav === 'settings'}" (click)="selected_nav = 'settings'">
+				<i class="icon ion-ios-more"></i> <label> More </label>
+			</li>
 		</ul>
 	</section>
 

src/app/widgets-holder/widgets-holder.component.scss

@@ -189,8 +189,17 @@
 				}
 			}
 
-			&:nth-child(5) {
+			&:nth-child(5), &:nth-child(6) {
+				@media screen and (max-width: 1023px) {
+					display: none;
+				}
+			}
+			&:nth-child(7) {
 				display: none;
+
+				@media screen and (max-width: 1023px) {
+					display: block;
+				}
 			}
 
 			&::before {

src/app/widgets-holder/widgets-holder.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'items';
+	selected_nav: string = 'settings';
 
 	constructor() { }