issue#10 explore section and upload button list (#12)

* issue#10 explore section and upload button list * issue#10 minor ui changes and passing values as props * minor changes done * issue#13 ui fixes and improvements * Removed margin bottom Co-authored-by: Omkar Prabhu <[email protected]>
prabhuomkar · Sep 22, 2021 · a1d96a1 · a1d96a1
1 parent 3fced6b
commit a1d96a1
Show file tree

Hide file tree

Showing 16 changed files with 300 additions and 11 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,6 +7,7 @@
     "@rmwc/drawer": "^6.1.4",
     "@rmwc/grid": "^6.1.4",
     "@rmwc/icon": "^6.1.4",
+    "@rmwc/image-list": "^6.1.4",
     "@rmwc/list": "^6.1.4",
     "@rmwc/textfield": "^6.1.4",
     "@rmwc/theme": "^6.1.4",

diff --git a/frontend/public/avatar.jpg b/frontend/public/avatar.jpg
diff --git a/frontend/public/places.jpg b/frontend/public/places.jpg
diff --git a/frontend/public/things.jpeg b/frontend/public/things.jpeg
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -20,7 +20,7 @@ const App = () => {
         options={{
           primary: '#812ce5',
           secondary: '#ffffff',
-          onPrimary: '#ffffff',
+          onPrimary: '#812ce5',
           textPrimaryOnBackground: '#000',
         }}
       >

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -2,7 +2,7 @@ $font: 'Inter', sans-serif !important;
 $primary-color: #ffffff;
 $secondary-color: #812ce5;
 $font-color: #000000;
-$link-color: #4c959a;
+$link-color: #4800b2;
 $primary-light-color: #eadafb;
 $primary-dark-color: #4800b2;
 
@@ -45,13 +45,14 @@ p {
 }
 
 .top-app-bar {
-  background-color: $secondary-color;
+  background-color: $primary-color;
+  border-bottom: 1px solid #e0e0e0;
 }
 
 .header-title {
   display: flex;
   text-decoration: none;
-  color: #ffffff !important;
+  color: #812ce5 !important;
   align-content: space-between;
 }
 
@@ -65,6 +66,7 @@ p {
 /* sidenav styles start */
 .drawer {
   position: fixed;
+  margin: 1px 0px !important;
 }
 
 .drawer-content {
@@ -130,11 +132,15 @@ p {
 
 .search-bar {
   border-radius: 4px !important;
-  background-color: white !important;
+  background-color: #f1f3f4 !important;
   height: 40px;
   width: 100%;
 }
 
+.search-bar:focus {
+  outline: none !important;
+}
+
 @media only screen and (max-width: 600px) {
   .search-bar-section {
     max-width: 180px;
@@ -144,4 +150,4 @@ p {
 .grid-cols > .mdc-layout-grid__inner {
   display: flex;
   justify-content: space-between;
-}
+}
diff --git a/frontend/src/components/SideNav.js b/frontend/src/components/SideNav.js
@@ -50,7 +50,7 @@ const SideNav = (props) => {
                   className="nav-link"
                   activeClassName="activated"
                   exact
-                  to={item.link_to}
+                  to={`/${item.link_to}`}
                 >
                   <ListItem className="list-item">
                     <Icon className="side-nav-icon" icon={item.icon} />

diff --git a/frontend/src/components/explore/ExploreEntity.js b/frontend/src/components/explore/ExploreEntity.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ImageList,
+  ImageListImage,
+  ImageListItem,
+  ImageListSupporting,
+  ImageListLabel,
+} from '@rmwc/image-list';
+import '@rmwc/image-list/styles';
+
+const ExploreEntity = ({ data }) => {
+  return (
+    <>
+      <ImageList
+        withTextProtection
+        style={{
+          columnGap: '12px',
+        }}
+      >
+        {data.map((src) => (
+          <ImageListItem key={src.image} style={{ marginBottom: '12px' }}>
+            <ImageListImage src={src.image} style={{ width: '180px' }} />
+            <ImageListSupporting>
+              <ImageListLabel>{src.label}</ImageListLabel>
+            </ImageListSupporting>
+          </ImageListItem>
+        ))}
+      </ImageList>
+    </>
+  );
+};
+
+ExploreEntity.propTypes = {
+  data: PropTypes.array,
+};
+
+export default ExploreEntity;
diff --git a/frontend/src/components/explore/ExploreEntityList.js b/frontend/src/components/explore/ExploreEntityList.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ImageList,
+  ImageListImage,
+  ImageListItem,
+  ImageListImageAspectContainer,
+} from '@rmwc/image-list';
+import '@rmwc/image-list/styles';
+
+const ExploreEntityList = ({ data, type }) => {
+  const stylePeopleList = {
+    radius: '50%',
+    width: '10%',
+    margin: '0px 6px 6px 6px',
+  };
+
+  const stylePlacesThigsList = {
+    radius: '6px',
+    width: '13%',
+    margin: '0px 6px 12px 6px',
+  };
+
+  return (
+    <>
+      <ImageList>
+        {data.map((src) => (
+          <ImageListItem
+            key={src}
+            style={
+              type === 'PeopleList' ? stylePeopleList : stylePlacesThigsList
+            }
+          >
+            <ImageListImageAspectContainer>
+              <ImageListImage
+                src={src}
+                style={{
+                  borderRadius:
+                    type === 'PeopleList'
+                      ? stylePeopleList.radius
+                      : stylePlacesThigsList.radius,
+                  cursor: 'pointer',
+                }}
+              />
+            </ImageListImageAspectContainer>
+          </ImageListItem>
+        ))}
+      </ImageList>
+    </>
+  );
+};
+
+ExploreEntityList.propTypes = {
+  type: PropTypes.string,
+  data: PropTypes.array,
+};
+
+export default ExploreEntityList;
diff --git a/frontend/src/components/header/Header.js b/frontend/src/components/header/Header.js
@@ -30,6 +30,7 @@ const Header = ({ toggleSideNav }) => {
             <SearchBar />
           </TopAppBarSection>
           <TopAppBarSection alignEnd>
+            <TopAppBarActionItem icon="file_upload" />
             <TopAppBarActionItem icon="help" />
             <TopAppBarActionItem icon="settings" />
           </TopAppBarSection>

diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
@@ -1,5 +1,7 @@
 import Content from './Content';
 import SideNav from './SideNav';
 import Header from './header/Header';
+import ExploreEntityList from './explore/ExploreEntityList';
+import ExploreEntity from './explore/ExploreEntity';
 
-export { Content, SideNav, Header };
+export { Content, SideNav, Header, ExploreEntityList, ExploreEntity };
diff --git a/frontend/src/pages/explore/Explore.js b/frontend/src/pages/explore/Explore.js
@@ -1,8 +1,41 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Grid, GridCell } from '@rmwc/grid';
+import { ExploreEntityList } from '../../components';
 import '@rmwc/grid/styles';
 
+const peopleList = [
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+];
+
+const placesList = [
+  '/places.jpg',
+  '/places.jpg',
+  '/places.jpg',
+  '/places.jpg',
+  '/places.jpg',
+  '/places.jpg',
+  '/places.jpg',
+];
+
+const thingsList = [
+  '/things.jpeg',
+  '/things.jpeg',
+  '/things.jpeg',
+  '/things.jpeg',
+  '/things.jpeg',
+  '/things.jpeg',
+  '/things.jpeg',
+];
+
 const Explore = () => {
   return (
     <>
@@ -16,6 +49,11 @@ const Explore = () => {
           </Link>
         </GridCell>
       </Grid>
+      <Grid>
+        <GridCell desktop={12} tablet={12} phone={12}>
+          <ExploreEntityList type="PeopleList" data={peopleList} />
+        </GridCell>
+      </Grid>
       <Grid className="grid-cols">
         <GridCell desktop={10} tablet={6} phone={3}>
           Places
@@ -26,6 +64,11 @@ const Explore = () => {
           </Link>
         </GridCell>
       </Grid>
+      <Grid>
+        <GridCell desktop={12} tablet={12} phone={12}>
+          <ExploreEntityList type="PlacesList" data={placesList} />
+        </GridCell>
+      </Grid>
       <Grid className="grid-cols">
         <GridCell desktop={10} tablet={6} phone={3}>
           Things
@@ -36,6 +79,11 @@ const Explore = () => {
           </Link>
         </GridCell>
       </Grid>
+      <Grid>
+        <GridCell desktop={12} tablet={12} phone={12}>
+          <ExploreEntityList type="ThingsList" data={thingsList} />
+        </GridCell>
+      </Grid>
     </>
   );
 };

diff --git a/frontend/src/pages/explore/People.js b/frontend/src/pages/explore/People.js
@@ -1,7 +1,45 @@
 import React from 'react';
+import { Grid, GridCell } from '@rmwc/grid';
+import { ExploreEntity } from '../../components';
 
 const People = () => {
-  return <>People</>;
+  const peopleData = [
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+  ];
+
+  return (
+    <>
+      <Grid className="grid-cols">
+        <GridCell desktop={10} tablet={6} phone={3}>
+          People
+        </GridCell>
+      </Grid>
+      <Grid>
+        <GridCell desktop={12} tablet={12} phone={12}>
+          <ExploreEntity data={peopleData} />
+        </GridCell>
+      </Grid>
+    </>
+  );
 };
 
 export default People;