diff --git a/dev/scss/_create.scss b/dev/scss/_create.scss index 4e659b7b0..d20577ded 100755 --- a/dev/scss/_create.scss +++ b/dev/scss/_create.scss @@ -25,6 +25,37 @@ $form-element-end-group-spacing: 32px; } +/* START special styles to imitate bootstrap so that item order is correct for screen readers :-/ */ + +/* Custom row for the layout */ +.bs-create__row { + position: relative; +} + +/* Custom class for main content */ +.bs-create__main { + width: 66.66%; + float: left; +} + +/* Custom class for sidebar */ +.bs-create__sidebox { + position: absolute; + padding-top: 28px; + padding-right: 30px; + right: 0; + top: 0; + width: 31.2%; +} + +/* Clear the floated/absolute positioning below the row */ +.bs-fieldset-stacked { + width: 100%; + float: left; +} + +/* END special styles to imitate bootstrap so that item order is correct for screen readers :-/ */ + .create__radio-button { margin: 0 0 $form-element-group-spacing 45px; } diff --git a/dev/scss/_tab.scss b/dev/scss/_tab.scss index 391cd017e..8050d3914 100755 --- a/dev/scss/_tab.scss +++ b/dev/scss/_tab.scss @@ -26,10 +26,10 @@ .tab__label { margin: 0 10px 0 0; padding: 0.5em 10px; - border: 1px solid $design-light-gray-border-color; - background: $design-white-color; - color: $design-primary-color; - font-size: 1.2em; + border: 1px solid $design-light-gray-border-color; + background: $design-white-color; + color: $design-primary-color; + font-size: 1.2em; font-weight: normal; cursor: pointer; z-index: 1; @@ -58,3 +58,90 @@ } } + +/* 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; + overflow: hidden; + font-family: Arial, sans-serif; +} + +/* Tab header container */ +.tabnew__header { + display: flex; + flex-direction: row; + justify-content: flex-start; /* Align tabs to the left */ + border-bottom: 1px solid #ccc; +} + +/* Hide radio inputs */ +.tabnew__input { + display: none; +} + +/* Tab labels */ +.tabnew__label { + display: inline-flex; + margin: 0 10px 0 0; + padding: 0.5em 10px; + border: 1px solid $design-light-gray-border-color; + background: $design-white-color; + color: $design-primary-color; + font-size: 1.2em; + font-weight: normal; + cursor: pointer; + z-index: 1; + + @include bp(screen2) { + padding: 0.5em 30px; + } + + &:not(:first-of-type) { + margin-left: -1px; + } +} + +.tabnew__label:hover { + background: #e0e0e0; +} + +/* Active tab label styling */ +.tabnew__input:checked + .tabnew__label { + border-bottom: 1px solid $design-light-gray-bg-color; + background: $design-light-gray-bg-color; + color: $design-black-color; + + + .tabnew__content { + display: block; + } +} + +/* Tab content */ +.tabnew__content { + position: relative; + width: 100%; + margin-top: -2px; + padding: 10px; + border: 1px solid $design-light-gray-border-color; + background: $design-light-gray-bg-color; + + @include bp(screen2) { + padding: 30px; + } +} + +.tabnew__input:checked + .tabnew__label + .tabnew__content { + display: block; +} + +/* Accessibility improvements */ +.tabnew__label:focus { + outline: 2px solid $design-mark-color +} + diff --git a/static_src/javascripts/advanced_create.js b/static_src/javascripts/advanced_create.js index ea22647bd..856e96ba5 100644 --- 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 = $("", { type: "hidden", name: "anchor", value: "create__publish" }); + var 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 index 6d10c1a6c..c0cf7a734 100644 --- 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 index c48eadda7..7d60e31ce 100644 --- a/static_src/stylesheets/main2.min.css +++ b/static_src/stylesheets/main2.min.css @@ -1805,6 +1805,91 @@ Selector pattern using above mixin: .tab__content { padding: 30px; } } +/* trying to get tabs that work well if not ordered in some weird way which makes accessibility bad */ +/* General tab container styling */ +.tabsnew { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + max-width: 600px; + margin: 0 auto; + overflow: hidden; + font-family: Arial, sans-serif; } + +/* Tab header container */ +.tabnew__header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + /* Align tabs to the left */ + border-bottom: 1px solid #ccc; } + +/* Hide radio inputs */ +.tabnew__input { + display: none; } + +/* Tab labels */ +.tabnew__label { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + margin: 0 10px 0 0; + padding: 0.5em 10px; + border: 1px solid #beb6af; + background: white; + color: #005f70; + font-size: 1.2em; + font-weight: normal; + cursor: pointer; + z-index: 1; } + @media (min-width: 768px) { + .tabnew__label { + padding: 0.5em 30px; } } + .tabnew__label:not(:first-of-type) { + margin-left: -1px; } + +.tabnew__label:hover { + background: #e0e0e0; } + +/* Active tab label styling */ +.tabnew__input:checked + .tabnew__label { + border-bottom: 1px solid #f9f8f7; + background: #f9f8f7; + color: black; } + .tabnew__input:checked + .tabnew__label + .tabnew__content { + display: block; } + +/* Tab content */ +.tabnew__content { + position: relative; + width: 100%; + margin-top: -2px; + padding: 10px; + border: 1px solid #beb6af; + background: #f9f8f7; } + @media (min-width: 768px) { + .tabnew__content { + padding: 30px; } } + +.tabnew__input:checked + .tabnew__label + .tabnew__content { + display: block; } + +/* Accessibility improvements */ +.tabnew__label:focus { + outline: 2px solid #fbb714; } + .table1 { width: 100%; border-collapse: collapse; } @@ -2059,6 +2144,31 @@ Selector pattern using above mixin: .create__sidebox { padding: 0 0 20px 20px; } } +/* START special styles to imitate bootstrap so that item order is correct for screen readers :-/ */ +/* Custom row for the layout */ +.bs-create__row { + position: relative; } + +/* Custom class for main content */ +.bs-create__main { + width: 66.66%; + float: left; } + +/* Custom class for sidebar */ +.bs-create__sidebox { + position: absolute; + padding-top: 28px; + padding-right: 30px; + right: 0; + top: 0; + width: 31.2%; } + +/* Clear the floated/absolute positioning below the row */ +.bs-fieldset-stacked { + width: 100%; + float: left; } + +/* END special styles to imitate bootstrap so that item order is correct for screen readers :-/ */ .create__radio-button { margin: 0 0 20px 45px; } diff --git a/templates/create/_datacite_title.html b/templates/create/_datacite_title.html index ea7d01493..1d0a335ab 100644 --- a/templates/create/_datacite_title.html +++ b/templates/create/_datacite_title.html @@ -23,7 +23,7 @@ {% if forloop.counter == 1 %} {% include "create/_datacite_inlinetext.html" with field=t_field reqd="true" %} {% elif forloop.counter == 2 %} -
+
{{ t_field.label }} {% for radio in t_field %} {% endfor %} -
+ {% else %} {% include "create/_datacite_inlinetext.html" with field=t_field %} {% endif %} diff --git a/templates/create/advanced.html b/templates/create/advanced.html index 44cf62316..7d4e36592 100644 --- a/templates/create/advanced.html +++ b/templates/create/advanced.html @@ -4,44 +4,46 @@ {% block title %}{% block title-twitter %}{% trans "Create an Advanced Identifier" %}{% endblock %}{% endblock %} {% block heading %}{% content_heading _("Create an Advanced Identifier") %}{% endblock %} {% block content %} -
- - -
-
This page cannot be loaded unless you have JavaScript activated in your browser.
+
+
+ + + +
- - -
+
-
-
-
-

{% trans "Quick Start Guides" %}

- -
-
-
- {% include "includes/simple_id_type.html" with calling_page="create" %} +
+ + +
+ {% include "includes/simple_id_type.html" with calling_page="create" %} {% include "includes/advanced_remainder.html" %} {% include "includes/advanced_publish_id.html" %}
-
-
+
- {% include "includes/advanced_describe.html" %} - - {% include "includes/create_button.html" with calling_page="create" id_type="advanced" %} + +
+ {% include "includes/advanced_describe.html" %} + {% include "includes/create_button.html" with calling_page="create" id_type="advanced" %} +
+ +
+
+

{% trans "Quick Start Guides" %}

+ +
diff --git a/templates/create/simple.html b/templates/create/simple.html index d0cd13e64..3dd3b72f1 100644 --- a/templates/create/simple.html +++ b/templates/create/simple.html @@ -5,43 +5,44 @@ {% block heading %}{% content_heading _("Create a Simple Identifier") %}{% endblock %} {% block content %} -
- - -
+
+
+ + + + + +
+
- -
- -
-
-

{% trans "Quick Start Guide" %}

- -
-
+ +
-
- {% include "includes/simple_id_type.html" %} + +
+ {% include "includes/simple_id_type.html" %}
- {% include "includes/simple_describe.html" %} + +
+ {% 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" %} + +
+
+

{% trans "Quick Start Guide" %}

+ +
+
- - - -
-
-
This page cannot be loaded unless you have JavaScript activated in your browser.
-
-
diff --git a/templates/demo/advanced.html b/templates/demo/advanced.html index d1b4185fc..8235446f9 100644 --- a/templates/demo/advanced.html +++ b/templates/demo/advanced.html @@ -12,9 +12,6 @@ -
-
This page cannot be loaded unless you have JavaScript activated in your browser.
-
diff --git a/templates/demo/simple.html b/templates/demo/simple.html index c02258600..c02f22402 100644 --- a/templates/demo/simple.html +++ b/templates/demo/simple.html @@ -38,11 +38,6 @@

{% trans "Quick Start Guide for Demo IDs" %}

-
-
-
This page cannot be loaded unless you have JavaScript activated in your browser.
-
-
diff --git a/templates/includes/advanced_publish_id.html b/templates/includes/advanced_publish_id.html index 44fa2be06..a25451440 100644 --- a/templates/includes/advanced_publish_id.html +++ b/templates/includes/advanced_publish_id.html @@ -3,25 +3,25 @@

{% trans "Decide" %}

-
- {% trans "Make this identifier" %} - - - {% help_icon "decide_public" _("on making an identifier public or reserved") %} -
-
+
+ {% trans "Make this identifier" %} + + + {% help_icon "decide_public" _("on making an identifier public or reserved") %} +
+ {% trans "Allow harvesting/indexing?" %} {% help_icon "decide_export" _("on harvesting/indexing") %} -
+
diff --git a/templates/includes/simple_id_type.html b/templates/includes/simple_id_type.html index d7cc2876d..8e5ff2707 100644 --- a/templates/includes/simple_id_type.html +++ b/templates/includes/simple_id_type.html @@ -1,30 +1,33 @@ {% load layout_extras %} {% load i18n %} -
-

{% trans "Choose an identifier type" %}

- {% if calling_page == 'demo' %} - {% help_icon "choose_id_demo" _("on choosing the type of identifier") %} +
+
+
+

{% trans "Choose an identifier type" %}

+ {% if calling_page == 'demo' %} + {% help_icon "choose_id_demo" _("on choosing the type of identifier") %} + {% else %} + {% help_icon "choose_id" _("on choosing the type of identifier") %} + {% endif %} +
+ {% if prefixes|duplicate_id_types %} + {% comment %} + class 'ays-ignore' is used by 'are-you-sure.js' which prevents users from accidentally leaving + a form they are working on. In this case, we will allow users to choose between shoulder types. + Although it's best we map already filled in fields over to next profile, which is something we should implement. + {% endcomment %} + {% for p in prefixes %} + + {% endfor %} {% else %} - {% help_icon "choose_id" _("on choosing the type of identifier") %} + {% for p in prefixes %} + + {% endfor %} {% endif %} -
- {% if prefixes|duplicate_id_types %} - {% comment %} - class 'ays-ignore' is used by 'are-you-sure.js' which prevents users from accidentally leaving - a form they are working on. In this case, we will allow users to choose between shoulder types. - Although it's best we map already filled in fields over to next profile, which is something we should implement. - {% endcomment %} - {% for p in prefixes %} - - {% endfor %} - {% else %} - {% for p in prefixes %} - - {% endfor %} - {% endif %} -
+ +