kj
/
vendor-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Partial commit Schedule UI

master
kj1352 6 years ago
parent
092f85ff57
commit
f8f3ebc51b
5 changed files with 389 additions and 22 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +103
    -18
      src/app/schedules/schedules.component.html
  2. +280
    -2
      src/app/schedules/schedules.component.scss
  3. +3
    -1
      src/app/schedules/schedules.component.ts
  4. +1
    -1
      src/app/widgets-holder/widgets-holder.component.ts
  5. +2
    -0
      src/styles.scss

+ 103
- 18
src/app/schedules/schedules.component.html View File

@@ -1,22 +1,107 @@
<div class="calendar-holder">
<div class="widget-heading-holder">
<header> Shop Events and Timings </header>
<div class="container">
<div class="calendar-holder">
<div class="widget-heading-holder">
<header> Shop Events and Timings </header>
</div>

<section class="calendar">
<div class="month">
<span>{{ selectedMonth }} {{ selectedYear }}</span>
</div>

<div class="days">
<span> Sunday </span><span> Monday </span><span> Tuesday </span><span> Wednesday </span>
<span> Thursday </span><span> Friday </span><span> Saturday </span>
</div>
<div class="dates">
<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth, 'active' : selectedDate === selectedMonthDay }" *ngFor="let selectedMonthDay of selectedMonthDays" (click)="selectDay(selectedMonthDay)"> {{ selectedMonthDay }}
</span>
<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays"> {{ succeedingDay }} </span>
</div>
</section>
</div> </div>


<section class="calendar">
<div class="month">
<span>{{ selectedMonth }} {{ selectedYear }}</span>
</div>
<div class="schedule-list-holder">

<section class="mini-calendar">
<div class="month">
<button (click)="selectPreviousMonth()"> <i class="icon ion-ios-arrow-back"></i> </button>
<span>{{ selectedMonth }} {{ selectedYear }}</span>
<button (click)="selectNextMonth()"> <i class="icon ion-ios-arrow-forward"></i> </button>
</div>

<div class="days">
<span> Sun </span><span> Mon </span><span> Tue </span><span> Wed </span>
<span> Thur </span><span> Fri </span><span> Sat </span>
</div>
<div class="dates">
<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth, 'active' : selectedDate === selectedMonthDay }" *ngFor="let selectedMonthDay of selectedMonthDays">
{{ selectedMonthDay }}
</span>
<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">
{{ succeedingDay }}
</span>
</div>
</section>

<section class="day-details">
<section class="tabs-holder">
<button [ngClass]="{'active' : selectedTab === 'holiday' }"
(click)="selectedTab = 'holiday'"> Holiday </button>
<button [ngClass]="{'active' : selectedTab === 'events' }"
(click)="selectedTab = 'events'"> Events </button>
</section>

<section class="tab-info">
<ul class="holiday-list" *ngIf="selectedTab === 'holiday'">
<li>
<header> Shop will be closed </header>
<p> On: 14 Oct 2019 </p>
</li>
<li>
<header> Shop will be closed </header>
<p> On: 14 Oct 2019 </p>
</li>
<li>
<header> Shop will be closed </header>
<p> On: 14 Oct 2019 </p>
</li>
</ul>

<ul class="event-list" *ngIf="selectedTab === 'events'">
<li>
<header> Birthday Event </header>
<p> On: 14 Oct 2019 </p>
</li>
<li>
<header> Birthday Event </header>
<p> On: 14 Oct 2019 </p>
</li>
</ul>
</section>
</section>

<ul class="timings">
<li>
<header>
<span> <i class="icon ion-ios-time"></i> Default Timing: </span>
<button> Change </button>
</header>
<div class="time"> 09:00 PM to 5:00 PM </div>
<p> Every Day </p>
</li>

<li>
<header>
<span> <i class="icon ion-ios-time"></i> Changed Timing: </span>
</header>
<div class="time"> 12:00 PM to 5:00 PM </div>
<p> Oct 29 2019 </p>
</li>
</ul>

