Parcourir la source

specialization filter page

alexlcdee il y a 8 ans
Parent
commit
c200608497

+ 1 - 0
app/assets/styles/all.scss

@@ -58,6 +58,7 @@
 @import "content/centerbar/specials";
 @import "content/centerbar/comments";
 @import "content/centerbar/organization";
+@import "content/centerbar/specialization-selection";
 @import "blocks/opinion";
 //
 @import "content/centerbar/errorblock";

+ 1 - 0
app/assets/styles/blocks/organization-list.scss

@@ -128,6 +128,7 @@ $organization-list-selector: 'organization-list';
         z-index: 2;
         position: relative;
         background: #ffffff;
+        margin-top: 3px;
 
         &-item {
             border-bottom: 1px solid #ebebeb;

+ 1 - 1
app/assets/styles/content/centerbar/centerbar.scss

@@ -1,10 +1,10 @@
 .centerbar {
     width: 78.2%;
+    z-index: 2;
 
     &--with-map {
         margin-top: 300px;
         position: relative;
-        z-index: 2;
     }
 
     @media screen and (max-width: 1220px) {

+ 80 - 0
app/assets/styles/content/centerbar/specialization-selection.scss

@@ -0,0 +1,80 @@
+$specializationSelectionClass: 'specialization-selection';
+
+.#{$specializationSelectionClass} {
+    &__container {
+        background: #ffffff;
+        box-sizing: border-box;
+        width: calc(100% - 26px);
+        padding: 10px;
+        //max-height: 800px;
+        //display: flex;
+        //flex-direction: column;
+        //flex-wrap: wrap;
+        //align-items: flex-start;
+        column-count: 3;
+        column-gap: 10px;
+
+        &:before,
+        &:after {
+            content: '';
+            display: block;
+            clear: both;
+        }
+    }
+
+    &__group {
+        //width: calc(33.333% - 10px);
+        margin: 5px 5px 5px 5px;
+        display: block;
+        //float: left;
+
+        &:nth-child(3n) {
+            /*width: 33.333%;
+            margin-right: 0;*/
+        }
+    }
+
+    &__list {
+        max-height: 125px;
+        overflow: hidden;
+        display: block;
+
+        &-item {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            padding: 5px;
+
+            label {
+                display: block;
+                font-size: 13px;
+                font-family: $fontopensans;
+            }
+
+            &--group-header {
+                background: #ebebeb;
+                padding: 7px 5px;
+
+                label {
+                    display: block;
+                    font-family: $fontcuprum;
+                    font-size: 17px;
+                }
+            }
+        }
+    }
+
+    &__checkbox {
+        -webkit-appearance: checkbox;
+        -moz-appearance: checkbox;
+        appearance: checkbox;
+        display: block;
+        width: 13px !important;
+    }
+
+    &__checkbox-label {
+        display: block;
+        width: calc(100% - 13px - 5px);
+        margin-left: 5px;
+    }
+}

+ 7 - 0
app/assets/styles/content/leftbar/leftbar.scss

@@ -5,6 +5,7 @@
     display: -ms-flex;
     display: flex;
     flex-direction: column;
+    z-index: 2;
 
     &__title {
         padding-left: 58px;
@@ -28,6 +29,12 @@
             padding-left: 10px;
             border-radius: 0;
         }
+
+        &--popular-specializations {
+            padding-left: 10px;
+            border-radius: 0;
+            font-size: 18px;
+        }
     }
 
     &__subtitle {

+ 1 - 0
app/assets/styles/content/leftbar/popularservice.scss

@@ -12,6 +12,7 @@
         height: 0;
         overflow: hidden;
         transition: all .5s ease;
+        background: #ffffff;
 
         &.active {
             height: auto;

+ 1 - 0
app/assets/styles/content/leftbar/specialization.scss

@@ -25,6 +25,7 @@
         height: 0;
         overflow: hidden;
         transition: all .5s ease;
+        background: #ffffff;
 
         &.active {
             height: auto;

+ 8 - 0
app/package.json

@@ -31,5 +31,13 @@
   "dependencies": {
     "@types/fancybox": "^2.1.29",
     "@types/jquery": "^2.0.46"
+  },
+  "browserslist": {
+    "production": [
+      "last 50 versions"
+    ],
+    "development": [
+      "last 50 versions"
+    ]
   }
 }

+ 92 - 7
app/www/css/all.css

@@ -678,7 +678,9 @@ body {
 .organization-list__side-menu {
   z-index: 2;
   position: relative;
-  background: #ffffff; }
+    background: #ffffff;
+    margin-top: 3px;
+}
   .organization-list__side-menu-item {
     border-bottom: 1px solid #ebebeb;
     position: relative; }
@@ -906,7 +908,9 @@ body {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
-  flex-direction: column; }
+    flex-direction: column;
+    z-index: 2;
+}
   .leftbar__title {
     padding-left: 58px;
     height: 45px;
@@ -927,6 +931,12 @@ body {
     .leftbar__title--popularservice {
       padding-left: 10px;
       border-radius: 0; }
+
+.leftbar__title--popular-specializations {
+    padding-left: 10px;
+    border-radius: 0;
+    font-size: 18px;
+}
   .leftbar__subtitle {
     background: #d7d7d7;
     border-radius: 10px 0 0 0 / 10px 0 0 0;
@@ -1150,7 +1160,9 @@ body {
     z-index: 5;
     height: 0;
     overflow: hidden;
-    transition: all .5s ease; }
+      transition: all .5s ease;
+      background: #ffffff;
+  }
     .specialization__list.active {
       height: auto;
       overflow: auto;
@@ -1265,7 +1277,9 @@ body {
     z-index: 5;
     height: 0;
     overflow: hidden;
-    transition: all .5s ease; }
+      transition: all .5s ease;
+      background: #ffffff;
+  }
     .popularservice__list.active {
       height: auto;
       overflow: auto;
@@ -1522,11 +1536,13 @@ body {
       background: #5597d1; }
 
 .centerbar {
-  width: 78.2%; }
+    width: 78.2%;
+    z-index: 2;
+}
   .centerbar--with-map {
     margin-top: 300px;
-    position: relative;
-    z-index: 2; }
+      position: relative;
+  }
   @media screen and (max-width: 1220px) {
     .centerbar {
       width: 100%; } }
@@ -3138,6 +3154,75 @@ body {
     background-position: right bottom;
 }
 
+.specialization-selection__container {
+    background: #ffffff;
+    box-sizing: border-box;
+    width: calc(100% - 26px);
+    padding: 10px;
+    column-count: 3;
+    column-gap: 10px;
+}
+
+.specialization-selection__container:before, .specialization-selection__container:after {
+    content: '';
+    display: block;
+    clear: both;
+}
+
+.specialization-selection__group {
+    margin: 5px 5px 5px 5px;
+    display: block;
+}
+
+.specialization-selection__group:nth-child(3n) {
+    /*width: 33.333%;
+            margin-right: 0;*/
+}
+
+.specialization-selection__list {
+    max-height: 125px;
+    overflow: hidden;
+    display: block;
+}
+
+.specialization-selection__list-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding: 5px;
+}
+
+.specialization-selection__list-item label {
+    display: block;
+    font-size: 13px;
+    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+}
+
+.specialization-selection__list-item--group-header {
+    background: #ebebeb;
+    padding: 7px 5px;
+}
+
+.specialization-selection__list-item--group-header label {
+    display: block;
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-size: 17px;
+}
+
+.specialization-selection__checkbox {
+    -webkit-appearance: checkbox;
+    -moz-appearance: checkbox;
+    appearance: checkbox;
+    display: block;
+    width: 13px !important;
+}
+
+.specialization-selection__checkbox-label {
+    display: block;
+    width: calc(100% - 13px - 5px);
+    margin-left: 5px;
+}
+
 .opinion__container {
   float: right;
   width: 33%;

Fichier diff supprimé car celui-ci est trop grand
+ 1 - 0
app/www/css/all.css.map


Fichier diff supprimé car celui-ci est trop grand
+ 0 - 0
app/www/css/all.min.css


Certains fichiers n'ont pas été affichés car il y a eu trop de fichiers modifiés dans ce diff