correcting buttons and stuff

Artsdatabanken · Dec 13, 2023 · 84d6fb8 · 84d6fb8
1 parent 526eb41
commit 84d6fb8
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 100 deletions.
diff --git 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 (
-    <div className="flexit">
-      <button className="secondary"
+    <>
+      <Menyelement
         onClick={e => {
           onElementClick("/Natur_i_Norge/Natursystem");
-        }}>        
+        }}
+        icon={
           <img
             className="meny_ikon_image"
             src="/logoer/natursystem_ikon.png"
             alt=""
           />
-          Natursystem <ChevronRight/>
-        </button>
+        }
+        primary="Natursystem"
+      />
 
-        <button className="secondary"
+      <Menyelement
         onClick={e => {
           onElementClick("/Natur_i_Norge/Landskap");
-        }}>
-          <Landscape />Landskap <ChevronRight/>
-        </button>
+        }}
+        icon={<Landscape />}
+        primary="Landskap"
+      />
 
-      <button className="secondary"
+      <Menyelement
         onClick={e => {
           onElementClick("/Administrativ_grense");
-        }}> 
-        <img
+        }}
+        icon={
+          <img
             className="meny_ikon_image"
             src="/logoer/fylke_ikon.png"
             alt=""
-          />Administrative grenser <ChevronRight/>
-          </button>
-
+          />
+        }
+        primary="Administrative grenser"
+      />
 
-      <button className="secondary"
+      <Menyelement
         onClick={e => {
           onElementClick("/Naturvernområde/");
-        }}>
-          <Naturvern />Naturvernområder<ChevronRight/>
-        </button>
-
-    </div>
+        }}
+        icon={<Naturvern />}
+        primary="Naturvernområder"
+      />
+
+      {false && (
+        <Menyelement
+          onClick={e => {
+            onElementClick("/Biota/");
+          }}
+          icon={<Pets />}
+          primary="Arter"
+        />
+      )}
+    </>
   );
 }
 

diff --git 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,22 +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 {
-  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
@@ -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
@@ -106,4 +106,5 @@ $searchbar-width: 300px;
 $top-pad: 5px;
 $top-icon-height: 40px;
 
-$base-size:8px;
+$base-size:8px;
+$border-button-radius: 30px;;
diff --git 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;
+}