diff --git a/src/app/outlets/outlets.component.html b/src/app/outlets/outlets.component.html index 5942a95..43e137a 100644 --- a/src/app/outlets/outlets.component.html +++ b/src/app/outlets/outlets.component.html @@ -10,19 +10,44 @@
-
  • - +
  • - +
    -

    {{outlet.outlet_name}} ({{outlet.outlet_id}})

    +

    {{outlet.outlet_name}}

    + Id:{{outlet.outlet_id}}
    Type: {{outlet.outlet_type}} - Rating:{{outlet.rating}}/5 + Timings: 9:00am to 10:00pm

    {{outlet.description}}

    + +
    +

    MenuItems: {{outlet.menuitems.length}}

    +
    +
  • +
    + +
    +
    +
    +
    {{menuitem.menu_item_name}}
    + Price: ₹ {{menuitem.item_price}} {{menuitem.wait_duration}} + Availiblity + + + +
    +
    + + +
    +
    +
    • + +
    \ No newline at end of file diff --git a/src/app/outlets/outlets.component.scss b/src/app/outlets/outlets.component.scss index 771e1a5..85be771 100644 --- a/src/app/outlets/outlets.component.scss +++ b/src/app/outlets/outlets.component.scss @@ -69,20 +69,20 @@ } } -section{ +section { list-style: none; - display: grid; - grid-template-columns: repeat(4, 1fr); - li{ + .outlet-menu { position: relative; margin: 50px; - width: 400px; filter: brightness(120%); cursor: pointer; + display: flex; + flex-direction: rows; + height: 25vh; - &:before{ + &:before { content: ''; position: absolute; top: 0; @@ -95,48 +95,167 @@ section{ filter: brightness(130%); } - figure{ - img{ + figure { + display: flex; + width: 20%; + + img { display: block; - border-radius: 10px; + border-radius: 30px; width: calc(100% - 10px); - height: 200px; + height: 100%; margin: 0 auto; - padding-top: 5px; + padding: 20px; } } + } +} + +.upfold { + padding: 0 20px; + position: relative; + width: 40%; + + h4 { + font-size: 18px; + color: var(--dark-grey); + margin: 15px 0px 5px; + display: inline-block; + padding-right: 10px; + } + + p { + margin: 10px 0 0; + text-align: justify; + color: var(--dark-grey); + max-height: 100px; + overflow: auto; + } + + + div { + display: flex; + justify-content: space-between; + position: relative; + padding: 10px 0; + + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + border-bottom: 1px solid var(--grey); + + span { + margin: 0 auto; + } + } + + + } + + span { + color: var(--dark-grey); + font-weight: 500; + } +} + +.upfold-content { + display: block; + position: relative; + width: 40%; + padding: 0 0 0 20px; + + h4 { + position: sticky; + top: 0; + font-size: 18px; + color: var(--dark-grey); + padding: 10px 0; + display: inline-block; + padding-right: 10px; + width: 100%; + z-index: 0; + background-color: white; + &:before { + content: ''; + position: absolute; + top: 0; + width: 100%; + height: 100%; + box-shadow: 0 0 5px 0px var(--grey); - .upfold{ - padding: 0 20px; + border-top: 2px solid var(--grey); + filter: brightness(130%); + z-index: 1; + + } + } + + .menuitems { + overflow: auto; + max-height: calc(100% - 5vh); + + li{ + margin: 15px 0; position: relative; - - div{ - display: flex; - justify-content: space-between; + display: flex; + z-index: 0; + + &:before{ + content: ''; + top: 0; + position: absolute; + width: 100%; + height: 100%; + border-bottom: 1px solid var(--grey); + padding-top: 7px; + z-index: -1; + background: var(--grey); + filter: brightness(135%); + border-radius: 10px; + } - } - h4{ - font-size: 18px; - color: var(--dark-grey); - margin: 10px 0; - } - p{ - margin: 20px 0 0; - text-align: justify; - color: var(--dark-grey); - height: 70px; + .menu-img { + width: 70px; + height: 70px; + padding: 0; + border-radius: 10px; + } } - span{ - color: var(--dark-grey); - font-weight: 500; + .menuitem-content { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 10px; + width: 100%; + h5 { + color: var(--dark-grey); + font-size: 15px; + } img{ - vertical-align: middle; - fill: black; + width: 20px; + } + + span { + font-size: 14px; + color: var(--dark-grey); + font-weight: 500; + padding-right: 10px; + display: block; + + img{ + vertical-align: middle; + width: 14px; + + } } } } diff --git a/src/app/outlets/outlets.component.ts b/src/app/outlets/outlets.component.ts index 8057d1c..7f67f7b 100644 --- a/src/app/outlets/outlets.component.ts +++ b/src/app/outlets/outlets.component.ts @@ -28,11 +28,10 @@ export class OutletsComponent implements OnInit { getOutletInfo() { let outlets: any = this.venderInfo this.outlets = outlets.outlet - } + } - outletSwitch(selectedOutlet: any) { - this.router.navigate(['shop-details']); - console.log(selectedOutlet) + selectedOutlet(outlet: any) { + console.log(outlet) } logout() { diff --git a/src/assets/cancel.svg b/src/assets/cancel.svg new file mode 100644 index 0000000..1be2589 --- /dev/null +++ b/src/assets/cancel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/check.svg b/src/assets/check.svg new file mode 100644 index 0000000..61b33b5 --- /dev/null +++ b/src/assets/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/non-veg.svg b/src/assets/non-veg.svg new file mode 100644 index 0000000..8a17556 --- /dev/null +++ b/src/assets/non-veg.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/assets/timer.svg b/src/assets/timer.svg new file mode 100644 index 0000000..7b53104 --- /dev/null +++ b/src/assets/timer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/veg.svg b/src/assets/veg.svg new file mode 100644 index 0000000..0098dcf --- /dev/null +++ b/src/assets/veg.svg @@ -0,0 +1,3 @@ + \ No newline at end of file