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

app/assets/scripts/main.js

@@ -261,4 +261,43 @@
         });
     })($);
 
+    // isolate scope for easier moving and extension
+    (function ($) {
+        if ($('.organization-list__side-menu').length) {
+            var $menuItems = $('.organization-list__side-menu .organization-list__side-menu-item');
+            $menuItems.each(function () {
+                if ($(this).find('.organization-list__side-submenu').length) {
+                    var $arrow = $('<span class="organization-list__side-menu-item-arrow"></span>');
+                    $arrow.click(function () {
+                        $(this).parent().toggleClass('active');
+                    });
+                    $(this).append($arrow);
+                }
+            });
+        }
+    })($);
+
+    // isolate scope for easier moving and extension
+    (function ($) {
+        if ($('.specialization-selection__more').length) {
+            $('.specialization-selection__more').click(function (e) {
+                e.preventDefault();
+                var $list = $(this).parent().find('.specialization-selection__list');
+                $(this).parent().find('.specialization-selection__list').animate({'max-height': $list[0].scrollHeight + 20}, 200);
+                $(this).remove();
+            });
+        }
+    })($);
+
+    // isolate scope for easier moving and extension
+    (function ($) {
+        if ($('.specialization-selection__checkbox--group-header').length) {
+            $('.specialization-selection__checkbox--group-header').change(function () {
+                $(this).parents('.specialization-selection__group')
+                    .find('.specialization-selection__list .specialization-selection__checkbox')
+                    .prop('checked', $(this).prop('checked'));
+            });
+        }
+    })($);
+
 })(window.document, window, window.jQuery);

app/assets/styles/all.scss

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

app/assets/styles/blocks/organization-list.scss

@@ -134,19 +134,21 @@ $organization-list-selector: 'organization-list';
             border-bottom: 1px solid #ebebeb;
             position: relative;
 
