Merge branch 'specializations' of Adyn/medgis-ru-assets into master

app/assets/scripts/main.js

@@ -87,7 +87,7 @@
             checktoggle();
         });
 
-        if ($("*").is('#datefilter')) {
+        if ($('#datefilter').length) {
             $('#datefilter').dateRangePicker({
                 autoClose: true,
                 language: 'ru',
@@ -96,6 +96,9 @@
                 getValue: function () {
                     return document.getElementById('datefiltertext').innerHTML;
                 }, setValue: function (s) {
+                    var dates = s.split(' - ');
+                    $('.newsfilter__date-from').val(dates[0]);
+                    $('.newsfilter__date-to').val(dates[1]);
                     document.getElementById('datefiltertext').innerHTML = s;
                 }
             });

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";

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;

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) {

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;
+    }
+}

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 {

app/assets/styles/content/leftbar/popularservice.scss

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

app/assets/styles/content/leftbar/specialization.scss

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

app/assets/styles/scripts/daterangepicker.scss

@@ -1,10 +1,9 @@
 .date-picker {
     width: 170px;
     height: 25px;
-    padding: 0;
     border: 0;
     line-height: 25px;
-    padding-left: 10px;
+    padding: 0 0 0 10px;
     font-size: 12px;
     font-family: Arial, sans-serif;
     font-weight: bold;
@@ -17,7 +16,6 @@
 .date-picker-wrapper {
     position: absolute;
     margin-top: 10px;
-    z-index: 1;
     border: 1px solid #c8c8c8;
     background-color: #ebebeb;
     padding: 5px 12px 0 12px;
@@ -25,11 +23,11 @@
     line-height: 20px;
     color: #aaa;
     font-family: Arial, sans-serif;
-    box-sizing: initial;
     max-height: 280px;
     overflow: hidden;
     margin-left: 170px;
     box-sizing: border-box;
+    z-index: 2;
 }
 
 .date-picker-wrapper.inline-wrapper {
@@ -45,12 +43,10 @@
 }
 
 .date-picker-wrapper.no-shortcuts {
-    padding-bottom: 5px;
     padding-bottom: 0;
 }
 
 .date-picker-wrapper.no-topbar {
-    padding-top: 12px;
     padding-top: 0;
     padding-bottom: 8px;
 }
@@ -99,13 +95,12 @@
     vertical-align: middle;
     text-align: center;
     line-height: 30px;
-    margin: 0px;
-    padding: 2px 0px;
+    margin: 0;
+    padding: 2px 0;
 }
 
 .date-picker-wrapper .month-wrapper table .day {
     padding: 0;
-    line-height: 1;
     font-size: 12px;
     margin-bottom: 1px;
     color: #929292;
@@ -187,7 +182,6 @@
     position: relative;
     z-index: 1;
     width: 15px;
-    height: 100%;
     background-color: red;
     font-size: 0;
     line-height: 0;
@@ -221,7 +215,7 @@
 .date-picker-wrapper .gap .gap-line .gap-2 {
     position: absolute;
     right: 0;
-    top: 0px;
+    top: 0;
     z-index: 2;
     height: 0;
     border-left: 8px solid transparent;
@@ -299,14 +293,13 @@
 
 .date-picker-wrapper .drp_top-bar .apply-btn {
     position: absolute;
-    right: 0px;
+    right: 0;
     top: 6px;
     padding: 3px 5px;
     margin: 0;
     font-size: 12px;
     border-radius: 4px;
     cursor: pointer;
-    color: #d9eef7;
     border: solid 1px #0076a3;
     background: #0095cd;
     background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));

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"
+    ]
   }
 }

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%;
@@ -4620,10 +4705,9 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
 .date-picker {
   width: 170px;
   height: 25px;
-  padding: 0;
   border: 0;
   line-height: 25px;
-  padding-left: 10px;
+    padding: 0 0 0 10px;
   font-size: 12px;
   font-family: Arial, sans-serif;
   font-weight: bold;
@@ -4635,7 +4719,6 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
 .date-picker-wrapper {
   position: absolute;
   margin-top: 10px;
-  z-index: 1;
   border: 1px solid #c8c8c8;
   background-color: #ebebeb;
   padding: 5px 12px 0 12px;
@@ -4643,11 +4726,12 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   line-height: 20px;
   color: #aaa;
   font-family: Arial, sans-serif;
-  box-sizing: initial;
   max-height: 280px;
   overflow: hidden;
   margin-left: 170px;
-  box-sizing: border-box; }
+    box-sizing: border-box;
+    z-index: 2;
+}
 
 .date-picker-wrapper.inline-wrapper {
   position: relative;
@@ -4660,11 +4744,9 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   margin-left: 0px; }
 
 .date-picker-wrapper.no-shortcuts {
-  padding-bottom: 5px;
   padding-bottom: 0; }
 
 .date-picker-wrapper.no-topbar {
-  padding-top: 12px;
   padding-top: 0;
   padding-bottom: 8px; }
 
@@ -4704,12 +4786,12 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   vertical-align: middle;
   text-align: center;
   line-height: 30px;
-  margin: 0px;
-  padding: 2px 0px; }
+    margin: 0;
+    padding: 2px 0;
+}
 
 .date-picker-wrapper .month-wrapper table .day {
   padding: 0;
-  line-height: 1;
   font-size: 12px;
   margin-bottom: 1px;
   color: #929292;
@@ -4777,7 +4859,6 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   position: relative;
   z-index: 1;
   width: 15px;
-  height: 100%;
   background-color: red;
   font-size: 0;
   line-height: 0;
@@ -4807,7 +4888,7 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
 .date-picker-wrapper .gap .gap-line .gap-2 {
   position: absolute;
   right: 0;
-  top: 0px;
+    top: 0;
   z-index: 2;
   height: 0;
   border-left: 8px solid transparent;
@@ -4872,14 +4953,13 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
 
 .date-picker-wrapper .drp_top-bar .apply-btn {
   position: absolute;
-  right: 0px;
+    right: 0;
   top: 6px;
   padding: 3px 5px;
   margin: 0;
   font-size: 12px;
   border-radius: 4px;
   cursor: pointer;
-  color: #d9eef7;
   border: solid 1px #0076a3;
   background: #0095cd;
   background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));