Listings view

web/dist/main.css

@@ -69,11 +69,10 @@ html {
   height: 100%;
 }
 
-
 .right-content {
-  padding: 10px 10px 0;
   overflow-y: auto;
   height: 100%;
+  padding: 10px 10px 0;
 }
 
 #right {
@@ -123,65 +122,6 @@ html {
   margin-left: 10px;
 }
 
-@media (max-width : 768px) {
-  #right {
-    width: 100%;
-  }
-
-  .filters-btn-toggle {
-    margin-top: 90px;
-    display: block;
-  }
-
-  .filters-close-button {
-    display: block;
-  }
-
-  .left-hidden{
-    display: none;
-  }
-
-  .right-shown {
-    display: block;
-  }
-
-  .right-base {
-    display: none;
-  }
-
-  .left-base {
-    display: block;
-  }
-
-  #header .title {
-    display: none;
-  }
-
-  .hamburger-menu {
-    display: inline-block;
-  }
-
-  .where-to {
-    width: 70%;
-  }
-
-  .where-to:focus {
-    width: 85%;
-  }
-
-  .view-types {
-    display: flex;
-  }
-
-  .filter-row {
-    display: block;
-  }
-
-  .filter-title {
-    margin-bottom: 10px;
-  }
-}
-
 .where-to {
   max-width: 352px;
   height: 40px;
@@ -203,6 +143,7 @@ html {
   width: 100%;
 }
 
+
 .pac-container {
   z-index: 10000051 !important;
 }
@@ -258,14 +199,10 @@ html {
   letter-spacing: .2px;
 }
 
-.property-type-btn {
-  width: 171px;
-}
-
 .filter-btn {
   display: inline-block;
   border: 1px solid #b6d53b;;
-  padding: 12px;
+  padding: 6px 12px;
   cursor: pointer;
   margin: 0 6px 6px 0;
   color: #2d3138;
@@ -276,6 +213,15 @@ html {
   touch-action: manipulation;
   vertical-align: middle;
   text-align: center;
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 35px;
+}
+
+.property-type-btn {
+  width: 171px;
+  text-align: left;
 }
 
 .property-rooms-btn {
@@ -284,6 +230,7 @@ html {
 
 .property-rooms-studio {
   width: 93px;
+  flex-grow: 2;
 }
 
 .filter-row.no-border {
@@ -298,3 +245,186 @@ html {
 .filter-btn:hover {
   background-color: #FFFFEE;
 }
+
+.clear-both {
+  clear: both;
+}
+
+.filter-property-rooms .filter-content,
+.filter-property-types .filter-content {
+  display: flex;
+}
+
+.filter-property-types .filter-content {
+  flex-wrap: wrap;
+  width: 50%;
+}
+
+.close-icon {
+  position: absolute;
+  right: 0;
+  cursor: pointer;
+  color: #c1c1c1;
+}
+
+.filters-close {
+  position: relative;
+  text-align: center;
+  padding: 5px;
+  font-size: 18px;
+  font-weight: 500;
+  border-bottom: 1px solid #e6e6e6;
+  display: none;
+}
+
+.listings-header {
+  padding: 10px 0;
+  position: relative;
+}
+
+#listings-type {
+  padding: 5px 20px 6px 10px;
+  border: 1px solid #d8d8d8;
+  -webkit-appearance: none;
+  background: #fff;
+  height: 32px;
+  padding: 5px 20px 6px 10px;
+  color: #2d3138;
+  font-size: 13px;
+  letter-spacing: .81px;
+  border-radius: 3px;
+  width: 101%;
+}
+
+.select-group {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+
+.select-group:after {
+  font-family: FontAwesome;
+  content: '\F0D7';
+  position: absolute;
+  right: 6px;
+}
+
+.listings-count {
+  display: inline-block;
+  width: 274px;
+  color: #878698;
+  font-size: 16px;
+  text-align: center;
+  letter-spacing: .5px;
+  vertical-align: middle;
+}
+
+.listings-options {
+  position: absolute;
+  right: 0;
+  top: 0;
+  right: 0;
+  display: flex;
+  height: 100%;
+  vertical-align: middle;
+  align-items: center;
+}
+
+
+@media (max-width : 768px) {
+  #right {
+    width: 100%;
+  }
+
+  .filters-btn-toggle {
+    margin-top: 90px;
+    display: block;
+  }
+
+  .filters-close-button {
+    display: block;
+  }
+
+  .left-hidden {
+    position: absolute;
+    left: -100%;
+  }
+
+  .right-shown {
+    display: block;
+  }
+
+  .right-base {
+    display: none;
+  }
+
+  .left-base {
+    display: block;
+  }
+
+  #header .title {
+    display: none;
+  }
+
+  .hamburger-menu {
+    display: inline-block;
+  }
+
+  .where-to {
+    max-width: none;
+    margin-left: 10px;
+    font-size: 14px;
+    height: 32px;
+    padding-left: 35px;
+  }
+
+  .where-to:focus {
+    /*width: 85%;*/
+  }
+
+  .view-types {
+    display: flex;
+  }
+
+  .filter-row {
+    display: block;
+    padding: 11px 0;
+    border: 0;
+  }
+
+  .filter-title {
+    width: 100%;
+    padding-bottom: 15px;
+  }
+
+  .property-type-btn {
+    width: 33.3%;
+  }
+
+  .property-rooms-btn {
+    width: 15%;
+  }
+
+  .property-rooms-studio-btn {
+    width: 40%;
+  }
+
+  .filters {
+    border: none;
+    padding: 0 15px;
+  }
+
+  .filters-close {
+    display: block;
+    padding: 10px 0;
+  }
+
+  .right-content {
+    padding: 0;
+  }
+
+  .filter-property-types .filter-content {
+    width: 100%;
+  }
+}