Commit 3d8d3ec8 authored by DESKTOP-J7QTMBR\mikke's avatar DESKTOP-J7QTMBR\mikke
Browse files

Hamburger meny + responsivt design #5

parents accb435e 8650b548
{
"lockfileVersion": 1
}
......@@ -6,4 +6,7 @@
align-items: left;
font-size: calc(10px + 2vmin);
color: white;
}
.Layout__Content{
margin-top: 1rem;
}
\ No newline at end of file
import React from 'react';
import { Header } from './header/Header';
import { Search } from '@navikt/ds-icons'
import "./Layout.css"
import { Searchbar } from './searchbar/searchbar';
import { Filter } from './searchbar/Filter';
interface IProps {
title: string
......@@ -14,10 +15,8 @@ const Layout: React.FC<IProps> = ({
<div className="Layout">
<React.Fragment >
<Header>
<Search/>
<input/>
<h1>Tekst</h1>
<button>Hallo</button>
<Searchbar/>
<Filter/>
</Header>
<div className="Layout__Content">
<main>{children}</main>
......
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, useState } from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import { Provider } from 'react-redux';
import { Country } from '../../interfaces/Country';
import { searchbarStore } from '../searchbar/SearchbarStore';
import './CardContainer.css';
import { CountryCard } from './CountryCard';
import { store } from './Store';
type IProps = {}
export const CardContainer: FunctionComponent<IProps> = () => {
const initCardData: Country[] = []
const [cardData, setCardData] = useState(initCardData);
searchbarStore.subscribe(() => setCardData(searchbarStore.getState().value))
return (
<Container>
<Row xs={1} md={2} className="justify-content-md-center">
<Row xs={2} md={4} className="justify-content-md-center">
<Provider store={store}>
{dummyData.map((country_data, index) =>
{cardData.map((country_data, index) =>
<Col md="auto" key={index}>
<CountryCard country={country_data} id={index}/>
</Col>)}
</Col>)}
</Provider>
</Row>
</Container>
)
}
function getDataFromBackEnd(){
return dummyData;
}
const dummyData: Country[] = [
{name: "Norway", population: 20, area: 10},
{name: "Sweden", population: 25, area: 11},
{name: "Iceland", population: 5, area: 3},
{name: "England", population: 60, area: 14},
{name: "Sri Lanka", population: 55, area: 8},
{name: "USA", population: 120, area: 60},
{name: "Poland", population: 35, area: 14},
{name: "Japan", population: 110, area: 40},
{name: "Denmark", population: 26, area: 9},
{name: "Finland", population: 22, area: 12},
]
......@@ -7,4 +7,21 @@
width: 37.5rem;
height: 20rem;
transition: all .2s ease-in-out;
}
\ No newline at end of file
}
@media only screen and (max-width: 1000px) {
.CountryCard__card__false{
width: 14rem;
height: 8rem;
transition: all .2s ease-in-out;
}
.CountryCard__card__true{
width: 29.5rem;
transition: all .2s ease-in-out;
}
}
@media only screen and (max-width: 800px) {
.CountryCard__card__true{
width: 14rem;
transition: all .2s ease-in-out;
}
}
\ No newline at end of file
......@@ -16,7 +16,7 @@ export const CountryCard: FunctionComponent<IProps> = ({
id
}) => {
const [active, setActive] = useState(store.getState().value===id);
store.subscribe(()=> setActive(store.getState().value===id))
store.subscribe(() => setActive(store.getState().value===id))
return <Card className={"CountryCard__card__"+active}
onClick={() => {store.getState().value!==id ? store.dispatch({ type: 'setState', newValue: id }) : store.dispatch({ type: 'setState', newValue: -1 });}}
......
.Header__Logo {
height: 20vmin;
pointer-events: none;
margin: 15px;
}
header{
display: flex;
flex-direction: left;
align-content: center;
content: initial;
background-color: rgb( 28, 40, 51 )
}
.Header__Content{
display: flex;
justify-content: center;
align-items: center;
border: 3px solid green;
width: calc(60vw);
margin-top: 15px;
width: 100%;
height: 20vmin;
}
@media only screen and (max-width: 500px) {
.Header__Logo {
display: none;
}
.Header__Content{
height: 8rem;
}
.Header__Content{
margin-left: 1.5rem;
}
}
\ No newline at end of file
import React from 'react';
import logo from '../../logo.svg';
import globe from '../../res/globe2.png';
import "./Header.css"
export const Header: React.FC = ({
......@@ -7,7 +7,7 @@ export const Header: React.FC = ({
}) => {
return (
<header>
<img src={logo} alt="Logo" className="Header__Logo"/>
<img src={globe} alt="Logo" className="Header__Logo"/>
<div className="Header__Content">{children}</div>
</header>
);
......
.Filter__Title, .Filter__Container__closed{
display: flex;
width: 20rem;
margin-left: 2vw;
margin-top: 6px;
align-items: center;
z-index: 20;
}
.Filter__Big_Container{
display: inline-block;
position: absolute;
left: 40rem;
top: 2rem;
z-index: 20;
}
.Filter__Title, .Filter__Container__closed:hover {
cursor: pointer;
}
.Filter__Options{
margin-left: 2vw;
display: grid;
width: 15rem;
height: 9rem;
z-index: 20;
}
Button{
margin: 5px;
z-index: 20;
}
@media only screen and (max-width: 1000px) {
.Filter__Big_Container{
display: none;
}
}
@media only screen and (min-width: 1000px) {
.Filter__Container, .Filter__Container__closed{
display: none;
}
}
import { CollapseFilled, ExpandFilled, Settings } from '@navikt/ds-icons';
import React, { FunctionComponent, useState } from 'react';
import { Button } from 'react-bootstrap';
import './Filter.css';
type IProps = {}
export const Filter: FunctionComponent<IProps> = () => {
const [hidden, setHidden] = useState(true);
const filterOptions = <>
<Button variant="secondary">Name alphabetically</Button>
<Button variant="secondary">Number of official languages</Button>
<Button variant="secondary">Option 3</Button>
</>;
return (
<>
<div className={"Filter__Big_Container"}>
<Settings/>
<div>Filter Options</div>
{filterOptions}
</div>
{hidden ?
<div onClick={() => setHidden(false)} className={"Filter__Container__closed"}><Settings/>Filter options<ExpandFilled/></div> :
<div className={"Filter__Container"}>
<div className={'Filter__Title'} onClick={() => setHidden(true)}>
<Settings/>
<div>Options</div>
<CollapseFilled />
</div>
<div className={'Filter__Options'}>
{filterOptions}
</div>
</div>
}
</>
)
}
import { createStore } from 'redux'
import { Country } from '../../interfaces/Country'
const initialState: Country[] = []
function counterReducer(state = { value: initialState }, action: { type: any, NewCountry: Country[] }) {
switch (action.type) {
case "setState":
return { value: action.NewCountry }
default:
return state
}
}
export let searchbarStore = createStore(counterReducer)
.searchbar{
display: flex;
position: relative;
width: 20rem;
height: 4rem;
margin-top: 6vmin;
margin-left: 2vw;
}
.input-group-append{
display: flex;
height: 4rem;
width: 4rem;
}
.form-control{
content: initial;
display: flex;
flex-direction: left;
margin-right: 20px;
}
@media only screen and (max-width: 600px) {
.form-control, .searchbar{
margin-top: 1vmin;
}
}
import './searchbar.css'
import React from 'react';
import { Country } from '../../interfaces/Country';
import './SearchbarStore.tsx'
import { searchbarStore } from './SearchbarStore';
import { Search } from '@navikt/ds-icons';
interface IProps {
items?: string[]
}
interface IState {
active: boolean,
items: string[]
}
export class Searchbar extends React.Component<IProps, IState> {
constructor(props: IState) {
super(props);
this.state = {
active: false,
items: []
};
}
onSearch() {
searchbarStore.dispatch({ type: 'setState', NewCountry: dummyData });
}
render() {
return (
<div className="searchbar">
<input type="text" className="form-control" placeholder="Enter Country" />
<div className="input-group-append">
<button onClick={() => this.onSearch()}
className="btn btn-outline-secondary" type="button"><Search/>Search</button>
</div>
{this.state.active && <div>Jeg er active</div>}
</div>)
}
}
const dummyData: Country[] = [
{ name: "Norway", population: 20, area: 10 },
{ name: "Sweden", population: 25, area: 11 },
{ name: "Iceland", population: 5, area: 3 },
{ name: "England", population: 60, area: 14 },
{ name: "Sri Lanka", population: 55, area: 8 },
{ name: "USA", population: 120, area: 60 },
{ name: "Poland", population: 35, area: 14 },
{ name: "Japan", population: 110, area: 40 },
{ name: "Denmark", population: 26, area: 9 },
{ name: "Finland", population: 22, area: 12 },
]
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment