From fa9c8ff17cd5755664450bb311853d44c51bf785 Mon Sep 17 00:00:00 2001
From: Ere Maijala <ere.maijala@helsinki.fi>
Date: Thu, 28 Sep 2023 16:13:28 +0300
Subject: [PATCH] More cleanup.

---
 .../finna2/less/finna/organisation-info.less  | 199 ++++++------------
 .../elements/location-details.phtml           |   8 +-
 .../elements/location-quick-info.phtml        |  12 +-
 .../elements/location-selection.phtml         |   4 -
 .../organisationinfo/elements/widget.phtml    |  54 ++---
 5 files changed, 101 insertions(+), 176 deletions(-)

diff --git a/themes/finna2/less/finna/organisation-info.less b/themes/finna2/less/finna/organisation-info.less
index 113dccc9b5b3..de8aba197f80 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 38400aaa7520..00d4fc452c1d 100644
--- a/themes/finna2/templates/organisationinfo/elements/location-details.phtml
+++ b/themes/finna2/templates/organisationinfo/elements/location-details.phtml
@@ -1,8 +1,8 @@
 <!-- START of: finna - organisationinfo/elements/location-details.phtml -->
 <div class="row location-details info-element">
   <?php // Information columns ?>
-  <div class="office-row-general">
-    <div class="office-col">
+  <div class="location-row-general">
+    <div class="location-col">
       <?php ob_start(); ?>
         <?php $hasImages = false; ?>
         <?php if ($url = $orgInfo['pictures'][0]['url'] ?? null): ?>
@@ -47,11 +47,11 @@
         ]); ?>
     </div>
 
-    <div class="office-col opening-times">
+    <div class="location-col opening-times">
       <?=$this->render('organisationinfo/elements/location/schedule.phtml')?>
     </div>
 
-    <div class="office-col">
+    <div class="location-col">
       <?=$this->render('organisationinfo/elements/location/contact-info.phtml')?>
     </div>
   </div>
diff --git a/themes/finna2/templates/organisationinfo/elements/location-quick-info.phtml b/themes/finna2/templates/organisationinfo/elements/location-quick-info.phtml
index 4b61e22195a1..9b4a6da51bc7 100644
--- a/themes/finna2/templates/organisationinfo/elements/location-quick-info.phtml
+++ b/themes/finna2/templates/organisationinfo/elements/location-quick-info.phtml
@@ -3,30 +3,30 @@
     return $this->render('organisationinfo/elements/helpers/time-interval.phtml', compact('opens', 'closes', 'minutes'));
   };
 ?>
-<div class="office-title">
+<div class="location-basic-info">
   <h3 class="location-title"><?=$this->escapeHtml($orgInfo['name'])?></h3>
   <div>
     <p>
-      <span class="office-links address"><?=$this->escapeHtml($orgInfo['address']['displayAddress'])?></span>
+      <span class="location-links address info-element"><?=$this->escapeHtml($orgInfo['address']['displayAddress'])?></span>
       <?php if ($orgInfo['routeUrl']): ?>
-        <a href="<?=$this->escapeHtmlAttr($orgInfo['routeUrl'])?>" target="_blank" class="office-links route info-element"><?=$this->icon('route') ?> <?=$this->transEsc('organisation_info_route')?></a>
+        <a href="<?=$this->escapeHtmlAttr($orgInfo['routeUrl'])?>" target="_blank" class="location-links route info-element"><?=$this->icon('route') ?> <?=$this->transEsc('organisation_info_route')?></a>
       <?php endif; ?>
     </p>
     <?php if ($orgInfo['homepage']): ?>
-      <p class="office-links office-website info-element">
+      <p class="location-links website info-element">
         <a href="<?=$this->escapeHtmlAttr($orgInfo['homepage'])?>" target="_blank"><?=$this->icon('homepage-link') ?> <?=$this->transEsc('organisation_info_homepage')?></a></span>
       </p>
     <?php endif; ?>
     <?php if ($orgInfo['emails'] && 'museum' === $orgInfo['type']): ?>
       <?php foreach ($orgInfo['emails'] as $email): ?>
-        <p class="office-links email info-element">
+        <p class="location-links email info-element">
           <a href="mailto:<?=$this->escapeHtmlAttr($email['email'])?>"><?=$this->icon('email') ?> <?=$this->escapeHtml($email['email'])?></a>
         </p>
       <?php endforeach; ?>
     <?php endif; ?>
     <?php foreach ($orgInfo['links'] as $link): ?>
       <?php if (str_contains($link['name'], 'Facebook')): ?>
-        <p class="office-links facebook info-element">
+        <p class="location-links facebook info-element">
         <a class="facebook aria-label="Facebook" href="<?=$this->escapeHtmlAttr($link['url'])?>" target="_blank">
           <?=$this->icon('facebook') ?> <?=$this->escapeHtml($link['name'])?>
         </a>
