imio.smartweb.core 1.2.46__py3-none-any.whl → 1.2.48__py3-none-any.whl

imio/smartweb/core/webcomponents/src/components/News/News.scss

@@ -1,21 +1,25 @@
 .breadcrumb {
   padding: 0;
 }
+
 .r-result-list {
   margin-top: 50px;
   padding-left: 0;
   list-style: none;
 }
+
 #portal-column-content {
   h1 {
     font-size: 0px;
     position: absolute;
   }
 }
+
 #viewlet-below-content-title,
 #viewlet-below-content-description {
   display: none;
 }
+
 /* image */
 /* text */
 .r-item-text {
@@ -24,31 +28,29 @@
   display: flex;
   flex-direction: column;
 }
+
 .r-item-title {
   display: block;
 }
 
-.r-results-numbers {
-  width: 100%;
-  margin-bottom: 0.5rem;
-  span {
-    font-weight: bold;
-  }
-}
+
 // content
 
 .r-content-img {
   padding-bottom: 60%;
 }
+
 .new-content {
   max-width: 700px;
   margin: 0 auto;
 }
+
 //// for bla ////
 /* list item */
 .r-load-more {
   text-align: center;
   margin-bottom: 2rem;
+
   button {
     background: #000;
     border: solid 1px transparent;
@@ -61,13 +63,16 @@
     font-size: 14px;
     margin: 0 auto;
     display: block;
+
     &:hover {
       background: rgba(0, 0, 0, 0.871);
     }
   }
 }
+
 .r-actu-wrapper {
   position: relative;
+
   &:after {
     width: 495px;
     display: block;
@@ -78,6 +83,7 @@
     right: 0;
     transform: translateY(-20%);
   }
+
   .r-list-item-group {
     max-width: 900px;
     margin: 30px auto;
@@ -86,20 +92,24 @@
     border: 1px solid #D1D1D1;
   }
 }
+
 /* text */
 .r-item-title {
   font-size: 18px;
   font-weight: bold;
 }
+
 .r-item-description {
   font-size: 16px;
   color: #444444;
   margin-top: 10px;
 }
+
 /* image */
 .r-item-img {
   border-radius: 15px 15px 15px 0px;
 }
+
 .r-actu-wrapper {
   .r-item-img {
     width: 100%;
@@ -107,15 +117,18 @@
     background-position: top;
     background-size: cover;
     background-repeat: no-repeat;
+
     @media screen and (min-width:775px) {
       width: 323px;
     }
   }
 }
+
 /* arrow more */
 .r-item-read-more {
   margin-top: auto;
 }
+
 .r-item-arrow-more {
   width: 50px;
   height: 50px;
@@ -125,11 +138,12 @@
   margin-left: auto;
   align-self: center;
   margin-right: 30px;
-  background: url(../../assets/next-react.svg);
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.44 10'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='Calque_1-2' data-name='Calque 1'%3E%3Cg id='ui-arrow-right'%3E%3Cg id='arrow'%3E%3Cline id='Ligne_7' data-name='Ligne 7' x1='1' y1='5' x2='19.44' y2='5' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-width:2px'/%3E%3Cline id='Ligne_8' data-name='Ligne 8' x1='14.83' y1='1' x2='19.44' y2='5' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-width:2px'/%3E%3Cline id='Ligne_9' data-name='Ligne 9' x1='14.83' y1='9' x2='19.44' y2='5' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-width:2px'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: 20px;
   background-position: center;
 }
