Fix News Item and Link content type (#15&#19)

kitconcept · Jul 15, 2023 · e81ef07 · e81ef07
1 parent 459e497
commit e81ef07
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 2 deletions.
diff --git a/news/19.bugfix b/news/19.bugfix
@@ -0,0 +1 @@
+Fix News Item and Link content type @iRohitSingh
diff --git a/src/customizations/volto/components/theme/View/NewsItemView.jsx b/src/customizations/volto/components/theme/View/NewsItemView.jsx
@@ -32,7 +32,9 @@ const NewsItemView = ({ content }) => {
         ) : (
           <span className="day">No date</span>
         )}{' '}
-        <span className="headtitle">| {content?.head_title}</span>
+        <span className="headtitle">
+          <span className="pre-headtitle">|</span> {content?.head_title}
+        </span>
       </div>
       <RenderBlocks content={content} />
     </div>

diff --git a/src/theme/_content.scss b/src/theme/_content.scss
@@ -9,6 +9,9 @@
 .contenttype-news-item {
   .documentFirstHeading {
     margin-top: 0px;
+    @media only screen and (max-width: 769px) {
+      margin-bottom: 60px;
+    }
   }
   .blocks-group-wrapper {
     padding-top: 0px;
@@ -19,14 +22,30 @@
     margin-right: auto;
     margin-bottom: 40px;
     margin-left: auto;
+    @media only screen and (max-width: 769px) {
+      margin-bottom: 20px;
+    }
     .day,
     .headtitle {
       font-size: 18px;
-
       font-weight: 700;
       letter-spacing: 1px;
       line-height: 24px;
       text-transform: uppercase;
+      @media only screen and (max-width: 769px) {
+        font-size: 14px;
+        line-height: 18px;
+      }
+      .pre-headtitle {
+        @media only screen and (max-width: 769px) {
+          display: none;
+        }
+      }
+    }
+    .day {
+      @media only screen and (max-width: 769px) {
+        display: none;
+      }
     }
   }
 }
@@ -178,3 +197,35 @@
     }
   }
 }
+
+// ### link ###
+.contenttype-link {
+  .content-area {
+    .container {
+      @media only screen and (max-width: 769px) {
+        padding-right: 20px;
+        padding-left: 20px;
+      }
+    }
+
+    .documentFirstHeading {
+      max-width: var(--default-container-width) !important;
+      margin-right: auto;
+      margin-left: auto;
+      @media only screen and (max-width: 769px) {
+        margin-bottom: 60px;
+      }
+    }
+    p.documentDescription {
+      margin-bottom: 40px;
+      @media only screen and (max-width: 769px) {
+        margin-bottom: 60px;
+      }
+    }
+    p {
+      max-width: var(--narrow-container-width) !important;
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+}