#115 now need to add a pop up on clicking menu

NerdCats · Aug 16, 2016 · 55d64a2 · 55d64a2
1 parent 7a4cde5
commit 55d64a2
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 15 deletions.
diff --git a/app/vendor-details/vendor-details.component.css b/app/vendor-details/vendor-details.component.css
@@ -1,7 +1,26 @@
-.vendor-name {
-    background: url('/assets/img/pop-up-pizza.jpg') no-repeat center center fixed;
-    height: 333px;
-    background-size: cover;
+.vendor-name-div {
+    position: relative;
+    overflow: hidden;
+}
+.vendor-name-div h1 {
+    padding: 200px 200px 0 200px;
+    position: relative;
+    z-index: 2;
+}
+.vendor-name-div p {
+    position: relative;
+    z-index: 2;
+    padding-bottom: 200px;
+    font-size: 16px;
+    font-weight: 400;
+}
+.vendor-name-div img {
+    opacity: 0.4;
+    background-color: black;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
 }
 .catagories {
     height: 50px;
@@ -55,7 +74,7 @@ li {
 }
 
 li > a:hover {
-  border-bottom: 2px solid #7fdbd4;
+  border-bottom: 2px solid #3498db;
   background-color: #d9d7d7;
 }
 

diff --git a/app/vendor-details/vendor-details.component.html b/app/vendor-details/vendor-details.component.html
@@ -1,24 +1,28 @@
 <div class="container center-block">
     <div class="row">
         <ul class="list-inline center-block catagories">
-            <li class="catagories-list" *ngFor="let cat of vendor.catagories">{{cat.catagory}}</li>
+            <li class="catagories-list" *ngFor="let cat of vendor.catagories">
+                <!--http://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs-->
+                <a href="/#{{cat.catagory}}" target="_self">{{cat.catagory}}</a></li>
         </ul>
     </div>
-    <div class="row vendor-name">
-        <h1>{{vendor.name}}</h1>
+    <div class="vendor-name-div">
+        <h1 class="text-center">{{vendor.name}}</h1>
+        <p class="text-center">107 E Charleston Blvd #150, Las Vegas, NV</p>
+        <img src="/assets/img/pop-up-pizza.jpg" alt="">
     </div>
 
     <div class="" *ngFor="let cat of vendor.catagories">
-        <h3>{{cat.catagory}}</h3>
+        <a name="{{cat.catagory}}"><h3>{{cat.catagory}}</h3></a>
         <hr>
         <div>
             <ul class="vendor-items">
                 <li class="vendor-item-list" *ngFor="let item of cat.itemlist">
                     <a>
-                        <div>
-                            <div class="name">{{item.item}}</div>
-                            <div>{{item.price}}</div>
-                        </div>
+                       <div>
+                           <div class="name">{{item.item}}</div>
+                           <div>{{item.price}}</div>
+                       </div>
                     </a>
                 </li>
             </ul>

diff --git a/app/vendor-details/vendor-details.service.ts b/app/vendor-details/vendor-details.service.ts
@@ -52,7 +52,7 @@ export class VendorDetailsService {
             ]
             },
             {
-                catagory: "SIGNATURE PIZZAS",
+                catagory: "BIG PIZZAS",
                 itemlist: [
                 {
                     item: "The 18 lb.",
@@ -97,7 +97,7 @@ export class VendorDetailsService {
             ]
             },
             {
-                catagory: "SIGNATURE PIZZAS",
+                catagory: "SMALL PIZZAS",
                 itemlist: [
                 {
                     item: "The 18 lb.",

diff --git a/assets/img/pop-up-pizza.jpg b/assets/img/pop-up-pizza.jpg