fix: added clear float to page sections (#324)

* fix: added clear float to page sections * fix: added clear to overlapping sections * fix: cleaned up classname
RedTurtle · Sep 18, 2023 · 7f1e46d · 7f1e46d
1 parent 2c5605f
commit 7f1e46d
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 7 deletions.
diff --git a/src/components/ItaliaTheme/View/Commons/Metadata.jsx b/src/components/ItaliaTheme/View/Commons/Metadata.jsx
@@ -48,13 +48,13 @@ const Metadata = ({
         </h4>
       )}
       {children}
-      <p className="font-serif mb-0 mt-4">
+      <p className="font-serif mb-0 mt-4 last-modified">
         <strong>{intl.formatMessage(messages.modified)}:</strong>{' '}
         {viewDate(intl.locale, content.modified, 'DD-MM-Y, HH:MM')}
       </p>
       {content.rights && (
         <>
-          <p className="font-serif mb-0 mt-4">
+          <p className="font-serif mb-0 mt-4 metadata">
             {intl.formatMessage(messages.rights)}
           </p>
           <strong>{content.rights}</strong>

diff --git a/src/components/ItaliaTheme/View/Commons/RichText.jsx b/src/components/ItaliaTheme/View/Commons/RichText.jsx
@@ -31,7 +31,7 @@ const RichText = ({
     <>
       {title && (
         <Tag
-          className={cx('mt-4', {
+          className={cx('mt-4 it-page-subsection', {
             'fw-bold': title_size === 'h6',
           })}
         >

diff --git a/src/components/ItaliaTheme/View/EventoView/EventoCosE.jsx b/src/components/ItaliaTheme/View/EventoView/EventoCosE.jsx
@@ -45,7 +45,9 @@ const EventoCosE = ({ content }) => {
     >
       {content?.persone_amministrazione?.length > 0 && (
         <>
-          <h5>{intl.formatMessage(messages.parteciperanno)}</h5>
+          <h5 className="parteciperanno-section">
+            {intl.formatMessage(messages.parteciperanno)}
+          </h5>
           {content.persone_amministrazione.map((item, i) => (
             <UniversalLink
               href={flattenToAppURL(item['@id'])}

diff --git a/src/components/ItaliaTheme/View/EventoView/EventoUlterioriInformazioni.jsx b/src/components/ItaliaTheme/View/EventoView/EventoUlterioriInformazioni.jsx
@@ -43,7 +43,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
       {richTextHasContent(content?.ulteriori_informazioni) && (
         <HelpBox text={content?.ulteriori_informazioni} />
       )}
-
       {content?.event_url && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.event_url)}</h5>
@@ -52,7 +51,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
           </UniversalLink>
         </div>
       )}
-
       {richTextHasContent(content?.patrocinato_da) && (
         <div className="mt-4">
           {richTextHasContent(content?.patrocinato_da) && (
@@ -66,7 +64,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
           )}
         </div>
       )}
-
       {content?.strutture_politiche.length > 0 && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.strutture_politiche)}</h5>

diff --git a/src/theme/ItaliaTheme/Components/_cmp-timeline.scss b/src/theme/ItaliaTheme/Components/_cmp-timeline.scss
@@ -26,6 +26,7 @@
 
 .calendar-vertical {
   color: $link-color;
+  clear: both;
 
   &::after {
     display: block;

diff --git a/src/theme/ItaliaTheme/Views/_evento.scss b/src/theme/ItaliaTheme/Views/_evento.scss
@@ -1,4 +1,8 @@
 body.contenttype-event {
+  .parteciperanno-section {
+    clear: both;
+  }
+
   .supported-by {
     margin-bottom: 1rem;
   }

diff --git a/src/theme/ItaliaTheme/_common.scss b/src/theme/ItaliaTheme/_common.scss
@@ -3,6 +3,7 @@
   .text-justify {
     text-align: justify;
   }
+
   button.btn,
   button.rounded-right {
     &:focus {
@@ -30,6 +31,7 @@
 
   a.btn-tertiary {
     color: $tertiary-text !important;
+
     &:focus {
       border-color: $focus-outline-color;
       box-shadow: inset 0 1px 0 $focus-outline-color,
@@ -58,6 +60,7 @@
       }
     }
   }
+
   .btn-primary,
   .btn-secondary,
   .btn-tertiary,
@@ -66,12 +69,15 @@
       fill: $external-link-fill-buttons !important;
     }
   }
+
   .external-link {
     fill: $link-color !important;
+
     &:hover {
       fill: #004080 !important;
     }
   }
+
   .it-footer-small-prints-list .external-link {
     fill: $external-link-fill-subfooter !important;
   }
@@ -80,3 +86,9 @@
 .icon.external-link.icon-xs {
   height: 1rem;
 }
+
+section.it-page-section,
+.last-modified,
+.it-page-subsection {
+  clear: both;
+}
diff --git a/src/theme/ItaliaTheme/_main.scss b/src/theme/ItaliaTheme/_main.scss
@@ -143,6 +143,7 @@ iframe {
 
   .draftjs-buttons {
     margin: 0;
+    clear: both;
 
     a {
       display: inline-block;