Ajit | Added footer (#107)

* Ajit | Added footer * Ajit | Fixed scroll and styling issue * Ajit | Added Branding links and fixed 'connection status' onClick issue * Ajit | Fixed typo
bored-engineers · Sep 16, 2020 · 1ecffa2 · 1ecffa2
1 parent 9c6bfdf
commit 1ecffa2
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 12 deletions.
diff --git a/packages/webapp/src/components/board/Board.scss b/packages/webapp/src/components/board/Board.scss
@@ -2,7 +2,11 @@
     flex-grow: 1;
 }
 .board-content{
+    margin-bottom: 60px;
     margin-top: 1vh;
+    overflow-y: auto;
+    height: 100vh;
+    padding-bottom: 165px;
 }
 .category{
     padding: 0 1vw;
@@ -37,6 +41,7 @@
 
 }
 .toolbar-box{
+    margin-top: 65px;
     padding: 0.5%;
     border-bottom-color: rgb(194, 194, 194) !important;
 }

diff --git a/packages/webapp/src/components/board/Board.tsx b/packages/webapp/src/components/board/Board.tsx
@@ -20,6 +20,7 @@ import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 
 import './Board.scss';
 import { getUserIDStorageKey } from '../../common-utils';
+import Footer from '../common/footer/Footer';
 
 type NoteType = { category: string, text: string, boardId: string, cardId: string, votes: string[] };
 type TBoardStateProps = { userId: string; boardId: string; safetyScores: number[], connectionStatus: ConnectionStatus, notes: any }
@@ -150,6 +151,7 @@ const Boards = ({
                     ))}
                 </Grid>
             </div>
+            <Footer />
             <NoteForm noteForm={noteForm} setNoteForm={setNoteForm} />
             <SafetyCheck safetyCheck={safetyCheck} setSafetyCheck={setSafetyCheck} safetyScoreSubmitHandle={safetyScoreSubmitHandler} />
         </div>

diff --git a/packages/webapp/src/components/common/footer/Footer.scss b/packages/webapp/src/components/common/footer/Footer.scss
@@ -0,0 +1,21 @@
+.custom-footer{
+    top: auto !important;
+    bottom: 0;
+    height: 45px;
+    flex-grow: 1;
+}
+.branding-text{
+    color:#5a5858;
+    flex-grow: 1;
+    margin-left: 2vh !important;
+    margin-bottom: 1.35em !important;
+}
+.feedback-text{
+    color:#5a5858;
+    margin-right: 2vh !important;
+    margin-bottom: 1.35em !important;
+}
+.toolbar{
+    padding-left: 0.3% !important;
+    padding-right: 0.3% !important;
+}
diff --git a/packages/webapp/src/components/common/footer/Footer.tsx b/packages/webapp/src/components/common/footer/Footer.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import { CssBaseline, Typography } from "@material-ui/core";
+
+import './Footer.scss';
+
+const Footer = () => {
+    return (
+        <React.Fragment>
+            <CssBaseline />
+            <AppBar position="fixed" color="default" className='custom-footer'>
+                <Toolbar className="toolbar">
+                    <Typography className='branding-text' variant="caption" display="block" gutterBottom>From the minds of <a rel='noopener noreferrer' target='_blank' href='https://github.com/orgs/bored-engineers/people'>Bored Engineers</a></Typography>
+                    <Typography className='feedback-text' variant="caption" display="block" gutterBottom>Please provide your valuable <a href='#/survey'>feedback here</a>.</Typography>
+                </Toolbar>
+            </AppBar>
+        </React.Fragment>
+    );
+}
+
+export default Footer;
diff --git a/packages/webapp/src/components/common/navbar/Navbar.tsx b/packages/webapp/src/components/common/navbar/Navbar.tsx
@@ -13,7 +13,7 @@ const Navbar = () => {
     const browserHistory = useHistory();
     return (
         <div className='navbar'>
-            <AppBar position="static">
+            <AppBar position="fixed">
                 <Toolbar className="toolbar">
                     <Avatar variant="rounded" src="Logo.png" className="navbar-logo" onClick={() => { browserHistory.push('/') }}>
                         <img alt="Home Logog" src={HomeLogo} />

diff --git a/packages/webapp/src/components/common/navbar/board-info/BoardInfo.tsx b/packages/webapp/src/components/common/navbar/board-info/BoardInfo.tsx
@@ -3,10 +3,8 @@ import { connect } from 'react-redux';
 import { exportBoard } from '../../../../services/board.service'
 import Button from '@material-ui/core/Button';
 import { ButtonGroup, Menu, MenuItem, Divider, ListItemIcon, ListItemText } from '@material-ui/core';
-import { useHistory } from 'react-router'
 import PictureAsPdfRoundedIcon from '@material-ui/icons/PictureAsPdfRounded';
 import FileCopyRoundedIcon from '@material-ui/icons/FileCopyRounded';
-import FeedbackRoundedIcon from '@material-ui/icons/FeedbackRounded';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
@@ -28,7 +26,6 @@ type TBoardInfoDispatchProps = {
 type TBoardInfoProps = TBoardInfoStateProps & TBoardInfoDispatchProps;
 
 const BoardInfo = ({ boardId, connectionStatus, addToastMessage }: TBoardInfoProps) => {
-    const browserHistory = useHistory();
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
     const onClickBoardInfoHeading = async (event: any) => {
@@ -48,10 +45,6 @@ const BoardInfo = ({ boardId, connectionStatus, addToastMessage }: TBoardInfoPro
         exportBoard(boardId);
     };
 
-    const onFeedBack = (event: any) => {
-        setAnchorEl(null);
-        browserHistory.push(`/survey`);
-    };
     const handleClose = () => {
         setAnchorEl(null);
     };
@@ -76,14 +69,12 @@ const BoardInfo = ({ boardId, connectionStatus, addToastMessage }: TBoardInfoPro
                     anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
                     transformOrigin={{ vertical: 'top', horizontal: 'center' }}
                 >
-                    <MenuItem dense onClick={onExportBoard}><ListItemIcon>{getConnectionStatusIcon()}</ListItemIcon> <ListItemText className='list-item-text' primary={getConnectionText()} /></MenuItem>
+                    <MenuItem dense><ListItemIcon>{getConnectionStatusIcon()}</ListItemIcon> <ListItemText className='list-item-text' primary={getConnectionText()} /></MenuItem>
                     <Divider light />
-
                     <MenuItem dense onClick={onBoardCopyCLick}><ListItemIcon><FileCopyRoundedIcon className="menuitem-icon" /></ListItemIcon> <ListItemText className='list-item-text' primary="Copy Board Link" /></MenuItem>
                     <MenuItem dense onClick={onExportBoard}><ListItemIcon><PictureAsPdfRoundedIcon className="menuitem-icon" /></ListItemIcon> <ListItemText className='list-item-text' primary="Export Board" /></MenuItem>
                 </Menu>
             </span>
-            <Button onClick={onFeedBack}><FeedbackRoundedIcon className="feedback-button" /></Button>
         </div>
     );
 }

diff --git a/packages/webapp/src/index.scss b/packages/webapp/src/index.scss
@@ -1,6 +1,6 @@
 html, body, #root{
     width: 100%;
     height: 100%;
-    // overflow: hidden; // commenting these two causes bounce affect but scroll works in other pages
+    overflow: hidden; // commenting these two causes bounce affect but scroll works in other pages
     // position: relative;
 }