initial-homepage-sicnecher-commit

Author: adamEfraty

src/locale/en.json

@@ -4,7 +4,8 @@
     "databus_definition": "The open platform for real data on the quality of public transportation lines in Israel",
     "website_goal": "The purpose of the site is to improve the quality of public transportation in Israel by providing reliable information to journalists, citizens, transportation companies, and government officials in Israel.",
     "show_button": "Show",
-    "copyright": "© The Public Knowledge Workshop"
+    "copyright": "© The Public Knowledge Workshop",
+    "open_menu": "Start Exploring"
   },
   "homepage_title": "Home",
   "dashboard_page_title": "Public transport operators according to planned trips",
@@ -19,6 +20,7 @@
   "gaps_patterns_page_description": "A graphic display of routes performed according to schedule, grouped by time of day\\severity, by user-given bus operator, route number, route & date",
   "singleline_map_page_title": "Map by line",
   "singleline_map_page_description": "Display of bus route on map by user-given bus operator, route number, route, date & time",
+  "open_menu_description": "Displays different options and parameters which are accessible in the application",
   "choose_datetime": "Date and time",
   "choose_date": "Date",
   "choose_time": "Time",

src/locale/he.json

@@ -4,7 +4,8 @@
     "databus_definition": "הפלטפורמה הפתוחה לנתוני אמת על איכות קווי התחבורה הציבורית בישראל",
     "website_goal": "מטרת האתר היא לשפר את איכות התחבורה הציבורית בארץ ע\"י מתן מידע אמין לעיתונאים, אזרחים, חברות התחבורה, וגורמי ממשל בישראל.",
     "show_button": "הצג",
-    "copyright": "© הסדנא לידע ציבורי (ע\"ר)"
+    "copyright": "© הסדנא לידע ציבורי (ע\"ר)",
+    "open_menu": "תתחיל לחקור"
   },
   "homepage_title": "ראשי",
   "dashboard_page_title": "קיום נסיעות",
@@ -19,6 +20,7 @@
   "gaps_patterns_page_description": "תצוגה גרפית של אחוז הנסיעות שבוצעו בהתאם ללוח הזמנים בחלוקה לשעות\\רמת חומרה, לפי חברת אוטובוסים, מספר קו, מסלול ותאריך",
   "singleline_map_page_title": "מפה לפי קו",
   "singleline_map_page_description": "תצוגה של מסלול קו על מפה ע\"פ נתוני חברת אוטובוסים, קו, מסלול, תאריך ושעה",
+  "open_menu_description": "תצוגה של שלל אפשרויות ופרמטרים שונים הניתנים לביצוע באפליקצייה",
   "choose_datetime": "תאריך ושעה",
   "choose_date": "תאריך",
   "choose_time": "שעה",

src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss

