@@ -12,12 +14,12 @@ const ForsideInformasjon = props => {
className="frontpage_header"
onClick={e => {
e.stopPropagation();
- props.history.push("/Natur_i_Norge/");
+ navigate("/Natur_i_Norge/");
}}
>
{" "}
@@ -30,7 +32,7 @@ const ForsideInformasjon = props => {
diff --git a/src/HamburgerMeny/HamburgerMeny.js b/src/HamburgerMeny/HamburgerMeny.js
index 1fd00b75a..65641b8c3 100644
--- a/src/HamburgerMeny/HamburgerMeny.js
+++ b/src/HamburgerMeny/HamburgerMeny.js
@@ -19,7 +19,7 @@ import {
AssignmentInd
} from "@material-ui/icons";
import React, { Component } from "react";
-import { withRouter } from "react-router-dom";
+import { withRouter } from "../withRouter";
import NavigationChevronLeftDouble from "../AppSettings/NavigationChevronLeftDouble";
import GitHub from "./GitHub";
import Innstillinger from "./Innstillinger";
@@ -29,15 +29,15 @@ import config from "../Funksjoner/config";
class HamburgerMeny extends Component {
render() {
let spraak = this.props.spraak;
- const { handleSpraak, handleHovedMeny } = this.props;
+ const { handleSpraak, onToggleHovedMeny } = this.props;
return (
{context => (
{" "}
@@ -30,7 +32,7 @@ const ForsideInformasjon = props => {
- 
+ 
+
Hva er Natur i Norge?
@@ -50,7 +52,7 @@ const ForsideInformasjon = props => {
Utforsk NiN-kart via ikonene nedenfor
-
@@ -65,6 +67,7 @@ const ForsideInformasjon = props => {
/>
+
-
@@ -53,7 +53,7 @@ class HamburgerMeny extends Component {
}
/>
- }
- primary="Natursystem"
- />
+ return (
+ <>
+
+ }
+ primary="Natursystem"
+ />
- 
- }
- primary="Administrative grenser"
- />
+
+ }
+ primary="Administrative grenser"
+ />
+
@@ -43,7 +43,7 @@ export default function Landskapstype(props) {
{props.url && (
- history.push(url)}>
+ navigate(url)}>
history.push(parenturl)}
+ onClick={() => navigate(parenturl)}
>
{url && (
@@ -80,7 +80,7 @@ export default function Landskapstype(props) {
key={b.url}
trinn={b.trinn || {}}
url={b.url}
- onClick={() => history.push(b.url)}
+ onClick={() => navigate(b.url)}
/>
))}
diff --git a/src/InformasjonsVisning/Lokalitet/LokalitetElement/Kartlegging.js b/src/InformasjonsVisning/Lokalitet/LokalitetElement/Kartlegging.js
index a83a7f357..5d707536d 100644
--- a/src/InformasjonsVisning/Lokalitet/LokalitetElement/Kartlegging.js
+++ b/src/InformasjonsVisning/Lokalitet/LokalitetElement/Kartlegging.js
@@ -1,5 +1,5 @@
import React from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "../../../withRouter";
import { Grid, Typography } from "@material-ui/core";
import Prettyprint from "../../../Funksjoner/prettyprint";
import SectionExpand from "../../../GjenbruksElement/SectionExpand";
diff --git a/src/Kart/LeafletTangram/Leaflet.js b/src/Kart/LeafletTangram/Leaflet.js
index 38c1ba938..58a39e553 100644
--- a/src/Kart/LeafletTangram/Leaflet.js
+++ b/src/Kart/LeafletTangram/Leaflet.js
@@ -227,7 +227,7 @@ class LeafletTangram extends React.Component {
newurlstring += "?" + urlparams[i];
}
}
- this.props.history.push("?lng=" + lng + "&lat=" + lat + newurlstring);
+ this.props.navigate("?lng=" + lng + "&lat=" + lat + newurlstring);
}
setPoint(lat, lng, e) {
diff --git a/src/Kart/LeafletTangram/scene/mal/openStreetMap.json b/src/Kart/LeafletTangram/scene/mal/openStreetMap.json
index e4b6971a8..e669713c4 100644
--- a/src/Kart/LeafletTangram/scene/mal/openStreetMap.json
+++ b/src/Kart/LeafletTangram/scene/mal/openStreetMap.json
@@ -65,7 +65,7 @@
"text": {
"text_source": "name",
"font": {
- "family": "Roboto",
+ "family": "Chivo",
"fill": "#555",
"size": 12,
"stroke": {
@@ -315,7 +315,7 @@
"text": {
"text_source": "name_int",
"font": {
- "family": "Roboto",
+ "family": "Chivo",
"fill": "#555",
"size": 12,
"stroke": {
@@ -332,7 +332,7 @@
"text": {
"text_source": "name",
"font": {
- "family": "Roboto",
+ "family": "Chivo",
"style": "italic",
"fill": "#222",
"size": 12,
diff --git a/src/Kart/LeafletTangram/scene/styles.js b/src/Kart/LeafletTangram/scene/styles.js
index 5380d9aeb..553850b36 100644
--- a/src/Kart/LeafletTangram/scene/styles.js
+++ b/src/Kart/LeafletTangram/scene/styles.js
@@ -29,7 +29,7 @@ const styles = {
base: "text",
draw: {
font: {
- family: "Roboto",
+ family: "Chivo",
size: "12px",
fill: "black",
stroke: {
diff --git a/src/Kart/LeafletTangram/scene/visualisering/indexedRaster.js b/src/Kart/LeafletTangram/scene/visualisering/indexedRaster.js
index 2d1ab6beb..daa7daef7 100644
--- a/src/Kart/LeafletTangram/scene/visualisering/indexedRaster.js
+++ b/src/Kart/LeafletTangram/scene/visualisering/indexedRaster.js
@@ -12,7 +12,7 @@ const color = `
color = texture2D(palette, vec2(v, depth));
`;
-const global = `
+const renderIndexedColor = `
highp float rgbaToIndex(vec4 rgba) {
const float pixelWidth = 1./512.;
// G = MSB, color 256-511, B = LSB, color 0-255
@@ -31,7 +31,7 @@ function lagStyle(format, drawArgs) {
depth: 1 - (drawArgs.depth || 0) / 8 - 0.5 / 8,
},
blocks: {
- global: global,
+ global: renderIndexedColor,
color: color,
},
},
diff --git a/src/Kart/LeafletTangram/scene/visualisering/polygon.js b/src/Kart/LeafletTangram/scene/visualisering/polygon.js
index ea1b7487d..b2f2ca3ed 100644
--- a/src/Kart/LeafletTangram/scene/visualisering/polygon.js
+++ b/src/Kart/LeafletTangram/scene/visualisering/polygon.js
@@ -64,7 +64,7 @@ function drawLines(args) {
layer.draw.text = {
text_source: ["name", "title"],
font: {
- family: "Roboto",
+ family: "Chivo",
fill: "hsla(0, 0%, 100%, 1.0)",
stroke: { color: "hsla(0, 0%, 0%, 0.7)", width: 2 },
size: "13px",
@@ -112,7 +112,7 @@ function drawBase(args) {
layer.draw.text = {
text_source: ["name", "title"],
font: {
- family: "Roboto",
+ family: "Chivo",
fill: "hsla(0, 0%, 100%, 1.0)",
stroke: { color: "hsla(0, 0%, 0%, 0.7)", width: 2 },
size: "13px",
diff --git a/src/Kartlag/Favorites/BackgroundSettings/TemaMeny/TemaButton.js b/src/Kartlag/Favorites/BackgroundSettings/TemaMeny/TemaButton.js
index 516b77ca1..00e99c55d 100644
--- a/src/Kartlag/Favorites/BackgroundSettings/TemaMeny/TemaButton.js
+++ b/src/Kartlag/Favorites/BackgroundSettings/TemaMeny/TemaButton.js
@@ -1,5 +1,5 @@
import React from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "../../../../withRouter";
import typer from "./temaer";
const TemaButton = ({ type, aktivtFormat, onUpdateLayerProp }) => (
diff --git a/src/Kartlag/Favorites/FavoriteLayerElement.js b/src/Kartlag/Favorites/FavoriteLayerElement.js
index 84f71c6d6..2ae33b999 100644
--- a/src/Kartlag/Favorites/FavoriteLayerElement.js
+++ b/src/Kartlag/Favorites/FavoriteLayerElement.js
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import HideLayerButton from "../Buttons/HideLayerButton";
import { Settings } from "@material-ui/icons";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import LayerButton from "../Buttons/LayerButton";
import FavoriteButton from "../Buttons/FavoriteButton";
import MapLayerButton from "../Buttons/MapLayerButton";
@@ -14,14 +14,14 @@ const FavoriteLayerElement = ({
onToggleLayer
}) => {
const [expandedSub, setExpandedSub] = useState(false);
- const history = useHistory();
+ const navigate = useNavigate();
if (!kartlag) return null;
const { kode } = kartlag;
const handleExpandClick = () => {
setExpandedSub(!expandedSub);
};
const onNavigate = where => {
- history.push(where);
+ navigate(where);
};
return (
diff --git a/src/Kartlag/History/HistorikkListeElement.js b/src/Kartlag/History/HistorikkListeElement.js
index d3984dc9b..552055f98 100644
--- a/src/Kartlag/History/HistorikkListeElement.js
+++ b/src/Kartlag/History/HistorikkListeElement.js
@@ -1,10 +1,13 @@
import React from "react";
import MapLayerButton from "../Buttons/MapLayerButton";
-const HistorikkListeElement = ({ meta, history }) => {
+import { useNavigate } from 'react-router-dom'
+
+const HistorikkListeElement = ({ meta }) => {
+ const navigate = useNavigate();
if (!meta) return;
const onNavigate = url => {
- history.push(url);
+ navigate(url);
};
return (
diff --git a/src/Kilde/NA/index.js b/src/Kilde/NA/index.js
index 3a877e095..290fd9110 100644
--- a/src/Kilde/NA/index.js
+++ b/src/Kilde/NA/index.js
@@ -1,5 +1,5 @@
import { Component, default as React } from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "../../withRouter";
import backend from "Funksjoner/backend";
import NA from "./NA";
@@ -22,7 +22,7 @@ class NAContainer extends Component {
});
});
}
- handleClick = kode => this.props.history.push(`/katalog/${kode}`);
+ handleClick = kode => this.props.navigate(`/katalog/${kode}`);
render() {
return (
diff --git a/src/LukkbartVindu.js b/src/LukkbartVindu.js
index 27ff41b09..9bb5ae944 100644
--- a/src/LukkbartVindu.js
+++ b/src/LukkbartVindu.js
@@ -1,5 +1,5 @@
import React, { useState } from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "./withRouter";
import { Close, ArrowBack } from "@material-ui/icons";
import { IconButton } from "@material-ui/core";
diff --git a/src/TopBar/Header.js b/src/TopBar/Header.js
index 894013f43..0c8375270 100644
--- a/src/TopBar/Header.js
+++ b/src/TopBar/Header.js
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
import importScript from "../Funksjoner/getExternal";
import TopBar from "./TopBar";
-const Header = ({ searchFor, handleHovedMeny, onSelectResult, history }) => {
+const Header = ({ searchFor, onToggleHovedMeny, onSelectResult, history }) => {
const headerjsurl = "https://design.artsdatabanken.no/script/header.js";
useEffect(() => {
importScript(headerjsurl);
@@ -32,7 +32,7 @@ const Header = ({ searchFor, handleHovedMeny, onSelectResult, history }) => {
{
- history.push("/");
+ navigate("/");
}}
>
NiN-kart
diff --git a/src/mockJsdom.js b/src/mockJsdom.js
new file mode 100644
index 000000000..06564fb40
--- /dev/null
+++ b/src/mockJsdom.js
@@ -0,0 +1,4 @@
+Object.defineProperty(URL, 'createObjectURL', {
+ writable: true,
+ value: jest.fn()
+})
\ No newline at end of file
diff --git a/src/style/App.scss b/src/style/App.scss
index c37856456..a359627c9 100644
--- a/src/style/App.scss
+++ b/src/style/App.scss
@@ -42,8 +42,8 @@ a,
a:visited,
a:active,
a:focus {
- color: $super-duper-dark-nin;
- text-decoration: none;
+ color: $link-color;
+ //text-decoration: none;
}
a:hover {
@@ -66,13 +66,13 @@ body,
input,
p,
button {
- font-family: "Roboto", "sans-serif";
+ font-family: $font-chivo;
}
h1,
h2,
h3 {
- font-family: "Roboto Condensed";
+ font-family:$font-space;
}
strong,
@@ -198,7 +198,7 @@ div {
margin-top: 4px;
margin-bottom: 4px;
font-size: 12pt;
- color: $super-duper-dark-nin;
+ color: $body-color;
display: flex;
}
@@ -209,7 +209,7 @@ div {
.artsdatabanken,
.tilbakemeldinger {
background: transparent;
- color: $super-duper-dark-nin;
+ color: $body-color;
font-size: 12pt;
border: 0;
margin: 0;
@@ -261,7 +261,7 @@ div {
.spraakvelger span,
.hamburger_menu_item svg {
- color: $super-duper-dark-nin;
+ color: $adb_dark_grey;
display: inline-block;
vertical-align: top;
}
@@ -395,7 +395,7 @@ div {
.section {
border-top: 1px solid #c8c8c8;
margin-top: -1px;
- background: #f4f2f2;
+ background: #fff9f0//#f4f2f2;
}
.testcolours .section:nth-child(1) {
@@ -497,7 +497,7 @@ div {
}
.cookiewarning a {
- color: white;
+ color: $link-color;
text-decoration: underline;
}
@@ -506,3 +506,14 @@ div {
width: 100%;
}
}
+
+.cookies {
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ background: rgba(0, 0, 0, 0.9);
+ z-index: 1000;
+ padding: 8px;
+ text-align: center;
+ font-size: 12pt;
+}
diff --git a/src/style/Forside.scss b/src/style/Forside.scss
index 94f29e2c3..9daa3f05d 100644
--- a/src/style/Forside.scss
+++ b/src/style/Forside.scss
@@ -14,6 +14,10 @@
padding: 50px;
}
+.frontpage_link_items{
+ background:$sand-80
+}
+
@media only screen and (max-width: 768px) {
.frontpage_footer,
.frontpage_link_items,
@@ -138,6 +142,8 @@
width: 100vw;
text-align: center;
background: $brightest-nin;
+ color:$body-color;
+ padding-top:0px
}
.frontpage_icon svg {
diff --git a/src/style/GraphicProfile.scss b/src/style/GraphicProfile.scss
index 58c0b478d..bee6490df 100644
--- a/src/style/GraphicProfile.scss
+++ b/src/style/GraphicProfile.scss
@@ -1,12 +1,19 @@
/* NiN Main Pallette*/
-$super-duper-dark-nin: #165d6b;
-$super-dark-nin: hsla(189, 30, 45, 1); //#347c8a;
-$darkest-nin: hsla(189, 30, 45, 1); //#4d8b96;
-$dark-nin: hsla(189, 30, 46, 1); //#4b909e;
-$medium-nin: hsla(189, 30, 62, 1); // #81b2bb;
-$bright-nin: hsla(189, 30, 78, 1); //#b7d3d8;
-$brightest-nin: hsla(189, 30, 95, 1); // #edf4f5;
-$transparent-bg: #0222286e;
+$sand-80:#F5E7D3;// Border infobox
+$sand-50:#FFF7EB; // heading + footer
+$sand-10:#FFFCF7; // Innhold bg
+$white:#FFF;//infobox bg
+$font-chivo: 'Chivo', sans-serif;
+$font-space: 'Space Mono', sans-serif;
+$super-duper-dark-nin: #f5e7d3;// #165d6b;
+$link-color:#017590;
+$super-dark-nin: $sand-80;//hsla(189, 30, 45, 1); //#347c8a;
+$darkest-nin: hsla(189, 12%, 18%, 1); //#4d8b96;
+$dark-nin: hsla(189, 12%, 18%, 1); //#4b909e;
+$medium-nin: hsla(189, 12%, 24%, 1); // #81b2bb;
+$bright-nin: hsla(189, 12%, 31%, 1); //#b7d3d8;
+$brightest-nin:$sand-10; //hsla(189, 30, 95, 1); // #edf4f5;
+$transparent-bg:#fff7eb9e;// #0222286e;
/* FUN COLOURS */
$fun-bg-1: #bce0ce;
$fun-bg-2: #dadfcf;
@@ -14,8 +21,8 @@ $fun-bg-3: #bfb6d6;
$fun-bg-4: #80aebf;
/* Background colour */
-$panel-bg: #f1f1f1;
-$panel-section-bg: #e0e5e6;
+$panel-bg: #fff9f0;// #f1f1f1;
+$panel-section-bg: $sand-80;// #e0e5e6;
$panel-section-sub-bg: #b9c2c4;
$panel-section-sub-sub-bg: #c9d2d5;
@@ -27,7 +34,8 @@ $green-color: #299988;
/* ADB profil*/
$adb_whiter: #ffffff;
-$adb_dark_grey: #4c4a48;
+$adb_dark_grey: #706a60;
+$body-color:#262f31;
$adb_grey: #7f726b;
$adb_bright_orange: #de8608;
$adb_orange: #eb6109;
@@ -55,7 +63,7 @@ $NR: #e2e4e9;
$active-border: 2px solid black !important;
/*fonts*/
-$fontfamily: "Roboto", "sans-serif";
+$fontfamily: $font-chivo;
/* Relative heights of menu items */
$nin-header: 48px;
@@ -70,8 +78,8 @@ $actual-map-height-mobile: calc(100vh - #{$ux-page-area-mobile});
$map-width: calc(100% - #{$sidebar-max-size});
/* Box Shadow */
$box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.45);
-$box-shadow-hover: 0 1px 6px 0 hsla(189, 30, 0, 0.45),
- 0 1px 3px 1px hsla(189, 30, 232, 0.302);
+$box-shadow-hover: 0 1px 6px 0 hsla(189, 30%, 0%, 0.45),
+ 0 1px 3px 1px hsla(189, 30%, 91%, 0.302);
$box-shadow-card: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
diff --git a/src/style/Kart.scss b/src/style/Kart.scss
index ade38caee..30d138449 100644
--- a/src/style/Kart.scss
+++ b/src/style/Kart.scss
@@ -62,7 +62,7 @@ $bottompadding-mobile: $leaflet-buttons-padding * 4 + 9px;
.map_control_button,
.leaflet-touch .leaflet-bar {
- border: 2px solid $medium-nin;
+ border: 2px solid $body-color;
width: $leaflet-buttons;
z-index: -5;
}
@@ -76,6 +76,12 @@ $bottompadding-mobile: $leaflet-buttons-padding * 4 + 9px;
top: calc(#{$actual-map-height} - 36px);
}
+.leaflet-control-container a,
+.leaflet-control-container a:visited
+{
+ color:$body-color;
+}
+
.fullscreen .map_control_button {
background: white;
border-radius: 4px;
diff --git a/src/style/Kartlag.scss b/src/style/Kartlag.scss
index e16623bd8..b184c5bde 100644
--- a/src/style/Kartlag.scss
+++ b/src/style/Kartlag.scss
@@ -56,7 +56,7 @@ Even tho we don't a of now support IE X)
margin: 2px;
padding: 2px;
text-decoration: underline;
- color: $super-duper-dark-nin;
+ color: $link-color;
font-size: 10pt;
}
@@ -105,8 +105,8 @@ button.breadcrumb:hover {
margin-top: -1px;
background: white;
border-radius: 0px;
- border-bottom: 1px solid #d9d9d9;
- border-top: 1px solid #d9d9d9;
+ border-bottom: 1px solid $sand-80;
+ border-top: 1px solid $sand-80;
padding: 2px 6px 2px 2px;
}
@@ -130,8 +130,8 @@ button.breadcrumb:hover {
.kartlag_header {
position: relative;
height: 24px;
- border-bottom: 1px solid #d9d9d9;
- border-top: 1px solid #d9d9d9;
+ border-bottom: 1px solid $sand-80;
+ border-top: 1px solid $sand-80;
background: $panel-bg;
margin-top: -1px;
}
diff --git a/src/style/ToggleSwitch.scss b/src/style/ToggleSwitch.scss
index 7bd039109..aa198735a 100644
--- a/src/style/ToggleSwitch.scss
+++ b/src/style/ToggleSwitch.scss
@@ -48,24 +48,24 @@
input:checked ~ .slider_container .slider {
background-color: $dark-nin;
- border-color: $super-duper-dark-nin;
+ border-color: $body-color;
}
input:checked:focus ~ .slider_container .slider,
input:checked:hover ~ .slider_container .slider {
background-color: $darkest-nin;
- outline: 2px solid $super-duper-dark-nin;
+ outline: 2px solid $body-color;
}
input:focus ~ .slider_container .slider,
input:hover ~ .slider_container .slider {
- outline: 2px solid $super-duper-dark-nin;
+ outline: 2px solid $body-color;
}
input:checked ~ .slider_container .slider:before {
transform: translateX(17px);
background-color: #fff;
- border-color: $super-duper-dark-nin;
+ border-color: $body-color;
}
.switch_list_elemtent {
diff --git a/src/style/TopBar.scss b/src/style/TopBar.scss
index 6b4145917..076bc54f6 100644
--- a/src/style/TopBar.scss
+++ b/src/style/TopBar.scss
@@ -37,7 +37,7 @@ header.header {
left: 0;
position: relative;
z-index: 5;
- font-family: "Roboto Condensed";
+ font-family: $font-chivo;
}
.width-adjuster {
@@ -48,11 +48,11 @@ header.header {
position: relative;
height: $nin-header;
background: $super-duper-dark-nin;
- box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
+ //box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
}
.adb-topbar {
- background: #4c4a48;
+ background:$sand-50;
}
.header_text:hover {
@@ -69,7 +69,7 @@ header.header {
.header_text {
font-size: 14pt;
- color: $brightest-nin;
+ color: $body-color;
font-weight: 400;
display: inline-block;
margin-left: 56px;
@@ -128,7 +128,7 @@ header.header {
}
.top_bar svg {
- color: white;
+ color: $body-color
}
.top_bar.forside_topbar svg {
@@ -343,3 +343,8 @@ header.header {
.background_click_collector:hover {
cursor: pointer;
}
+
+.menuitems{
+ background: transparent;
+ color:$body-color;
+}
\ No newline at end of file
diff --git a/src/withRouter.js b/src/withRouter.js
new file mode 100644
index 000000000..b9327c326
--- /dev/null
+++ b/src/withRouter.js
@@ -0,0 +1,25 @@
+import {
+ useLocation,
+ useNavigate,
+ useParams,
+} from "react-router-dom";
+
+function withRouter(Component) {
+ function ComponentWithRouterProp(props) {
+ let location = useLocation();
+ let navigate = useNavigate();
+ let params = useParams();
+ return (
+