diff --git a/themes/finna2/templates/organisationinfo/elements/location-selection.phtml b/themes/finna2/templates/organisationinfo/elements/location-selection.phtml
index 1dd41036221c..95c1fc1aa532 100644
--- a/themes/finna2/templates/organisationinfo/elements/location-selection.phtml
+++ b/themes/finna2/templates/organisationinfo/elements/location-selection.phtml
@@ -83,8 +83,4 @@
     </div>
   </div>
 </div>
-
-<div class="office-information-loader hidden">
-  <p><?=$this->icon('spinner') ?> <?=$this->transEsc('loading_ellipsis')?></p>
-</div>
 <!-- END of: finna - organisationinfo/elements/location-selection.phtml -->
diff --git a/themes/finna2/templates/organisationinfo/elements/widget.phtml b/themes/finna2/templates/organisationinfo/elements/widget.phtml
index 785d3ca2bf78..93c7126a1b1a 100644
--- a/themes/finna2/templates/organisationinfo/elements/widget.phtml
+++ b/themes/finna2/templates/organisationinfo/elements/widget.phtml
@@ -1,21 +1,19 @@
 <!-- START of: finna - organisationinfo/elements/widget.phtml -->
 <div class="location-details info-element">
   <div class="<?=$showDetails ? 'info-col ' : ''?>info">
-    <div class="location-dropdown-container">
-      <div class="js-location-dropdown dropdown">
-        <button type="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-id="">
-          <span class="sr-only"><?=$this->transEsc('organisation_info_selected_service_point')?></span>
-          <span class="selected"><?=$this->transEsc($locationName ?: 'choose_from_list')?></span>
-          <?=$this->icon('dropdown-open') ?>
-        </button>
-        <ul class="dropdown-menu" role="menu" aria-label="<?=$this->transEscAttr('organisation_info_select_service_point')?>">
-          <?php foreach ($orgInfo['list'] ?? [] as $location): ?>
-            <li role="menuitem" tabindex="0" data-id="<?=$this->transEscAttr($location['id'])?>">
-              <?=$this->transEsc($location['name'])?>
-            </li>
-          <?php endforeach; ?>
-        </ul>
-      </div>
+    <div class="js-location-dropdown dropdown">
+      <button type="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-id="">
+        <span class="sr-only"><?=$this->transEsc('organisation_info_selected_service_point')?></span>
+        <span class="selected"><?=$this->transEsc($locationName ?: 'choose_from_list')?></span>
+        <?=$this->icon('dropdown-open') ?>
+      </button>
+      <ul class="dropdown-menu" role="menu" aria-label="<?=$this->transEscAttr('organisation_info_select_service_point')?>">
+        <?php foreach ($orgInfo['list'] ?? [] as $location): ?>
+          <li role="menuitem" tabindex="0" data-id="<?=$this->transEscAttr($location['id'])?>">
+            <?=$this->transEsc($location['name'])?>
+          </li>
+        <?php endforeach; ?>
+      </ul>
     </div>
     <?php if ($orgInfo['openNow']): ?>
       <span class="location-is-open info-element"><?=$this->transEsc('organisation_info_is_open')?></span>
@@ -30,8 +28,8 @@
 
   <?php // Information columns ?>
   <?php if ($showDetails && $locationId): ?>
-    <div class="office-row-general">
-      <div class="office-col details-col">
+    <div class="location-row-general">
+      <div class="location-col details-col">
         <?php if ($url = $orgInfo['pictures'][0]['url'] ?? null): ?>
           <img class="building-image" src="<?=$this->escapeHtmlAttr($url)?>" alt="">
         <?php endif; ?>
@@ -88,15 +86,19 @@
           <?php endforeach; ?>
         </contact-links>
 
-        <?php if ($orgInfo['mapUrl']): ?>
-          <div class="map info-element">
-            <a href="<?=$this->escapeHtmlAttr($orgInfo['mapUrl'])?>" target="_blank">
-              <?=$this->icon('map-marker') ?>
-              <?php $label = $this->translate('Location') . ': ' . $orgInfo['address']['displayAddress'] . ' (' . $this->translate('external_link') . ')'; ?>
-              <span class="map-address" aria-label="<?=$this->escapeHtmlAttr($label)?>">
-                <?=$this->escapeHtml($orgInfo['address']['displayAddress'])?>
-              </span>
-            </a>
+        <?php if ($orgInfo['address']['displayAddress']): ?>
+          <div class="address info-element">
+            <?php if ($orgInfo['mapUrl']): ?>
+              <a class="map-link" href="<?=$this->escapeHtmlAttr($orgInfo['mapUrl'])?>" target="_blank">
+                <?=$this->icon('map-marker') ?>
+                <?php $label = $this->translate('Location') . ': ' . $orgInfo['address']['displayAddress'] . ' (' . $this->translate('external_link') . ')'; ?>
+                <span class="map-address" aria-label="<?=$this->escapeHtmlAttr($label)?>">
+                  <?=$this->escapeHtml($orgInfo['address']['displayAddress'])?>
+                </span>
+              </a>
+            <?php else: ?>
+              <?=$this->escapeHtml($orgInfo['address']['displayAddress'])?>
+            <?php endif; ?>
           </div>
         <?php endif; ?>