Merge pull request #76 from hifis-net/70-aspect_ratios

Fix aspect ratio for iOS and MacOS

Author: cmeessen

deployment/helmholtz/styles/index.css

@@ -37,11 +37,6 @@ header input {
   background-color: #cdeefb;
 }
 
-#hgf-scroll-container {
-  display: flex;
-  height: 200px;
-}
-
 .simplebar-track.simplebar-horizontal {
   height: 7px !important;
   border-bottom: 1px solid #002864;

frontend/components/home/helmholtz/HorizontalScrollContainer.tsx

@@ -0,0 +1,48 @@
+// SPDX-FileCopyrightText: 2022 Christian Meeßen (GFZ) <[email protected]>
+// SPDX-FileCopyrightText: 2022 Helmholtz Centre Potsdam - GFZ German Research Centre for Geosciences
+// SPDX-FileCopyrightText: 2022 Marc Hanisch (GFZ) <[email protected]>
+//
+// SPDX-License-Identifier: EUPL-1.2
+
+import {getUrlFromLogoId} from '~/utils/editOrganisation'
+
+import Link from 'next/link'
+import {OrganisationForOverview} from '~/types/Organisation'
+
+/* eslint-disable @next/next/no-img-element */
+
+export default function HorizontalScrollContainer(
+{organisations}: {organisations: OrganisationForOverview[]}
+) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: '200px'
+      }}
+    >
+      {
+        organisations.map(item => {
+          return(
+            <Link
+              key={`link_${item.name}`}
+              href={`/organisations/${item.rsd_path}`}
+              passHref
+              >
+              <img
+                alt={item.name}
+                src={getUrlFromLogoId(item.logo_id) ?? undefined}
+                className="p-10 hover:cursor-pointer"
+                style = {{
+                  width: 'auto',
+                  objectFit: 'contain',
+                  aspectRatio: 'auto'
+                }}
+              />
+            </Link>
+          )
+        })
+      }
+    </div>
+  )
+}

frontend/components/home/helmholtz/ParticipatingOrganisations.tsx

@@ -6,32 +6,31 @@
 
 /* eslint-disable @next/next/no-img-element */
 import React, {useEffect, useState, useRef} from 'react'
-import Link from 'next/link'
 import SimpleBar from 'simplebar-react'
 import 'simplebar/dist/simplebar.min.css'
 
 import {OrganisationForOverview} from '~/types/Organisation'
 
 /*! purgecss start ignore */
 import 'aos/dist/aos.css'
-import {getUrlFromLogoId} from '~/utils/editOrganisation'
 import {IconButton} from '@mui/material'
 import {ChevronLeft, ChevronRight} from '@mui/icons-material'
+import HorizontalScrollContainer from './HorizontalScrollContainer'
 /*! purgecss end ignore */
 
 export default function ParticipatingOrganisations(
     {organisations, sbRef}: {organisations: OrganisationForOverview[], sbRef: any},
   ) {
     const commonButtonStyle = {
       fontSize: '2.5rem',
-      color: 'primary.contrastText',
+      color: 'text.primary',
       backgroundColor: 'white',
       position: 'absolute',
       transform: 'translateY(-50%)',
       top: '50%',
       '&:hover': {
         color: 'white',
-        backgroundColor: 'primary.contrastText',
+        backgroundColor: 'text.primary',
       },
     }
 
@@ -76,27 +75,10 @@ export default function ParticipatingOrganisations(
           ref={sbRef}
           autoHide={false}
           forceVisible="x"
-          style={{maxHeight: 300}}
         >
-          <div id="hgf-scroll-container">
-            {
-              organisations.map(item => {
-                return(
-                  <Link
-                    key={`link_${item.name}`}
-                    href={`/organisations/${item.rsd_path}`}
-                    passHref
-                  >
-                    <img
-                      alt={item.name}
-                      src={getUrlFromLogoId(item.logo_id) ?? undefined}
-                      className="p-10 hover:cursor-pointer"
-                    />
-                  </Link>
-                )
-              })
-            }
-          </div>
+          <HorizontalScrollContainer
+            organisations={organisations}
+          />
         </SimpleBar>
 
         <IconButton