adjust logo on medai screen

dataesr · Mar 29, 2024 · c0173f3 · c0173f3
1 parent f77520a
commit c0173f3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/client/src/pages/organizations/[id]/components/header/index.tsx b/client/src/pages/organizations/[id]/components/header/index.tsx
@@ -1,3 +1,4 @@
+import cn from "classnames";
 import {
   BadgeGroup,
   Badge,
@@ -10,25 +11,26 @@ import getLangFieldValue from "../../../../../utils/lang";
 import { Organization } from "../../../../../types/organization";
 import { useIntl } from "react-intl";
 import Truncate from "../../../../../components/truncate";
+import styles from "./styles.module.scss";
 
 export default function OrganizationHeader({ data }: { data: Organization }) {
   const { locale } = useDSFRConfig();
   const intl = useIntl();
+  const shortLevel = data.level?.match(/\((.*?)\)/)?.[1] || data.level;
   return (
     <section>
-      <div style={{ display: "flex", flexWrap: "nowrap" }} className="fr-my-1v">
-        <div style={{ flexGrow: 1 }}>
+      <div className={cn(styles.header, "fr-my-1v")}>
+        <div className={styles.grow}>
           <BadgeGroup className="structure-badge-list fr-mt-1v">
             {data?.kind?.map((k) => (
               <Badge key={k} size="sm" color="yellow-tournesol" noIcon>
                 {k}
               </Badge>
             ))}
             {data.level && (
-              <Badge size="sm" color="green-emeraude">
-                {data.level}
-              </Badge>
-            )}
+              <Badge size="sm" color='green-emeraude' title={shortLevel ? data.level : undefined}>
+                {shortLevel || data.level}
+              </Badge>)}
             {data.nature && data.nature !== data.level && (
               <Badge size="sm" color="green-emeraude">
                 {data.nature}
@@ -50,13 +52,12 @@ export default function OrganizationHeader({ data }: { data: Organization }) {
         <div>
           <img
             id="structure-logo"
-            style={{ maxHeight: "100px", maxWidth: "100px" }}
+            className={styles.logo}
             width="auto"
             height="auto"
             src={`https://storage.sbg.cloud.ovh.net/v1/AUTH_32c5d10cb0fe4519b957064a111717e3/dataesr/${data.id}_128.png`}
             alt={`Logo ${data.label.default}`}
             aria-hidden
-            className="fr-mf-3w"
             onError={() => document?.getElementById("structure-logo")?.remove()}
           />
         </div>

diff --git a/client/src/pages/organizations/[id]/components/header/styles.module.scss b/client/src/pages/organizations/[id]/components/header/styles.module.scss
@@ -0,0 +1,19 @@
+.header {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  gap: 2rem;
+  align-items: center;
+
+  @media screen and (min-width: 768px) {
+    flex-wrap: nowrap;
+  }
+
+  .grow {
+    flex-grow: 1;
+  }
+
+  .logo {
+    max-height: 100px !important;
+    max-width: 250px !important;
+  }
+}
diff --git a/client/src/pages/suggest/locales/en.json b/client/src/pages/suggest/locales/en.json
@@ -3,9 +3,9 @@
     "suggest.breadcrumb.publications": "Search for publications",
     "suggest.main-search-bar": "Search",
     "suggest.result-more-than": "More than ",
-    "suggest.publications.result": "{count, plural, =0 {# publication} one {# publication} other {# publications}} for the search query '{query}'",
+    "suggest.publications.result": "{count, plural, =0 {# publication} one {# publication} other {# publications}} for the search query {query}",
     "suggest.results.pagination.next": "Show more results",
-    "suggest.results.pagination.end": "No additional results for the search query '{query}'",
+    "suggest.results.pagination.end": "No additional results for the search query {query}",
     "suggest.list.title": "List of suggested publications",
     "suggest.list.success": "The list has been successfully submitted",
     "suggest.list.error": "An error occurred while submitting the list",