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

app/assets/styles/all.scss

@@ -52,6 +52,7 @@
 @import "content/centerbar/pagination";
 @import "content/centerbar/usefulinfo";
 @import "content/centerbar/selectedline";
+@import "content/centerbar/specials";
 @import "content/centerbar/comments";
 @import "blocks/opinion";
 //

app/assets/styles/content/centerbar/pagetitle.scss

@@ -6,4 +6,12 @@
     font-size: 32px;
     color: #3b434d;
     margin-bottom: 10px;
+
+    &--orange {
+        color: #e65e26;
+    }
+
+    &--specials {
+        margin-bottom: 5px;
+    }
 }

app/assets/styles/content/centerbar/specials.scss

@@ -0,0 +1,201 @@
+.special-items {
+
+    &__container {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        margin: 5px -10px 5px 0;
+    }
+
+    &__item {
+        width: 220px;
+        box-sizing: border-box;
+        border-radius: 10px 0 0 0;
+        border: 1px solid #ebebeb;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin: 15px 10px;
+        color: #000000;
+        text-decoration: none;
+    }
+
+    &__title {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        color: #ffffff;
+        font-family: $fontcuprum;
+        font-size: 13px;
+        background-color: #656565;
+        padding: 10px;
+        border-radius: 10px 0 0 0;
+        margin-left: -1px;
+        margin-right: -1px;
+        margin-top: -1px;
+
+        &--specials {
+            background-color: #e65e26;
+        }
+
+        &--exhibition {
+            background-color: #53b02e;
+        }
+
+        &--school {
+            background-color: #929292;
+        }
+
+        &--conference {
+            background-color: #5597d1;
+        }
+    }
+
+    &__badge {
+        position: absolute;
+        bottom: 0;
+        left: -10px;
+        height: 36px;
+        line-height: 30px;
+        padding-right: 8px;
+        max-width: calc(100% - 18px);
+        text-overflow: ellipsis;
+        color: #fff;
+        background-image: url(../img/specials/badge-middle.png);
+        font-family: $fontcuprum;
+        font-size: 18px;
+
+        &:before {
+            position: absolute;
+            left: -8px;
+            top: 0;
+            content: '';
+            display: block;
+            height: 100%;
+            width: 8px;
+            background-image: url(../img/specials/badge-start.png);
+        }
+        &:after {
+            position: absolute;
+            right: -10px;
+            top: 0;
+            content: '';
+            display: block;
+            height: 100%;
+            width: 10px;
+            background-image: url(../img/specials/badge-end.png);
+        }
+
+        &--specials {
+            background-position: 0 0;
+
+            &:before,
+            &:after {
+                background-position: 0 0;
+            }
+        }
+
+        &--exhibition {
+            background-position: 0 -36px;
+
+            &:before,
+            &:after {
+                background-position: 0 -36px;
+            }
+        }
+
+        &--school {
+            background-position: 0 -72px;
+
+            &:before,
+            &:after {
+                background-position: 0 -72px;
+            }
+        }
+
+        &--conference {
+            background-position: 0 -108px;
+
+            &:before,
+            &:after {
+                background-position: 0 -108px;
+            }
+        }
+
+        &-text {
+            overflow: hidden;
+            width: 100%;
+            display: block;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+
+    &__item-content {
+        padding: 10px;
+        display: block;
+    }
+
+    &__item-images {
+        position: relative;
+        display: block;
+    }
+
+    &__image {
+        max-width: 100%;
+        display: block;
+    }
+
+    &__organization-icon {
+        max-width: 64px;
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        border-radius: 50%;
+        display: block;
+    }
+
+    &__description {
+        font-family: $fontcuprum;
+        font-size: 15px;
+        padding: 5px 0;
+        display: block;
+        margin: 0 -3px 0 -3px;
+    }
+
+    &__horizontal-rule {
+        display: block;
+        margin: 0 10px;
+        border: none;
+        border-bottom: 1px solid #ebebeb;
+    }
+
+    &__organization-name {
+        font-family: $fontcuprum;
+        font-size: 13px;
+        color: #004d7b;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        height: 40px;
+        padding: 5px 20px;
+        text-align: center;
+        box-sizing: border-box;
+    }
+
+    &__organization-address {
+        font-family: $fontcuprum;
+        font-size: 13px;
+        background: #ebebeb;
+        color: #929292;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 40px;
+        padding: 5px 26px;
+        overflow: hidden;
+        text-align: center;
+        box-sizing: border-box;
+    }
+}

app/assets/styles/scripts/daterangepicker.scss

@@ -41,6 +41,7 @@
 
 .date-picker-wrapper.single-date {
     padding: 0 10px;
+    margin-left: 0px;
 }
 
 .date-picker-wrapper.no-shortcuts {

app/www/css/all.css

@@ -1772,6 +1772,14 @@ body {
   color: #3b434d;
   margin-bottom: 10px; }
 
+.pagetitle--orange {
+    color: #e65e26;
+}
+
+.pagetitle--specials {
+    margin-bottom: 5px;
+}
+
 .datefilter, .newsfilter {
   white-space: nowrap;
   word-wrap: normal;
@@ -2230,6 +2238,202 @@ body {
     background: url("../img/icon_filter_26x26@2x.png") 4px 50%/13px 13px no-repeat;
     padding-left: 23px; }
 
+.special-items__container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin: 5px -10px 5px 0;
+}
+
+.special-items__item {
+    width: 220px;
+    box-sizing: border-box;
+    border-radius: 10px 0 0 0;
+    border: 1px solid #ebebeb;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 15px 10px;
+    color: #000000;
+    text-decoration: none;
+}
+
+.special-items__title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: #ffffff;
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-size: 13px;
+    background-color: #656565;
+    padding: 10px;
+    border-radius: 10px 0 0 0;
+    margin-left: -1px;
+    margin-right: -1px;
+    margin-top: -1px;
+}
+
+.special-items__title--specials {
+    background-color: #e65e26;
+}
+
+.special-items__title--exhibition {
+    background-color: #53b02e;
+}
+
+.special-items__title--school {
+    background-color: #929292;
+}
+
+.special-items__title--conference {
+    background-color: #5597d1;
+}
+
+.special-items__badge {
+    position: absolute;
+    bottom: 0;
+    left: -10px;
+    height: 36px;
+    line-height: 30px;
+    padding-right: 8px;
+    max-width: calc(100% - 18px);
+    text-overflow: ellipsis;
+    color: #fff;
+    background-image: url(../img/specials/badge-middle.png);
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-size: 18px;
+}
+
+.special-items__badge:before {
+    position: absolute;
+    left: -8px;
+    top: 0;
+    content: '';
+    display: block;
+    height: 100%;
+    width: 8px;
+    background-image: url(../img/specials/badge-start.png);
+}
+
+.special-items__badge:after {
+    position: absolute;
+    right: -10px;
+    top: 0;
+    content: '';
+    display: block;
+    height: 100%;
+    width: 10px;
+    background-image: url(../img/specials/badge-end.png);
+}
+
+.special-items__badge--specials {
+    background-position: 0 0;
+}
+
+.special-items__badge--specials:before, .special-items__badge--specials:after {
+    background-position: 0 0;
+}
+
+.special-items__badge--exhibition {
+    background-position: 0 -36px;
+}
+
+.special-items__badge--exhibition:before, .special-items__badge--exhibition:after {
+    background-position: 0 -36px;
+}
+
+.special-items__badge--school {
+    background-position: 0 -72px;
+}
+
+.special-items__badge--school:before, .special-items__badge--school:after {
+    background-position: 0 -72px;
+}
+
+.special-items__badge--conference {
+    background-position: 0 -108px;
+}
+
+.special-items__badge--conference:before, .special-items__badge--conference:after {
+    background-position: 0 -108px;
+}
+
+.special-items__badge-text {
+    overflow: hidden;
+    width: 100%;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.special-items__item-content {
+    padding: 10px;
+    display: block;
+}
+
+.special-items__item-images {
+    position: relative;
+    display: block;
+}
+
+.special-items__image {
+    max-width: 100%;
+    display: block;
+}
+
+.special-items__organization-icon {
+    max-width: 64px;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    border-radius: 50%;
+    display: block;
+}
+
+.special-items__description {
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-size: 15px;
+    padding: 5px 0;
+    display: block;
+    margin: 0 -3px 0 -3px;
+}
+
+.special-items__horizontal-rule {
+    display: block;
+    margin: 0 10px;
+    border: none;
+    border-bottom: 1px solid #ebebeb;
+}
+
+.special-items__organization-name {
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-size: 13px;
+    color: #004d7b;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    height: 40px;
+    padding: 5px 20px;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.special-items__organization-address {
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-size: 13px;
+    background: #ebebeb;
+    color: #929292;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 40px;
+    padding: 5px 26px;
+    overflow: hidden;
+    text-align: center;
+    box-sizing: border-box;
+}
+
 .comments__block {
   margin-top: 40px; }
 
@@ -3971,7 +4175,9 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   max-width: 230px; }
 
 .date-picker-wrapper.single-date {
-  padding: 0 10px; }
+    padding: 0 10px;
+    margin-left: 0px;
+}
 
 .date-picker-wrapper.no-shortcuts {
   padding-bottom: 5px;