From 7632d1d2bc98db62469173a2f8c44263912b97d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Helene=20Engeness=20M=C3=B8rk?= Date: Wed, 13 Dec 2023 12:42:24 +0100 Subject: [PATCH 1/4] fix styling oddities --- src/style/App.scss | 18 ++++++++++++++---- src/style/GraphicProfile.scss | 12 +++++++++++- src/style/Kartlag.scss | 5 ----- src/style/NavMenu.scss | 4 ---- src/style/Sidebar.scss | 2 +- 5 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/style/App.scss b/src/style/App.scss index a359627c..ad235152 100644 --- a/src/style/App.scss +++ b/src/style/App.scss @@ -38,6 +38,11 @@ button { border: 0; } +*:focus, +*:focus-visible{ + outline:2px solid $focus-color; +} + a, a:visited, a:active, @@ -55,11 +60,12 @@ a .MuiSvgIcon-root { vertical-align: middle; } + .inverted_link, .inverted_link:visited, .inverted_link:active, .inverted_link:focus { - color: $bright-nin; + color: $link-color-inverted; } body, @@ -89,12 +95,16 @@ button { border: 0px; } +.layer_list_element.subelement .layerbutton:hover, +.layerbutton:hover, button:hover, button.active:hover, button.active:focus, button.active { + background: $secondary-color-hover; + border-color: $secondary-color-hover; + color: $body-color; cursor: pointer; - _background-color: $medium-nin; } .meny_ikon_image { @@ -458,9 +468,9 @@ div { padding: 0px; border-radius: 5px; margin-bottom: 5px; - box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), - 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); overflow: hidden; + border: 1px solid #d9d9d9; + color:$body-color } .subsection p { diff --git a/src/style/GraphicProfile.scss b/src/style/GraphicProfile.scss index bee6490d..fe1b8e84 100644 --- a/src/style/GraphicProfile.scss +++ b/src/style/GraphicProfile.scss @@ -1,3 +1,11 @@ +$fresh-water-blue-medium: #017590; +$fresh-water-blue-light: #0283a1; // Ferskvannblå +$fresh-water-blue-20: #CCDEE3; +$fresh-water-blue-10: #E6EFF1; + +$secondary-color: $fresh-water-blue-20; +$secondary-color-hover: $fresh-water-blue-10; + /* NiN Main Pallette*/ $sand-80:#F5E7D3;// Border infobox $sand-50:#FFF7EB; // heading + footer @@ -6,7 +14,8 @@ $white:#FFF;//infobox bg $font-chivo: 'Chivo', sans-serif; $font-space: 'Space Mono', sans-serif; $super-duper-dark-nin: #f5e7d3;// #165d6b; -$link-color:#017590; +$link-color:$fresh-water-blue-medium; +$link-color-inverted:#6ccfe6; $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; @@ -14,6 +23,7 @@ $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; +$focus-color: $fresh-water-blue-light; /* FUN COLOURS */ $fun-bg-1: #bce0ce; $fun-bg-2: #dadfcf; diff --git a/src/style/Kartlag.scss b/src/style/Kartlag.scss index b184c5bd..4a533e6c 100644 --- a/src/style/Kartlag.scss +++ b/src/style/Kartlag.scss @@ -130,7 +130,6 @@ button.breadcrumb:hover { .kartlag_header { position: relative; height: 24px; - border-bottom: 1px solid $sand-80; border-top: 1px solid $sand-80; background: $panel-bg; margin-top: -1px; @@ -201,10 +200,6 @@ button.breadcrumb:hover { border: 1px solid $panel-section-bg; } -.layer_list_element.subelement .layerbutton:hover, -.layerbutton:hover { - background: grey; -} .section h3 .layerbutton svg { height: 32px; diff --git a/src/style/NavMenu.scss b/src/style/NavMenu.scss index 18f161d8..8775a0e3 100644 --- a/src/style/NavMenu.scss +++ b/src/style/NavMenu.scss @@ -10,10 +10,6 @@ padding-right: 20px; } -.nav_menu_button:hover { - background: $bright-nin; -} - .nav_text { display: inline-block; vertical-align: top; diff --git a/src/style/Sidebar.scss b/src/style/Sidebar.scss index e8e77df4..2774d6ea 100644 --- a/src/style/Sidebar.scss +++ b/src/style/Sidebar.scss @@ -31,11 +31,11 @@ Their common buttons background-color: $panel-bg; position: absolute; overflow-y: auto; - box-shadow: $box-shadow-card; width: $sidebar-max-size; height: 100%; max-height: $actual-map-height; top: $topbar-height-nin; + border:1px solid $sand-80 } @media only screen and (max-width: 768px) { From aff91058c5a08f5eb68e0893f3f9b1f114390a14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Helene=20Engeness=20M=C3=B8rk?= Date: Wed, 13 Dec 2023 13:00:27 +0100 Subject: [PATCH 2/4] adjust frontpage colors --- src/style/Forside.scss | 8 ++++---- src/style/GraphicProfile.scss | 3 +++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/style/Forside.scss b/src/style/Forside.scss index 9daa3f05..8f227857 100644 --- a/src/style/Forside.scss +++ b/src/style/Forside.scss @@ -15,7 +15,7 @@ } .frontpage_link_items{ - background:$sand-80 + background:$background-1 } @media only screen and (max-width: 768px) { @@ -31,7 +31,7 @@ /* Header */ .frontpage_header { - background: $brightest-nin; + background: $background-2; padding: 20px; } @@ -57,13 +57,13 @@ /* fEATURE bLOCK */ .frontpage_feature_block { - background: $dark-nin; + background: $sand-80; font-size: 16pt; } .frontpage_feature_block, .frontpage_feature_block h2 { - color: white; + } .frontpage_feature_container { diff --git a/src/style/GraphicProfile.scss b/src/style/GraphicProfile.scss index fe1b8e84..685051e9 100644 --- a/src/style/GraphicProfile.scss +++ b/src/style/GraphicProfile.scss @@ -10,6 +10,9 @@ $secondary-color-hover: $fresh-water-blue-10; $sand-80:#F5E7D3;// Border infobox $sand-50:#FFF7EB; // heading + footer $sand-10:#FFFCF7; // Innhold bg + +$background-1:#fff9f0; +$background-2:$sand-10; $white:#FFF;//infobox bg $font-chivo: 'Chivo', sans-serif; $font-space: 'Space Mono', sans-serif; From 526eb41ec5964cb44bc180541740cb5a442fbb29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Helene=20Engeness=20M=C3=B8rk?= Date: Wed, 13 Dec 2023 13:53:34 +0100 Subject: [PATCH 3/4] cleaned up frontpage to look decent --- public/logoer/logo_dark.svg | 63 ++++++++++++++++++++ src/Forside/ForsideInformasjon.js | 36 +++++++----- src/HamburgerMeny/Utforsk/Utforsk.js | 61 ++++++++------------ src/style/App.scss | 86 +++++++++++++++++++++++----- src/style/Forside.scss | 29 ++++------ src/style/GraphicProfile.scss | 9 ++- 6 files changed, 199 insertions(+), 85 deletions(-) create mode 100644 public/logoer/logo_dark.svg diff --git a/public/logoer/logo_dark.svg b/public/logoer/logo_dark.svg new file mode 100644 index 00000000..d64a4067 --- /dev/null +++ b/public/logoer/logo_dark.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + diff --git a/src/Forside/ForsideInformasjon.js b/src/Forside/ForsideInformasjon.js index 03ea395d..7591ae77 100644 --- a/src/Forside/ForsideInformasjon.js +++ b/src/Forside/ForsideInformasjon.js @@ -4,6 +4,7 @@ import "../style/Forside.scss"; import Kilder from "./Kilder"; import Utforsk from "../HamburgerMeny/Utforsk/Utforsk"; import { useNavigate } from "react-router"; +import { ChevronRight} from "@material-ui/icons"; const ForsideInformasjon = ({onToggleHovedMeny}) => { const navigate = useNavigate(); @@ -12,33 +13,43 @@ const ForsideInformasjon = ({onToggleHovedMeny}) => {
{ - e.stopPropagation(); - navigate("/Natur_i_Norge/"); - }} + >
artsdatabanken logo{" "}

