Skip to content

Commit

Permalink
Merge pull request #1309 from Artsdatabanken/heading
Browse files Browse the repository at this point in the history 
Heading
  • Loading branch information
@helemork
helemork authored Apr 12, 2019
2 parents b7ccb36 + 3e218f7 commit 19557dc
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 72 deletions.
4 changes: 2 additions & 2 deletions src/Kodetre/Kodeliste/KodeVindu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,7 @@ const KodeVindu = ({
square="false"
elevation={4}
style={{
position: "relative",
top: -72
position: "relative"
}}
>
<Kodekort
Expand All @@ -87,6 +86,7 @@ const KodeVindu = ({
erAktivert={erAktivert}
onFitBounds={onFitBounds}
onToggleLayer={onToggleLayer}
bilde={meta.foto}
/>
{kode === "NN-LA-TI" && (
<Detaljeringsgrad
Expand Down
52 changes: 21 additions & 31 deletions src/Kodetre/Kodeliste/Kodekort.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { CardMedia } from "@material-ui/core";
import React from "react";
import config from "../../config";
import språk from "../../språk";
import Tittelblokk from "./Tittelblokk";
import tinycolor from "tinycolor2";
Expand All @@ -27,21 +25,6 @@ class Kodekort extends React.Component {
return false;
}

styles(url) {
if (this.erTransparent(url))
return {
minHeight: 297,
marginTop: 142,
marginBottom: 16,
filter: "drop-shadow(rgba(0, 0, 0, 0.5) 5px 5px 4px)",
backgroundSize: "contain"
};
return {
minHeight: 297,
_backgroundSize: "cover"
};
}

render() {
const {
kode,
Expand All @@ -51,30 +34,37 @@ class Kodekort extends React.Component {
tittel,
nivå,
overordnet,
onNavigate
onNavigate,
bilde
} = this.props;
const tc = new tinycolor(farge);
//var new_url = config.getFotoOmslag(url, 408);

var new_url = "no_image";
if (bilde.forside != null) {
new_url = bilde.forside.url;
}

return (
<div
square={false}
className="sidebar_top_area sidebar_background_element"
>
<CardMedia
className="Temporary_class_for_detection"
style={this.styles(url)}
onClick={this.handleOpen}
image={config.getFotoOmslag(url, 408)}
alt={"foto av" + tittel}
/>
<div className="sidebar_element page_topic_header" />

{/*
// for fremtidig oppgradering om vi ønsker det, isåfal må vi detektere transparang bakgrunn på et vis
<div
className="sidebar_top_image"
style={{ backgroundImage: "url(" + new_url + ")" }}
className={
(this.erTransparent(url) &&
"sidebar_top_image trasparent_image") ||
"sidebar_top_image"
}
onClick={this.handleOpen}
style={
(new_url !== "no_image" && {
backgroundImage: "url(" + new_url + ")"
}) || { height: 0 }
}
alt={"foto av" + tittel}
/>
*/}

<Tittelblokk
tittel={språk(tittel)}
Expand Down
81 changes: 63 additions & 18 deletions src/MainDrawer/MainDrawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,14 @@ import {
CloudUpload,
CloudDownload,
Comment,
Waves,
Panorama,
Info
Info,
Pets,
Landscape,
BubbleChart,
Layers,
Healing,
AssignmentInd
} from "@material-ui/icons";
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
Expand Down Expand Up @@ -71,20 +76,58 @@ class MainDrawer extends Component {
/>
<Menyelement
onClick={this.handleClickLandskap}
icon={<Waves />}
icon={<Landscape />}
primary="Landskap"
/>
<Menyelement
onClick={this.handleClickFylke}
icon={<Layers />}
primary="Fylke"
/>
<Menyelement
onClick={this.handleClickNaturvernområde}
icon={<Healing />}
primary="Naturvernområde"
/>
<Menyelement
onClick={this.handleClickTruet_art_natur}
icon={<BubbleChart />}
primary="Truet art/natur"
/>
<Menyelement
onClick={this.handleClickArt}
icon={<Pets />}
primary="Art"
/>
<Divider />
<Menyelement
icon={<Info />}
primary="Informasjon"
onClick={this.handleClickInfoTab}
/>
<Divider />
<ListSubheader>Datagrunnlag</ListSubheader>
<Menyelement
icon={<CloudDownload />}
primary="Last ned data"
onClick={this.handleClickLastNed}
/>
<Menyelement
onClick={this.handleClickLastOpp}
icon={<CloudUpload />}
primary="Levere data"
/>

<Menyelement
onClick={this.handleClickDatakilde}
icon={<AssignmentInd />}
primary="Datakilder"
/>
<Menyelement
onClick={this.handleClickSource}
icon={<GitHub />}
primary="Kildekode"
/>
<Divider />
<Innstillinger
visKoder={context.visKoder}
Expand All @@ -93,24 +136,13 @@ class MainDrawer extends Component {
onNavigate={this.handleNavigate}
/>
<Divider />
<ListSubheader>Bidra</ListSubheader>
<ListSubheader>Kontakt</ListSubheader>
<Menyelement
onClick={this.handleClickBidra}
icon={<Comment />}
primary="Tilbakemeldinger"
/>
<Menyelement
onClick={this.handleClickSource}
icon={<GitHub />}
primary="Kildekode"
/>
<Menyelement
onClick={this.handleClickLastOpp}
icon={<CloudUpload />}
primary="Levere data"
/>
<Divider />
<ListSubheader>Driftes av</ListSubheader>

<ListItem onClick={this.handleClickLogo} button>
<div className={classes.link}>
<BildeAvatar
Expand All @@ -119,7 +151,7 @@ class MainDrawer extends Component {
size="small"
/>
</div>
<ListItemText primary="Artsdatabanken" />
<ListItemText primary=" Artsdatabanken" />
</ListItem>
</div>
</List>
Expand All @@ -135,7 +167,7 @@ class MainDrawer extends Component {
handleClickLastNed = () => window.open("https://data.artsdatabanken.no/");
handleClickLastOpp = () =>
window.open(
"https://github.com/Artsdatabanken/nin-kart-frontend/blob/master/docs/BidraMedData.md"
"https://github.com/Artsdatabanken/nin-kart-frontend/wiki/%C3%98nsker-du-%C3%A5-bidra-med-data%3F"
);
handleClickLogo = () => window.open("https://artsdatabanken.no");
handleClickMap = () => this.props.history.push("/");
Expand All @@ -145,6 +177,19 @@ class MainDrawer extends Component {
handleClickLandskap = () =>
this.props.history.push("/Natur_i_Norge/Landskap/");
handleClickStat = () => this.props.history.push("/Natur_i_Norge/Stats/");

handleClickFylke = () => this.props.history.push("/Fylke/");
handleClickNaturvernområde = () =>
this.props.history.push("/Naturvernområde/");
handleClickTruet_art_natur = () =>
this.props.history.push("/Truet_art_natur/");
handleClickArt = () => this.props.history.push("/Biota/");
handleClickDatakilde = () => this.props.history.push("/Datakilde/");
handleClickNaturvernområde = () =>
this.props.history.push("/Naturvernområde/");
handleClickNaturvernområde = () =>
this.props.history.push("/Naturvernområde/");

handleNavigate = url => this.props.history.push(url);
}

Expand Down
15 changes: 0 additions & 15 deletions src/style/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,6 @@ div {
max-width: 100%;
}

.sidebar {
position: fixed;
height: 100vh;
overflow-x: hidden;
max-width: 408px;
background: #ededed;
width: 100%;
}

.mobile_navigation {
display: none;
}
Expand All @@ -80,12 +71,6 @@ div {
top: calc(100vh - 150px) !important;
}

.sidebar {
width: 100%;
max-width: 100%;
padding-top: 56px;
}

.mobile_navigation {
display: block;
width: 100%;
Expand Down
36 changes: 30 additions & 6 deletions src/style/Sidebar.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
/* Normalize across browsers */

.sidebar div {
box-sizing: border-box;
margin: 0px;
}

.sidebar {
position: fixed;
height: 100vh;
overflow-x: hidden;
max-width: 408px;
background: #ededed;
background: #fbfbfb;
width: 100%;
}

.sidebar div {
box-sizing: border-box;
margin: 0px;
}

@media only screen and (max-width: 678px) {
.sidebar {
width: 100%;
Expand Down Expand Up @@ -115,3 +115,27 @@
white-space: none;
color: #81b2bb;
}

.page_topic_header {
height: 60px;
width: 100%;
padding-top: 0px;
}

.sidebar_top_image {
height: 250px;
background: #b7d3d8;
background-size: cover;
background-position: center;
}

.sidebar_top_image.trasparent_image {
filter: drop-shadow(rgba(0, 0, 0, 0.5) 5px 5px 4px);
background: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
height: calc(250px - 20px);
}

0 comments on commit 19557dc

Please sign in to comment.