@@ -1,6 +1,9 @@
 .HbarChart {
     .entry {
         position: relative;
+        margin-bottom: 2%;
+        padding: 3px;
+        border-radius: 8px;
 
         .entryName {
             margin-left: 10px;

src/pages/homepage/HomePage.scss

@@ -25,7 +25,7 @@
 
     footer {
         background-color: #b0d0a4;
-        width: 100%;
+        width: 100vw;
         font-weight: 500;
         position: absolute;
         bottom: 0;
@@ -37,12 +37,17 @@
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
-
+    margin-bottom:10%;
+    
     @media (width <=600px) {
         margin-bottom: 3rem;
     }
 }
 
+.menu-link {
+    margin-bottom: 15%;
+}
+
 .page-link {
     display: flex;
     flex-direction: column;

src/pages/homepage/HomePage.tsx

@@ -5,70 +5,104 @@ import {
   DirectionsBusOutlined,
   HistoryOutlined,
   MapOutlined,
+  MenuOutlined,
   ViewKanbanOutlined,
 } from '@mui/icons-material'
-import { SvgIconProps } from '@mui/material'
+import { SvgIconProps, Tooltip } from '@mui/material'
+import React, { useContext, useEffect, useState } from 'react'
 import busImage from '../../img/busImg.png'
-
-export const HomePage = () => {
-  const { t } = useTranslation()
-
-  return (
-    <div className="container">
-      <img src={busImage} alt="Public Transportaion Bus Illustration" />
-      <h1>{t('homepage.welcome')}</h1>
-      <h2>{t('homepage.databus_definition')}</h2>
-      <p>{t('homepage.website_goal')}</p>
-      <section className="links">
-        <PageLink
-          icon={<HistoryOutlined />}
-          label={t('timeline_page_title')}
-          description={t('timeline_page_description')}
-          to="/timeline"
-        />
-        <PageLink
-          icon={<DirectionsBusOutlined />}
-          label={t('gaps_page_title')}
-          description={t('gaps_page_description')}
-          to="/gaps"
-        />
-        <PageLink
-          icon={<ViewKanbanOutlined />}
-          label={t('gaps_patterns_page_title')}
-          description={t('gaps_patterns_page_description')}
-          to="/gaps_patterns"
-        />
-        <PageLink
-          icon={<MapOutlined />}
-          label={t('time_based_map_page_title')}
-          description={t('time_based_map_page_description')}
-          to="/map"
-        />
-      </section>
-      <footer>{`${t('homepage.copyright')} ${new Date().getFullYear()}`}</footer>
-    </div>
-  )
-}
+import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
 
 const PageLink = ({
   icon,
   label,
-  description,
   to,
 }: {
   icon: React.ReactElement<SvgIconProps>
   label: string
-  description: string
-  to: To
+  to: To | (() => void)
 }) => {
   const { t } = useTranslation()
 
   return (
     <div className="page-link">
       {icon}
       <span>{label}</span>
-      <NavLink to={to}>{t('homepage.show_button')}</NavLink>
-      <p>{description}</p>
+      {typeof to == 'function' ? (
+        <a onClick={to}>{t('homepage.show_button')}</a>
+      ) : (
+        <NavLink to={to}>{t('homepage.show_button')}</NavLink>
+      )}
+    </div>
+  )
+}
+
+const wrapToolTip = (element: React.ReactElement, description: string) => {
+  return (
+    <Tooltip
+      placement={'top'}
+      title={<div style={{ fontSize: 15, textAlign: 'center' }}>{description}</div>}
+      followCursor={true}>
+      {element}
+    </Tooltip>
+  )
+}
+
+export const HomePage = () => {
+  const { t } = useTranslation()
+  const [isWide, setIsWide] = useState(window.innerWidth > 450 ? true : false)
+  const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
+
+  useEffect(() => {
+    window.addEventListener('resize', () => {
+      setIsWide(window.innerWidth > 450 ? true : false)
+    })
+    return () => {
+      window.removeEventListener('resize', () => console.log('done'))
+    }
+  }, [])
+
+  return (
+    <div className="container">
+      <img src={busImage} alt="Public Transportaion Bus Illustration" />
+      <h1>{t('homepage.welcome')}</h1>
+      <h2>{t('homepage.databus_definition')}</h2>
+      <p>{t('homepage.website_goal')}</p>
+      {isWide ? (
+        <section className="links">
+          <PageLink
+            icon={wrapToolTip(<HistoryOutlined />, t('timeline_page_description'))}
+            label={t('timeline_page_title')}
+            to="/timeline"
+          />
+          <PageLink
+            icon={wrapToolTip(<DirectionsBusOutlined />, t('gaps_page_description'))}
+            label={t('gaps_page_title')}
+            to="/gaps"
+          />
+          <PageLink
+            icon={wrapToolTip(<ViewKanbanOutlined />, t('gaps_patterns_page_description'))}
+            label={t('gaps_patterns_page_title')}
+            to="/gaps_patterns"
+          />
+          <PageLink
+            icon={wrapToolTip(<MapOutlined />, t('time_based_map_page_description'))}
+            label={t('time_based_map_page_title')}
+            to="/map"
+          />
+        </section>
+      ) : (
+        <section className="menu-link">
+          <PageLink
+            icon={wrapToolTip(<MenuOutlined />, t('open_menu_description'))}
+            label={t('homepage.open_menu')}
+            to={() => {
+              setDrawerOpen(true)
+            }}
+          />
+        </section>
+      )}
+      <footer>{`${t('homepage.copyright')} ${new Date().getFullYear()}`}</footer>
     </div>
   )
 }