advance styling and add local storage functionality

seagda · Jan 5, 2021 · b616922 · b616922
1 parent 994a37e
commit b616922
Show file tree

Hide file tree

Showing 15 changed files with 667 additions and 513 deletions.
diff --git a/assets/css/article.css b/assets/css/article.css
@@ -36,17 +36,53 @@
     color: #ffab40;
 }
 
+.col.s5 {
+    margin-left: 4% !important;
+}
+
 .card {
-    width: 45%;
+    height: 400px;
+    overflow: scroll;
+    display: inline-block;
+    margin: 3% 4%;
+}
+
+.card-content {
+    height: 350px;
+    overflow: scroll;
     display: inline-block;
-    margin: 2%;
+}
+
+.card .card-content .card-title {
+    margin-bottom: 0;
+}
+
+.display-desc {
+    margin-top: 18px !important;
+}
+
+.card-action {
+    position: absolute !important;
+    top: 83%;
+    left: 0;
+    right: 0;
+    bottom: 0;
 }
 
 .waves-effect {
     -webkit-transition: none;
     transition: none;
 }
 
+.modal, .modal-footer {
+    background-color: #212121 !important;
+    color: #eee5d9 !important;
+}
+
+.modal-footer a {
+    font-size: 20px;
+}
+
 @media (max-width: 992px) {
     .search-engine {
         margin: auto;
@@ -86,7 +122,7 @@
 }
 
 @media (max-width: 671px) {
-    .card {
+    .row .col.s5.card {
         width: 85%;
         left: 5%;
     }

diff --git a/assets/css/beer.css b/assets/css/beer.css
@@ -10,73 +10,83 @@
   margin-top: 30px;
 }
 
-.input-field .prefix.active {
+.input-field .prefix.active, input {
   color: #eee5d9;
 }
 
-button.dropdown-trigger, .dropdown-trigger:focus {
-  background-color: rgba(0, 0, 0, .8);
-  color: #eee5d9;
-  font-size: 1.5rem;
-  height: 40px;
+.caret {
+  fill: #eee5d9 !important;
 }
 
-.dropdown-trigger:hover {
-  background-color: #eee5d9;
-  opacity: 0.8;
-  color: rgba(0, 0, 0, .8);
+.select-wrapper input.select-dropdown:focus {
+  border-bottom: 1px solid #eee5d9;
 }
 
 .dropdown-content {
   background-color: #212121;
 }
 
-.dropdown-content li>a {
+.dropdown-content li>span {
   color: #eee5d9;
 }
 
-.dropdown-content li>a:hover {
+.dropdown-content li>span:hover {
   background-color: #eee5d9;
   color: #212121;
 }
 
-.dropdown-trigger {
-  margin-top: 25px;
+.beer-btn:hover {
+  color: #6d4c41;
 }
 
-.noUi-tooltip span {
-  position: relative;
-  font-size: 15px;
-  top: 0;
+.row .col.s3 {
+  width: 30%;
+  margin-left: 2%;
 }
 
-.noUi-origin, .noUi-target.noUi-ltr.noUi-horizontal .noUi-tooltip, .noUi-connect, .noUi-active, .noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
-  background-color: #546e7a;
+.nav-content {
+  margin-bottom: 10px;
 }
 
-.sliders {
-  margin-bottom: 0;
-  margin-top: 40px;
+.tabs .tab a:focus, .tabs .tab a:focus.active {
+  background-color: #455a64;
+  opacity: 0.7;
 }
 
-.sliders>.col.s5>p {
-  text-align: center;
-  font-weight: 900;
-  font-size: 1.3rem;
-  margin-top: 10px;
+.fa-heart {
+  cursor: pointer;
 }
 
-.beer-btn:hover {
-  color: #6d4c41;
+.link {
+  padding-left: 0;
+  color: #0288d1 !important;
 }
 
-.row .col.s3 {
-  width: 30%;
-  margin-left: 2%;
+.link:hover {
+  color: #81d4fa !important;
+  transition: color .3s ease !important;
 }
 
-.link {
-  padding-left: 0;
+.card.medium {
+  padding-bottom: 50px;
+}
+
+.card-title {
+  margin-top: 20px;
+}
+
+.sub {
+  margin-top: 15px !important;
+}
+
+.chip {
+  background-color: #546e7a;
+  color: #eee5d9;
+}
+
+.detail-info {
+  height: 250px;
+  overflow-y: scroll;
 }
 
 .card .card-reveal {
@@ -92,17 +102,22 @@ button.dropdown-trigger, .dropdown-trigger:focus {
   cursor: pointer;
 }
 
-#beer-style {
-  font-weight: bolder;
+.waves-effect {
+  -webkit-transition: none;
+  transition: none;
 }
 
-#beer-country {
-  font-weight: bolder;
+.modal, .modal-footer {
+  background-color: #212121 !important;
+  color: #eee5d9 !important;
 }
 
-.waves-effect {
-  -webkit-transition: none;
-  transition: none;
+.modal-footer a {
+  font-size: 20px;
+}
+
+.preloader-wrapper {
+  margin: 50px 0px;
 }
 
 @media (max-width: 992px) {
@@ -114,50 +129,35 @@ button.dropdown-trigger, .dropdown-trigger:focus {
   .row .input-field.col.s7 {
     width: 80%;
   }
-  .dropdown-trigger {
-    width: 100%;
-    margin-top: 0;
-    left: 50%;
+  .input-field.col.s3 {
+    width: 40%;
+    left: 29%;
+  }
+  .card.medium.col.s3 {
+    width: 40%;
+    left: 6%;
   }
   .btn {
     position: absolute;
     width: 25%;
   }
-  .dropdown-trigger, button.waves-effect {
+   button.waves-effect {
     transform: translate(-50%, -50%);
   }
-  .sliders {
-    margin-top: 60px;
-  }
-  .sliders .col.s5 {
-    position: absolute;
-  }
-  #abv, #ibu {
-    width: 100%;
-  }
-  .sliders .col.s5:nth-child(2), .sliders .col.s5:nth-child(3) {
-    left: 29%;
-  }
-  .sliders .col.s5:nth-child(3) {
-    top: 60%;
-  }
-  .sliders .col.s5 p {
-    font-size: 20px;
-  }
   .waves-effect {
-    top: 80%;
+    top: 65%;
     left: 49%;
   }
-  .row .col.s3 {
-    width: 40%;
-    margin-left: 7%;
-  }
 }
 
 @media (max-width: 671px) {
-  .row .col.s3 {
-    width: 80%;
-    margin-left: 10%;
+  .input-field.col.s3 {
+    width: 50%;
+    left: 23%;
+  }
+  .card.medium.col.s3 {
+    width: 70%;
+    left: 12%;
   }
   .beer-btn.btn {
     left: 48%;

diff --git a/assets/css/brewery.css b/assets/css/brewery.css
@@ -6,10 +6,43 @@
   opacity: 0.5;
 }
 
-.input-field .prefix.active {
+.search-engine .container {
+  margin-top: 20px;
+}
+
+form .row {
+  margin-bottom: 0;
+}
+
+.input-field .prefix.active, input {
+  color: #eee5d9;
+}
+
+#search-by-state {
+  margin-top: 35px;
+}
+
+.caret {
+  fill: #eee5d9 !important;
+}
+
+.select-wrapper input.select-dropdown:focus {
+  border-bottom: 1px solid #eee5d9;
+}
+
+.dropdown-content {
+  background-color: #212121;
+}
+
+.dropdown-content li>span {
   color: #eee5d9;
 }
 
+.dropdown-content li>span:hover {
+  background-color: #eee5d9;
+  color: #212121;
+}
+
 .brewery-btn:hover {
   color: #ff9100;
 }
@@ -33,6 +66,15 @@ a.get-directions-btn:hover {
   color: #546e7a;
 }
 
+.modal, .modal-footer {
+  background-color: #212121 !important;
+  color: #eee5d9 !important;
+}
+
+.modal-footer a {
+  font-size: 20px;
+}
+
 @media (max-width: 671px) {
   .card-image {
     width: 30%;
@@ -49,7 +91,8 @@ a.get-directions-btn:hover {
   .card.horizontal {
     width: 95%;
     height: 230px;
-    margin: auto;
+    margin-left: 3%;
+    margin-bottom: 10px;
   }
   .company-name {
     margin-top: 0;