Skip to content
Snippets Groups Projects
Commit 51e6b888 authored by Bjarke Madsen's avatar Bjarke Madsen
Browse files

Fix sidebar and banners

parent 87a99e64
No related branches found
No related tags found
1 merge request!27Feature/comp 175 176 navigation and improvements
import React, { ReactElement } from "react"; import React, { ReactElement } from "react";
import { Container, Row, Col } from "react-bootstrap"; import { Container, Row, Col } from "react-bootstrap";
import OrganizationSidebar from "./OrganizationSidebar"; import OrganizationSidebar from "./OrganizationSidebar";
import PageHeader from "../components/global/PageHeader"
import SectionLink from "../components/global/SectionLink";
interface inputProps { interface inputProps {
title: string, title: string,
...@@ -12,7 +14,10 @@ function DataPage({ title, filter, children }: inputProps): ReactElement { ...@@ -12,7 +14,10 @@ function DataPage({ title, filter, children }: inputProps): ReactElement {
return ( return (
<> <>
<OrganizationSidebar /> <OrganizationSidebar />
<Container> <PageHeader type={'data'} header={'Compendium Data'}>
<SectionLink section={"Reports"} />
</PageHeader>
<Container className="grow">
<Col xs={9}> <Col xs={9}>
<Row> <Row>
<h3 className="m-4">{title}</h3> <h3 className="m-4">{title}</h3>
......
...@@ -6,8 +6,9 @@ import Sidebar from './SideBar'; ...@@ -6,8 +6,9 @@ import Sidebar from './SideBar';
const OrganizationSidebar = () => { const OrganizationSidebar = () => {
return ( return (
<Sidebar> <Sidebar>
<h5>Organisation</h5>
<Row> <Row>
<Link to="/analysis" className="link-text-underline"> <Link to="/budget" className="link-text-underline">
<span>Budget of NRENs per Year</span> <span>Budget of NRENs per Year</span>
</Link> </Link>
</Row> </Row>
...@@ -53,7 +54,7 @@ const OrganizationSidebar = () => { ...@@ -53,7 +54,7 @@ const OrganizationSidebar = () => {
<Link to="/policy" className="link-text-underline"> <Link to="/policy" className="link-text-underline">
<span>NREN Policies</span> <span>NREN Policies</span>
</Link> </Link>
</Row> </Row>
</Sidebar> </Sidebar>
) )
} }
......
import React, { useContext } from 'react'; import React, { useState } from 'react';
import { sidebarContext } from "../helpers/SidebarProvider"; import { sidebarContext } from "../helpers/SidebarProvider";
import { AiOutlineClose, AiOutlinePlus } from 'react-icons/ai';
interface Props { interface Props {
...@@ -8,16 +9,24 @@ interface Props { ...@@ -8,16 +9,24 @@ interface Props {
const Sidebar: React.FC<Props> = ({ children }) => { const Sidebar: React.FC<Props> = ({ children }) => {
const { show, toggle } = useContext(sidebarContext); const [show, setShow] = useState<boolean>(false);
const toggle = () => {
setShow(!show);
};
return ( return (
<div className="sidebar-wrapper"> <div className="sidebar-wrapper">
<nav className={show ? '' : 'no-sidebar'} id="sidebar"> <nav className={show ? '' : 'no-sidebar'} id="sidebar">
<div className={`menu-items`}>{children}</div> <div className={`menu-items`}>{children}</div>
</nav> </nav>
<button className="toggle-btn" onClick={toggle}> <div className="toggle-btn" onClick={toggle}>
{show ? 'Hide Sidebar' : 'Show Sidebar'} <div className='toggle-btn-wrapper'>
</button> <span>MENU</span> {show ?
<AiOutlineClose style={{ color: 'white', paddingBottom: "3px", scale: "1.3" }} /> :
<AiOutlinePlus style={{ color: 'white', paddingBottom: "3px", scale: "1.3" }} />}
</div>
</div>
</div> </div>
); );
}; };
......
...@@ -20,20 +20,17 @@ function Banner({ children, type }: inputProps): ReactElement { ...@@ -20,20 +20,17 @@ function Banner({ children, type }: inputProps): ReactElement {
<Container> <Container>
<Row> <Row>
<Col sm={8}> <Row>
<Row> <div className="section-container" style={{ marginLeft: '-1.5%' }}>
<Col sm={2}> <img src={SectionDataLogo} style={{ maxWidth: '7rem', marginBottom: '1rem' }} />
<img src={SectionDataLogo} style={{ maxWidth: '80%' }} /> <div style={{ display: "flex", alignSelf: "right" }}>
</Col> <div className="center-text" style={{paddingTop:'1rem'}}>
<Col sm={8}>
<div className="center-text max-width-100vw">
{children} {children}
</div> </div>
</div>
</div>
</Col> </Row>
</Row>
</Col>
</Row> </Row>
</Container> </Container>
......
import React, { ReactElement } from "react"; import React, { ReactElement } from "react";
import { Container, Row, Col } from "react-bootstrap";
import SectionDataLogo from "../../images/home_reports_icon.svg";
interface inputProps { interface inputProps {
section: string section: string
...@@ -8,9 +9,17 @@ interface inputProps { ...@@ -8,9 +9,17 @@ interface inputProps {
function SectionLink({ section }: inputProps): ReactElement { function SectionLink({ section }: inputProps): ReactElement {
return ( return (
<div style={{ float: "right" }} className={'bold-caps-20pt'}> <div className={'bold-caps-17pt section-container'}>
<span>Compendium</span><br /> <div style={{ display: "flex", alignSelf: "right", lineHeight: "1.5rem", marginTop: "0.5rem"}}>
<span style={{ float: "right" }}>{section}</span> <span>
Compendium <br />
<span style={{ float: "right" }}>{section}</span>
</span>
</div>
<img src={SectionDataLogo} style={{ maxWidth: "4rem" }} />
</div> </div>
); );
} }
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
position: fixed; position: fixed;
z-index: 1; z-index: 1;
top: calc(50vh - 10%); top: calc(50vh - 10%);
pointer-events: none;
.menu-items { .menu-items {
padding: 10px; padding: 10px;
...@@ -10,23 +11,51 @@ ...@@ -10,23 +11,51 @@
} }
.sidebar-wrapper>nav { .sidebar-wrapper>nav {
transition: 0.25s; visibility: visible;
opacity: 1;
// transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); // transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
transition-property: margin-left; transition-property: margin-left, opacity;
transition: 0.25s;
margin-left: 0; margin-left: 0;
background-color: #fff; background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
border: $yellow-orange 2px solid;
pointer-events: auto;
a { a {
padding-top: 0.3rem;
padding-left: 1.5rem;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
background-color: $yellow-orange; color: $yellow-orange;
text-decoration: none; text-decoration: none;
} }
} }
nav.no-sidebar { nav.no-sidebar {
margin-left: -79%; margin-left: -80%;
visibility: hidden;
opacity: 0;
}
.toggle-btn {
@extend .bold-caps-16pt;
background-color: $yellow-orange;
color: white;
height: 3.5rem;
cursor: pointer;
padding-left: 1rem;
pointer-events: auto;
// prevent text selection
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
.toggle-btn-wrapper {
padding: 0.5rem;
padding-top: 0.7rem;
} }
\ No newline at end of file
...@@ -2,18 +2,25 @@ ...@@ -2,18 +2,25 @@
@import '../abstracts/variables'; @import '../abstracts/variables';
@import '../layout/Sidebar'; @import '../layout/Sidebar';
@import '../layout/SectionNavigation';
.rounded-border { .rounded-border {
border-radius: 25px; border-radius: 25px;
border: 1px solid $light-ash-grey border: 1px solid $light-ash-grey
} }
.geant-container { .grow {
max-width: 100vw; display: flex;
min-height: 95%; flex-direction: column;
height: auto; flex: 1;
padding-bottom: 2%;
}
.geant-container {
@extend .grow;
padding: 2% 0; padding: 2% 0;
max-width: 100vw;
height: 100%;
} }
.grey-container { .grey-container {
...@@ -22,23 +29,10 @@ ...@@ -22,23 +29,10 @@
} }
.wordwrap { .wordwrap {
max-width: 40vw; max-width: 60rem;
word-wrap: break-word; word-wrap: break-word;
} }
@media screen and (max-aspect-ratio: 1/1) {
.wordwrap {
max-width: max(66vw, 66%);
}
}
@media screen and (max-width: 1920px) {
.wordwrap {
max-width: 50%;
}
}
.center { .center {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -54,10 +48,6 @@ ...@@ -54,10 +48,6 @@
flex-direction: column; flex-direction: column;
} }
.max-width-100vw {
max-width: 100vw;
}
.compendium-data-header { .compendium-data-header {
background-color: $yellow; background-color: $yellow;
color: white; color: white;
...@@ -161,24 +151,34 @@ ...@@ -161,24 +151,34 @@
} }
.btn-compendium-year { .btn-compendium-year {
--bs-btn-color:#6c757d; --bs-btn-color: #6c757d;
--bs-btn-border-color:#6c757d; --bs-btn-border-color: #6c757d;
--bs-btn-hover-color:#fff; --bs-btn-hover-color: #fff;
--bs-btn-hover-bg:#6c757d; --bs-btn-hover-bg: #6c757d;
--bs-btn-hover-border-color:#6c757d; --bs-btn-hover-border-color: #6c757d;
--bs-btn-focus-shadow-rgb:108,117,125; --bs-btn-focus-shadow-rgb: 108, 117, 125;
--bs-btn-active-color:#fff; --bs-btn-active-color: #fff;
--bs-btn-active-bg:#6c757d; --bs-btn-active-bg: #6c757d;
--bs-btn-active-border-color:#6c757d; --bs-btn-active-border-color: #6c757d;
--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color:#6c757d; --bs-btn-disabled-color: #6c757d;
--bs-btn-disabled-bg:transparent; --bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color:#6c757d; --bs-btn-disabled-border-color: #6c757d;
--bs-gradient:none; --bs-gradient: none;
--bs-btn-border-radius: none; --bs-btn-border-radius: none;
} }
$year-colors: (#fd7f6f, #7eb0d5, #ffee65, #bd7ebe, #beb9db, #b2e061, #ffb55a, #fdcce5, #8bd3c7); $year-colors: (
#fd7f6f,
#7eb0d5,
#ffee65,
#bd7ebe,
#beb9db,
#b2e061,
#ffb55a,
#fdcce5,
#8bd3c7
);
@for $i from 0 to list.length($year-colors) { @for $i from 0 to list.length($year-colors) {
.color-of-the-year-#{$i} { .color-of-the-year-#{$i} {
...@@ -261,4 +261,9 @@ $year-colors: (#fd7f6f, #7eb0d5, #ffee65, #bd7ebe, #beb9db, #b2e061, #ffb55a, #f ...@@ -261,4 +261,9 @@ $year-colors: (#fd7f6f, #7eb0d5, #ffee65, #bd7ebe, #beb9db, #b2e061, #ffb55a, #f
top: 0; top: 0;
bottom: 0; bottom: 0;
border-top: 4px dotted #a7a7a7; border-top: 4px dotted #a7a7a7;
} }
\ No newline at end of file
.section-container {
display: flex;
margin-left: 5em;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment