Merge pull request #51 from floydtree/resources

Adding a dropdown box for resources section in the nav-bar
ocsf · Nov 9, 2023 · b38d391 · b38d391
2 parents abc4a0c + 4f1fdbb
commit b38d391
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 99 deletions.
diff --git a/lib/schema_web/templates/layout/app.html.eex b/lib/schema_web/templates/layout/app.html.eex
@@ -100,15 +100,6 @@ limitations under the License.
         case '/objects':
           $('#objects_id').addClass("active");
           break;
-        case '/data_types':
-          $('#data_types_id').addClass("active");
-          break;
-        case '/apidoc':
-          $('#apidoc_id').addClass("active");
-          break;
-        case '/guidelines':
-          $('#guidelines_id').addClass("active");
-          break;
       }
     });
   </script>
@@ -204,25 +195,27 @@ limitations under the License.
       <li id="base_event_id" class="nav-item">
         <a class="nav-link" href='<%= Routes.static_path(@conn, "/base_event") %>'>Base Event</a>
       </li>
-      <div class="navbar-text">|</div>
       <li id="dictionary_id" class="nav-item">
         <a class="nav-link" href='<%= Routes.static_path(@conn, "/dictionary") %>'>Dictionary</a>
       </li>
-      <div class="navbar-text">|</div>
       <li id="objects_id"  class="nav-item">
         <a class="nav-link" href='<%= Routes.static_path(@conn, "/objects") %>'>Objects</a>
       </li>
-      <li id="data_types_id" class="nav-item">
-        <a class="nav-link" href='<%= Routes.static_path(@conn, "/data_types") %>'>Data Types</a>
-      </li>
-      <div class="navbar-text">|</div>
-      <li id="guidelines_id" class="nav-item">
-        <a class="nav-link" href='<%= Routes.static_path(@conn, "/guidelines") %>'>Guidelines</a>
-      </li>
+
       <div class="navbar-text">|</div>
-      <li id="apidoc_id" class="nav-item">
-        <a class="nav-link" target="_blank" href='<%= Routes.static_path(@conn, "/doc") %>'>API Doc</a>
+
+      <li id=resources_id class="nav-link">
+        <div class="dropdown">
+          Resources
+          <div class="dropdown-content">
+            <a class="nav-link" target="_blank" href="https://github.com/ocsf/ocsf-docs/blob/main/Understanding%20OCSF.pdf">Understanding OCSF</a>
+            <a class="nav-link" target="_blank" href="https://github.com/ocsf/ocsf-schema/blob/main/CONTRIBUTING.md">Contributing to OCSF</a>
+            <a class="nav-link" href='<%= Routes.static_path(@conn, "/data_types") %>'>OCSF Data Types</a>
+            <a class="nav-link" target="_blank" href='<%= Routes.static_path(@conn, "/doc") %>'>API Documentation</a>
+          </div>
+        </div>
       </li>
+
       <li class="nav-item">
         <div id="json-schema" class="d-none">
           <button type="button" id="btn-json-schema" class="btn btn-link btn-sm">Schema</button>

diff --git a/lib/schema_web/templates/page/guidelines.html.eex b/lib/schema_web/templates/page/guidelines.html.eex
diff --git a/lib/schema_web/templates/page/guidelines_md.html.md b/lib/schema_web/templates/page/guidelines_md.html.md
diff --git a/mix.exs b/mix.exs
@@ -10,7 +10,7 @@
 defmodule Schema.MixProject do
   use Mix.Project
 
-  @version "2.60.0"
+  @version "2.61.0"
 
   def project do
     build = System.get_env("GITHUB_RUN_NUMBER") || "SNAPSHOT"

diff --git a/priv/static/css/app.css b/priv/static/css/app.css
@@ -352,3 +352,34 @@ label {
 input[type=checkbox]:hover {
   box-shadow:0px 0px 8px #1c73e3;
 }
+
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: block;
+}
+
+/* Dropdown Content */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  right: 1%;
+  background-color: #f0f0ef;
+  min-width: 150px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: rgb(255, 251, 251);
+  padding: 12px 16px;
+  display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #ddd;}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {display: block;}