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

Items page partial commit

master
kj1352 6 years ago
parent
5a6db1fb29
commit
b673f113e8
6 changed files with 320 additions and 8 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +106
    -1
      src/app/menu-items/menu-items.component.html
  2. +173
    -0
      src/app/menu-items/menu-items.component.scss
  3. +8
    -6
      src/app/menu-items/menu-items.component.ts
  4. +1
    -0
      src/app/widgets-holder/widgets-holder.component.html
  5. +1
    -1
      src/app/widgets-holder/widgets-holder.component.ts
  6. +31
    -0
      src/styles.scss

+ 106
- 1
src/app/menu-items/menu-items.component.html View File

@@ -1 +1,106 @@
<p>menu-items works!</p>
<div class="container">
<section class="item-details">
<div class="widget-heading-holder">
<header> Menu Items </header>

<div class="tabs-holder" [ngClass]="{'left' : selectedTab === 'items', 'right': selectedTab === 'offers'}">
<button (click)="selectedTab = 'items'"> Items </button>
<button (click)="selectedTab = 'offers'"> Offers </button>
</div>
</div>

<table>
<tr>
<th> Item No </th>
<th> Item Name </th>
<th> Preperation Time </th>
<th> Price </th>
<th> Availability Status </th>
</tr>

<tr>
<td> 14344 </td>
<td> 8 Pc Hot &amp; Crispy </td>
<td> 15 Min </td>
<td> &#x20B9; 750 </td>
<td>
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</td>
</tr>

<tr>
<td> 14344 </td>
<td> 8 Pc Hot &amp; Crispy </td>
<td> 15 Min </td>
<td> &#x20B9; 750 </td>
<td>
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</td>
</tr>

<tr>
<td> 14344 </td>
<td> 8 Pc Hot &amp; Crispy </td>
<td> 15 Min </td>
<td> &#x20B9; 750 </td>
<td>
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</td>
</tr>

<tr>
<td> 14344 </td>
<td> 8 Pc Hot &amp; Crispy </td>
<td> 15 Min </td>
<td> &#x20B9; 750 </td>
<td>
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</td>
</tr>
</table>
</section>

<ul class="subscribed-offers">
<div class="heading">
<header> Subscribed Offers: </header>
<a> View All </a>
</div>

<li>
<header> Buy 2 Solo Bucket @ &#x20B9; 599 </header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quia, quo dolor tenetur porro amet cumque aspernatur illum culpa veniam quae blanditiis, adipisci delectus dolorem aliquam soluta repellendus pariatur facere.
</p>
<header> Valid till : 2 Days, Hrs: 15:25:20 </header>
</li>

<li>
<header> Buy 2 Solo Bucket @ &#x20B9; 599 </header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quia, quo dolor tenetur porro amet cumque aspernatur illum culpa veniam quae blanditiis, adipisci delectus dolorem aliquam soluta repellendus pariatur facere.
</p>
<header> Valid till : 2 Days, Hrs: 15:25:20 </header>
</li>

<li>
<header> Buy 2 Solo Bucket @ &#x20B9; 599 </header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quia, quo dolor tenetur porro amet cumque aspernatur illum culpa veniam quae blanditiis, adipisci delectus dolorem aliquam soluta repellendus pariatur facere.
</p>
<header> Valid till : 2 Days, Hrs: 15:25:20 </header>
</li>
</ul>

</div>

+ 173
- 0
src/app/menu-items/menu-items.component.scss View File

@@ -0,0 +1,173 @@
.container {
display: flex;
width: 95%;
margin-left: auto;
align-items: stretch;
height: 100%;

.item-details {
width: 65%;
margin-right: auto;
}
}

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

.tabs-holder {
display: flex;
width: auto;
border-radius: 20px;
overflow: hidden;
background-color: white;
width: 150px;
position: relative;

&.left {
button {
&:first-child {
color: white;
}
}
}

&.right {
button {
&:last-child {
color: white;
}
}

&::before {
transform: translateX(100%);
}
}

&::before {
content: '';
position: absolute;
background-color: var(--brand-blue);
border-radius: 20px;
width: 50%;
height: 100%;
transition: transform 0.5s;
}

button {
position: relative;
border-radius: 20px;
border: 0;
font-size: 14px;
height: 35px;
width: 50%;
background-color: transparent;
color: var(--brand-blue);
font-weight: 500;
transition: color 0.3s;
}
}


table {
width: 100%;
margin: 30px 0;
text-align: left;

th {
color: var(--grey);
font-size: 14px;
font-weight: 500;
padding: 10px 0;
letter-spacing: 0.5px;
}

td {
border-top: 1px solid rgba(#cecece, 0.5);
padding: 10px 0;
color: var(--dark-grey);
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
line-height: 2;
vertical-align: top;
width: calc(100% / 5);

&:nth-child(3) {
padding-left: 20px;
}
}
}

.subscribed-offers {
width: 30%;
background-color: white;
padding: 30px 30px;
list-style: none;
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);
}

.heading {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;


header {
font-size: 16px;
letter-spacing: 1px;
font-weight: 500;
}

a {
color: var(--brand-blue);
text-decoration: underline;
font-size: 14px;
}
}

li {
padding: 10px 0;
border-top: 1px solid #cecece;

header {
margin: 10px 0;
font-size: 16px;
font-weight: 500;
color: var(--dark-grey);
}

p {
font-size: 13px;
color: var(--grey);
line-height: 1.5;
letter-spacing: 0.5px;
}
}
}

+ 8
- 6
src/app/menu-items/menu-items.component.ts View File

@@ -1,15 +1,17 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';


@Component({ @Component({
selector: 'app-menu-items',
templateUrl: './menu-items.component.html',
styleUrls: ['./menu-items.component.scss']
selector: 'app-menu-items',
templateUrl: './menu-items.component.html',
styleUrls: ['./menu-items.component.scss']
}) })
export class MenuItemsComponent implements OnInit { export class MenuItemsComponent implements OnInit {
selectedTab: string = 'items';
productAvailable: boolean = false;


constructor() { }
constructor() { }


ngOnInit() {
}
ngOnInit() {
}


} }

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

@@ -43,5 +43,6 @@
<section class="widgets"> <section class="widgets">
<app-dashboard *ngIf="selected_nav === 'dashboard'"></app-dashboard> <app-dashboard *ngIf="selected_nav === 'dashboard'"></app-dashboard>
<app-orders *ngIf="selected_nav === 'orders'"></app-orders> <app-orders *ngIf="selected_nav === 'orders'"></app-orders>
<app-menu-items *ngIf="selected_nav === 'items'"></app-menu-items>
</section> </section>
</div> </div>

+ 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 = 'orders';
selected_nav: string = 'items';


constructor() { } constructor() { }




+ 31
- 0
src/styles.scss View File

@@ -127,3 +127,34 @@ button {
} }
} }
} }


.toggle {
position: relative;
border-radius: 20px;
background-color: #cecece;
width: 50px;
height: 20px;
display: flex;
align-items: center;
margin: 0 auto;
transition: background-color 0.4s;

&.on {
background-color: #8cc63f;

.knob {
transform: translateX(calc(50px - 18px));
}
}

.knob {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: white;
position: relative;
transition: transform 0.4s;
transform: translateX(2px);
}
}

Write Preview
Loading…
Cancel
Save