Skip to content

Commit

Permalink
Merge pull request #1806 from Artsdatabanken/new-profile-v2
Browse files Browse the repository at this point in the history 
New profile v2
  • Loading branch information
@helemork
helemork authored Dec 13, 2023
2 parents d9f4de6 + 84d6fb8 commit ec9c87a
Show file tree
Hide file tree
Showing 8 changed files with 210 additions and 67 deletions.
63 changes: 63 additions & 0 deletions public/logoer/logo_dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 23 additions & 13 deletions src/Forside/ForsideInformasjon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -12,33 +13,43 @@ const ForsideInformasjon = ({onToggleHovedMeny}) => {
<div className="frontpage_body">
<div
className="frontpage_header"
onClick={e => {
e.stopPropagation();
navigate("/Natur_i_Norge/");
}}

>
<div className="frontpage_icon">
<img
src="/logoer/small_icon_grey_two.png"
className="logo_image_frontpage"
className="logo_image_frontpage"
alt="artsdatabanken logo"
/>{" "}
</div>
<div>
<h1>NiN-Kart</h1>
<h2>Natur i Norge</h2>
</div>

</div><p>Kart-tjeneste for Natur i Norge (NiN)-systemet. <br/>
Nåværende kartløsning viser data fra NiN-2.</p>
<button onClick={e => {navigate("/Natur_i_Norge/");}} class="primary">
Gå til kart
<ChevronRight />
</button>
</div><div className="frontpage_link_items">
<h2>Utforsk NiN-kart via ikonene nedenfor</h2>
<Utforsk onToggleHovedMeny={onToggleHovedMeny} />
</div>

<div className="frontpage_feature_block">
<div className="frontpage_feature_container">
<img src="/logoer/logo_hvit.svg" alt="" />
<img src="/logoer/logo_dark.svg" alt="" />
<div>
<h2>Hva er Natur i Norge?</h2>
<p>
Natur i Norge (NiN) er et type- og beskrivelsessystem for
naturvariasjon.
<br />
naturvariasjon som benyttes i kartlegging av landets landskap og naturtyper.

</p>

<p>
<span>Les mer på </span>
<a
href="https://www.artsdatabanken.no/NiN"
className="inverted_link"
Expand All @@ -50,11 +61,10 @@ const ForsideInformasjon = ({onToggleHovedMeny}) => {
</div>
</div>

<div className="frontpage_link_items">
<h2>Utforsk NiN-kart via ikonene nedenfor</h2>
<Utforsk onToggleHovedMeny={onToggleHovedMeny} />
</div>

</div>


<div className="frontpage_footer">
<div className="frontpage_sources">
<a
Expand Down
100 changes: 80 additions & 20 deletions src/style/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ on overlying node we can't get rid of*/
body,
#root {
pointer-events: none;
background: #fffcf7;
}
body *,
#root * {
Expand Down Expand Up @@ -38,6 +39,11 @@ button {
border: 0;
}

*:focus,
*:focus-visible{
outline:2px solid $focus-color;
}

a,
a:visited,
a:active,
Expand All @@ -55,13 +61,6 @@ a .MuiSvgIcon-root {
vertical-align: middle;
}

.inverted_link,
.inverted_link:visited,
.inverted_link:active,
.inverted_link:focus {
color: $bright-nin;
}

body,
input,
p,
Expand All @@ -85,18 +84,83 @@ 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,
.layerbutton:hover,
button:hover,
button.active:hover,
button.active:focus,
button.active {
button.active,
.frontpage_link_items .menu_item:hover,
.layerbutton:hover,
.secondary:hover,
.secondary:active {
color: $body-color;
cursor: pointer;
_background-color: $medium-nin;
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;
Expand Down Expand Up @@ -137,14 +201,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 */
Expand Down Expand Up @@ -177,7 +238,6 @@ div {
border: 0;
margin: 0;
border-radius: 0;
outline: none;
display: flex;
justify-content: flex-start;
vertical-align: middle;
Expand Down Expand Up @@ -458,9 +518,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 {
Expand Down
Loading

0 comments on commit ec9c87a

Please sign in to comment.