Merge pull request #4928 from guardian/09-10-make_metadata_arrows_consistent_with_usages_and_collections

Make expandable image metadata group arrows consistent with usages and collections

Author: junyuanxue

kahuna/public/js/components/gr-display-crops/gr-display-crops.css

@@ -12,3 +12,6 @@
     justify-content: flex-start;
 }
 
+.gr-display-crops + dd {
+    width: 100%;
+}

kahuna/public/js/components/gr-display-crops/gr-display-crops.html

@@ -1,10 +1,10 @@
 <div class="image-info">
-    <dl class="image-info__group image-info__wrap" ng-if="ctrl.crops.length > 0">
+    <dl class="image-info__group image-info__wrap image-info__group--expandable" ng-if="ctrl.crops.length > 0">
         <div class="gr-display-crops">
             <button class="gr-display-crops"
                     ng-click="ctrl.showCrops = !ctrl.showCrops">
-                <span ng-hide="ctrl.showCrops">▸ Show</span>
-                <span ng-show="ctrl.showCrops">▾ Hide</span>
+                <span ng-hide="ctrl.showCrops"><gr-icon>chevron_right</gr-icon> Show</span>
+                <span ng-show="ctrl.showCrops"><gr-icon>expand_more</gr-icon> Hide</span>
                 crops
             </button>
         </div>

kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html

@@ -735,12 +735,12 @@
     </dl>
     </div>
 
-    <div ng-if="ctrl.singleImage && !ctrl.isAdditionalMetadataEmpty()" class="image-info__group image-info__group--full-metadata" role="region" aria-label="Additional metadata">
+    <div ng-if="ctrl.singleImage && !ctrl.isAdditionalMetadataEmpty()" class="image-info__group image-info__group--full-metadata image-info__group--expandable" role="region" aria-label="Additional metadata">
         <button class="metadata-reveal"
                 ng-click="ctrl.showMetadataSection('additionalMetadata')"
                 aria-label="{{ctrl.isMetadataSectionHidden('additionalMetadata') ? 'Show' : 'Hide'}} additional metadata section">
-            <span ng-show="ctrl.isMetadataSectionHidden('additionalMetadata')">▸ Show</span>
-            <span ng-hide="ctrl.isMetadataSectionHidden('additionalMetadata')">▾ Hide</span>
+            <span ng-show="ctrl.isMetadataSectionHidden('additionalMetadata')"><gr-icon>chevron_right</gr-icon> Show</span>
+            <span ng-hide="ctrl.isMetadataSectionHidden('additionalMetadata')"><gr-icon>expand_more</gr-icon> Hide</span>
             additional metadata
         </button>
 

kahuna/public/stylesheets/main.css

@@ -2202,6 +2202,13 @@ FIXME: what to do with touch devices
     position: relative;
 }
 
+.image-info__group--expandable {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+}
+
 .image-info__title {
     color: #eee;
 }