feature: improved ccalendar data styling

Author: b-angelov

src/assets/css/articles/DateCalendar.module.css

@@ -0,0 +1,44 @@
+
+.section{
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: left;
+    margin: 20px;
+    background-color: rgb(255, 255, 255, 0.35);
+    border-radius: 88%/48%;
+}
+
+.section > article > div > *{
+    display: flex;
+    flex-direction: column;
+    align-items: first;
+    justify-content: left;
+    margin: 10px;
+}
+
+.section > article > div > * > *{
+    display: flex;
+    position: relative;
+    left: 2em;
+    padding:0px;
+    margin:0;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    background-color: rgb(255, 55, 55, 0.25);
+    border-radius: 11%/48%;
+    border: 1px solid rgba(246, 172, 26, 0.55);
+    /*margin: 10px;*/
+}
+
+.section > article > div > * > *:first-child{
+    margin-left:0px;
+    display:inline;
+    padding-left: 0px !important;
+    width: 100%;
+    text-align: left !important;
+    position: relative;
+    left:11px !important;
+    background-color:white;
+}

src/components/articles/Articles.jsx

@@ -8,6 +8,7 @@ import routes from "../../routes/routes.js";
 import {useNavigate} from "react-router";
 import saintImage from "../../assets/images/articles/saint.webp";
 import React from "react";
+import DateCalendar from "./DateCalendar.jsx";
 
 
 export default function Articles(props) {
@@ -57,20 +58,7 @@ export default function Articles(props) {
     let add;
 
     final.push(
-        date && (<React.Fragment key={"calendar-main"}><div id="calendar-main">
-            <div className="calendar">
-                Използван календар:
-                <p>{dayData?.calendar}</p>
-            </div>
-            <div className="saint">
-                <p className="desc">Православни светци, чествани днес:</p>
-                {dayData?.saint?.map((item, index) => (<p key={item.id}>{item.name}</p>))}
-            </div>
-            <div className="feast">
-                <p className="desc">Православни празници днес:</p>
-                {dayData?.feast?.map((item, index) => (<p key={item.id}>{item.name}</p>))}
-            </div>
-        </div></React.Fragment>)
+        date && (<React.Fragment key={"calendar-main"}><DateCalendar {...dayData}/></React.Fragment>)
     )
 
     if (is_authenticated) {

src/components/articles/DateCalendar.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "../../assets/css/articles/DateCalendar.module.css";
+
+export default function DateCalendar({calendar,saint,feast}) {
+    return(
+        <>
+        <section className={styles.section}><article><div id="calendar-main">
+            <div className="calendar">
+                <div>Използван календар:</div>
+                <p>{calendar}</p>
+            </div>
+            <div className="saint">
+                <p className="desc">Православни светци, чествани днес:</p>
+                {saint?.map((item, index) => (<p key={item.id}>{item.name}</p>))}
+            </div>
+            <div className="feast">
+                <p className="desc">Православни празници днес:</p>
+                {feast?.map((item, index) => (<p key={item.id}>{item.name}</p>))}
+            </div>
+        </div></article></section>
+            </>
+    )
+}