Teste

carrismetropolitana · Dec 5, 2023 · d36435b · d36435b
1 parent 1aed5a0
commit d36435b
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 8 deletions.
diff --git a/frontend/components/LinesExplorer/LinesExplorer.js b/frontend/components/LinesExplorer/LinesExplorer.js
@@ -6,6 +6,7 @@ import Pannel from '@/components/Pannel/Pannel';
 import { useTranslations } from 'next-intl';
 import LinesExplorerToolbar from '@/components/LinesExplorerToolbar/LinesExplorerToolbar';
 import LinesExplorerContent from '@/components/LinesExplorerContent/LinesExplorerContent';
+import BetaIcon from '../BetaIcon/BetaIcon';
 
 /* * */
 
@@ -27,9 +28,11 @@ export default function LinesExplorer() {
   // c. Render components
 
   return (
-    <Pannel type="A" title={t('pannel_title')} loading={allLinesLoading || allMunicipalitiesLoading} error={allLinesError || allMunicipalitiesError}>
+    <Pannel type="A" title={t('pannel_title')} loading={allLinesLoading || allMunicipalitiesLoading} error={allLinesError || allMunicipalitiesError} rightSection={<BetaIcon />}>
       <LinesExplorerToolbar />
       <LinesExplorerContent />
     </Pannel>
   );
+
+  //
 }
diff --git a/frontend/components/LinesExplorerContent/LinesExplorerContent.js b/frontend/components/LinesExplorerContent/LinesExplorerContent.js
@@ -8,6 +8,7 @@ import { useLinesExplorerContext } from '@/contexts/LinesExplorerContext';
 import LinesExplorerContentHeader from '@/components/LinesExplorerContentHeader/LinesExplorerContentHeader';
 import LinesExplorerContentPatternPath from '@/components/LinesExplorerContentPatternPath/LinesExplorerContentPatternPath';
 import LinesExplorerContentPatternMap from '@/components/LinesExplorerContentPatternMap/LinesExplorerContentPatternMap';
+import NoDataLabel from '../NoDataLabel/NoDataLabel';
 
 /* * */
 
@@ -24,12 +25,31 @@ export default function LinesExplorerContent() {
   //
   // B. Render components
 
+  //   return (
+  //     linesExplorerContext?.entities?.line?.id && (
+  //       <div className={styles.container}>
+  //         <LinesExplorerContentHeader />
+  //         {linesExplorerContext.entities.pattern?.shape_id && <LinesExplorerContentPatternMap />}
+  //         {linesExplorerContext.entities.pattern?.id && <LinesExplorerContentPatternPath />}
+  //       </div>
+  //     )
+  //   );
+
   return (
     linesExplorerContext?.entities?.line?.id && (
       <div className={styles.container}>
-        <LinesExplorerContentHeader />
-        {linesExplorerContext.entities.pattern?.shape_id && <LinesExplorerContentPatternMap />}
-        {linesExplorerContext.entities.pattern?.id && <LinesExplorerContentPatternPath />}
+        <div className={styles.toolbar}>{/* <LinesExplorerContentHeader /> */}</div>
+        <div className={styles.map}>{linesExplorerContext.entities.pattern?.shape_id && <LinesExplorerContentPatternMap />}</div>
+        <div className={styles.sidebar}>
+          {linesExplorerContext.entities.pattern?.id ? (
+            <>
+              <LinesExplorerContentHeader />
+              <LinesExplorerContentPatternPath />
+            </>
+          ) : (
+            <NoDataLabel text={t('no_selection')} />
+          )}
+        </div>
       </div>
     )
   );

diff --git a/frontend/components/LinesExplorerContent/LinesExplorerContent.module.css b/frontend/components/LinesExplorerContent/LinesExplorerContent.module.css
@@ -4,6 +4,99 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--size-md);
+  /* gap: var(--size-md); */
   background-color: var(--gray0);
 }
+
+/* * */
+/* CONTAINER */
+
+.container {
+  display: grid;
+  grid-template-columns: 5fr 3fr;
+  grid-template-rows: auto 600px;
+  width: 100%;
+}
+
+@media (max-width: 900px) {
+  .container {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 300px minmax(100px, auto);
+  }
+}
+
+@media all and (display-mode: standalone) {
+  .container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    grid-template-rows: auto 1fr;
+  }
+}
+
+@media all and (max-width: 900px) and (display-mode: standalone) {
+  .container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 2fr 3fr;
+    width: 100%;
+    overflow: scroll;
+  }
+}
+
+/* * */
+/* TOOLBAR */
+
+.toolbar {
+  grid-column: 1/3;
+}
+
+@media (max-width: 900px) {
+  .toolbar {
+    grid-column: 1;
+  }
+}
+
+/* * */
+/* MAP */
+
+.map {
+  border-right: 1px solid var(--gray3);
+}
+
+@media (max-width: 900px) {
+  .map {
+    border-right: none;
+    border-bottom: 1px solid var(--gray3);
+  }
+}
+
+/* * */
+/* SIDEBAR */
+
+.sidebar {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 900px) {
+  .sidebar {
+    border: none;
+  }
+}
+
+@media all and (display-mode: standalone) {
+  .sidebar {
+    position: relative;
+    height: 100%;
+  }
+}
+
+/* * */
+/* VALIDATING */
+
+.validating {
+  font-weight: 800;
+  opacity: 0.5;
+}
diff --git a/frontend/components/LinesExplorerContentPatternMap/LinesExplorerContentPatternMap.module.css b/frontend/components/LinesExplorerContentPatternMap/LinesExplorerContentPatternMap.module.css
@@ -2,6 +2,7 @@
 /* CONTAINER */
 
 .container {
-  height: 400px;
+  /* height: 400px; */
+  height: 100%;
   width: 100%;
 }
diff --git a/frontend/components/LinesExplorerToolbar/LinesExplorerToolbar.js b/frontend/components/LinesExplorerToolbar/LinesExplorerToolbar.js
@@ -22,7 +22,7 @@ export default function LinesExplorerToolbar() {
       </div>
       <div className={styles.main}>
         <LinesExplorerToolbarSelectLine />
-        <LinesExplorerToolbarSelectDate />
+        {/* <LinesExplorerToolbarSelectDate /> */}
       </div>
     </div>
   );

diff --git a/frontend/components/LinesExplorerToolbar/LinesExplorerToolbar.module.css b/frontend/components/LinesExplorerToolbar/LinesExplorerToolbar.module.css
@@ -31,7 +31,7 @@
 .main {
   width: 100%;
   display: grid;
-  grid-template-columns: 3fr 1fr;
+  grid-template-columns: 1fr;
   gap: var(--size-lg);
 }