NiN-Kart

Natur i Norge

-
+ +

Kart-tjeneste for Natur i Norge (NiN)-systemet.
+ Nåværende kartløsning viser data fra NiN-2.

+ +
+

Utforsk NiN-kart via ikonene nedenfor

+
- +

Hva er Natur i Norge?

Natur i Norge (NiN) er et type- og beskrivelsessystem for - naturvariasjon. -
+ naturvariasjon som benyttes i kartlegging av landets landskap og naturtyper. + +

+ +

+ Les mer på {

-
-

Utforsk NiN-kart via ikonene nedenfor

- -
+
+ +
{ } return ( - <> - + - { onElementClick("/Natur_i_Norge/Landskap"); - }} - icon={} - primary="Landskap" - /> + }}> + Landskap + - { onElementClick("/Administrativ_grense"); - }} - icon={ - + - } - primary="Administrative grenser" - /> + />Administrative grenser + + - { onElementClick("/Naturvernområde/"); - }} - icon={} - primary="Naturvernområder" - /> - - {false && ( - { - onElementClick("/Biota/"); - }} - icon={} - primary="Arter" - /> - )} - + }}> + Naturvernområder + + +
); } diff --git a/src/style/App.scss b/src/style/App.scss index ad235152..b12b2558 100644 --- a/src/style/App.scss +++ b/src/style/App.scss @@ -2,11 +2,78 @@ @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed"); @import url("https://fonts.googleapis.com/css?family=Roboto"); + + +/* Button system */ + +// Variables +$gap: $base-size; +$button-font-size: 16px; +$icon-size: 18px; +$border-radius: 30px; +$padding-horisontal: 22px; +$padding-vertical: 14px; +$border-width: 2px; +$focus-border-width: 3px; +$icon-button-size: 40px; +$focus-outline: $focus-border-width solid $focus-color; + + +button { + padding: $padding-vertical $padding-horisontal; + border-radius: $border-radius; + border-width: $border-width; + border-style: solid; + box-sizing: border-box; + font-size: $button-font-size; + line-height: $button-font-size; + margin: $gap; + margin-left: 0; + display: flex; + align-items: center; + +} + +button img, +button svg{ + vertical-align: baseline; + margin-right: $gap; + font-size: inherit; + height:24px +} + +.primary { + background: $primary-color; + border-color: $primary-color; + color: $white +} +.primary:hover, +.primary:active { + background: $primary-color-hover; + border-color: $primary-color-hover; + color: $white +} + +.secondary { + background: $secondary-color; + border-color: $secondary-color; +} + +.secondary:hover, +.secondary:active { + background: $secondary-color-hover; + border-color: $secondary-color-hover; +} + + + + /* Allow click through of events on overlying node we can't get rid of*/ body, #root { pointer-events: none; + background: #fffcf7; } body *, #root * { @@ -60,14 +127,6 @@ a .MuiSvgIcon-root { vertical-align: middle; } - -.inverted_link, -.inverted_link:visited, -.inverted_link:active, -.inverted_link:focus { - color: $link-color-inverted; -} - body, input, p, @@ -147,14 +206,11 @@ div { background: transparent; border: none; padding: 4px; - margin: none; display: inline-block; -} - -.invisible_icon_button:active, -.invisible_icon_button:hover { - opacity: 0.5; - cursor: pointer; + line-height: inherit; + margin: 0; + text-align: center; + flex:none } /* Last inn mer-knappen */ diff --git a/src/style/Forside.scss b/src/style/Forside.scss index 8f227857..6f4623b5 100644 --- a/src/style/Forside.scss +++ b/src/style/Forside.scss @@ -31,8 +31,9 @@ /* Header */ .frontpage_header { - background: $background-2; + background: $sand-80; padding: 20px; + text-align: center; } .frontpage_header div { @@ -41,6 +42,11 @@ text-align: left; } +.frontpage_header button{ + margin: auto; + margin-top: 20px; +} + /* Headings */ .frontpage h1, @@ -57,15 +63,10 @@ /* fEATURE bLOCK */ .frontpage_feature_block { - background: $sand-80; + background: $sand-50; font-size: 16pt; } -.frontpage_feature_block, -.frontpage_feature_block h2 { - -} - .frontpage_feature_container { max-width: 1024px; margin: auto; @@ -120,17 +121,11 @@ } } -.frontpage_link_items .menu_item svg, -.frontpage_link_items .meny_ikon_image { - width: 80px; - height: 80px; - display: block; - margin: auto; +.flexit{ + display: flex; } /* Footer */ -.frontpage_body { -} .artsdatabanken_logo img, .frontpage_sources:first-child a img { @@ -138,12 +133,12 @@ } .frontpage_footer { - min-height: 300px; + min-height: 320px; width: 100vw; text-align: center; background: $brightest-nin; color:$body-color; - padding-top:0px + padding-top:2px } .frontpage_icon svg { diff --git a/src/style/GraphicProfile.scss b/src/style/GraphicProfile.scss index 685051e9..edca7906 100644 --- a/src/style/GraphicProfile.scss +++ b/src/style/GraphicProfile.scss @@ -1,11 +1,15 @@ +$fresh-water-blue: #005B72; $fresh-water-blue-medium: #017590; $fresh-water-blue-light: #0283a1; // Ferskvannblå +$fresh-water-blue-80: #337B8D; $fresh-water-blue-20: #CCDEE3; $fresh-water-blue-10: #E6EFF1; - +$primary-color: $fresh-water-blue; +$primary-color-hover: $fresh-water-blue-80; $secondary-color: $fresh-water-blue-20; $secondary-color-hover: $fresh-water-blue-10; + /* NiN Main Pallette*/ $sand-80:#F5E7D3;// Border infobox $sand-50:#FFF7EB; // heading + footer @@ -18,7 +22,6 @@ $font-chivo: 'Chivo', sans-serif; $font-space: 'Space Mono', sans-serif; $super-duper-dark-nin: #f5e7d3;// #165d6b; $link-color:$fresh-water-blue-medium; -$link-color-inverted:#6ccfe6; $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; @@ -102,3 +105,5 @@ $searchbar-width: 300px; /* Top menu margins and paddings */ $top-pad: 5px; $top-icon-height: 40px; + +$base-size:8px; \ No newline at end of file From 84d6fb878c31251f59ca4a7289def6089091e69f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Helene=20Engeness=20M=C3=B8rk?= Date: Wed, 13 Dec 2023 14:21:28 +0100 Subject: [PATCH 4/4] correcting buttons and stuff --- src/HamburgerMeny/Utforsk/Utforsk.js | 61 +++++++----- src/style/App.scss | 136 +++++++++++++-------------- src/style/Forside.scss | 5 +- src/style/GraphicProfile.scss | 3 +- src/style/Kartlag.scss | 10 +- 5 files changed, 115 insertions(+), 100 deletions(-) diff --git a/src/HamburgerMeny/Utforsk/Utforsk.js b/src/HamburgerMeny/Utforsk/Utforsk.js index 9329f7c6..d0315fd7 100644 --- a/src/HamburgerMeny/Utforsk/Utforsk.js +++ b/src/HamburgerMeny/Utforsk/Utforsk.js @@ -1,6 +1,6 @@ - +import Menyelement from "../Menyelement"; import React from "react"; -import { Landscape, ChevronRight } from "@material-ui/icons"; +import { Pets, Landscape } from "@material-ui/icons"; import Naturvern from "../Naturvern"; import { useNavigate } from "react-router-dom"; @@ -13,46 +13,61 @@ const Utforsk = ({onToggleHovedMeny}) => { } return ( -
- + } + primary="Natursystem" + /> - + }} + icon={} + primary="Landskap" + /> - - + /> + } + primary="Administrative grenser" + /> - - -
+ }} + icon={} + primary="Naturvernområder" + /> + + {false && ( + { + onElementClick("/Biota/"); + }} + icon={} + primary="Arter" + /> + )} + ); } diff --git a/src/style/App.scss b/src/style/App.scss index b12b2558..f7b7d60f 100644 --- a/src/style/App.scss +++ b/src/style/App.scss @@ -2,72 +2,6 @@ @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed"); @import url("https://fonts.googleapis.com/css?family=Roboto"); - - -/* Button system */ - -// Variables -$gap: $base-size; -$button-font-size: 16px; -$icon-size: 18px; -$border-radius: 30px; -$padding-horisontal: 22px; -$padding-vertical: 14px; -$border-width: 2px; -$focus-border-width: 3px; -$icon-button-size: 40px; -$focus-outline: $focus-border-width solid $focus-color; - - -button { - padding: $padding-vertical $padding-horisontal; - border-radius: $border-radius; - border-width: $border-width; - border-style: solid; - box-sizing: border-box; - font-size: $button-font-size; - line-height: $button-font-size; - margin: $gap; - margin-left: 0; - display: flex; - align-items: center; - -} - -button img, -button svg{ - vertical-align: baseline; - margin-right: $gap; - font-size: inherit; - height:24px -} - -.primary { - background: $primary-color; - border-color: $primary-color; - color: $white -} -.primary:hover, -.primary:active { - background: $primary-color-hover; - border-color: $primary-color-hover; - color: $white -} - -.secondary { - background: $secondary-color; - border-color: $secondary-color; -} - -.secondary:hover, -.secondary:active { - background: $secondary-color-hover; - border-color: $secondary-color-hover; -} - - - - /* Allow click through of events on overlying node we can't get rid of*/ body, @@ -150,8 +84,51 @@ b { /* ALL BUTTONS */ +/* Button system */ + +// Variables +$gap: $base-size; +$button-font-size: 16px; +$icon-size: 18px; +$padding-horisontal: 22px; +$padding-vertical: 14px; +$border-width: 2px; +$focus-border-width: 3px; +$icon-button-size: 40px; +$focus-outline: $focus-border-width solid $focus-color; + + button { - border: 0px; + padding: $padding-vertical $padding-horisontal; + border-radius: $border-button-radius; + border-width: $border-width; + border-style: solid; + box-sizing: border-box; + font-size: $button-font-size; + line-height: $button-font-size; + margin: $gap; + margin-left: 0; + display: flex; + align-items: center; + border-color: transparent; +} + +button img, +button svg{ + vertical-align: baseline; + margin-right: $gap; + font-size: inherit; + height:24px +} + +.frontpage_link_items .menu_item, +.secondary { + background: $secondary-color; + border-color: $secondary-color; +} + +.layerbutton{ + background: transparent; } .layer_list_element.subelement .layerbutton:hover, @@ -159,13 +136,31 @@ button { button:hover, button.active:hover, button.active:focus, -button.active { - background: $secondary-color-hover; - border-color: $secondary-color-hover; +button.active, +.frontpage_link_items .menu_item:hover, +.layerbutton:hover, +.secondary:hover, +.secondary:active { color: $body-color; cursor: pointer; + background: $secondary-color-hover; + border-color: $secondary-color-hover; } +.primary { + background: $primary-color; + border-color: $primary-color; + color: $white +} + +.primary:hover, +.primary:active { + background: $primary-color-hover; + border-color: $primary-color-hover; + color: $white +} + + .meny_ikon_image { width: 20px; height: 20px; @@ -243,7 +238,6 @@ div { border: 0; margin: 0; border-radius: 0; - outline: none; display: flex; justify-content: flex-start; vertical-align: middle; diff --git a/src/style/Forside.scss b/src/style/Forside.scss index 6f4623b5..417a315b 100644 --- a/src/style/Forside.scss +++ b/src/style/Forside.scss @@ -1,4 +1,5 @@ @import "./GraphicProfile.scss"; + /* Container */ .frontpage { width: 100%; @@ -110,7 +111,7 @@ width: auto; margin: 25px; text-align: center; - border-radius: 3px; + border-radius: $border-button-radius; position: relative; } @media only screen and (max-width: 768px) { @@ -193,7 +194,7 @@ } .frontpage_link_items .hamburger_menu_item div { - display: inline-block; + display: flex; } .frontpage_link_items .hamburger_menu_item .mobile_only { diff --git a/src/style/GraphicProfile.scss b/src/style/GraphicProfile.scss index edca7906..cf213d3b 100644 --- a/src/style/GraphicProfile.scss +++ b/src/style/GraphicProfile.scss @@ -106,4 +106,5 @@ $searchbar-width: 300px; $top-pad: 5px; $top-icon-height: 40px; -$base-size:8px; \ No newline at end of file +$base-size:8px; +$border-button-radius: 30px;; \ No newline at end of file diff --git a/src/style/Kartlag.scss b/src/style/Kartlag.scss index 4a533e6c..a7583629 100644 --- a/src/style/Kartlag.scss +++ b/src/style/Kartlag.scss @@ -139,7 +139,6 @@ button.breadcrumb:hover { position: absolute; right: 7px; top: 1px; - background: none; padding: 6px 0; } @@ -178,7 +177,6 @@ button.breadcrumb:hover { width: 50px; padding: 0; padding-top: 0px; - background: white; line-height: 50px; margin-right: 2px; padding-top: 7px; @@ -207,8 +205,10 @@ button.breadcrumb:hover { } .layerbutton svg { + margin-left: auto; + margin-right: auto; margin-top: auto; - margin-bottom: auto; + margin-bottom: 10px; } .kartlag_element_text { @@ -389,3 +389,7 @@ button.breadcrumb:hover { .lukkbartvindu .closetab { z-index: 0; } + +.kartlag_element_buttons{ + display: flex; +} \ No newline at end of file