-            &:after {
-                content: url(../img/icon_leftbar_title_arrow1.png);
-                transform: rotate(90deg);
+            $menuItem: &;
+
+            &-arrow {
+                background: url(../img/blockslide_sprite.png) 0 -9px no-repeat;
                 position: absolute;
                 right: 5px;
                 top: 10px;
                 display: block;
-                height: 20px;
                 width: 15px;
-            }
+                height: 9px;
+                cursor: pointer;
 
-            &.active:after {
-                transform: rotate(-90deg);
+                #{$menuItem}.active & {
+                    background-position: 0 0;
+                }
             }
 
             &.active ul {

app/assets/styles/content/centerbar/specialization-filter.scss

@@ -0,0 +1,14 @@
+.specialization-filter {
+    &__title {
+        margin-bottom: 20px;
+        margin-top: 30px;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    &__person-link {
+        margin: 15px 0;
+    }
+}

app/assets/styles/content/centerbar/specialization-selection.scss

@@ -1,11 +1,13 @@
 $specializationSelectionClass: 'specialization-selection';
 
 .#{$specializationSelectionClass} {
+
     &__container {
         background: #ffffff;
         box-sizing: border-box;
         width: calc(100% - 26px);
         padding: 10px;
+        display: block;
         //max-height: 800px;
         //display: flex;
         //flex-direction: column;
@@ -70,6 +72,10 @@ $specializationSelectionClass: 'specialization-selection';
         appearance: checkbox;
         display: block;
         width: 13px !important;
+
+        &--group-header {
+            margin-top: 2px;
+        }
     }
 
     &__checkbox-label {
@@ -77,4 +83,37 @@ $specializationSelectionClass: 'specialization-selection';
         width: calc(100% - 13px - 5px);
         margin-left: 5px;
     }
+
+    &__select-button {
+        display: block;
+        font-family: $fontcuprum;
+        font-size: 17px;
+        color: #fff;
+        background-color: #004D7B;
+        width: calc(100% - 26px);
+        padding: 10px;
+        cursor: pointer;
+
+        &:hover {
+            background-color: #006dae;
+        }
+    }
+
+    &__more {
+        color: #0A246A;
+        font-size: 13px;
+        font-family: $fontopensans;
+        padding-left: 18px;
+        cursor: pointer;
+
+        &:after {
+            content: '>';
+            margin-left: 3px;
+        }
+
+        &:hover {
+            color: lighten(#0A246A, 10%);
+            text-decoration: underline;
+        }
+    }
 }

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

@@ -24,6 +24,7 @@
         color: #004d7b;
         font-weight: bold;
         flex-wrap: wrap;
+        position: relative;
 
         &--popularservice {
             padding-left: 10px;

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

@@ -8,6 +8,9 @@
         display: flex;
         flex-direction: column;
         margin-bottom: 20px;
+        height: 100%;
+        width: calc(100% - 10px);
+        margin-left: 10px;
     }
     &__link {
         text-decoration: none;
@@ -88,6 +91,10 @@
     &__details {
         border: 1px solid #ebebeb;
         border-top: none;
+        height: calc(100% - 63px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
 
         &--wide {
             min-height: 23px;

app/www/css/all.css

@@ -387,12 +387,12 @@ body {
     margin: 0; }
 
 .grid-disrb-col-1 {
-    width: calc(33.333333% - 10px);
+  width: calc(33.333333% - 10px);
   max-width: 230px;
   margin: 0 10px 0 0; }
 
 .grid-disrb-col-2 {
-    width: calc(66.66666% - 10px);
+  width: calc(66.66666% - 10px);
   max-width: 470px;
   margin: 0 10px 0 0; }
 
@@ -678,23 +678,27 @@ body {
 .organization-list__side-menu {
   z-index: 2;
   position: relative;
-    background: #ffffff;
-    margin-top: 3px;
+  background: #ffffff;
+  margin-top: 3px;
 }
   .organization-list__side-menu-item {
     border-bottom: 1px solid #ebebeb;
     position: relative; }
-    .organization-list__side-menu-item:after {
-      content: url(../img/icon_leftbar_title_arrow1.png);
-      transform: rotate(90deg);
+
+.organization-list__side-menu-item-arrow {
+  background: url(../img/blockslide_sprite.png) 0 -9px no-repeat;
       position: absolute;
       right: 5px;
       top: 10px;
       display: block;
-      height: 20px;
-      width: 15px; }
-    .organization-list__side-menu-item.active:after {
-      transform: rotate(-90deg); }
+  width: 15px;
+  height: 9px;
+  cursor: pointer;
+}
+
+.organization-list__side-menu-item.active .organization-list__side-menu-item-arrow {
+  background-position: 0 0;
+}
     .organization-list__side-menu-item.active ul {
       display: block; }
   .organization-list__side-menu-link {
@@ -908,8 +912,8 @@ body {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
-    flex-direction: column;
-    z-index: 2;
+  flex-direction: column;
+  z-index: 2;
 }
   .leftbar__title {
     padding-left: 58px;
@@ -927,15 +931,17 @@ body {
     font-size: 20px;
     color: #004d7b;
     font-weight: bold;
-    flex-wrap: wrap; }
+    flex-wrap: wrap;
+    position: relative;
+  }
     .leftbar__title--popularservice {
       padding-left: 10px;
       border-radius: 0; }
 
 .leftbar__title--popular-specializations {
-    padding-left: 10px;
-    border-radius: 0;
-    font-size: 18px;
+  padding-left: 10px;
+  border-radius: 0;
+  font-size: 18px;
 }
   .leftbar__subtitle {
     background: #d7d7d7;
@@ -1160,8 +1166,8 @@ body {
     z-index: 5;
     height: 0;
     overflow: hidden;
-      transition: all .5s ease;
-      background: #ffffff;
+    transition: all .5s ease;
+    background: #ffffff;
   }
     .specialization__list.active {
       height: auto;
@@ -1277,8 +1283,8 @@ body {
     z-index: 5;
     height: 0;
     overflow: hidden;
-      transition: all .5s ease;
-      background: #ffffff;
+    transition: all .5s ease;
+    background: #ffffff;
   }
     .popularservice__list.active {
       height: auto;
@@ -1385,7 +1391,11 @@ body {
   display: -ms-flex;
   display: flex;
   flex-direction: column;
-  margin-bottom: 20px; }
+  margin-bottom: 20px;
+  height: 100%;
+  width: calc(100% - 10px);
+  margin-left: 10px;
+}
 
 .personals__link {
   text-decoration: none;
@@ -1450,7 +1460,12 @@ body {
 
 .personals__details {
   border: 1px solid #ebebeb;
-  border-top: none; }
+  border-top: none;
+  height: calc(100% - 63px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
   .personals__details--wide {
     min-height: 23px; }
 
@@ -1536,12 +1551,12 @@ body {
       background: #5597d1; }
 
 .centerbar {
-    width: 78.2%;
-    z-index: 2;
+  width: 78.2%;
+  z-index: 2;
 }
   .centerbar--with-map {
     margin-top: 300px;
-      position: relative;
+    position: relative;
   }
   @media screen and (max-width: 1220px) {
     .centerbar {
@@ -3074,15 +3089,15 @@ body {
     background: url(../img/blockslide_sprite.png) no-repeat; }
 
 .organization-info__administration-content {
-    padding-left: 10px;
+  padding-left: 10px;
 }
 
 .organization-info__sub-organizations-header {
-    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
-    font-size: 20px;
-    font-weight: bold;
-    color: #3b434d;
-    margin-bottom: 10px;
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  font-size: 20px;
+  font-weight: bold;
+  color: #3b434d;
+  margin-bottom: 10px;
 }
 
 .organization-media__container {
@@ -3093,7 +3108,7 @@ body {
 .organization-media__header {
   color: #3b434d;
   font-size: 17px;
-    font-weight: 600;
+  font-weight: 600;
   margin-bottom: 17px; }
 
 .organization-media__list {
@@ -3103,27 +3118,27 @@ body {
   display: block; }
   .organization-media__list-item {
     margin-bottom: 3px;
-      display: block;
-      text-decoration: none;
-      color: #000000;
+    display: block;
+    text-decoration: none;
+    color: #000000;
   }
 
 .organization-media__list-item:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .organization-media__slider {
-    margin: 0 30px 13px;
-    width: calc(100% - 60px);
+  margin: 0 30px 13px;
+  width: calc(100% - 60px);
 }
 
 .organization-media__slider-slide {
-    text-align: center;
+  text-align: center;
 }
 
 .organization-media__slider-slide-content {
-    max-width: 200px;
-    margin: 0 auto;
+  max-width: 200px;
+  margin: 0 auto;
 }
 
 .organization-media__slider .slick-arrow {
@@ -3133,45 +3148,46 @@ body {
     top: 50%;
     margin-top: -23px;
     cursor: pointer;
-    background-image: url(../img/slider/slidersprite.png);
+  background-image: url(../img/slider/slidersprite.png);
 }
 
 .organization-media__slider .slick-arrow.slick-prev {
-    background-position: left top;
-    left: -27px;
+  background-position: left top;
+  left: -27px;
 }
 
 .organization-media__slider .slick-arrow.slick-prev:hover {
-    background-position: left bottom;
+  background-position: left bottom;
 }
 
 .organization-media__slider .slick-arrow.slick-next {
-    background-position: right top;
-    right: -27px;
+  background-position: right top;
+  right: -27px;
 }
 
 .organization-media__slider .slick-arrow.slick-next:hover {
-    background-position: right bottom;
+  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;
+  background: #ffffff;
+  box-sizing: border-box;
+  width: calc(100% - 26px);
+  padding: 10px;
+  display: block;
+  column-count: 3;
+  column-gap: 10px;
 }
 
 .specialization-selection__container:before, .specialization-selection__container:after {
     content: '';
     display: block;
-    clear: both;
+  clear: both;
 }
 
 .specialization-selection__group {
-    margin: 5px 5px 5px 5px;
-    display: block;
+  margin: 5px 5px 5px 5px;
+  display: block;
 }
 
 .specialization-selection__group:nth-child(3n) {
@@ -3180,47 +3196,97 @@ body {
 }
 
 .specialization-selection__list {
-    max-height: 125px;
-    overflow: hidden;
-    display: block;
+  max-height: 125px;
+  overflow: hidden;
+  display: block;
 }
 
 .specialization-selection__list-item {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    padding: 5px;
+  padding: 5px;
 }
 
 .specialization-selection__list-item label {
-    display: block;
-    font-size: 13px;
-    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+  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;
+  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;
+  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;
+  -webkit-appearance: checkbox;
+  -moz-appearance: checkbox;
+  appearance: checkbox;
+  display: block;
+  width: 13px !important;
+}
+
+.specialization-selection__checkbox--group-header {
+  margin-top: 2px;
 }
 
 .specialization-selection__checkbox-label {
-    display: block;
-    width: calc(100% - 13px - 5px);
-    margin-left: 5px;
+  display: block;
+  width: calc(100% - 13px - 5px);
+  margin-left: 5px;
+}
+
+.specialization-selection__select-button {
+  display: block;
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  font-size: 17px;
+  color: #fff;
+  background-color: #004D7B;
+  width: calc(100% - 26px);
+  padding: 10px;
+  cursor: pointer;
+}
+
+.specialization-selection__select-button:hover {
+  background-color: #006dae;
+}
+
+.specialization-selection__more {
+  color: #0A246A;
+  font-size: 13px;
+  font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+  padding-left: 18px;
+  cursor: pointer;
+}
+
+.specialization-selection__more:after {
+  content: '>';
+  margin-left: 3px;
+}
+
+.specialization-selection__more:hover {
+  color: #0e3499;
+  text-decoration: underline;
+}
+
+.specialization-filter__title {
+  margin-bottom: 20px;
+  margin-top: 30px;
+}
+
+.specialization-filter__title:first-child {
+  margin-top: 0;
+}
+
+.specialization-filter__person-link {
+  margin: 15px 0;
 }
 
 .opinion__container {
@@ -4707,7 +4773,7 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   height: 25px;
   border: 0;
   line-height: 25px;
-    padding: 0 0 0 10px;
+  padding: 0 0 0 10px;
   font-size: 12px;
   font-family: Arial, sans-serif;
   font-weight: bold;
@@ -4729,8 +4795,8 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   max-height: 280px;
   overflow: hidden;
   margin-left: 170px;
-    box-sizing: border-box;
-    z-index: 2;
+  box-sizing: border-box;
+  z-index: 2;
 }
 
 .date-picker-wrapper.inline-wrapper {
@@ -4786,8 +4852,8 @@ 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: 0;
-    padding: 2px 0;
+  margin: 0;
+  padding: 2px 0;
 }
 
 .date-picker-wrapper .month-wrapper table .day {
@@ -4888,7 +4954,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: 0;
+  top: 0;
   z-index: 2;
   height: 0;
   border-left: 8px solid transparent;
@@ -4953,7 +5019,7 @@ 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: 0;
+  right: 0;
   top: 6px;
   padding: 3px 5px;
   margin: 0;