RTL UI layout

peripleo · Mar 11, 2024 · 9257064 · 9257064
1 parent d4026c9
commit 9257064
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 73 deletions.
diff --git a/src/components/LoadIndicator/LoadIndicator.css b/src/components/LoadIndicator/LoadIndicator.css
@@ -1,7 +1,7 @@
 .kima-load-indicator {
   position:absolute;
   top: 22px;
-  left: 370px;
+  right: 285px;
   width: 40px;
   height: 40px;
   background-color: #fff;

diff --git a/src/index.css b/src/index.css
@@ -84,18 +84,24 @@ html, body, #app {
 .kima-nli-logo {
   bottom: 0;
   position: absolute;
-  right: 0;
+  left: 0;
 }
 .kima-nli-logo img.desktop {
-  margin: 0 15px 25px 0;
-  width: 240px;
+  margin: 0 10px 25px 10px;
+  width: 230px;
 }
 
 .kima-nli-logo img.mobile {
   margin: 0 15px 45px 0;
   width: 180px;
 }
 
+.p6o-kima-map-controls-container {
+  left: 20px;
+  position: absolute;
+  top: 20px;
+}
+
 .p6o-aggs-values li {
   justify-content: flex-end;
 }

diff --git a/src/index.jsx b/src/index.jsx
@@ -64,37 +64,37 @@ const App = () => {
             </Mobile>
 
             <Desktop>
-              <Scrollable>
-                <AggregationsOverlay
-                  colors={TYPE_COLORS} 
-                  responsive={true} 
-                  displayFacets={['RecordTypes', 'RelationshipTypes']} 
-                  facetLabels={['Record Types', 'Relationships']} />
-              </Scrollable>
+              <AggregationsOverlay
+                colors={TYPE_COLORS} 
+                responsive={true} 
+                displayFacets={['RecordTypes', 'RelationshipTypes']} 
+                facetLabels={['Record Types', 'Relationships']} />
             </Desktop>
 
-            <ZoomControl />
-
-            <MyLocationControl />
-
-            <InfoControl className="kima-welcome" dir="rtl">
-              <h1>ברוכות וברוכים הבאים לממשק הגילוי והחיפוש הגיאוגרפי של הספרייה הלאומית!</h1>
-
-              <p>הממשק מאפשר לצפות באוצרות הדיגיטליים של הספרייה על גבי מפה אינטראקטיבית. כך תוכלו לאתר רשומות לפי המקום בו הן נוצרו או לפי המקום אותו הן מתארות.
-שימו לב: הממשק כולל כרגע רק פריטים שיש להם מיקום גיאוגרפי הזמינים לגישה דיגיטלית מרחוק.
-</p>
-
-              <p><strong>איך להשתמש בממשק?</strong></p>
-
-              <ul>
-                <li>הזיזו את המפה ובצעו התקרבות והתרחקות באמצעות העכבר.</li>
-                <li>לחצו על מקום מסוים על מנת לראות את כל הפריטים שקשורים אליו.</li>
-                <li>לחיצה על האייקון <SiWikidata /> תפתח את דף המקום בויקינתונים.</li>
-                <li>ניתן לסנן כרגע את הרשומות לפי סוג החומר או לפי הקשר בין המיקום הגיאוגרפי והרשומה.</li>
-              </ul>
-
-              <p>הממשק נוצר על ידי סיני רוסינק, גיל שליט וריינר סימון במסגרת תחרות "tarboot" שאורגנה ע"י יד הנדיב והספרייה הלאומית.</p>
-            </InfoControl>
+            <div className="p6o-kima-map-controls-container ">
+              <ZoomControl />
+
+              <MyLocationControl />
+
+              <InfoControl className="kima-welcome" dir="rtl">
+                <h1>ברוכות וברוכים הבאים לממשק הגילוי והחיפוש הגיאוגרפי של הספרייה הלאומית!</h1>
+
+                <p>הממשק מאפשר לצפות באוצרות הדיגיטליים של הספרייה על גבי מפה אינטראקטיבית. כך תוכלו לאתר רשומות לפי המקום בו הן נוצרו או לפי המקום אותו הן מתארות.
+  שימו לב: הממשק כולל כרגע רק פריטים שיש להם מיקום גיאוגרפי הזמינים לגישה דיגיטלית מרחוק.
+  </p>
+
+                <p><strong>איך להשתמש בממשק?</strong></p>
+
+                <ul>
+                  <li>הזיזו את המפה ובצעו התקרבות והתרחקות באמצעות העכבר.</li>
+                  <li>לחצו על מקום מסוים על מנת לראות את כל הפריטים שקשורים אליו.</li>
+                  <li>לחיצה על האייקון <SiWikidata /> תפתח את דף המקום בויקינתונים.</li>
+                  <li>ניתן לסנן כרגע את הרשומות לפי סוג החומר או לפי הקשר בין המיקום הגיאוגרפי והרשומה.</li>
+                </ul>
+
+                <p>הממשק נוצר על ידי סיני רוסינק, גיל שליט וריינר סימון במסגרת תחרות "tarboot" שאורגנה ע"י יד הנדיב והספרייה הלאומית.</p>
+              </InfoControl>
+            </div>
 
             {loading && 
               <LoadIndicator />

diff --git a/src/peripleo/controls/Aggregations/AggregationsOverlay.css b/src/peripleo/controls/Aggregations/AggregationsOverlay.css
@@ -1,6 +1,14 @@
 .p6o-aggs {
-  width: 340px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  padding: 0;
   pointer-events: none !important;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 300px;
 }
 
 .p6o-aggs.fullscreen {
@@ -16,13 +24,17 @@
   justify-content: space-between;
   background-color: var(--p6o-controls-bg-color-hi);
   padding: 6px;
-  margin: 0 0 10px 0;
+  margin: 0;
   pointer-events: all;
   border: var(--p6o-controls-border);
   border-radius: 50vh;
   box-shadow: var(--p6o-controls-box-shadow);
 }
 
+.p6o-aggs-carousel-container {
+  padding: 20px 20px 10px 20px;
+}
+
 .p6o-aggs.fullscreen .p6o-aggs-carousel {
   margin-bottom: 20px;
 }
@@ -60,7 +72,13 @@
 }
 
 .p6o-aggs-values {
+  flex-grow: 1;
+  max-height: 100%;
+  overflow-y: auto;
+  padding: 0 20px 100px 20px;
   pointer-events: none !important;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;  /* IE 10+ */
 }
 
 .p6o-aggs-values ul {
@@ -90,6 +108,7 @@
   background-color: #fff;
   box-shadow: var(--p6o-controls-box-shadow);
   transition:transform 0.15s;
+  z-index: 999;
 }
 
 .p6o-aggs.fullscreen .p6o-aggs-values .p6o-agg-value-wrapper {

diff --git a/src/peripleo/controls/Aggregations/AggregationsOverlay.tsx b/src/peripleo/controls/Aggregations/AggregationsOverlay.tsx
@@ -34,13 +34,13 @@ export const AggregationsOverlay = (props: AggregationsProps) => {
         activeAggregation={activeAggregation}
         onChangeAggregation={setActiveAggregation} />
 
-      {search.result?.aggregations &&
+      {search.result?.aggregations && (
         <AggregationValueList
           buckets={search.result.aggregations[activeAggregation].buckets} 
           colors={props.colors} 
           filterValues={filterValues} 
           onToggleFilterValue={onToggleFilterValue} />
-      }
+      )}
     </div>
   )
 

diff --git a/src/peripleo/controls/Aggregations/components/AggregationsCarousel.tsx b/src/peripleo/controls/Aggregations/components/AggregationsCarousel.tsx
@@ -36,26 +36,28 @@ export const AggregationsCarousel = (props: AggregationsCarouselProps) => {
   }
 
   return (
-    <div className="p6o-aggs-carousel">
-      <button 
-        tabIndex={4}
-        aria-label="Previous filter category"
-        onClick={onChangeAggregation(-1)}>
-        <HiOutlineChevronLeft />
-      </button>
+    <div className="p6o-aggs-carousel-container">
+      <div className="p6o-aggs-carousel">
+        <button 
+          tabIndex={4}
+          aria-label="Previous filter category"
+          onClick={onChangeAggregation(-1)}>
+          <HiOutlineChevronLeft />
+        </button>
+
+        <h3 
+          aria-live="polite"
+          aria-atomic={true}>
+          {label}
+        </h3>
 
-      <h3 
-        aria-live="polite"
-        aria-atomic={true}>
-        {label}
-      </h3>
-
-      <button
-        tabIndex={5}
-        aria-label="Next filter category"
-        onClick={onChangeAggregation(1)}>
-        <HiOutlineChevronRight />
-      </button>
+        <button
+          tabIndex={5}
+          aria-label="Next filter category"
+          onClick={onChangeAggregation(1)}>
+          <HiOutlineChevronRight />
+        </button>
+      </div>
     </div>
   )
 

diff --git a/src/peripleo/controls/Info/InfoControl.css b/src/peripleo/controls/Info/InfoControl.css
@@ -1,9 +1,3 @@
-.p6o-controls-btn.p6o-info {
-  position: absolute;
-  top: 170px;
-  right: 20px;
-}
-
 .p6o-controls-btn.p6o-info svg {
   font-size: 18px;
 }

diff --git a/src/peripleo/controls/MyLocation/MyLocationControl.css b/src/peripleo/controls/MyLocation/MyLocationControl.css
@@ -1,9 +1,3 @@
-.p6o-controls-btn.p6o-my-location {
-  position: absolute;
-  top: 120px;
-  right: 20px;
-}
-
 .p6o-controls-btn.p6o-my-location svg {
   font-size: 18px;
 }
diff --git a/src/peripleo/controls/Zoom/ZoomControl.css b/src/peripleo/controls/Zoom/ZoomControl.css
@@ -1,7 +1,5 @@
 .p6o-zoom-container {
-  position: absolute;
-  top: 20px;
-  right: 20px;
+
 }
 
 .p6o-controls-btn {

diff --git a/src/peripleo/map/components/Map/MapLibre/MapLibre.tsx b/src/peripleo/map/components/Map/MapLibre/MapLibre.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Point } from 'mapbox-gl';
-import ReactMapGL, { MapLayerMouseEvent, MapRef } from 'react-map-gl';
+import ReactMapGL, { AttributionControl, MapLayerMouseEvent, MapRef } from 'react-map-gl';
 import { useRecoilState } from 'recoil';
 import { mapViewState, isValidViewState, selectedState } from '../../../state';
 import { MapHover } from '../../../types';
@@ -117,6 +117,7 @@ export const MapLibre = (props: MapLibreProps) => {
 
       {isValidViewState(viewState) &&
         <ReactMapGL
+          attributionControl={false}
           clickTolerance={device.isTouchDevice ? 10 : 3}
           ref={mapRef}
           initialViewState={viewState}
@@ -126,7 +127,8 @@ export const MapLibre = (props: MapLibreProps) => {
           onMove={evt => setViewState(evt.viewState)}>
 
           {React.Children.map(props.children, c => React.cloneElement(c, { data }))}
-
+
+          <AttributionControl position="bottom-left" />
         </ReactMapGL>
       }