Merge pull request #3 from culturecreates/feature/issue-108

feat: fixing style.

src/components/card/Card.jsx

@@ -7,7 +7,12 @@ import './card.css';
 const Card = ({ name, place, image, startDate, endDate }) => {
   const [imgError, setImgError] = useState(false);
   return (
-    <li className="card">
+    <li
+      className="card"
+      onClick={() => {
+        console.log('laks');
+      }}
+    >
       <div className="image-column">
         {!imgError ? (
           <img

src/components/customCalendar/CustomCalendar.jsx

@@ -9,6 +9,7 @@ import prevButton from '../../assets/Chevron-Left.svg';
 import prev2Button from '../../assets/ChevronDouble-Left.svg';
 import next2Button from '../../assets/ChevronDouble-Right.svg';
 import nextButton from '../../assets/Chevron-Right.svg';
+import { displayTypes } from '../../constants/generalConstants';
 
 const dateConverter = (date) => {
   const day = date.getDate();
@@ -21,8 +22,17 @@ const dateConverter = (date) => {
 };
 
 export const CustomCalendar = () => {
-  const { searchDate, setSearchDate, setStartDateSpan, setEndDateSpan, isSingleDate, widgetProp } =
-    useContext(WidgetContext);
+  const {
+    searchDate,
+    setSearchDate,
+    setStartDateSpan,
+    setEndDateSpan,
+    isSingleDate,
+    widgetProp,
+    displayType,
+    calendarModalToggle,
+    setCalendarModalToggle,
+  } = useContext(WidgetContext);
 
   const [activeStartDate, setActiveStartDate] = useState();
   const [view, setView] = useState('month');
@@ -43,6 +53,8 @@ export const CustomCalendar = () => {
   const searchDateHandler = (value) => {
     sessionStorage.setItem(sessionStorageVariableNames.WidgetSearchDate, value);
     setSearchDate(value);
+
+    setCalendarModalToggle(!calendarModalToggle);
     if (!isSingleDate) {
       const selectedDate = dateConverter(new Date(value));
       setStartDateSpan(selectedDate);
@@ -89,7 +101,10 @@ export const CustomCalendar = () => {
   };
 
   return (
-    <div className="custom-calendar-wrapper">
+    <div
+      className="custom-calendar-wrapper"
+      style={displayType === displayTypes.MOBILE ? { borderRadius: '4px 4px 8px 8px' } : {}}
+    >
       <CalendarControl
         setCalendarKey={setCalendarKey}
         setView={setView}

src/components/customCalendar/customCalendar.css

@@ -29,6 +29,13 @@
   border-radius: 4px;
 }
 
+#calendar-widget > .widget-layout .react-calendar-wrapper .react-calendar__tile--now:enabled:hover,
+#calendar-widget > .widget-layout .react-calendar-wrapper .react-calendar__tile--now:enabled:focus,
+#calendar-widget > .widget-layout .react-calendar-wrapper .react-calendar__tile:enabled:hover,
+#calendar-widget > .widget-layout .react-calendar-wrapper .react-calendar__tile:enabled:focus {
+  background: var(--dynamic-color-100);
+}
+
 #calendar-widget
   > .widget-layout
   .react-calendar-wrapper
@@ -87,6 +94,11 @@
   color: #222732;
 }
 
+#calendar-widget > .widget-layout .react-calendar-wrapper .react-calendar__tile--hasActive {
+  background: var(--dynamic-color-600) !important;
+  color: var(--primary-white-opaque) !important;
+}
+
 #calendar-widget > .widget-layout .react-calendar-wrapper .react-calendar__navigation__prev2-button,
 #calendar-widget
   > .widget-layout

src/components/loader/Loader.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './loader.css';
+
+const Loader = () => {
+  return <span className="loader"></span>;
+};
+
+export default Loader;

src/components/loader/loader.css

@@ -0,0 +1,101 @@
+#calendar-widget > .widget-layout .loader {
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  animation: mulShdSpin 1.1s infinite ease;
+  transform: translateZ(0);
+}
+@keyframes mulShdSpin {
+  0%,
+  100% {
+    box-shadow:
+      0em -2.6em 0em 0em #ffffff,
+      1.8em -1.8em 0 0em var(--dynamic-color-500, 0.2),
+      2.5em 0em 0 0em var(--dynamic-color-500, 0.2),
+      1.75em 1.75em 0 0em var(--dynamic-color-500, 0.2),
+      0em 2.5em 0 0em var(--dynamic-color-500, 0.2),
+      -1.8em 1.8em 0 0em var(--dynamic-color-500, 0.2),
+      -2.6em 0em 0 0em var(--dynamic-color-500, 0.5),
+      -1.8em -1.8em 0 0em var(--dynamic-color-500, 0.7);
+  }
+  12.5% {
+    box-shadow:
+      0em -2.6em 0em 0em var(--dynamic-color-500, 0.7),
+      1.8em -1.8em 0 0em #ffffff,
+      2.5em 0em 0 0em var(--dynamic-color-500, 0.2),
+      1.75em 1.75em 0 0em var(--dynamic-color-500, 0.2),
+      0em 2.5em 0 0em var(--dynamic-color-500, 0.2),
+      -1.8em 1.8em 0 0em var(--dynamic-color-500, 0.2),
+      -2.6em 0em 0 0em var(--dynamic-color-500, 0.2),
+      -1.8em -1.8em 0 0em var(--dynamic-color-500, 0.5);
+  }
+  25% {
+    box-shadow:
+      0em -2.6em 0em 0em var(--dynamic-color-500, 0.5),
+      1.8em -1.8em 0 0em var(--dynamic-color-500, 0.7),
+      2.5em 0em 0 0em #ffffff,
+      1.75em 1.75em 0 0em var(--dynamic-color-500, 0.2),
+      0em 2.5em 0 0em var(--dynamic-color-500, 0.2),
+      -1.8em 1.8em 0 0em var(--dynamic-color-500, 0.2),
+      -2.6em 0em 0 0em var(--dynamic-color-500, 0.2),
+      -1.8em -1.8em 0 0em var(--dynamic-color-500, 0.2);
+  }
+  37.5% {
+    box-shadow:
+      0em -2.6em 0em 0em var(--dynamic-color-500, 0.2),
+      1.8em -1.8em 0 0em var(--dynamic-color-500, 0.5),
+      2.5em 0em 0 0em var(--dynamic-color-500, 0.7),
+      1.75em 1.75em 0 0em #ffffff,
+      0em 2.5em 0 0em var(--dynamic-color-500, 0.2),
+      -1.8em 1.8em 0 0em var(--dynamic-color-500, 0.2),
+      -2.6em 0em 0 0em var(--dynamic-color-500, 0.2),
+      -1.8em -1.8em 0 0em var(--dynamic-color-500, 0.2);
+  }
+  50% {
+    box-shadow:
+      0em -2.6em 0em 0em var(--dynamic-color-500, 0.2),
+      1.8em -1.8em 0 0em var(--dynamic-color-500, 0.2),
+      2.5em 0em 0 0em var(--dynamic-color-500, 0.5),
+      1.75em 1.75em 0 0em var(--dynamic-color-500, 0.7),
+      0em 2.5em 0 0em #ffffff,
+      -1.8em 1.8em 0 0em var(--dynamic-color-500, 0.2),
+      -2.6em 0em 0 0em var(--dynamic-color-500, 0.2),
+      -1.8em -1.8em 0 0em var(--dynamic-color-500, 0.2);
+  }
+  62.5% {
+    box-shadow:
+      0em -2.6em 0em 0em var(--dynamic-color-500, 0.2),
+      1.8em -1.8em 0 0em var(--dynamic-color-500, 0.2),
+      2.5em 0em 0 0em var(--dynamic-color-500, 0.2),
+      1.75em 1.75em 0 0em var(--dynamic-color-500, 0.5),
+      0em 2.5em 0 0em var(--dynamic-color-500, 0.7),
+      -1.8em 1.8em 0 0em #ffffff,
+      -2.6em 0em 0 0em var(--dynamic-color-500, 0.2),
+      -1.8em -1.8em 0 0em var(--dynamic-color-500, 0.2);
+  }
+  75% {
+    box-shadow:
+      0em -2.6em 0em 0em var(--dynamic-color-500, 0.2),
+      1.8em -1.8em 0 0em var(--dynamic-color-500, 0.2),
+      2.5em 0em 0 0em var(--dynamic-color-500, 0.2),
+      1.75em 1.75em 0 0em var(--dynamic-color-500, 0.2),
+      0em 2.5em 0 0em var(--dynamic-color-500, 0.5),
+      -1.8em 1.8em 0 0em var(--dynamic-color-500, 0.7),
+      -2.6em 0em 0 0em #ffffff,
+      -1.8em -1.8em 0 0em var(--dynamic-color-500, 0.2);
+  }
+  87.5% {
+    box-shadow:
+      0em -2.6em 0em 0em var(--dynamic-color-500, 0.2),
+      1.8em -1.8em 0 0em var(--dynamic-color-500, 0.2),
+      2.5em 0em 0 0em var(--dynamic-color-500, 0.2),
+      1.75em 1.75em 0 0em var(--dynamic-color-500, 0.2),
+      0em 2.5em 0 0em var(--dynamic-color-500, 0.2),
+      -1.8em 1.8em 0 0em var(--dynamic-color-500, 0.5),
+      -2.6em 0em 0 0em var(--dynamic-color-500, 0.7),
+      -1.8em -1.8em 0 0em #ffffff;
+  }
+}

src/components/panel/Panel.jsx

@@ -1,28 +1,68 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { displayTypes } from '../../constants/generalConstants';
 import WidgetContext from '../../context/WidgetContext';
 import { CustomCalendar } from '../customCalendar/CustomCalendar';
+import Loader from '../loader/Loader';
 import NoResult from '../noResult/NoResult';
 import ResultHeader from '../resultHeader/ResultHeader';
 import Results from '../results/Results';
 import './panel.css';
 
 const ResultPanel = () => {
-  const { displayType, totalCount } = useContext(WidgetContext);
+  const calendarModalRef = useRef(null);
+
+  const { displayType, totalCount, calendarModalToggle, setCalendarModalToggle, isLoading } =
+    useContext(WidgetContext);
 
   const { t } = useTranslation();
+
+  const calendarPopOverHandler = () => {
+    setCalendarModalToggle(!calendarModalToggle);
+  };
+
+  useEffect(() => {
+    const handleOutsideClick = (event) => {
+      if (
+        calendarModalRef.current &&
+        !calendarModalRef.current.contains(event.target) &&
+        calendarModalToggle
+      ) {
+        setCalendarModalToggle(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [calendarModalToggle]);
+
   return (
     <section className="result-panel-wrapper">
       <ResultHeader />
 
       {displayType === displayTypes.MOBILE && (
         <div className="button-container">
-          <button>{t('date')}</button>
+          <button onClick={calendarPopOverHandler}>{t('date')}</button>
+          {calendarModalToggle && (
+            <div className="calendar-modal-pivot">
+              <div className="calendar-modal-wrapper" ref={calendarModalRef}>
+                <CustomCalendar />
+              </div>
+            </div>
+          )}
         </div>
       )}
-      <div className="result-panel">
-        <div className="results">{totalCount > 0 ? <Results /> : <NoResult />}</div>
+      <div className="result-panel" style={totalCount > 0 ? {} : { alignItems: 'center' }}>
+        {!isLoading ? (
+          <div className="results">{totalCount > 0 ? <Results /> : <NoResult />}</div>
+        ) : (
+          <div className="loader-wrapper">
+            <Loader />
+          </div>
+        )}
         {displayType === displayTypes.DESKTOP && <CustomCalendar />}
       </div>
     </section>

src/components/panel/panel.css

@@ -3,15 +3,21 @@
   gap: 8px;
   width: 100%;
   justify-content: center;
-  align-items: center;
+  min-height: 100px;
 }
 
 #calendar-widget > .widget-layout .result-panel-wrapper .button-container {
   width: 100%;
   padding: 16px 0;
 }
 
+#calendar-widget > .widget-layout .results {
+  width: 100%;
+}
+
 #calendar-widget > .widget-layout .result-panel-wrapper .button-container > button {
+  position: relative;
+
   color: var(--dynamic-color-500);
   width: 100%;
   height: 40px;
@@ -25,3 +31,32 @@
   letter-spacing: 0em;
   text-align: center;
 }
+
+#calendar-widget > .widget-layout .result-panel-wrapper .button-container .calendar-modal-pivot {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+}
+
+#calendar-widget
+  > .widget-layout
+  .result-panel-wrapper
+  .button-container
+  .calendar-modal-pivot
+  > .calendar-modal-wrapper {
+  position: absolute;
+  box-shadow: 0px 8px 32px 0px #00000033;
+  background-color: var(--primary-white-opaque);
+
+  top: 10px;
+  z-index: 10;
+}
+
+#calendar-widget > .widget-layout .result-panel-wrapper .loader-wrapper {
+  width: 100%;
+  min-height: 100%;
+  display: grid;
+  place-content: center;
+}

src/components/results/Results.jsx

@@ -1,12 +1,14 @@
 import React, { useContext } from 'react';
+import { displayTypes } from '../../constants/generalConstants';
 import WidgetContext from '../../context/WidgetContext';
 import Card from '../card/Card';
 
 import './results.css';
 
 const Results = () => {
-  const { data } = useContext(WidgetContext);
-  const screenHeight = window.screen.height - 270;
+  const { data, displayType } = useContext(WidgetContext);
+  const screenHeight =
+    displayType === displayTypes.DESKTOP ? window.screen.height - 275 : window.screen.height - 350;
   return (
     <ul className="card-container" style={{ maxHeight: screenHeight }}>
       {data?.length > 0 &&