</div>


<div class="days">
<span> Sunday </span><span> Monday </span><span> Tuesday </span><span> Wednesday </span>
<span> Thursday </span><span> Friday </span><span> Saturday </span>
</div>
<div class="dates">
<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
<span [ngClass]="{'current-date': currentDate === selectedMonthDay, 'active' : selectedDate === selectedMonthDay }" *ngFor="let selectedMonthDay of selectedMonthDays" (click)="selectDay(selectedMonthDay)"> {{ selectedMonthDay }}
</span>
<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays"> {{ succeedingDay }} </span>
</div>
</section>
</div> </div>

+ 280
- 2
src/app/schedules/schedules.component.scss View File

@@ -1,12 +1,50 @@
.container {
width: 95%;
margin-left: auto;
display: flex;
align-items: stretch;
}

.calendar-holder { .calendar-holder {
width: 65%; width: 65%;
padding: 0 5%;
margin-right: auto;


.widget-heading-holder { .widget-heading-holder {
width: 100%; width: 100%;
} }
} }


.schedule-list-holder {
width: 30%;
background-color: white;
height: calc(100vh - 70px);
overflow: auto;

&:hover {
&::-webkit-scrollbar {
display: block;
}
}

&::-webkit-scrollbar {
width: 8px;
display: none;
}

/* Track */
&::-webkit-scrollbar-track {
background-color: white;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background-color: rgba(black, 0.2);
}
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(black, 0.5);
}
}

.calendar { .calendar {
padding: 15px 30px; padding: 15px 30px;
background-color: white; background-color: white;
@@ -19,7 +57,7 @@
padding: 5px 0 20px; padding: 5px 0 20px;


span { span {
color: black;
color: var(--dark-grey);
text-transform: capitalize; text-transform: capitalize;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
@@ -40,6 +78,10 @@
color: var(--grey); color: var(--grey);
border-right: 1px solid #efefef; border-right: 1px solid #efefef;
padding: 5px 0; padding: 5px 0;

&:nth-child(7) {
border-right: 0;
}
} }
} }


@@ -63,6 +105,10 @@
border-right: 1px solid #efefef; border-right: 1px solid #efefef;
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;


&:nth-child(7n) {
border-right: 0;
}

&:hover { &:hover {
background-color: #efefef; background-color: #efefef;
} }
@@ -93,3 +139,235 @@
} }
} }
} }



.mini-calendar {
background-color: white;
width: 90%;
margin: 30px auto 20px;
padding-bottom: 20px;
border-bottom: 1px solid #cecece;

.month {
padding: 5px 0 20px;
display: flex;
margin: 0 auto;
width: 90%;
align-items: center;
text-align: center;
justify-content: space-between;

span {
color: var(--dark-grey);
text-transform: capitalize;
font-size: 16px;
letter-spacing: 1px;
font-weight: 500;
}

button {
width: 30px;
height: 30px;
font-size: 30px;
color: var(--brand-blue);
background-color: transparent;
border: 0;
}
}


.days {
display: flex;
width: 100%;

span {
width: calc(100% / 7);
text-align: center;
font-size: 12px;
color: var(--grey);
padding: 5px 0;
}
}

.dates {
display: flex;
width: 100%;
flex-wrap: wrap;

span {
display: block;
cursor: pointer;
font-size: 12px;
width: calc(100% / 7);
color: var(--dark-grey);
font-weight: 400;
position: relative;
padding: 10px 0;
text-align: center;

&.current-date {
border: 2px solid var(--brand-blue);
border-radius: 50%;
}

&.non-current-date {
color: #cecece;
}
}
}
}

.day-details {
width: 90%;
margin: 0 auto;

.tabs-holder {
display: flex;
align-items: center;
justify-content: center;

button {
margin: 0 10px;
border-radius: 20px;
border: 1px solid transparent;
background-color: transparent;
font-size: 12px;
padding: 5px 15px;
letter-spacing: 1px;
font-weight: 500;
color: var(--grey);
transition: background-color 0.3s, color 0.3s, border-color 0.3s;

&:first-child {
border-color: var(--pink);
color: var(--pink);

&.active {
background-color: var(--pink);
color: white;
}
}

&:last-child {
border-color: var(--green);
color: var(--green);

&.active {
background-color: var(--green);
color: white;
}
}
}
}

.tab-info {
width: 100%;
padding: 20px 0 0;
border-bottom: 1px solid #cecece;
letter-spacing: 1px;

ul {
width: 80%;
margin: 0 auto;
list-style: none;

&.holiday-list {
li::before {
background-color: var(--pink);
}
}

&.event-list {
li::before {
background-color: var(--green);
}
}
}

li {
padding-left: 30px;
line-height: 1.5;
margin-bottom: 15px;
position: relative;

&::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 8px;
height: 8px;
background-color: var(--dark-grey);
border-radius: 50%;
}

header {
font-size: 13px;
color: var(--dark-grey);
font-weight: 500;
}

p {
color: var(--grey);
font-size: 12px;
}
}
}
}

.timings {
width: 88%;
margin: 0 auto;
list-style: none;

li {
border-bottom: 1px solid #cecece;
margin: 15px 0;
padding-bottom: 15px;

&:last-child {
border-bottom: 0;
}
}

header {
font-size: 16px;
color: black;
font-weight: 500;
letter-spacing: 1px;
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;

i {
font-size: 16px;
color: var(--brand-blue);
}

button {
border-radius: 20px;
border: 1px solid var(--brand-blue);
padding: 5px 10px;
background-color: transparent;
color: var(--brand-blue);
font-weight: 500;
}
}

.time {
font-size: 14px;
letter-spacing: 1px;
margin: 5px auto;
color: var(--dark-grey);
font-weight: 500;
padding-left: 20px;
}

p {
color: var(--grey);
font-size: 14px;
padding-left: 20px;
}
}

+ 3
- 1
src/app/schedules/schedules.component.ts View File

@@ -1,5 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';


@Component({ @Component({
selector: 'app-schedules', selector: 'app-schedules',
@@ -8,6 +7,7 @@ import * as moment from 'moment';
}) })
export class SchedulesComponent implements OnInit { export class SchedulesComponent implements OnInit {
currentDate: number; currentDate: number;
currentMonth: string;
selectedDate: number; selectedDate: number;
selectedMonth: string; selectedMonth: string;
selectedYear: number; selectedYear: number;
@@ -16,6 +16,7 @@ export class SchedulesComponent implements OnInit {
preceedingDays: Array<number> = []; preceedingDays: Array<number> = [];
succeedingDays: Array<number> = []; succeedingDays: Array<number> = [];
selectedMonthDays: Array<number> = []; selectedMonthDays: Array<number> = [];
selectedTab: string = 'holiday';


constructor() { } constructor() { }


@@ -23,6 +24,7 @@ export class SchedulesComponent implements OnInit {
this.selectedMonth = this.monthMap[(new Date()).getMonth()]; this.selectedMonth = this.monthMap[(new Date()).getMonth()];
this.selectedYear = (new Date()).getFullYear(); this.selectedYear = (new Date()).getFullYear();
this.currentDate = new Date().getDate(); this.currentDate = new Date().getDate();
this.currentMonth = this.monthMap[(new Date()).getMonth()];
this.renderCalendar(); this.renderCalendar();
} }




+ 1
- 1
src/app/widgets-holder/widgets-holder.component.ts View File

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


constructor() { } constructor() { }




+ 2
- 0
src/styles.scss View File

@@ -7,6 +7,8 @@ $ionicons-font-path: "~ionicons/dist/fonts";
--brand-yellow: #f79319; --brand-yellow: #f79319;
--grey: #9a9a9a; --grey: #9a9a9a;
--dark-grey: #666666; --dark-grey: #666666;
--pink: #f76d6d;
--green: #8cc63f;
} }






Write Preview
Loading…
Cancel
Save