From f9d737169d4ad866578ca63dcc2ee6d966a97f06 Mon Sep 17 00:00:00 2001
From: Tejas <75026048+Tejas-117@users.noreply.github.com>
Date: Fri, 11 Mar 2022 10:02:56 +0530
Subject: [PATCH] Sidebar bugs fixed (#106)
* responsive pages
* removed comments
* fixed bugs regarding css
* responsive dashboard
* sidebar bugs fixed
---
frontend/components/Dashboard/Dashboard.jsx | 48 +++++--------------
.../components/Dashboard/Dashboard.style.js | 24 +++++++++-
.../components/HomeSection/HomeSection.jsx | 2 +
frontend/styles/HomeSection.module.css | 4 +-
frontend/yarn.lock | 6 +++
5 files changed, 43 insertions(+), 41 deletions(-)
diff --git a/frontend/components/Dashboard/Dashboard.jsx b/frontend/components/Dashboard/Dashboard.jsx
index ba6e33c..86d690a 100644
--- a/frontend/components/Dashboard/Dashboard.jsx
+++ b/frontend/components/Dashboard/Dashboard.jsx
@@ -15,39 +15,13 @@ function toggleSidebar1(e) {
sidebar.classList.toggle('toggle_sidebar')
}
+function changePageContent(e){
+ // change contents of the page according to the option selected by user.
+
+ toggleSidebar1(e);
+}
+
function Sidebar1() {
- return (
-
- Brand Name
-
-
-
-
Hayat
-
Product Designer
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
)
return (
@@ -64,23 +38,22 @@ function Sidebar1() {
Product Designer
-
+
-
+
-
+
-
+
)
-main
}
function Sidebar2() {
@@ -201,6 +174,7 @@ function Graph() {
Total Views
+
)
diff --git a/frontend/components/Dashboard/Dashboard.style.js b/frontend/components/Dashboard/Dashboard.style.js
index 72be04a..95935cc 100644
--- a/frontend/components/Dashboard/Dashboard.style.js
+++ b/frontend/components/Dashboard/Dashboard.style.js
@@ -2,17 +2,18 @@ import styled from 'styled-components'
export default styled.div`
display: flex;
- position: relative;
height: 100vh;
@media (max-width: 1100px) {
display: block;
}
+
/* this shows sidebar when menu icon is clicked */
.toggle_sidebar {
@media (max-width: 1100px) {
left: 0px !important;
}
}
+
.sidebar {
flex-shrink: 0;
padding-top: 60px;
@@ -21,15 +22,18 @@ export default styled.div`
height: 100%;
color: white !important;
transition: all 0.25s;
+
@media (max-width: 1100px) {
left: -300px;
position: absolute;
z-index: 100;
}
+
/* for small screens */
@media (max-width: 300px) {
width: 100vw;
}
+
.brand-name {
margin-top: 40px;
padding-left: 20px;
@@ -77,9 +81,11 @@ export default styled.div`
border-radius: 5px;
}
}
+
.close_icon {
display: none;
font-size: 2rem;
+
@media (max-width: 1100px) {
display: inline-block;
position: relative;
@@ -110,11 +116,13 @@ export default styled.div`
}
}
}
+
.main {
padding-top: 90px;
flex: 1;
display: flex;
flex-direction: column;
+
.row2 {
flex: 1;
display: flex;
@@ -122,12 +130,15 @@ export default styled.div`
align-items: center;
padding: 20px 40px;
justify-content: space-evenly;
+
@media (max-width: 1100px) {
margin: 30px 0;
}
+
@media (max-width: 800px) {
flex-direction: column;
}
+
.graph {
border-radius: 10px;
border: 3px solid #e1e1e1;
@@ -135,9 +146,11 @@ export default styled.div`
padding: 15px;
width: 60%;
max-width: 700px;
+
@media (max-width: 1100px) {
height: 500px;
}
+
@media (max-width: 800px) {
width: clamp(200px, 500px, 90vw);
}
@@ -149,10 +162,12 @@ export default styled.div`
padding: 15px;
width: 30%;
min-width: 250px;
+
@media (max-width: 800px) {
margin: 20px 0;
width: clamp(200px, 500px, 90vw);
}
+
.version {
display: flex;
margin-bottom: 10px;
@@ -180,16 +195,19 @@ export default styled.div`
}
}
}
+
.sidebar2 {
text-align: center;
margin-top: 10px;
position: relative;
+
.hamburger_icon {
position: absolute;
top: 0;
left: 1rem;
display: none;
font-size: 3rem;
+
@media (max-width: 1100px) {
display: block;
}
@@ -204,11 +222,13 @@ export default styled.div`
align-items: center;
justify-content: space-evenly;
overflow-x: auto;
+
@media (max-width: 800px) {
flex-direction: column;
}
}
}
+
.column {
flex: 30%;
height: 250px;
@@ -217,4 +237,4 @@ export default styled.div`
margin-bottom: 10px;
list-style-type: none;
}
-`
\ No newline at end of file
+`
diff --git a/frontend/components/HomeSection/HomeSection.jsx b/frontend/components/HomeSection/HomeSection.jsx
index 1138686..c43164f 100644
--- a/frontend/components/HomeSection/HomeSection.jsx
+++ b/frontend/components/HomeSection/HomeSection.jsx
@@ -123,6 +123,7 @@ function HomeSection(props) {
+
+
Need more advanced features? |{' '}
diff --git a/frontend/styles/HomeSection.module.css b/frontend/styles/HomeSection.module.css
index 063b332..d5c6a5d 100644
--- a/frontend/styles/HomeSection.module.css
+++ b/frontend/styles/HomeSection.module.css
@@ -55,7 +55,7 @@
width: 90vw;
font-size: 1.2rem;
}
-
+
.showUrl {
width: 90vw;
}
@@ -73,4 +73,4 @@
width: 90vw;
font-size: 1rem;
}
-}
+}
\ No newline at end of file
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8271b56..ae284ae 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -100,6 +100,7 @@
dependencies:
"@babel/helper-plugin-utils" "^7.16.7"
+
"@babel/runtime@^7.13.10", "@babel/runtime@^7.13.16", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
version "7.17.2"
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz"
@@ -174,6 +175,7 @@
resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8":
version "0.8.8"
resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz"
@@ -520,6 +522,7 @@
dependencies:
"@types/react" "*"
+
"@types/react@*", "@types/react@>=16.14.8", "@types/react@>=16.9.11":
version "17.0.38"
resolved "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz"
@@ -534,6 +537,7 @@
resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
"@types/warning@^3.0.0":
version "3.0.0"
resolved "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz"
@@ -598,6 +602,7 @@ babel-plugin-macros@^2.6.1:
dependencies:
"@babel/helper-annotate-as-pure" "^7.16.0"
"@babel/helper-module-imports" "^7.16.0"
+
babel-plugin-syntax-jsx "^6.18.0"
lodash "^4.17.11"
@@ -1056,6 +1061,7 @@ next@12.0.9:
"@next/swc-win32-ia32-msvc" "12.0.9"
"@next/swc-win32-x64-msvc" "12.0.9"
+
node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz"