Merge pull request #1394 from Artsdatabanken/bugfix/headerMenuLinks

Bugfix/header menu links
Artsdatabanken · Feb 23, 2024 · aad2a48 · aad2a48
2 parents de84fa0 + 508fb43
commit aad2a48
Show file tree

Hide file tree

Showing 11 changed files with 168 additions and 608 deletions.
diff --git a/...s.Frontend.Web/Infrastructure/RedlistSpecies/Enums/RedlistSpeciesAssessment2021Regions.cs b/...s.Frontend.Web/Infrastructure/RedlistSpecies/Enums/RedlistSpeciesAssessment2021Regions.cs
@@ -61,7 +61,7 @@ public enum RedlistSpeciesAssessment2021Regions
         [Display(Name = "Jan Mayen")]
         JaM,
 
-        [Display(Name = "Nordsjøen")]
+        [Display(Name = "Skagerrak og Nordsjøen")]
         NoSj,
 
         [Display(Name = "Norskehavet")]

diff --git a/Assessments.Frontend.Web/Views/AlienSpecies/_Layout.cshtml b/Assessments.Frontend.Web/Views/AlienSpecies/_Layout.cshtml
@@ -16,8 +16,8 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chivo">
     <link rel="stylesheet" href="https://design.artsdatabanken.no/style/style-reset.css" asp-append-version="true">
     <link rel="stylesheet" href="https://design.artsdatabanken.no/style/layout.css" asp-append-version="true">
-    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/header-footer.css" asp-append-version="true">
-    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/new-footer.css" asp-append-version="true">
+    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/compiled-css/header.css" asp-append-version="true">
+    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/compiled-css/footer.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/graphs.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/listview.css" asp-append-version="true">
@@ -33,7 +33,6 @@
     <link rel="stylesheet" href="~/css/feedbackForm.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/buttons-and-chips.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/map.css" asp-append-version="true">
-    <link rel="stylesheet" href="~/css/new-header.css" asp-append-version="true">
     <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200">
     <script src="~/js/cookies.js" asp-append-version="true"></script>    
@@ -61,8 +60,8 @@
                 <script src="~/js/tableCollapse.js" asp-append-version="true" async></script>
                 <script src="~/js/tableOfContents.js" asp-append-version="true" async></script>
                 <script src="~/js/speciesImages.js" asp-append-version="true" async></script>
-                <script src="~/js/footer.js" asp-append-version="true" async></script>
-                <script src="~/js/header.js" asp-append-version="true" async></script>
+                <script src="https://design.artsdatabanken.no/script/compiled-js/footer.js" asp-append-version="true" async></script>
+                <script src="https://design.artsdatabanken.no/script/compiled-js/header.js" asp-append-version="true" async></script>
                 @await RenderSectionAsync("Scripts", required: false)
             </div>
 

diff --git a/Assessments.Frontend.Web/Views/Redlist/_Layout.cshtml b/Assessments.Frontend.Web/Views/Redlist/_Layout.cshtml
@@ -8,8 +8,8 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chivo">
     <link rel="stylesheet" href="https://design.artsdatabanken.no/style/style-reset.css" asp-append-version="true">
     <link rel="stylesheet" href="https://design.artsdatabanken.no/style/layout.css" asp-append-version="true">
-    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/header-footer.css" asp-append-version="true">
-    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/new-footer.css" asp-append-version="true">
+    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/compiled-css/header.css" asp-append-version="true">
+    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/compiled-css/footer.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/graphs.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/listview.css" asp-append-version="true">
@@ -22,8 +22,8 @@
     <link rel="stylesheet" href="~/css/rl2021.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/bnw.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/buttons-and-chips.css" asp-append-version="true">
-    <link rel="stylesheet" href="~/css/new-header.css" asp-append-version="true">
     <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
     <script src="~/js/cookies.js" asp-append-version="true"></script>   
     <meta name="description" content="Norsk rødliste for arter 2021 er en oversikt over arter som har risiko for å dø ut fra Norge. Rødlista er utarbeidet av Artsdatabanken i samarbeid med fageksperter. ">
 
