Merge pull request #294 from RockefellerArchiveCenter/development

Update style library version
RockefellerArchiveCenter · Apr 29, 2024 · 458c1e6 · 458c1e6
2 parents f9708f5 + cf64c0c
commit 458c1e6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 35 deletions.
diff --git a/api_formatter/static/css/styles.css b/api_formatter/static/css/styles.css
@@ -1,7 +1,3 @@
-/* html {
-  height:100%
-} */
-
 h2 {
   margin-bottom: 0;
   margin-top: 0;
@@ -11,10 +7,6 @@ h3 {
   margin-top: 10px;
 }
 
-.dropdown__list--mobile {
-  z-index: 999;
-}
-
 .main {
   grid-column: 2 / span 10;
 }
@@ -46,11 +38,3 @@ pre {
   min-height: 0;
   padding: 10px;
 }
-
-.card:hover, .card:focus {
-    box-shadow: 0 0 0 1px #bcbab3,0 0 4px 0 #c8c6c1;
-}
-
-.font-weight-bold {
-  font-weight: bold;
-}
diff --git a/api_formatter/static/js/custom.js b/api_formatter/static/js/custom.js
@@ -1,14 +1,22 @@
 // Handles clicks on the mobile nav toggle button
+
 document.getElementById('nav-toggle').addEventListener('click', function() {
-    const expandedCurrent = this.getAttribute('aria-expanded')
-    
+    const expandedCurrent = this.getAttribute('aria-expanded');
+
     // Sets classes and attributes on the nav-toggle
-    this.classList.toggle('active')
-    this.classList.toggle('closed')
-    this.setAttribute('aria-expanded', expandedCurrent === 'true' ? 'false' : 'true')
+    this.classList.toggle('active');
+    this.classList.toggle('closed');
+    this.setAttribute('aria-expanded', expandedCurrent === 'true' ? 'false' : 'true');
 
     // Sets classes and attributes on the nav-toggle-menu
-    menu = document.getElementById('nav-toggle-menu')
-    menu.classList.toggle('active')
-    menu.classList.toggle('closed')
-})
+    const menu = document.getElementById('nav-toggle-menu');
+    menu.classList.toggle('active');
+    menu.classList.toggle('closed');
+
+    // Toggles tabindex values for each link
+    const links = menu.querySelectorAll('.dropdown__btn--mobile');
+    const isActive = menu.classList.contains('active');
+    links.forEach(link => {
+      link.tabIndex = isActive ? 0 : -1;
+    });
+  });
diff --git a/api_formatter/templates/rest_framework/api.html b/api_formatter/templates/rest_framework/api.html
@@ -7,7 +7,7 @@
 {% block style %}
 <!-- <link rel="stylesheet" type="text/css" href="{% static "bootstrap/css/bootstrap.min.css" %}"> -->
 <link rel="icon" type="image/x-icon" href="https://assets.rockarch.org/assets/img/favicon.ico">
-<link rel="stylesheet" type="text/css" href="https://assets.rockarch.org/v0.8.1/main.min.css">
+<link rel="stylesheet" type="text/css" href="https://assets.rockarch.org/v0.10.0/main.min.css">
 <link rel="stylesheet" href="{% static "css/styles.css" %}">
 {% endblock %}
 
@@ -55,22 +55,22 @@
         </button>
         <ul id="nav-toggle-menu" class="dropdown__list dropdown__list--mobile list--unstyled dropdown__list--navy dropdown__list--slide-left closed">
           <li>
-            <a id="menu-item-agents" class="btn btn--navy dropdown__btn dropdown__btn--mobile" href="{% url 'agent-list' %}">
+            <a id="menu-item-agents" class="btn btn--navy dropdown__btn dropdown__btn--mobile" href="{% url 'agent-list' %}" tabindex="-1">
               Agents
             </a>
           </li>
           <li>
-            <a id="menu-item-collections" class="btn btn--navy dropdown__btn dropdown__btn--mobile" href="{% url 'collection-list' %}">
+            <a id="menu-item-collections" class="btn btn--navy dropdown__btn dropdown__btn--mobile" href="{% url 'collection-list' %}" tabindex="-1">
               Collections
             </a>
           </li>
           <li>
-            <a id="menu-item-objects" class="btn btn--navy dropdown__btn dropdown__btn--mobile" href="{% url 'object-list' %}">
+            <a id="menu-item-objects" class="btn btn--navy dropdown__btn dropdown__btn--mobile" href="{% url 'object-list' %}" tabindex="-1">
               Objects
             </a>
           </li>
           <li>
-            <a id="menu-item-documentation" class="btn btn--navy dropdown__btn dropdown__btn--mobile" href="https://docs.rockarch.org/argo-docs">
+            <a id="menu-item-documentation" class="btn btn--navy dropdown__btn dropdown__btn--mobile" href="https://docs.rockarch.org/argo-docs" tabindex="-1">
               Documentation
             </a>
           </li>
@@ -159,13 +159,13 @@ <h3>Limiting available</h3>
       </nav>
     {% endif %}
 
-    <div class="request-info card mb-20">
-      <pre class="prettyprint"><span class="font-weight-bold">{{ request.method }}</span> {{ request.get_full_path }}</pre>
+    <div class="request-info card card--container mb-20">
+      <pre class="prettyprint"><span class="text--bold">{{ request.method }}</span> {{ request.get_full_path }}</pre>
     </div>
 
-    <div class="response-info card mb-20">
-      <pre class="prettyprint"><span class="meta nocode"><span class="font-weight-bold">HTTP {{ response.status_code }} {{ response.status_text }}</span>{% autoescape off %}{% for key, val in response_headers|items %}
-<span class="font-weight-bold">{{ key }}:</span> <span class="lit">{{ val|break_long_headers|urlize }}</span>{% endfor %}
+    <div class="response-info card card--container mb-20">
+      <pre class="prettyprint"><span class="meta nocode"><span class="text--bold">HTTP {{ response.status_code }} {{ response.status_text }}</span>{% autoescape off %}{% for key, val in response_headers|items %}
+<span class="text--bold">{{ key }}:</span> <span class="lit">{{ val|break_long_headers|urlize }}</span>{% endfor %}
 </span>{{ content|urlize }}</pre>{% endautoescape %}
     </div>