From 8692bcc9afcfe0e4cd9e321bcb621795f14c971c Mon Sep 17 00:00:00 2001
From: danielmyren <daniel.j.myren@gmail.com>
Date: Tue, 13 Aug 2024 15:03:48 +0200
Subject: [PATCH] Major CSS design changes
---
frontend/src/Components/Navbar/Navbar.js | 22 +++--
.../src/Components/Search/MultiSelectText.jsx | 42 +++++---
.../src/Components/Search/SearchComponent.jsx | 99 +++++++++++++------
frontend/src/Css/Dashboard.css | 51 ++++++++--
frontend/src/Css/Form.css | 10 +-
frontend/src/Css/Map.css | 2 +-
frontend/src/Css/Navbar.css | 55 ++++++++---
frontend/src/Css/Search.css | 9 +-
frontend/src/Css/Visualiser.css | 6 +-
frontend/src/Css/index.css | 2 -
frontend/src/Pages/Dashboard/Barchart.jsx | 2 +-
frontend/src/Pages/Dashboard/Dashboard.jsx | 13 +--
frontend/src/Pages/Dashboard/Map.jsx | 7 +-
frontend/src/Pages/Dashboard/Visualiser.jsx | 10 +-
14 files changed, 214 insertions(+), 116 deletions(-)
diff --git a/frontend/src/Components/Navbar/Navbar.js b/frontend/src/Components/Navbar/Navbar.js
index cd506b3..7ec1a6a 100644
--- a/frontend/src/Components/Navbar/Navbar.js
+++ b/frontend/src/Components/Navbar/Navbar.js
@@ -3,16 +3,18 @@ import '../../Css/Navbar.css'
function TopNavBar({toggleDisplay, displayMap}) {
return (
- <div className="top-nav">
-
- <button className='sign_out_button'>Sign Out</button>
-
- {/* Toggle button to switch between Map and Visualiser */}
- <button className='sign_out_button' onClick={toggleDisplay}>
- {displayMap ? 'Switch to Visualiser' : 'Switch to Map'}
- </button>
-
- <h1 className='h1'>DASHBOARD</h1>
+ <div class="border-wrap">
+ <div className="top-nav">
+ <button className='nav-button'>Sign Out</button>
+
+
+ {/* Toggle button to switch between Map and Visualiser
+ <button className='nav-button' onClick={toggleDisplay}>
+ {displayMap ? 'Switch to Visualiser' : 'Switch to Map'}
+ </button>
+ */}
+ <h1 className='h1'>DASHBOARD</h1>
+ </div>
</div>
);
}
diff --git a/frontend/src/Components/Search/MultiSelectText.jsx b/frontend/src/Components/Search/MultiSelectText.jsx
index a0970ab..083859a 100644
--- a/frontend/src/Components/Search/MultiSelectText.jsx
+++ b/frontend/src/Components/Search/MultiSelectText.jsx
@@ -2,6 +2,7 @@ import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import React from 'react';
import * as MUI from '@mui/material';
+
/**
* Styled wrapper component for a clickable, scrollable flex container with a fixed height.
*
@@ -14,10 +15,12 @@ const Wrapper = styled('div')(({ theme }) => ({
alignItems: 'flex-start',
gap: theme.spacing(1),
cursor: 'pointer', // Make the entire area clickable
- maxHeight: '130px', // Set a fixed height
+ maxHeight: '300px', // Set a fixed height
overflowY: 'auto', // Make the content scrollable
- border: `2px solid black`, // Solid border
+ border: `2px solid white`, // Solid border
+ textColor: "white",
}));
+
/**
* Styled Typography component with conditional styling based on selection state.
*
@@ -27,17 +30,17 @@ const Wrapper = styled('div')(({ theme }) => ({
*/
const SelectedText = styled(Typography)(({ theme, selected }) => ({
width: '100%', // Make Typography span the whole width
- color: selected ? 'black' : theme.palette.text.primary, // Set text color to black for selected options
- fontWeight: selected ? 'bold' : 'normal',
- backgroundColor: selected ? theme.palette.grey[400] : 'transparent', // Darker grey background when clicked for non-selected options
+ color:"white",
+ fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;",
+ padding: "4px 4px 4px 8px",
+ fontWeight: selected ? 'bold' : '700',
+ fontSize: "15px",
+ backgroundColor: selected ? "#3D96B1" : 'transparent', // Darker grey background when clicked for non-selected options
'&:hover': {
- backgroundColor: selected ? theme.palette.grey[400] : theme.palette.grey[200], // Grey background on hover for non-selected options
- },
- '&:focus': {
- backgroundColor: theme.palette.grey[400], // Darker grey background when clicked
- color: 'black', // Set text color to black when clicked
+ backgroundColor: selected ? "#3D96B1" : "#82d5ee", // Grey background on hover for non-selected options
},
}));
+
/**
* Multi-select text component displaying a title and a list of selectable options.
*
@@ -76,9 +79,24 @@ function MultiSelectText({ selection, multiSelect, indexHandler }) {
return (
<div>
- <MUI.Typography variant='h6' fontWeight={'bold'}>
- {title}
+ <MUI.Typography
+ variant='h6'
+ sx={{
+ //transform: 'translateX(-6px)',
+ width: "100%",
+ marginTop: "36px",
+ fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;",
+ fontSize: "36px",
+ backgroundColor: "#07192e",
+ lineHeight: "1.1",
+
+ }}
+ fontWeight={'bold'}
+ label="County">
+
+ {title}
</MUI.Typography>
+
<Wrapper>
{options.map((option) => (
<SelectedText
diff --git a/frontend/src/Components/Search/SearchComponent.jsx b/frontend/src/Components/Search/SearchComponent.jsx
index cc1ff99..b8c60df 100644
--- a/frontend/src/Components/Search/SearchComponent.jsx
+++ b/frontend/src/Components/Search/SearchComponent.jsx
@@ -22,7 +22,7 @@ export const SearchComponent = ({ data, changeRegion }) => {
/*
Some temporary selection allocation
*/
- const europaparlamentsval = externalSelections.europaparlamentsval;
+ const euElection = externalSelections.euElection;
const selections = externalSelections.selections;
/**
@@ -35,7 +35,7 @@ export const SearchComponent = ({ data, changeRegion }) => {
*/
const provinceOptions = [
'Stockholm', 'Uppsala', 'Södermanland', 'Östergötland', 'Jönköping',
- 'Kronobergs', 'Kalmar', 'Gotland', 'Blekinge', 'Skåne', 'Halland',
+ 'Kronoberg', 'Kalmar', 'Gotland', 'Blekinge', 'Skåne', 'Halland',
'Västra Götaland', 'Värmland', 'Örebro', 'Västmanland', 'Dalarna',
'Gävleborg', 'Västernorrland', 'Jämtland', 'Västerbotten', 'Norrbotten'
];
@@ -43,8 +43,6 @@ export const SearchComponent = ({ data, changeRegion }) => {
if (data && provinceOptions.includes(data)) {
setSelectedProvince(data);
-
-
} else {
setSelectedProvince(null);
}
@@ -60,7 +58,7 @@ export const SearchComponent = ({ data, changeRegion }) => {
function parentIndexHandler(index){
- const element = europaparlamentsval.childrens[index];
+ const element = euElection.childrens[index];
setParentSelection(element);
};
@@ -87,10 +85,6 @@ const handleChildSelection = () => {
}
};
-
-/*
-
-*/
const handleComponentSelection = () => {
console.log("handleComponentSelection:, global:;" +globalChildSelection)
const selected = {};
@@ -106,20 +100,17 @@ const handleComponentSelection = () => {
setComponents(
<div>
{Object.values(selected).map((selection, index) => (
- <div key={index} className='multi_select'>
+ <div key={index} className='multi_select'>
<MultiSelectText selection={selection} multiSelect={true} />
- </div>
- ))}
-</div>);
+ </div>
+ ))}
+ </div>
+ );
};
- return (
-
-
+return (
<div>
-
-
<MUI.Autocomplete
disablePortal
id="combo-box-demo"
@@ -127,22 +118,70 @@ const handleComponentSelection = () => {
value={memoizedProvince}
onChange={handleProvinceChange}
getOptionSelected={isOptionEqualToValue} // Custom equality test
- sx={{ width: 300 }}
- renderInput={(params) => <MUI.TextField {...params} label="Län" />}
+ sx={{
+ width: 350,
+ marginTop: "15px",
+ '& .MuiInputBase-root': {
+ backgroundColor: '#3D96B1', // Ensure background color applies to the input itself
+ color: "#07192e",
+ fontSize: "20px",
+ marginTop: "20px",
+ fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;"
+ },
+ '& .MuiButtonBase-root svg' : {
+ background: "#07192e",
+
+ },
+ '& .MuiOutlinedInput-root' : {
+ border: "1px solid white" //Ensure smooth transitions between borders
+ },
+ '& .MuiOutlinedInput-notchedOutline' : {
+ display: "none", //Remove the notched border
+ },
+ '& .MuiOutlinedInput-root.Mui-focused' : {
+ border: "1px solid white"
+ },
+ '& .MuiOutlinedInput-root:hover' : {
+ border: "1px solid white"
+ },
+ '& .MuiButtonBase-root' : {
+ color: "white",
+ }
+ }}
+ renderInput={(params) => (
+ <MUI.TextField
+ {...params}
+ label="County"
+ InputLabelProps={{
+ sx: {
+ fontSize: '36px', // Change font size of the label
+ fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;",
+ fontWeight: 700,
+
+ color: "white",
+ marginTop: '10px',
+ transform: 'translateY(-44px) scale(1)',
+ '&.Mui-focused': {color:"#3D96B1",
+ fontSize: '36px',
+ transform: 'translateY(-44px) scale(1)', // Move the label further up
+ },
+
+ '&.MuiInputLabel-shrink' : {transform: 'translateY(-44px) scale(1)', // Move the label further up
+ fontSize: '36px',
+ },
+ },
+ }}
+ />
+ )}
/>
+
- <div className='multi_select'><MultiSelectText selection={europaparlamentsval} multiSelect={false} indexHandler={parentIndexHandler}/>
- <button onClick={handleChildSelection}> Select</button>
+ <div className='multi_select'><MultiSelectText selection={euElection} multiSelect={false} indexHandler={parentIndexHandler}/>
+ <button onClick={handleChildSelection}>Select</button>
</div>
- <>
- {component}
- </>
-
- <>{components}</>
-
-
-
+ <>{component}</>
+ <>{components}</>
</div>
);
};
diff --git a/frontend/src/Css/Dashboard.css b/frontend/src/Css/Dashboard.css
index 23b3e3d..13a655e 100644
--- a/frontend/src/Css/Dashboard.css
+++ b/frontend/src/Css/Dashboard.css
@@ -3,26 +3,59 @@
width: 1800;
height: 800;
flex-direction: row;
+ justify-content: center;
+ margin-top: 40px;
+ color: white;
+ transform: scale(0.9);
+}
+body{
+ background-color: #07192e;
+
}
+
.map_container{
- justify-content: left;
- border-style: solid;
- padding: 5px;
+ padding: 2px;
margin: 10px;
- width: 515px;
+ position: relative;
+ background: linear-gradient(to left, #3064A2, #3D96B1);
+ height: 952px;
+}
+
+.map_container svg{
+ margin: 2px;
+ padding-top: 30px;
+ background-color: #07192e;
}
+
.table_container{
- display: flex;
- padding: 5px;
- border-style: solid;
+ padding: 2px;
margin: 10px;
+ position: relative;
+ background: linear-gradient(to right, #3064A2, #3D96B1);
+ height: 952px;
+}
+
+.Visualiser{
+ background-color: #07192e;
+ margin: 2px;
+}
+
+.Visualiser h1, h2{
+ margin-top: 5px;
+ margin-left: 10px;
+ color: #3D96B1;
+ background-image: linear-gradient(to left, #150083, #3D96B1);
+ color: transparent;
+ background-clip: text;
+ -webkit-background-clip: text;
+}
-}
.search_container{
padding: 5px;
- border-style: solid;
margin: 10px;
+ position: relative;
+ background: #07192e;
}
.plot{
diff --git a/frontend/src/Css/Form.css b/frontend/src/Css/Form.css
index 0b98ff2..4a49670 100644
--- a/frontend/src/Css/Form.css
+++ b/frontend/src/Css/Form.css
@@ -11,16 +11,8 @@ body {
justify-content: center;
align-items: center;
min-height: 100vh;
-
- /*background: url('../../Assets/background3.jpg') ;*/
- background-color: aliceblue
- no-repeat;
-
- background-size: cover;
- background-position: center;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
\ No newline at end of file
diff --git a/frontend/src/Css/Map.css b/frontend/src/Css/Map.css
index 35ba0ed..2b0f6c3 100644
--- a/frontend/src/Css/Map.css
+++ b/frontend/src/Css/Map.css
@@ -1,5 +1,5 @@
svg {
- background: white;
+ background: #07192e;
}
path {
diff --git a/frontend/src/Css/Navbar.css b/frontend/src/Css/Navbar.css
index 5330792..dab3c88 100644
--- a/frontend/src/Css/Navbar.css
+++ b/frontend/src/Css/Navbar.css
@@ -1,19 +1,50 @@
+.border-wrap {
+ position: relative;
+ background: linear-gradient(to left, #150083, #49ADA8);
+ padding-bottom: 8px;
+ }
+
.top-nav{
display: flex;
flex-direction: row;
- height: 70px;;
- border: 2px;
- border-style: solid;
- box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+ align-items: center;
+ text-align: center;
+ height: 90px;
+ width: 100%;
+ padding-bottom: 10px;
+ /*background: #173254;*/
+ background-color: #07192e;
}
-.sign_out_button{
- margin: 5px;
- height: 50px;
+.nav-button{
+ min-width: 140px;
+ max-width: 140px;
+ margin-left: 10px;
+ margin-right: 20px;
+ height: 40px;
+ border: none;
+ outline: none;
+ border-radius: 40px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, .1);
+ cursor: pointer;
+ color: rgb(255, 255, 255);
+ font-weight: 700;
+ font-size: 16px;
+ background-image: linear-gradient(to right, #150083, #49ADA8);
}
+
.h1{
- top: 4%;
- left: 40%;
- right: 50%;
- position:absolute;
-}
\ No newline at end of file
+ flex-grow: 1;
+ text-align: center;
+ transform: translateX(-170px);
+ margin-left: 200px;
+ /*max-width: 550px;*/
+ width: 100vw;
+ font-size: 50px;
+ font-weight: 600;
+ background-image: linear-gradient(to left, #150083, #58FACF);
+ color: transparent;
+ background-clip: text;
+ -webkit-background-clip: text;
+}
+
diff --git a/frontend/src/Css/Search.css b/frontend/src/Css/Search.css
index f87be40..399501d 100644
--- a/frontend/src/Css/Search.css
+++ b/frontend/src/Css/Search.css
@@ -1,11 +1,6 @@
.search_container{
display: flex;
flex-direction: column;
+ color: white;
+ max-width: 600px;
}
-.multi_select{
- margin: 5px;
- margin-top: 20px;
-
- padding: 2px;
-
-}
\ No newline at end of file
diff --git a/frontend/src/Css/Visualiser.css b/frontend/src/Css/Visualiser.css
index 03089fc..0e77f14 100644
--- a/frontend/src/Css/Visualiser.css
+++ b/frontend/src/Css/Visualiser.css
@@ -2,14 +2,12 @@
.table_container{
display: flex;
flex-direction: column;
-
}
+
.table{
padding: 30px;
- margin: 10px;
- border-style: solid;
+ margin: 10px;
height: 800px;
-
}
.h2{
diff --git a/frontend/src/Css/index.css b/frontend/src/Css/index.css
index a6b6261..e164351 100644
--- a/frontend/src/Css/index.css
+++ b/frontend/src/Css/index.css
@@ -3,8 +3,6 @@
font-family: "Poppins", sans-serif;
box-sizing: border-box;
margin: 0;
- padding: 2;
-
}
body {
diff --git a/frontend/src/Pages/Dashboard/Barchart.jsx b/frontend/src/Pages/Dashboard/Barchart.jsx
index f17b586..e029e95 100644
--- a/frontend/src/Pages/Dashboard/Barchart.jsx
+++ b/frontend/src/Pages/Dashboard/Barchart.jsx
@@ -640,7 +640,7 @@ const BarChart = ({ selectedKey }) => {
.attr('y', d => yScale(parseFloat(d.values[0])) + margin.top)
.attr('width', xScale.bandwidth())
.attr('height', d => height - yScale(parseFloat(d.values[0])))
- .attr('fill', 'black');
+ .attr('fill', 'white');
}, [selectedKey]); // Use filteredData in the dependency array
diff --git a/frontend/src/Pages/Dashboard/Dashboard.jsx b/frontend/src/Pages/Dashboard/Dashboard.jsx
index 68f05c8..c456ebe 100644
--- a/frontend/src/Pages/Dashboard/Dashboard.jsx
+++ b/frontend/src/Pages/Dashboard/Dashboard.jsx
@@ -29,18 +29,15 @@ export const Dashboard = () => {
<TopNavBar toggleDisplay = {toggleDisplay} displayMap = {displayMap} />
<div className='container'>
-
-
<div className='search_container'>
<SearchComponent data={data.label} changeRegion={changeRegion} />
</div>
<div className='map_container' id="d3_map">
- <Map handlerFunction={handlerFunction} selectedRegion={region} />
- </div>
- <div className='table_container'>
- <Visualiser Regiondata={data} />
- </div>
-
+ <Map handlerFunction={handlerFunction} selectedRegion={region} />
+ </div>
+ <div className='table_container'>
+ <Visualiser Regiondata={data} />
+ </div>
</div>
</div>
);
diff --git a/frontend/src/Pages/Dashboard/Map.jsx b/frontend/src/Pages/Dashboard/Map.jsx
index 95e37fe..e574842 100644
--- a/frontend/src/Pages/Dashboard/Map.jsx
+++ b/frontend/src/Pages/Dashboard/Map.jsx
@@ -13,16 +13,13 @@ function getgeoJson(){
}
const Map = ({handlerFunction, selectedRegion}) => {
-
-
useEffect(() => {
-
function colorHandler(d){
if(d.properties.name === selectedRegion){
const data = {label: d.properties.name, id: d.properties.l_id};
handlerFunction(data);
- return 'lightgray';
+ return '#3D96B1';
}else{
return 'white';
}
@@ -45,7 +42,7 @@ const Map = ({handlerFunction, selectedRegion}) => {
// Select the #content element and append SVG for map
const svg = d3.select('#d3_map').append('svg')
.attr('width', 500)
- .attr('height', 900);
+ .attr('height', 943);
let rectY = 25;
diff --git a/frontend/src/Pages/Dashboard/Visualiser.jsx b/frontend/src/Pages/Dashboard/Visualiser.jsx
index 6b9e293..47f5b16 100644
--- a/frontend/src/Pages/Dashboard/Visualiser.jsx
+++ b/frontend/src/Pages/Dashboard/Visualiser.jsx
@@ -8,15 +8,13 @@ const Visualiser = ({Regiondata}) => {
return (
- <div >
+ <div className="Visualiser">
<h2 >
Visualiser
</h2>
- <h2> LÄN:
- {Regiondata.label}
-
- </h2>
- LÄNSKOD: {Regiondata.id}
+ <h2> LÄN: {Regiondata.label}</h2>
+ <h2>LÄNSKOD: {Regiondata.id}</h2>
+
<div className='table'>
<BarChart selectedKey={Regiondata.id}/>
--
GitLab