diff --git a/themes/finna2/less/finna/organisation-info.less b/themes/finna2/less/finna/organisation-info.less index 113dccc9b5b..de8aba197f8 100644 --- a/themes/finna2/less/finna/organisation-info.less +++ b/themes/finna2/less/finna/organisation-info.less @@ -138,16 +138,16 @@ } } - .mobile-schedules { - font-size: 1.2em; - } - .schedules-info { margin-bottom: 10px; @media (max-width: @screen-sm-max) { max-width: @organisation-info-max-w; } } + + .mobile-schedules { + font-size: 1.2em; + } } } @@ -301,7 +301,7 @@ h3 { margin-top: 0; } - .office-links { + .location-links { margin-right: 10px; display: inline-block; .facebook .icon { @@ -326,7 +326,7 @@ } } @media(min-width: @screen-sm) { - .office-title { + .location-basic-info { width: 55%; float: left; } @@ -348,11 +348,6 @@ } } - .office-information-loader { - margin-top: 20px; - margin-bottom: 20px; - } - .locations-title { &:extend(.finna-panel-default .panel-heading); margin-bottom: 1rem; @@ -533,10 +528,6 @@ .building-year, .building-name { font-size: 0.9em; } - .office-image { - margin-top: 10px; - margin-bottom: 10px; - } .feed-container { margin-bottom: 10px; .list-feed.with-image { @@ -599,13 +590,13 @@ text-transform: uppercase; } } - .office-row-general { + .location-row-general { @media(min-width: @screen-sm) { display: flex; justify-content: space-between; } } - .office-col { + .location-col { @media(min-width: @screen-sm) { width: 32%; float: left; @@ -639,12 +630,6 @@ } } } - .organisation-feeds { - @media(min-width: @screen-sm) { - width: 100%; - float: right; - } - } .accessibility-details { .panel-body { padding-bottom: 15px; @@ -684,20 +669,6 @@ } } } - @media (max-width: @screen-xs-max) { - &.row { - margin-left: unset; - margin-right: unset; - } - } - - .row:not(.content) h2 { - @media (max-width: @screen-xs-max) { - max-width: @organisation-info-max-w; - text-align: left; - } - text-align: center; - } h4 { margin: 0; } @@ -726,15 +697,6 @@ } } - .facility-image { - @media(max-width: @screen-sm-max) { - float: left; - margin-right: 10px; - margin-bottom: 10px; - width: 100%; - max-width: 150px; - } - } .map { margin-top: 5px; } @@ -757,11 +719,17 @@ } // *** Widget *** +@organisation-info-max-w: 400px; + .js-organisation-info-widget { + display: inline-block; + padding-bottom: 20px; + width: 100%; + .location-is-open, .location-is-closed { font-size: 1.45em; font-weight: bold; - margin-left: 1em; + margin-left: 1rem; } .btn { @@ -777,7 +745,7 @@ height: 35px; width: 35px; @media(max-width: @screen-sm-max) { - clear:right; + clear: right; margin-top: 0px; margin-bottom: 5px; } @@ -798,37 +766,7 @@ clear: both; } } -} - -// *** Widget *** -@organisation-info-max-w: 400px; - -.js-organisation-info-widget { - display: inline-block; - padding-bottom: 20px; - .row:not(.content) h2 { - @media (max-width: @screen-xs-max) { - max-width: @organisation-info-max-w; - text-align: left; - } - text-align: center; - } - h4 { - margin: 0; - } - .facility-image { - @media(max-width: @screen-sm-max) { - float: left; - margin-right: 10px; - margin-bottom: 10px; - width: 100%; - max-width: 150px; - } - } - .map { - margin-top: 5px; - } .info-element { @media (max-width: 375px) { clear: both; @@ -837,12 +775,6 @@ clear: both; } } - .schedules-info { - margin-bottom: 10px; - @media (max-width: @screen-sm-max) { - max-width: @organisation-info-max-w; - } - } .address { margin-top: 5px; letter-spacing: .3px; @@ -873,62 +805,57 @@ .details-col { width: 40%; } } - .location-dropdown-container { + .js-location-dropdown { + font-weight: normal; + margin-bottom: 15px; display: inline-block; - > span { - font-size: 15px; - display: inline-block; - margin-bottom: 10px; - } - - .js-location-dropdown { - margin-bottom: 5px; - max-width: ~"-webkit-calc(100% - 70px)"; - max-width: ~"-moz-calc(100% - 70px)"; - max-width: ~"calc(100% - 70px)"; - font-weight: normal; - margin-bottom: 15px; - display: inline-block; - > .dropdown-toggle { - color: @gray; - border: 1px solid @gray-lighter; - padding: 10px 8px; - padding-right: 20px; - border-radius: 10px; - white-space: nowrap; - font-size: 14px; - transition: background .1s linear, color .2s linear; - margin-right: 2px; - &:hover, &:active, &:focus { - text-decoration: none; - background: @gray-lighter; - color: #000; - .icon { - color: #000; - } - } + max-width: ~"calc(100% - 70px)"; + > .dropdown-toggle { + width: 100%; + color: @gray; + border: 1px solid @gray-lighter; + padding: 10px 8px; + padding-right: 20px; + border-radius: 10px; + white-space: nowrap; + transition: background .1s linear, color .2s linear; + margin-right: 2px; + &:hover, &:active, &:focus { + text-decoration: none; + background: @gray-lighter; + color: #000; .icon { - position: absolute; - margin-top: 2px; - margin-left: 4px; - color: @gray-light; + color: #000; } } - > .dropdown-menu { - max-height: 80vh; - overflow: auto; - margin-top: 4px; - min-width: 200px; - overflow-x: hidden; - > li { - padding: 12px 8px; - transition: background .2s linear; - color: @gray; - &:hover { - background: @gray-lighter; - cursor: pointer; - text-decoration: none; - } + .selected { + display: inline-block; + line-height: 1; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + } + .icon { + position: absolute; + margin-top: 3px; + margin-left: 4px; + color: @gray-light; + } + } + > .dropdown-menu { + max-height: 80vh; + overflow: auto; + margin-top: 4px; + min-width: 200px; + overflow-x: hidden; + > li { + padding: 12px 8px; + transition: background .2s linear; + color: @gray; + &:hover { + background: @gray-lighter; + cursor: pointer; + text-decoration: none; } } } diff --git a/themes/finna2/templates/organisationinfo/elements/location-details.phtml b/themes/finna2/templates/organisationinfo/elements/location-details.phtml index 38400aaa752..00d4fc452c1 100644 --- a/themes/finna2/templates/organisationinfo/elements/location-details.phtml +++ b/themes/finna2/templates/organisationinfo/elements/location-details.phtml @@ -1,8 +1,8 @@
- =$this->escapeHtml($orgInfo['address']['displayAddress'])?> + =$this->escapeHtml($orgInfo['address']['displayAddress'])?> - =$this->icon('route') ?> =$this->transEsc('organisation_info_route')?> + =$this->icon('route') ?> =$this->transEsc('organisation_info_route')?>
-+
=$this->icon('homepage-link') ?> =$this->transEsc('organisation_info_homepage')?>
-+
=$this->icon('email') ?> =$this->escapeHtml($email['email'])?>
-+
=$this->icon('facebook') ?> =$this->escapeHtml($link['name'])?> diff --git a/themes/finna2/templates/organisationinfo/elements/location-selection.phtml b/themes/finna2/templates/organisationinfo/elements/location-selection.phtml index 1dd41036221..95c1fc1aa53 100644 --- a/themes/finna2/templates/organisationinfo/elements/location-selection.phtml +++ b/themes/finna2/templates/organisationinfo/elements/location-selection.phtml @@ -83,8 +83,4 @@