Trying to reorder tabs, but now CSS is screwed up since I have to do …

…something completely different.
CDLUC3 · Dec 23, 2024 · e4d47ea · e4d47ea
1 parent b393608
commit e4d47ea
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 30 deletions.
diff --git a/dev/scss/_tab.scss b/dev/scss/_tab.scss
@@ -58,3 +58,63 @@
   }
 
 }
+
+/* trying to get tabs that work well if not ordered in some weird way which makes accessibility bad */
+
+/* General tab container styling */
+.tabsnew {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+  font-family: Arial, sans-serif;
+}
+
+/* Hide radio inputs */
+.tabnew__input {
+  display: none;
+}
+
+/* Tab labels */
+.tabnew__label {
+  display: inline-block;
+  padding: 10px 20px;
+  cursor: pointer;
+  background: #f0f0f0;
+  border-bottom: 2px solid transparent;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.tabnew__label:hover {
+  background: #e0e0e0;
+}
+
+/* Active tab label styling */
+.tabnew__input:checked + .tabnew__label {
+  background: #ffffff;
+  border-bottom: 2px solid #007bff;
+  font-weight: bold;
+}
+
+/* Tab content */
+.tabnew__content {
+  padding: 20px;
+  background: #ffffff;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.tabnew__input:checked + .tabnew__label + .tabnew__content {
+  display: block;
+}
+
+/* Accessibility improvements */
+.tabnew__label:focus {
+  outline: 2px solid #007bff;
+}
+
diff --git a/static_src/javascripts/advanced_create.js b/static_src/javascripts/advanced_create.js
@@ -108,7 +108,7 @@ $(document).ready(function() {
       frm.attr('action', location.pathname + '?publish=' +
         $("[name='publish']").val() + '&remainder=' + $("#remainder").val());
       if (includeAnchor) {
-        var input = $("<input>", { type: "hidden", name: "anchor", value: "create__publish" });
+        var input = $("<input>", { type: "hidden", name: "anchor", value: "current_profile" });
         frm.append($(input));
       }
       frm.unbind('submit');

diff --git a/static_src/javascripts/simple_create.js b/static_src/javascripts/simple_create.js
@@ -39,10 +39,7 @@ $(document).ready(function() {
       actTab2();
     }
   });
-/* ToDo: Bring in both simple and advanced content onto the same page
-   (and simultaneously define role=tab in HTML)
-   Then this JavaScript will be unnecessary since tabs will swap quickly
-   btwn simple/advanced content */
+
   $('#tab-2:not(:checked)').on('change', function() {
     actTab2();
   });

diff --git a/static_src/stylesheets/main2.min.css b/static_src/stylesheets/main2.min.css
diff --git a/templates/create/advanced.html b/templates/create/advanced.html
@@ -7,9 +7,6 @@
 <div class="tab create__tab">
   <input class="tab__input" id="tab-1" type="radio" name="name" aria-checked="false"/>
   <label class="tab__label" id="tab-1-label" for="tab-1" tabindex="0">{% trans "Simple" %}</label>
-  <div class="tab__content">
-    <div>This page cannot be loaded unless you have JavaScript activated in your browser.</div>
-  </div>
   <input class="tab__input" id="tab-2" type="radio" name="name" checked="checked" aria-checked="true"/>
   <label class="tab__label" for="tab-2" tabindex="0">{% trans "Advanced" %}</label>
   <div class="tab__content">

diff --git a/templates/create/simple.html b/templates/create/simple.html
@@ -5,12 +5,16 @@
 
 {% block heading %}{% content_heading _("Create a Simple Identifier") %}{% endblock %}
 {% block content %}
-<div class="tab create__tab">
-  <input class="tab__input" id="tab-1" type="radio" name="name" checked="checked" aria-checked="true"/>
-  <label class="tab__label" for="tab-1" tabindex="0">{% trans "Simple" %}</label>
-  <div class="tab__content">
+<div class="tabsnew create__tab">
+  <input class="tabnew__input" id="tab-1" type="radio" name="name" checked="checked" aria-checked="true"/>
+  <label class="tabnew__label" for="tab-1" tabindex="0">{% trans "Simple" %}</label>
+
+  <input class="tabnew__input" id="tab-2" type="radio" name="name" aria-checked="false">
+  <label class="tabnew__label" id="tab-2-label" for="tab-2" tabindex="0">{% trans "Advanced" %}</label>
+
+  <div class="tabnew__content">
     <form id="create_form" action="{% url "ui_create.simple" %}" method="post" class="form-horizontal" role="form">
-    <input name="action" id="action"  type="hidden" value="create"/> 
+    <input name="action" id="action"  type="hidden" value="create"/>
     <div class="row">
 
       <div class="col-md-4 col-md-push-8 create__sidebox">
@@ -30,18 +34,10 @@ <h2 class="sidebox__heading">{% trans "Quick Start Guide" %}</h2>
 
     {% include "includes/simple_describe.html" %}
 
-    {% include "includes/create_button.html" with calling_page="create" id_type="simple" %} 
+    {% include "includes/create_button.html" with calling_page="create" id_type="simple" %}
 
     </form>
   </div>
-
-  <input class="tab__input" id="tab-2" type="radio" name="name" aria-checked="false">
-  <label class="tab__label" id="tab-2-label" for="tab-2" tabindex="0">{% trans "Advanced" %}</label>
-  <div class="tab__content">
-    <div class="row">
-      <div class="col-md-8">This page cannot be loaded unless you have JavaScript activated in your browser.</div>
-    </div>
-  </div>
 </div>
 
   <script type="text/javascript" src="/static/javascripts/simple_create.js"></script>

diff --git a/templates/demo/advanced.html b/templates/demo/advanced.html
@@ -12,9 +12,6 @@
   <!-- This radio button is hidden by CSS -->
   <input class="tab__input" id="tab-1" type="radio" name="name" aria-checked="false"/>
   <label class="tab__label" id="tab-1-label" for="tab-1" tabindex="0">{% trans "Simple" %}</label>
-  <div class="tab__content">
-    <div>This page cannot be loaded unless you have JavaScript activated in your browser.</div>
-  </div>
   <input class="tab__input" id="tab-2" type="radio" name="name" checked="checked" aria-checked="true"/>
   <label class="tab__label" for="tab-2" tabindex="0">{% trans "Advanced" %}</label>
   <div class="tab__content">

diff --git a/templates/demo/simple.html b/templates/demo/simple.html
@@ -38,11 +38,6 @@ <h2 class="sidebox__heading">{% trans "Quick Start Guide for Demo IDs" %}</h2>
   <!-- This radio button is hidden by CSS -->
   <input class="tab__input" id="tab-2" type="radio" name="name" aria-checked="false">
   <label class="tab__label" id="tab-2-label" for="tab-2" tabindex="0">{% trans "Advanced" %}</label>
-  <div class="tab__content">
-    <div class="row">
-      <div class="col-md-8">This page cannot be loaded unless you have JavaScript activated in your browser.</div>
-    </div>
-  </div>
 </div>
 
   <script type="text/javascript" src="/static/javascripts/simple_create.js"></script>