@@ -44,8 +44,8 @@
                 <script src="~/js/toggleStatView.js" asp-append-version="true" async></script>
                 <script src="~/js/assessmentTabs.js" asp-append-version="true" async></script>
                 <script src="~/js/themes.js" asp-append-version="true" async></script>   
-                <script src="~/js/footer.js" asp-append-version="true" async></script>
-                <script src="~/js/header.js" asp-append-version="true" async></script>
+                <script src="https://design.artsdatabanken.no/script/compiled-js/footer.js" asp-append-version="true" async></script>
+                <script src="https://design.artsdatabanken.no/script/compiled-js/header.js" asp-append-version="true" async></script>
                 <script src="~/js/speciesImages.js" asp-append-version="true" async></script>
                 @await RenderSectionAsync("Scripts", required: false)
             </div>

diff --git a/Assessments.Frontend.Web/Views/Shared/_Layout.cshtml b/Assessments.Frontend.Web/Views/Shared/_Layout.cshtml
@@ -8,12 +8,12 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chivo">
     <link rel="stylesheet" href="https://design.artsdatabanken.no/style/style-reset.css" asp-append-version="true">
     <link rel="stylesheet" href="https://design.artsdatabanken.no/style/layout.css" asp-append-version="true">
-    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/header-footer.css" asp-append-version="true">
-    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/new-footer.css" asp-append-version="true">
+    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/compiled-css/header.css" asp-append-version="true">
+    <link rel="stylesheet" href="https://design.artsdatabanken.no/style/compiled-css/footer.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/bnw.css" asp-append-version="true">
      <link rel="stylesheet" href="~/css/buttons-and-chips.css" asp-append-version="true">
-    <link rel="stylesheet" href="~/css/new-header.css" asp-append-version="true">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
     <script src="~/js/cookies.js" asp-append-version="true"></script>   
 </head>
@@ -28,8 +28,8 @@
             <script src="~/js/filter.js" asp-append-version="true" async></script>
             <script src="~/js/toggleSwitch.js" asp-append-version="true" async></script>
             <script src="~/js/themes.js" asp-append-version="true" async></script>
-            <script src="~/js/footer.js" asp-append-version="true" async></script>
-            <script src="~/js/header.js" asp-append-version="true" async></script>
+            <script src="https://design.artsdatabanken.no/script/compiled-js/footer.js" asp-append-version="true" async></script>
+            <script src="https://design.artsdatabanken.no/script/compiled-js/header.js" asp-append-version="true" async></script>
             @await RenderSectionAsync("Scripts", required: false)
         </div>
 

diff --git a/Assessments.Frontend.Web/Views/Shared/_PageFooter.cshtml b/Assessments.Frontend.Web/Views/Shared/_PageFooter.cshtml
@@ -1,23 +1,29 @@
-<footer class="footer">
+<footer class="adb-footer">
     <div class="top">
-        <div></div>
+        <div>
+            <div class="adb-beak-wrapper">
+                <div class="adb-beak"></div>
+                <div></div>
+            </div>
+            <div></div>
+        </div>
         <div class="center"></div>
         <div></div>
-    </div>    
+    </div>
     <div class="middle">
         <div></div>
-        <div class="center" id="address">
-
-        </div>        
-        <div class="some-container" id="some">
-
+        <div id="adb-footer-center" class="center">
+        </div>
+        <div id="adb-footer-some" class="some-container">
         </div>
     </div>
     <div class="bottom">
-        <div class="center" id="readmore"> 
-        </div>
-        <div>
+        <div class="center">
+            <nav class="footer-wrapper">
+                <ul id="adb-footer-links" class="footer-list">
+                </ul>
+            </nav>
         </div>
+        <div></div>
     </div>
 </footer>
