fix(issue/429): update banner-card, info-card, with-maps components

bannergress · Nov 6, 2024 · fefab7f · fefab7f
1 parent 720a03f
commit fefab7f
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 11 deletions.
diff --git a/src/components/banner-card/banner-card.less b/src/components/banner-card/banner-card.less
@@ -233,6 +233,7 @@
     height: auto;
     aspect-ratio: 2;
   }
+
   &.banner-lines-1 {
     @media only @mobile-detection {
       aspect-ratio: 6;
@@ -273,6 +274,10 @@
   &.picture-size-5 {
     max-width: 85%;
   }
+
+  &.picture-size-6 {
+    display: contents;
+  }
 }
 
 .banner-info-details {

diff --git a/src/components/banner-info-card/BannerInfoCard.tsx b/src/components/banner-info-card/BannerInfoCard.tsx
@@ -411,6 +411,9 @@ const BannerInfoCard: FC<BannerInfoCardProps> = ({ banner }) => {
     'li',
     'a',
   ]
+  const descriptionSeparated = banner?.description?.split(' ')
+  const descriptionLength = banner?.description?.length
+
   return (
     <div className="banner-info-card">
       {getEvent(banner, t)}
@@ -423,10 +426,26 @@ const BannerInfoCard: FC<BannerInfoCardProps> = ({ banner }) => {
           {banner.warning}
         </Markdown>
       )}
-      {banner.description && (
-        <Markdown allowedElements={allowedElements} unwrapDisallowed={true}>
-          {banner.description}
-        </Markdown>
+
+      {banner.description && (descriptionLength as number) >= 12 && (
+        <details className={'banner-info-card__mission-description'}>
+          <summary className={'banner-info-card__start-text'}>
+            {descriptionSeparated?.slice(0, 12).join(' ')}
+            <span className={'banner-info-card__mission-description-dots'}> ...</span>
+            <p className={'banner-info-card__mission-description-show-more'}>
+              <Trans i18nKey="banners.showMore" />
+            </p>
+            <p className={'banner-info-card__mission-description-show-less'}>
+              <Trans i18nKey="banners.showLess" />
+            </p>
+          </summary>
+          <p className={'banner-info-card__end-text'}>
+            &nbsp;
+            {descriptionSeparated
+              ?.slice(12, descriptionSeparated.length)
+              .join(' ')}
+          </p>
+        </details>
       )}
       <IfUserLoggedIn>{getCreatedBy(banner, t)}</IfUserLoggedIn>
       <IfUserLoggedOut>

diff --git a/src/components/banner-info-card/banner-info-card.less b/src/components/banner-info-card/banner-info-card.less
@@ -19,11 +19,72 @@
     width: auto;
   }
 
-
   p {
     white-space: pre-wrap;
   }
 
+  &__mission-description {
+    display: inline;
+    position: relative;
+    margin-bottom: 45px;
+    width: 100%;
+
+    &[open] {
+      .banner-info-card__mission-description-dots,
+      .banner-info-card__mission-description-show-more {
+        display: none;
+      }
+
+      .banner-info-card__mission-description-show-less {
+        display: block;
+      }
+    }
+  }
+
+  &__mission-description-show-less {
+    display: none;
+  }
+
+  &__mission-description-show-less,
+  &__mission-description-show-more {
+    cursor: pointer;
+    position: absolute;
+    float: right;
+    margin: initial;
+    bottom: -37px;
+    right: 0;
+    font-size: 12px;
+    padding: 3px 7px;
+    background-color: var(--color-dark-gray);
+    border-radius: 4px;
+    border: 2px solid transparent;
+    background-origin: border-box;
+    background-clip: content-box, border-box;
+    box-shadow: 2px 1000px 1px var(--color-black) inset;
+    transition: linear-gradient ease 0.6s;
+    text-align: center;
+    color: var(--color-white);
+    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(180deg, var(--color-border-dark), var(--color-border-light));
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        color: #165996;
+      }
+    }
+  }
+
+  &__start-text {
+    display: inline;
+  }
+
+  &__end-text {
+    display: inline;
+  }
+
   .info-row,
   .info-subrow {
     display: flex;

diff --git a/src/components/banner-info-with-map/banner-info-with-map.less b/src/components/banner-info-with-map/banner-info-with-map.less
@@ -124,24 +124,22 @@
   flex-basis: 100%;
   flex-direction: row;
   column-gap: 40px;
-  min-height: 1px;
+  padding-bottom: 40px;
 
   .banner-info {
     height: 100%;
     min-height: 320px;
-    overflow-y: auto;
     min-width: 370px;
     max-width: 50vw;
-    overflow-x: hidden;
-    scrollbar-width: thin;
   }
 
   .banner-info-additional {
-    width: 100%;
-    height: 100%;
     display: flex;
     flex-direction: column;
+    height: 100%;
+    max-height: 94rem;
     row-gap: 30px;
+    width: 100%;
   }
 
   .leaflet-container {

diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
@@ -40,6 +40,8 @@
     "exitFullscreen": "<icon /> Vollbildmodus verlassen",
     "confirmDelete": "Möchtest du das Banner wirklich löschen?",
     "confirmNotDone": "Erledigt-Markierung wirklich entfernen?",
+    "showMore": "Mehr zeigen...",
+    "showLess": "Weniger zeigen...",
     "creation": {
       "edit": "Banner bearbeiten",
       "new": "Neues Banner",

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -40,6 +40,8 @@
     "exitFullscreen": "<icon /> Exit Full Screen",
     "confirmDelete": "Do you really want to delete that banner?",
     "confirmNotDone": "Do you really want to remove the Done marker?",
+    "showMore": "Show more...",
+    "showLess": "Show less...",
     "creation": {
       "edit": "Edit Banner",
       "new": "New Banner",

diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
@@ -40,6 +40,8 @@
     "exitFullscreen": "<icon /> Minimizar",
     "confirmDelete": "¿Estás seguro de que quieres borrar este banner?",
     "confirmNotDone": "¿Realmente eliminar la marca de completados?",
+    "showMore": "Mostrar más...",
+    "showLess": "Mostrar menos...",
     "creation": {
       "edit": "Editar banner",
       "new": "Crear banner",