Skip to content
GitLab
Commit f86d9aa3 authored by Mikkel Marstein's avatar Mikkel Marstein
Browse files

Merge branch 'komponent-for-display-av-søkeresultater' into 'master' 

Komponent for display av søkeresultater

See merge request !4
parents 24c2dda4 0012a135
Show whitespace changes
Inline Side-by-side
project-3/package.json
View file @ f86d9aa3
......@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@navikt/ds-icons": "^0.5.8",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
......
project-3/src/components/Layout.css
View file @ f86d9aa3
......@@ -7,3 +7,6 @@
font-size: calc(10px + 2vmin);
color: white;
}
.Layout__Content{
margin-top: 1rem;
}
\ No newline at end of file
project-3/src/components/Layout.tsx
View file @ f86d9aa3
......@@ -2,6 +2,7 @@ import React from 'react';
import { Header } from './header/Header';
import "./Layout.css"
import { Searchbar } from './searchbar/searchbar';
import { Filter } from './searchbar/Filter';
interface IProps {
title: string
......@@ -15,7 +16,7 @@ const Layout: React.FC<IProps> = ({
<React.Fragment >
<Header>
<Searchbar/>
<Filter/>
</Header>
<div className="Layout__Content">
<main>{children}</main>
......
project-3/src/components/display/CardContainer.css
View file @ f86d9aa3
@media only screen and (max-width: 600px) {
.Header__Logo {
display: none;
}
}
\ No newline at end of file
project-3/src/components/display/CardContainer.tsx
View file @ f86d9aa3
......@@ -16,7 +16,7 @@ export const CardContainer: FunctionComponent<IProps> = () => {
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}>
{cardData.map((country_data, index) =>
<Col md="auto" key={index}>
......
project-3/src/components/display/CountryCard.css
View file @ f86d9aa3
......@@ -8,3 +8,20 @@
height: 20rem;
transition: all .2s ease-in-out;
}
@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
project-3/src/components/header/Header.css
View file @ f86d9aa3
.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
project-3/src/components/header/Header.tsx
View file @ f86d9aa3
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>
);
......
project-3/src/components/searchbar/Filter.css 0 → 100644
View file @ f86d9aa3
.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;
}
.Filter__Big_Buttons{
display: flex;
flex-flow: row;
height: 10vmin;
width: 50vmin;
justify-Content: space-around;
align-Items: center;
}
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;
}
}
project-3/src/components/searchbar/Filter.tsx 0 → 100644
View file @ f86d9aa3
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</Button>
<Button variant="secondary">Official languages</Button>
<Button variant="secondary">Option 3</Button>
</>;
return (
<>
<div className={"Filter__Big_Container"}>
<Settings/>
<div>Filter Options</div>
<div className={"Filter__Big_Buttons"}>
{filterOptions}
</div>
</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>
}
</>
)
}
project-3/src/components/searchbar/searchbar.css
View file @ f86d9aa3
.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: 700px) {
.form-control, .searchbar{
margin-top: 1vmin;
}
}
project-3/src/components/searchbar/searchbar.tsx
View file @ f86d9aa3
import './searchbar.css'
import Button from 'react-bootstrap/Button';
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[]
......@@ -20,8 +20,6 @@ export class Searchbar extends React.Component<IProps, IState> {
active: false,
items: []
};
}
onSearch() {
searchbarStore.dispatch({ type: 'setState', NewCountry: dummyData });
......@@ -29,18 +27,16 @@ export class Searchbar extends React.Component<IProps, IState> {
render() {
return (
<div className="searchbar">
<input type="text" className="form-control" placeholder="Enter Country" aria-label="Recipient's username" aria-describedby="basic-addon2" />
<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">Button</button>
className="btn btn-outline-secondary" type="button"><Search/>Search</button>
</div>
{this.state.active && <div>Jeg er active</div>}
</div>)
}
}
function getDataFromBackEnd() {
return dummyData;
}
const dummyData: Country[] = [
{ name: "Norway", population: 20, area: 10 },
{ name: "Sweden", population: 25, area: 11 },
......
project-3/yarn.lock
View file @ f86d9aa3
......@@ -1407,6 +1407,13 @@
"@types/yargs" "^16.0.0"
chalk "^4.0.0"
"@navikt/ds-icons@^0.5.8":
version "0.5.8"
resolved "https://registry.yarnpkg.com/@navikt/ds-icons/-/ds-icons-0.5.8.tgz#3399eb220894decb5c2e6bfa217aa12de115570a"
integrity sha512-PEYDuUxGScPXTWmJ8HDpeFZ0ArKMmsH5kiceCnJi/5+IuOL2/tMCYa3tOQbapDfql2NLHPvLtho8I4DzJsvRmg==
dependencies:
uuid "^8.3.2"
"@nodelib/fs.scandir@2.1.4":
version "2.1.4"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
......@@ -11125,7 +11132,7 @@ uuid@^3.3.2, uuid@^3.4.0:
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
uuid@^8.3.0:
uuid@^8.3.0, uuid@^8.3.2:
version "8.3.2"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
......
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