-
diff --git a/Assessments.Frontend.Web/Views/Shared/_PageTopBar.cshtml b/Assessments.Frontend.Web/Views/Shared/_PageTopBar.cshtml
@@ -1,15 +1,30 @@
-<header class="header">
-    <div class="width-adjuster">
-        <a href="https://artsdatabanken.no" class="header-logo">
-            <img class="default-logo" alt="Artsdatabanken" src="https://design.artsdatabanken.no/icons/adb-logo/[email protected]">
-            <img class="darktheme-logo" alt="Artsdatabanken" src="https://mobil.artsobservasjoner.no/assets/logo/Artsdatabanken_Logo_White.svg">
-        </a>
-        <button id="navbar-mobile" class='material-icons'>menu</button>
-
+<header class="adb-header">
+    <a href="https://artsdatabanken.no" class="adb-header-logo">
+        <img class="default-logo" alt="Artsdatabanken-logo" src="https://design.artsdatabanken.no/icons/adb-logo/[email protected]">
+        <img class="darktheme-logo" alt="Artsdatabanken-logo" src="https://mobil.artsobservasjoner.no/assets/logo/Artsdatabanken_Logo_White.svg">
+    </a>
+
+    <div class="header-right-side">
+        <div id="adb_header_search" class="adb-header-search closed">
+            <form action="https://artsdatabanken.no/search/front">
+                <input name="q" type="text" placeholder="Søk her" />
+                <input style="display: none" name="all" value="1" />
+                <button type="submit">
+                    Søk
+                </button>
+            </form>
+        </div>
+        <div class="adb-header-search-mobile">
+            <button id="adb_header_search_mobile" class="open-search-button" onclick="toggleSearch()">
+                <span class="material-symbols-outlined">
+                    search
+                </span>
+                <span>Søk</span>
+            </button>
+        </div>
         <div id="theme_elements">
             <button id="themeselectorbutton" class="themeselector menuitems" onclick="expandThemeButtons()">
                 <span class="hideonmobile">Tema </span>
-                <span class="material-icons only_mobile">contrast </span>
                 <span class="material-icons hideonmobile">expand_more</span>
             </button>
             <div id="themeselectordropdown" class="themeselectordropdown dropdown">
@@ -43,7 +58,6 @@
                 </ul>
             </div>
         </div>
-        <nav id="headermenu" class="hide">
-        </nav>
+        <nav class="header-menu-line" id="adb-headermenu"></nav>
     </div>
 </header>
diff --git a/Assessments.Frontend.Web/wwwroot/css/bnw.css b/Assessments.Frontend.Web/wwwroot/css/bnw.css
@@ -4,7 +4,6 @@
     color: #FFF9F0;
 }
 
-
 /* HIGH CONTRAST THEME */
 .highcontrast .RE,
 .highcontrast .CR,
@@ -495,6 +494,10 @@ color: #FFF9F0;
     .darktheme .water-area td:nth-child(2) b {
         color: white;
     }
+
+    .darktheme .adb-header .adb-header-logo .darktheme-logo {
+        margin-left: 20px;
+    }
 }
 
 .darktheme .big-data-table {
@@ -528,7 +531,7 @@ color: #FFF9F0;
 .darktheme .top,
 .darktheme .center,
 .darktheme .bottom,
-.darktheme .header {
+.darktheme .adb-header {
     background: #262f31;
     color: #faf1e4;
     border-color: #faf1e4;
@@ -557,3 +560,29 @@ color: #FFF9F0;
 .darktheme .sidebar_image_info img {
     background: #d9d9d9;
 }
+
+.adb-header-logo .darktheme-logo {
+    display: none;
+}
+
+.darktheme .adb-header-logo .darktheme-logo {
+    display: block;
+    max-width: 230px;
+    margin-left: 30px;
+}
+
+.darktheme .adb-header-logo .default-logo {
+    display: none;
+}
+
+.darktheme #adb_header_search {
+    background: #262f31;
+}
+
+.darktheme .adb-footer,
+.darktheme .adb-footer .top .center,
+.darktheme .adb-footer .middle .center,
+.darktheme .adb-footer .middle .some-container {
+    background: #262f31;
+    border-color: #faf1e4;
+}