diff --git a/package-lock.json b/package-lock.json index af849d0..37cbd1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7850,6 +7850,11 @@ } } }, + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/package.json b/package.json index 9750f48..6147f0e 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser-dynamic": "~8.2.9", "@angular/router": "~8.2.9", "ionicons": "^4.6.3", + "moment": "^2.24.0", "rxjs": "~6.4.0", "tslib": "^1.10.0", "zone.js": "~0.9.1" diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 638ce8f..6e4cee7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,9 +11,9 @@ import { WidgetsHolderComponent } from './widgets-holder/widgets-holder.componen import { DashboardComponent } from './dashboard/dashboard.component'; import { OrdersComponent } from './orders/orders.component'; import { MenuItemsComponent } from './menu-items/menu-items.component'; -import { OffersComponent } from './offers/offers.component'; import { SchedulesComponent } from './schedules/schedules.component'; import { CustomSelectorComponent } from './custom-selector/custom-selector.component'; +import { FaqComponent } from './faq/faq.component'; @NgModule({ declarations: [ @@ -23,9 +23,9 @@ import { CustomSelectorComponent } from './custom-selector/custom-selector.compo DashboardComponent, OrdersComponent, MenuItemsComponent, - OffersComponent, SchedulesComponent, - CustomSelectorComponent + CustomSelectorComponent, + FaqComponent ], imports: [ BrowserModule, diff --git a/src/app/faq/faq.component.html b/src/app/faq/faq.component.html new file mode 100644 index 0000000..762b88c --- /dev/null +++ b/src/app/faq/faq.component.html @@ -0,0 +1,39 @@ +
+
Frequently Asked Questions
+ +
+ + +
+
+ +
+ + + +
diff --git a/src/app/faq/faq.component.scss b/src/app/faq/faq.component.scss new file mode 100644 index 0000000..a50db57 --- /dev/null +++ b/src/app/faq/faq.component.scss @@ -0,0 +1,194 @@ +.search-input { + display: flex; + width: 35%; + height: 30px; + border-radius: 20px; + background-color: white; + color: var(--brand-blue); + align-items: center; + justify-content: space-between; + + input { + border: 0; + font-size: 12px; + padding-left: 10px; + font-weight: 500; + color: var(--dark-grey); + flex-grow: 1; + letter-spacing: 1px; + + &::placeholder { + color: var(--grey); + } + } + + button { + border-radius: 50%; + width: 30px; + height: 30px; + color: var(--brand-blue); + font-size: 20px; + border: 1px solid var(--brand-blue); + background-color: white; + transition: background-color 0.3s, color 0.3s; + + &:hover { + background-color: var(--brand-blue); + color: white; + } + } +} + +.container { + display: flex; + width: 95%; + margin: 30px auto; + letter-spacing: 1px; +} + +.topic-list { + width: 25%; + height: calc(100vh - 200px); + overflow: auto; + margin: 0 auto; + list-style: none; + + &: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); + } + + li { + background-color: white; + margin-bottom: 15px; + border-radius: 10px; + padding: 15px; + cursor: pointer; + + &.active { + background-color: var(--brand-blue); + box-shadow: 0px 0px 5px #cecece; + + header, p { + color: white; + } + } + + header { + margin-bottom: 5px; + font-size: 14px; + color: var(--dark-grey); + font-weight: 500; + } + + p { + font-size: 12px; + color: var(--grey); + line-height: 1.5; + } + } +} + +.topic-detail { + width: 70%; + margin: 0 auto; + list-style: none; + background-color: white; + border-radius: 10px; + height: calc(100vh - 200px); + overflow: auto; + padding: 20px 25px; + + &: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); + } + + .heading { + margin-bottom: 20px; + header { + font-size: 20px; + color: var(--dark-grey); + font-weight: 500; + } + + p { + font-size: 12px; + color: var(--grey); + line-height: 1.5; + } + } + + li { + header { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + font-size: 15px; + font-weight: 500; + color: var(--dark-grey); + border-bottom: 1px solid #efefef; + padding: 10px 0; + + button { + background-color: transparent; + border: 0px; + color: var(--brand-blue); + + &.active { + color: var(--grey); + } + + i { + font-size: 25px; + } + } + } + + p { + color: var(--grey); + font-size: 13px; + line-height: 1.5; + margin-top: 15px; + } + } +} diff --git a/src/app/offers/offers.component.spec.ts b/src/app/faq/faq.component.spec.ts similarity index 57% rename from src/app/offers/offers.component.spec.ts rename to src/app/faq/faq.component.spec.ts index 99cc2cf..cce932c 100644 --- a/src/app/offers/offers.component.spec.ts +++ b/src/app/faq/faq.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { OffersComponent } from './offers.component'; +import { FaqComponent } from './faq.component'; -describe('OffersComponent', () => { - let component: OffersComponent; - let fixture: ComponentFixture; +describe('FaqComponent', () => { + let component: FaqComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ OffersComponent ] + declarations: [ FaqComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(OffersComponent); + fixture = TestBed.createComponent(FaqComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/faq/faq.component.ts b/src/app/faq/faq.component.ts new file mode 100644 index 0000000..c7af41f --- /dev/null +++ b/src/app/faq/faq.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-faq', + templateUrl: './faq.component.html', + styleUrls: ['./faq.component.scss'] +}) +export class FaqComponent implements OnInit { + showDetails: boolean = true; + selectedCard: number = 1; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/offers/offers.component.html b/src/app/offers/offers.component.html deleted file mode 100644 index 545fdc0..0000000 --- a/src/app/offers/offers.component.html +++ /dev/null @@ -1 +0,0 @@ -

offers works!

diff --git a/src/app/offers/offers.component.scss b/src/app/offers/offers.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/offers/offers.component.ts b/src/app/offers/offers.component.ts deleted file mode 100644 index 2b1e0c9..0000000 --- a/src/app/offers/offers.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-offers', - templateUrl: './offers.component.html', - styleUrls: ['./offers.component.scss'] -}) -export class OffersComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/src/app/orders/orders.component.scss b/src/app/orders/orders.component.scss index 04bfa60..2735ed7 100644 --- a/src/app/orders/orders.component.scss +++ b/src/app/orders/orders.component.scss @@ -25,6 +25,7 @@ font-weight: 500; color: var(--dark-grey); flex-grow: 1; + letter-spacing: 1px; &::placeholder { color: var(--grey); diff --git a/src/app/schedules/schedules.component.html b/src/app/schedules/schedules.component.html index c1f1636..a46280e 100644 --- a/src/app/schedules/schedules.component.html +++ b/src/app/schedules/schedules.component.html @@ -1,6 +1,6 @@
-
Shop Events & Timings
+
Shop Events and Timings
@@ -9,12 +9,12 @@
- Sun Mon Tue Wed - Thu Fri Sat + Sunday Monday Tuesday Wednesday + Thursday Friday Saturday
{{ preceedingDay }} - {{ selectedMonthDay }} + {{ selectedMonthDay }} {{ succeedingDay }}
diff --git a/src/app/schedules/schedules.component.scss b/src/app/schedules/schedules.component.scss index 0690ded..5ad526e 100644 --- a/src/app/schedules/schedules.component.scss +++ b/src/app/schedules/schedules.component.scss @@ -8,8 +8,7 @@ } .calendar { - box-shadow: 0 0 10px -1px #bcbcbc; - padding: 15px 0; + padding: 15px 30px; background-color: white; width: 100%; border-radius: 10px; @@ -19,26 +18,11 @@ text-align: center; padding: 5px 0 20px; - button, span { - vertical-align: middle; - } - - button { - --padding-start: 0; - --padding-end: 0; - } - - i { - color: var(--ion-color-lighter-grey); - font-size: 22px; - } - - span { - color: var(--ion-color-blue); - text-transform: uppercase; - font-size: 18px; - padding: 0 5px; + color: black; + text-transform: capitalize; + font-size: 16px; + font-weight: 500; display: inline-block; width: 180px; } @@ -48,17 +32,14 @@ .days { display: flex; width: 100%; - margin: 5px 0; span { width: calc(100% / 7); text-align: center; - font-size: 14px; - color: var(--ion-color-brand-black); - - &:first-child { - color: #f05525; - } + font-size: 12px; + color: var(--grey); + border-right: 1px solid #efefef; + padding: 5px 0; } } @@ -68,57 +49,46 @@ flex-wrap: wrap; span { - margin: 15px 0; + display: block; + cursor: pointer; font-size: 14px; width: calc(100% / 7); - text-align: center; - color: var(--ion-color-brand-black); + color: var(--dark-grey); + font-weight: 400; position: relative; - - &::before { - content: ''; - position: absolute; - left: 0; - top: -70%; - overflow: visible; - width: 100%; - height: 52px; - box-shadow: none; - border-radius: 50%; - transform: scale(0.8); - } - - &::after { - content: ''; - position: absolute; - left: 46%; - bottom: -5px; - width: 5px; - height: 5px; - border-radius: 50%; - overflow: hidden; - background-color: var(--ion-color-lighter-grey); - display: none; - } + height: 60px; + padding-left: 10px; + padding-top: 10px; + border-top: 1px solid #efefef; + border-right: 1px solid #efefef; + transition: background-color 0.3s, color 0.3s; + + &:hover { + background-color: #efefef; + } + + &.current-date { + color: var(--brand-blue); + font-weight: 700; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 3px; + background-color: var(--brand-blue); + } + } &.active { - &::before { - box-shadow: 0 0 5px -1px var(--ion-color-light-grey); - } - } - - &.taken { - &::after { - display: block; - } - } - - &:nth-child(7n + 1) { - color: #f05525; + background-color: var(--brand-blue); + color: white; } &.non-current-date { - color: var(--ion-color-lighter-grey); + color: #cecece; } } } diff --git a/src/app/schedules/schedules.component.ts b/src/app/schedules/schedules.component.ts index 1eb85ff..c1f84c6 100644 --- a/src/app/schedules/schedules.component.ts +++ b/src/app/schedules/schedules.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import * as moment from 'moment'; @Component({ selector: 'app-schedules', @@ -6,6 +7,7 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./schedules.component.scss'] }) export class SchedulesComponent implements OnInit { + currentDate: number; selectedDate: number; selectedMonth: string; selectedYear: number; @@ -20,10 +22,14 @@ export class SchedulesComponent implements OnInit { ngOnInit() { this.selectedMonth = this.monthMap[(new Date()).getMonth()]; this.selectedYear = (new Date()).getFullYear(); - this.selectedDate = new Date().getDate(); + this.currentDate = new Date().getDate(); this.renderCalendar(); } + selectDay(selectedMonthDay: number) { + this.selectedDate = selectedMonthDay; + } + renderCalendar() { // Generate dates for the calendar let i = 1, diff --git a/src/app/widgets-holder/widgets-holder.component.html b/src/app/widgets-holder/widgets-holder.component.html index 4215fbf..6d60931 100644 --- a/src/app/widgets-holder/widgets-holder.component.html +++ b/src/app/widgets-holder/widgets-holder.component.html @@ -2,8 +2,10 @@ Logo @@ -45,5 +47,6 @@ + diff --git a/src/app/widgets-holder/widgets-holder.component.scss b/src/app/widgets-holder/widgets-holder.component.scss index 54a79b6..9d5dba7 100644 --- a/src/app/widgets-holder/widgets-holder.component.scss +++ b/src/app/widgets-holder/widgets-holder.component.scss @@ -15,14 +15,34 @@ } nav { + height: 70px; + display: flex; + align-items: center; a, button { - margin: 0 15px; + margin: 0 25px; } a { color: var(--grey); font-size: 16px; + height: 70px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + &.active { + &::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 100%; + background-color: var(--brand-blue); + } + } } button { diff --git a/src/app/widgets-holder/widgets-holder.component.ts b/src/app/widgets-holder/widgets-holder.component.ts index 8779e87..bc3dd68 100644 --- a/src/app/widgets-holder/widgets-holder.component.ts +++ b/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 = 'schedule'; + selected_nav: string = 'faq'; constructor() { }