fix(header): Correct ribbon in default mode

dataesr · Nov 14, 2024 · d2b508e · d2b508e
1 parent 2e8345c
commit d2b508e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/client/src/components/ribbon/index.scss b/client/src/components/ribbon/index.scss
@@ -1,32 +1,32 @@
 .ribbon {
-  left: -60px;
+  left: -85px;
   position: absolute;
-  top: 10px;
+  top: 2px;
   z-index: calc(var(--ground) + 600);
 
   .badge {
     background: #e1000f;
     box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.34);
     color: #FFF;
     font-family: sans-serif;
-    font-size: 20px;
-    height: 50px;
-    line-height: 50px;
+    font-size: 10px;
+    height: 25px;
+    line-height: 25px;
     text-align: center;
     transform: rotate(-45deg);
     width: 200px;
   }
 }
 
-.sticky {
+.expanded {
   .ribbon {
-    left: -80px;
-    top: 3px;
+    left: -60px;
+    top: 10px;
 
     .badge {
-      font-size: 14px;
-      height: 30px;
-      line-height: 30px;
+      font-size: 20px;
+      height: 50px;
+      line-height: 50px;
     }
   }
-}
+}
diff --git a/client/src/layout/header.jsx b/client/src/layout/header.jsx
@@ -18,7 +18,7 @@ const {
 // TODO : all, Link from dsfr-plus
 export default function Header({ isExpanded }) {
   return isExpanded ? (
-    <header role="banner" className="fr-header">
+    <header role="banner" className="fr-header expanded">
       <Ribbon />
       <div className="fr-header__body">
         <div className="fr-container">
@@ -60,7 +60,7 @@ export default function Header({ isExpanded }) {
       </div>
     </header>
   ) : (
-    <Container as="section" className="filters sticky" fluid>
+    <Container as="section" className="filters" fluid>
       <Row className="fr-p-1w" verticalAlign="top">
         <Ribbon />
         <Col offsetXs="1" xs="2">

diff --git a/client/src/pages/openalex-ror/results.jsx b/client/src/pages/openalex-ror/results.jsx
@@ -190,15 +190,15 @@ export default function Affiliations() {
           <Row>
             <Col md={2}>
               <TagGroup className="cursor-pointer" onClick={() => navigate(`/${pathname.split('/')[1]}/search${search}`)}>
-                <Tag color="blue-ecume" key="tag-sticky-years" size="sm">
+                <Tag color="blue-ecume" key="tag-years" size="sm">
                   {`${body.startYear} - ${body.endYear}`}
                 </Tag>
                 <br />
                 {body?.affiliationStrings?.map((tag) => (
                   <Tag
                     className={tag.length < VITE_APP_TAG_LIMIT ? 'scratched' : ''}
                     color="blue-ecume"
-                    key={`tag-sticky-${tag}`}
+                    key={`tag-${tag}`}
                     size="sm"
                   >
                     {tag}
@@ -208,7 +208,7 @@ export default function Affiliations() {
                 {body?.rors?.map((tag) => (
                   <Tag
                     color="blue-ecume"
-                    key={`tag-sticky-${tag}`}
+                    key={`tag-${tag}`}
                     size="sm"
                   >
                     {tag}