Merge branch 'main' of https://git.smc.it/openk9/openk9 into 1058-int…

…egrazione-api-generativa
smclab · Sep 23, 2024 · 5dade3e · 5dade3e
2 parents 366515f + bb91947
commit 5dade3e
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 91 deletions.
diff --git a/js-packages/search-frontend/src/App.tsx b/js-packages/search-frontend/src/App.tsx
@@ -6,9 +6,9 @@ import "./index.css";
 import "./app.css";
 import { MaintenancePage } from "./components/MaintenancePage";
 import "./ScrollBar.css";
-import { FilterHorizontalSvg } from "./svgElement/FilterHorizontalSvg";
 import "./components/dataRangePicker.css";
 import { CalendarMobileSvg } from "./svgElement/CalendarMobileSvg";
+import { FilterHorizontalSvg } from "./svgElement/FilterHorizontalSvg";
 import moment from "moment";
 import { DeleteLogo } from "./components/DeleteLogo";
 import { useTranslation } from "react-i18next";
@@ -67,8 +67,20 @@ export function App() {
     });
   }, [openk9]);
 
+  React.useEffect(() => {
+    if (isVisibleFilters || isVisibleSearchMobile || isVisibleCalendar) {
+      document.body.classList.add("no-scroll");
+    } else {
+      document.body.classList.remove("no-scroll");
+    }
+    return () => {
+      document.body.classList.remove("no-scroll");
+    };
+  }, [isVisibleFilters, isVisibleCalendar, isVisibleSearchMobile]);
+
   return (
     <div
+      id="openk9-body"
       className="openk9-body"
       css={css`
         background-color: var(
@@ -143,7 +155,8 @@ export function App() {
           );
 
           @media (max-width: 480px) {
-            margin: 0 -30px;
+            margin: 0 0px;
+            padding: 8px 20px;
           }
         `}
       >
@@ -205,7 +218,7 @@ export function App() {
           padding: 8px 16px 0;
           margin-bottom: -16px;
           overflow: auto;
-
+          height: max-content;
           @media (max-width: 480px) {
             display: none;
           }
@@ -237,13 +250,16 @@ export function App() {
         >
           <div
             css={css`
+              display: flex;
+              gap: 18px;
+              align-items: flex-end;
               width: 100%;
             `}
             onClick={handleClick}
             className="openk9-update-configuration-search"
             ref={(element) => openk9.updateConfiguration({ search: element })}
           />
-          <div
+          {/* <div
             css={css`
               @media (max-width: 768px) {
                 display: flex;
@@ -296,7 +312,7 @@ export function App() {
                 )}
               </button>
             )}
-          </div>
+          </div> */}
 
           <div
             css={css`
@@ -472,12 +488,14 @@ export function App() {
           })
         }
       />
-
       <div
         className="openk9-filters-container openk9-box"
         ref={(element) => openk9.updateConfiguration({ filters: element })}
         css={css`
           grid-area: filters;
+          display: flex;
+          height: max-content;
+          flex-direction: column-reverse;
           background-color: var(
             --openk9-embeddable-search--primary-background-color
           );
@@ -492,7 +510,17 @@ export function App() {
             display: none;
           }
         `}
-      />
+      >
+        <div
+          css={css`
+            padding: 16px;
+          `}
+          ref={(element) =>
+            openk9.updateConfiguration({ dataRangePickerVertical: { element } })
+          }
+        ></div>
+      </div>
+
       {searchText !== undefined && (
         <div
           css={css`
@@ -547,7 +575,7 @@ export function App() {
               )}
             </button>
           </div>
-          <div
+          {/* <div
             ref={(element) =>
               openk9.updateConfiguration({
                 generateResponse: element,
@@ -557,7 +585,7 @@ export function App() {
               color: black;
               display: ${isPanelVisible ? "block" : "none"};
             `}
-          ></div>
+          ></div> */}
         </div>
       )}
 
@@ -574,12 +602,8 @@ export function App() {
         css={css`
           grid-area: result;
           margin-top: ${searchText !== undefined ? "20px" : "unset"};
-          overflow-y: auto;
-          background-color: var(
-            --openk9-embeddable-search--primary-background-color
-          );
-          border-radius: 8px;
-          border: 1px solid var(--openk9-embeddable-search--border-color);
+          overflow: auto;
+          height: max-content;
         `}
       />
 
@@ -627,6 +651,7 @@ export function App() {
           background-color: var(
             --openk9-embeddable-search--primary-background-color
           );
+          height: fit-content;
           border-radius: 8px;
           border: 1px solid var(--openk9-embeddable-search--border-color);
           margin-top: ${searchText !== undefined ? "20px" : "unset"};

diff --git a/js-packages/search-frontend/src/app.css b/js-packages/search-frontend/src/app.css
@@ -24,6 +24,11 @@
   background-color: white;
 }
 
+body {
+  background-color: var(--openk9-embeddable-search--secondary-background-color);
+  overflow-x: hidden !important;
+}
+
 .openk9-embeddable-search--result-container {
   margin: 16px 16px 0px 16px;
   border: 2px solid
@@ -49,5 +54,5 @@
 }
 
 .no-scroll {
-  overflow: hidden;
-}
+  overflow: hidden !important;
+}
diff --git a/js-packages/search-frontend/src/components/DateRangePickerVertical.tsx b/js-packages/search-frontend/src/components/DateRangePickerVertical.tsx
@@ -36,10 +36,6 @@ export function DataRangePickerVertical({
   const [focusedStartInput, setFocusedStartInput] = React.useState(false);
   const [endDate, setEndDate] = React.useState<any | null>(null);
   const [focusedEndInput, setFocusedEndInput] = React.useState(false);
-  const [manageAccessibilityStart, setManageAccessibilityStart] =
-    React.useState<boolean>(false);
-  const [manageAccessibilityEnd, setManageAccessibilityEnd] =
-    React.useState<boolean>(false);
   const [dataEnd, setDataEnd] = React.useState("");
   const [dataStart, setDataStart] = React.useState("");
   const [validationStart, setValidationStart] = React.useState("");
@@ -121,26 +117,6 @@ export function DataRangePickerVertical({
     }
   }
 
-  const [date, setDate] = React.useState(null);
-
-  const renderCustomInput = ({
-    ref,
-    onFocus,
-    onKeyDown,
-  }: {
-    ref: any;
-    onFocus: any;
-    onKeyDown: any;
-  }) => (
-    <button
-      ref={ref}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
-      className="your-custom-class"
-    >
-      Seleziona una data
-    </button>
-  );
   return (
     <div
       className={`DateRangePickerVertical-container openk9-class-tab-${classTab}`}
@@ -149,18 +125,13 @@ export function DataRangePickerVertical({
         height: "100%",
         justifyContent: "center",
         flexDirection: "column",
-        padding: "15px 0 15px 15px",
       }}
     >
       <div className="DateRangePickerVertical-startDate-container">
         <p className="DateRangePickerVertical-date-title">
           Dal ({t("gg/mm/aaaa")}):
         </p>
         <div
-          onClick={() => setManageAccessibilityStart(!manageAccessibilityStart)}
-          onKeyDown={(e) =>
-            e.key === "Tab" ? setManageAccessibilityStart(false) : null
-          }
           css={css`
             display: flex;
           `}
@@ -210,6 +181,7 @@ export function DataRangePickerVertical({
               border-left: 1px solid black;
               border-bottom: 1px solid black;
               min-width: 130px;
+              width: 100%;
               height: 42px;
             `}
           />
@@ -251,6 +223,9 @@ export function DataRangePickerVertical({
                    .SingleDatePickerInput_clearDate__default_2{
                       width:88%;
                     }
+                      .SingleDatePickerInput__withBorder {
+                        background: inherit;
+                      }
            `}</style>
           </div>
         </div>
@@ -265,10 +240,6 @@ export function DataRangePickerVertical({
           Al ({t("gg/mm/aaaa")}):
         </p>
         <div
-          onClick={() => setManageAccessibilityEnd(!manageAccessibilityEnd)}
-          onKeyDown={(e) =>
-            e.key === "Tab" ? setManageAccessibilityEnd(false) : null
-          }
           css={css`
             display: flex;
           `}
@@ -318,6 +289,7 @@ export function DataRangePickerVertical({
               border-left: 1px solid black;
               border-bottom: 1px solid black;
               min-width: 130px;
+              width: 100%;
               height: 42px;
             `}
           />

diff --git a/js-packages/search-frontend/src/components/Detail.tsx b/js-packages/search-frontend/src/components/Detail.tsx
@@ -108,11 +108,10 @@ function Detail<E>(props: DetailProps<E>) {
       aria-labelledby="title-preview-openk9"
       className="openk9-detail-overlay-scrollbars-component"
       css={css`
-        position: relative;
         width: 100%;
         height: 100%;
         box-sizing: border-box;
-        overflow: auto;
+        min-height: 350px;
         ::-webkit-scrollbar {
           width: 6px;
           height: 6px;
@@ -223,7 +222,6 @@ function Detail<E>(props: DetailProps<E>) {
         <div
           className="openk9-detail-container-card button-start-detail"
           css={css`
-            position: absolute;
             width: 100%;
             box-sizing: border-box;
             padding: 8px 16px;
@@ -261,7 +259,7 @@ function Detail<E>(props: DetailProps<E>) {
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            height: 100%;
+            height: 60vh;
           `}
         >
           <h3>{t("no-details")}</h3>

diff --git a/js-packages/search-frontend/src/components/FilterCategoryDynamic.tsx b/js-packages/search-frontend/src/components/FilterCategoryDynamic.tsx
@@ -410,6 +410,7 @@ function FilterCategoryDynamic({
                 display: flex;
                 margin-left: 12px;
                 margin-top: 10px;
+                margin-bottom: 20px;
                 justify-content: center;
                 @media (max-width: 480px) {
                   margin-top: 15px;

diff --git a/js-packages/search-frontend/src/components/Filters.tsx b/js-packages/search-frontend/src/components/Filters.tsx
@@ -92,9 +92,9 @@ function Filters({
       className="openk9-filter-overlay-scrollbars"
       css={css`
         overflow-y: auto;
-        position: relative;
         height: 100%;
         border-radius: 8px;
+        overflow-x: hidden;
         ::-webkit-scrollbar {
           width: 6px;
           height: 6px;
@@ -218,9 +218,7 @@ function Filters({
       <div
         className="openk9-filters-container-internal"
         css={css`
-          position: absolute;
           padding: 16px 16px 0px 0px;
-          width: calc(100% - 32px);
         `}
       >
         {suggestionCategories.data?.length === 0 && !preFilters && (

diff --git a/js-packages/search-frontend/src/components/FiltersMobileLiveChange.tsx b/js-packages/search-frontend/src/components/FiltersMobileLiveChange.tsx
@@ -158,11 +158,10 @@ function FiltersMobileLiveChange<E>({
           {t("close")} <DeleteLogo heightParam={8} widthParam={8} />
         </button>
       </div>
-      <OverlayScrollbarsComponent
+      <div
         className="openk9-filter-overlay-scrollbars"
         style={{
           overflowY: "auto",
-          position: "relative",
           height: "calc(100vh - 210px)",
           borderRadius: "8px",
         }}
@@ -195,7 +194,7 @@ function FiltersMobileLiveChange<E>({
             ) : null
           }
         />
-      </OverlayScrollbarsComponent>
+      </div>
 
       <footer
         className="openk9-filter-horizontal-container-submit"
@@ -210,6 +209,12 @@ function FiltersMobileLiveChange<E>({
             padding-inline: 20px;
             flex-direction: column;
           }
+          @media (min-width: 481px) and (max-width: 768px) {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            width: 180px;
+          }
         `}
       >
         <button
@@ -381,6 +386,7 @@ function ViewAllTabs({
       <ul
         className="openk9-filter-tabs-list"
         css={css`
+          padding: 0px;
           margin: 10px 0px;
         `}
       >