show switcher on home page instead of modal

key4hep · Jul 12, 2024 · fa4fbbd · fa4fbbd
1 parent 3d93f29
commit fa4fbbd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/css/switch-deploy.css b/css/switch-deploy.css
@@ -1,7 +1,15 @@
 #switch-deploy {
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
   display: flex;
   flex-direction: row;
   align-items: center;
+  z-index: 1;
+  background-color: #fff;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #000;
 }
 
 #switch-deploy-button {
@@ -16,8 +24,9 @@
 
 #switch-deploy-button:hover {
   background-color: #c5c5c5;
+  cursor: pointer;
 }
 
 #switch-deploy-text {
-  margin: 0 10px 0 0;
+  margin: 0 7px 0 0;
 }
diff --git a/index.html b/index.html
@@ -149,17 +149,18 @@
         </li>
       </ul>
     </div>
-    <div id="switch-deploy">
-      <p id="switch-deploy-text">Switch to</p>
-      <button id="switch-deploy-button">release</button>
-    </div>
   </div>
 
   <div id="views">
     <p>Select a view:</p>
     <div id="view-selector" class="view-selector-menu"></div>
   </div>
 
+  <div id="switch-deploy">
+    <p id="switch-deploy-text">Switch to</p>
+    <button id="switch-deploy-button">release</button>
+  </div>
+
   <canvas id="canvas" width="100vw" height="100vh"></canvas>
 
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" type="text/javascript"></script>

diff --git a/js/main.js b/js/main.js
@@ -41,6 +41,12 @@ function showViewsMenu() {
   viewsMenu.style.display = "flex";
 }
 
+function hideDeploySwitch() {
+  const deploySwitch = document.getElementById("switch-deploy");
+
+  deploySwitch.style.display = "none";
+}
+
 document.getElementById("input-file").addEventListener("change", (event) => {
   for (const file of event.target.files) {
     if (!file.name.endsWith("edm4hep.json")) {
@@ -133,6 +139,7 @@ document
     showEventSwitcher();
     showViewsMenu();
     renderEvent(eventNum);
+    hideDeploySwitch();
   });
 
 export { canvas, ctx, jsonData, selectedObjectTypes };