#115 job list item css now looks like postmate

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

Hide file tree

Showing 2 changed files with 74 additions and 7 deletions.
diff --git a/app/vendor-details/vendor-details.component.css b/app/vendor-details/vendor-details.component.css
@@ -3,8 +3,68 @@
     height: 333px;
     background-size: cover;
 }
-
+.catagories {
+    height: 50px;
+}
+.catagories-list {
+    padding: 22px;
+}
+.vendor-items {
+    margin-left: -45px;
+}
 .vendor-item-list {
     display: inline-block;
     width: 50%;
+}
+
+@media only screen and (max-width: 780px){
+    .vendor-item-list {
+        display: block;
+        width: 100%;
+    }
+    .vendor-item-list:nth-child(2n) {
+        padding-left: 0px !important;
+    }
+
+    .vendor-item-list:nth-child(2n+1) {
+        padding-right: 0px !important;
+    }
+
+    .name {
+        float: none;
+    }
+}
+
+
+.vendor-item-list:nth-child(2n) {
+    padding-left: 50px;
+}
+
+.vendor-item-list:nth-child(2n+1) {
+    padding-right: 50px;
+}
+
+.name {
+    float: right;
+}
+
+li {
+    font-family: 'Roboto' ,sans-serif;
+    font-weight: 200;
+    font-style: normal;
+}
+
+li > a:hover {
+  border-bottom: 2px solid #7fdbd4;
+  background-color: #d9d7d7;
+}
+
+li a {
+    display: block;
+    padding: 8px;
+    border-bottom: 2px solid transparent;
+    -webkit-transition: border .15s,background .15s;
+    transition: border .15s,background .15s;
+    text-decoration: none;
+    color: black;
 }
diff --git a/app/vendor-details/vendor-details.component.html b/app/vendor-details/vendor-details.component.html
@@ -1,19 +1,26 @@
 <div class="container center-block">
     <div class="row">
-        <ul class="list-inline center-block">
-            <li *ngFor="let cat of vendor.catagories">{{cat.catagory}}</li>
+        <ul class="list-inline center-block catagories">
+            <li class="catagories-list" *ngFor="let cat of vendor.catagories">{{cat.catagory}}</li>
         </ul>
     </div>
     <div class="row vendor-name">
         <h1>{{vendor.name}}</h1>
     </div>
 
-    <div class="row" *ngFor="let cat of vendor.catagories">
+    <div class="" *ngFor="let cat of vendor.catagories">
         <h3>{{cat.catagory}}</h3>
         <hr>
-        <div class="row">
-            <ul>
-                <li class="vendor-item-list" *ngFor="let item of cat.itemlist">{{item.item}}</li>
+        <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>
+                    </a>
+                </li>
             </ul>
         </div>
     </div>