+
 .r-list-item-group {
   &:hover {
     .r-item-arrow-more {
@@ -142,10 +156,11 @@
 }
 
 .r-list-item {
-  @media screen and (max-width:600px) {
+  @media screen and (max-width:774px) {
     flex-direction: column;
   }
 }
+
 .r-item-read-more {
   @media screen and (max-width:600px) {
     position: relative;
@@ -156,6 +171,7 @@
   display: inline-flex;
   align-self: center;
   margin-right: 0.4rem;
+
   svg {
     top: .125em;
     position: relative;
@@ -163,6 +179,7 @@
     width: 1em;
   }
 }
+
 .dpinlb {
   display: inline-block;
   vertical-align: top;
@@ -173,12 +190,15 @@
     width: 30px;
     height: 30px;
   }
+
   ul {
     display: flex;
     align-items: center;
     margin: 0;
+
     li {
       list-style: none;
+
       a {
         &:hover {
           opacity: .7;
@@ -194,4 +214,4 @@
   color: #747474;
   font-weight: 400;
   font-size: 13px;
-} 
+}

imio/smartweb/core/webcomponents/src/components/News/NewsCard/NewsCard.jsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useState, useContext } from "react";
 import moment from "moment";
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from "react-markdown";
 import { Translate } from "react-translated";
-import { LanguageContext } from '../News.jsx';
-const NewsCard = ({ item,showCategoriesOrTopics }) => {
+import { LanguageContext } from "../News.jsx";
+const NewsCard = ({ item, showCategoriesOrTopics }) => {
     const [limitDescription, setLimitDescription] = useState();
     const [itemTopic, setItemTopic] = useState(null);
 
     const numberLimit = 150;
     const title = item.title && item.title;
-    const description = item.description && item.description;
+    const description = item.description || "";
 
     useEffect(() => {
         if (description.length >= numberLimit) {
@@ -20,16 +20,18 @@ const NewsCard = ({ item,showCategoriesOrTopics }) => {
         if (item.topics && item.topics.length > 0) {
             setItemTopic(item.topics[0].title);
         } else {
-            setItemTopic(null)
+            setItemTopic(null);
         }
     }, [item]);
-    moment.locale(useContext(LanguageContext))
-    const created = moment(item.created).startOf('minute').fromNow();
-    const lastModified = moment(item.modified).startOf('minute').fromNow();
+    moment.locale(useContext(LanguageContext));
+    const created = moment(item.created).startOf("minute").fromNow();
+    const lastModified = moment(item.modified).startOf("minute").fromNow();
     return (
         <div className="r-list-item">
             <div
-                className={item.image_vignette_scale ? "r-item-img" : "r-item-img r-item-img-placeholder"}
+                className={
+                    item.image_vignette_scale ? "r-item-img" : "r-item-img r-item-img-placeholder"
+                }
                 style={{
                     backgroundImage: item.image_vignette_scale
                         ? "url(" + item.image_vignette_scale + ")"
@@ -39,9 +41,7 @@ const NewsCard = ({ item,showCategoriesOrTopics }) => {
             <div className="r-item-text">
                 <span className="r-item-title">{title}</span>
                 {showCategoriesOrTopics === "topic" ? (
-                    itemTopic && (
-                        <span className="r-item-categorie">{item.topics[0].title}</span>
-                    )
+                    itemTopic && <span className="r-item-categorie">{item.topics[0].title}</span>
                 ) : showCategoriesOrTopics === "category" ? (
                     item.local_category ? (
                         <span className="r-item-categorie">{item.local_category.title}</span>
@@ -50,27 +50,30 @@ const NewsCard = ({ item,showCategoriesOrTopics }) => {
                             <span className="r-item-categorie">{item.category.title}</span>
                         )
                     )
-                ) : ""}
-                {description ?
+                ) : (
+                    ""
+                )}
+                {description ? (
                     <ReactMarkdown className="r-item-description">{limitDescription}</ReactMarkdown>
-                    : ""
-                }
+                ) : (
+                    ""
+                )}
                 <div className="r-item-read-more" style={{ textDecoration: "none" }}>
-                    {
-                        created === lastModified ?
-                            (
-                                <div className="r-card-date-last">
-                                    <span><Translate text="Publié" /> </span>
-                                    <span>{created}</span>
-                                </div>
-                            ) :
-                            (
-                                <div className="r-card-date-last">
-                                    <span><Translate text="Actualisé" /> </span>
-                                    <span>{lastModified}</span>
-                                </div>
-                            )
-                    }
+                    {created === lastModified ? (
+                        <div className="r-card-date-last">
+                            <span>
+                                <Translate text="Publié" />{" "}
+                            </span>
+                            <span>{created}</span>
+                        </div>
+                    ) : (
+                        <div className="r-card-date-last">
+                            <span>
+                                <Translate text="Actualisé" />{" "}
+                            </span>
+                            <span>{lastModified}</span>
+                        </div>
+                    )}
                 </div>
             </div>
             <div className="r-item-arrow-more"></div>