From 409da04d1c3442136e3f5b154166c2d8560f2e27 Mon Sep 17 00:00:00 2001 From: Katherine Lukens Date: Tue, 28 Jan 2025 16:19:26 +0000 Subject: [PATCH] Update marine vrfy HTML codes --- .../marine_vrfy_display/default.css | 72 +- .../index_vrfy_marine.html | 791 +++++++++++++----- 2 files changed, 605 insertions(+), 258 deletions(-) diff --git a/utils/soca/fig_gallery/marine_vrfy_display/default.css b/utils/soca/fig_gallery/marine_vrfy_display/default.css index 9eee9a476..4ff19b726 100644 --- a/utils/soca/fig_gallery/marine_vrfy_display/default.css +++ b/utils/soca/fig_gallery/marine_vrfy_display/default.css @@ -502,20 +502,15 @@ color: rgba(255,255,255,1); } - .dropbtn:hover { - background-color: #2980b9; - border-left: solid 10px #ffffff; - } - .dropbtn:focus { background-color: #2980b9; border-left: solid 10px #ffffff; - + display: block; } .dropdown { position: relative; - display: block; + display: inline-block; width: 100%; } @@ -523,15 +518,15 @@ /* The dropdown content (submenus) */ .dropdown-content { display: none; - left: 100%; - top: -50%; + left: 100%; + top: -50%; position: absolute; background-color: #112e51; min-width: 160px; z-index: 1; } - /*.dropdown-content a { + .dropdown-content a { display: block; color: rgba(255,255,255,1); padding: 1em 1em; @@ -540,56 +535,27 @@ text-decoration: none; } - /* Show the dropdown menu on hover */ - .dropdown:hover .dropdown-content { - display: block; - } - - /* Style for submenu items */ - .dropdown-content div { - padding: 10px; - color: white; - cursor: pointer; - } - - .dropdown-content div:hover { - background-color: #575757; - } - - /* Style for deeper nested dropdown */ - .dropdown-content .dropdown-content { - top: -75%; - left: 100%; - display: none; - position: absolute; - } - - /* Show deeper nested dropdown when hovered over */ - .dropdown-content div:hover .dropdown-content { - display: block; - } - - /* Display dropdown menu when hovering over a parent menu */ - div:hover > .dropdown-menu { - display: block; + .dropdown-content a:hover { + background-color: #575757; } - /* Style for nested dropdowns */ - /* Ensure only one level of dropdown is visible at a time */ - div > .dropdown-menu > div { + /* Style for the submenu */ + .submenu { + display: none; position: relative; + left: 100%; + top: 1; + background-color: #575757; + min-width: 160px; } - /* Hide the submenus by default */ - .dropdown-menu > .dropdown-menu { - display: none; - left: 100%; /* Position submenu to the right */ - top: 5; - position: absolute; + /* Show submenu when the parent item is clicked */ + .dropdown-item.open .submenu { + display: block; } - /* Show only the submenu when hovering over the parent */ - div > .dropdown-menu > div:hover > .dropdown-menu { + /* Show the deepter nested dropdown when the button is clicked */ + .dropdown.open .dropdown-content { display: block; } diff --git a/utils/soca/fig_gallery/marine_vrfy_display/index_vrfy_marine.html b/utils/soca/fig_gallery/marine_vrfy_display/index_vrfy_marine.html index 31372866c..80fd14b2d 100644 --- a/utils/soca/fig_gallery/marine_vrfy_display/index_vrfy_marine.html +++ b/utils/soca/fig_gallery/marine_vrfy_display/index_vrfy_marine.html @@ -47,17 +47,6 @@ // Close the dropdown if the user clicks outside of it window.onclick = function(event) { -// var oFrame = document.getElementById("body_frame"); -// oFrame.contentWindow.document.onclick = function() { -// var i; -// var dropdowns = document.getElementsByClassName("dropdown-content"); -// for (i = 0; i < dropdowns.length; i++) { -// var openDropdown = dropdowns[i]; -// if (openDropdown.classList.contains('show')) { -// openDropdown.classList.remove('show'); -// } -// } -// }; if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; @@ -80,7 +69,15 @@ } } } - + if (!event.target.matches('.dropdown button')) { + var dropdowns = document.querySelectorAll('.dropdown-content'); + for (var i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.style.display === "block") { + openDropdown.style.display = "none"; // Close the dropdown + } + } + } } @@ -94,47 +91,47 @@

GFS
Experiment
Verification