Make it more obvious how to show only the todos (#2098)

* Make it more obvious how to show only the todos

People asked how to show the items to be done, but we've
had that functionality for years. Change things as follows:

* Improve button text color contrast
* Move buttons down to make them more obvious
* Change the button text on hiding/showing completed criteria
  to clarify what is produced.

Signed-off-by: David A. Wheeler <[email protected]>

* Tweak button text to clarify it

Signed-off-by: David A. Wheeler <[email protected]>

---------

Signed-off-by: David A. Wheeler <[email protected]>

app/views/projects/_form_0.html.erb

@@ -38,7 +38,7 @@
     <%= render 'shared/error_messages', object: f.object %>
     <%= f.hidden_field :lock_version %>
 
-  <br><br><br>
+  <br>
 
   <div class="panel-group well well-lg well-color">
     <div class="panel panel-primary">

app/views/projects/_form_1.html.erb

@@ -31,7 +31,7 @@
     <%= render 'shared/error_messages', object: f.object %>
     <%= f.hidden_field :lock_version %>
 
-  <br><br><br>
+  <br>
 
   <div class="panel-group well well-lg well-color">
     <div class="panel panel-primary">

app/views/projects/_form_2.html.erb

@@ -31,7 +31,7 @@
     <%= render 'shared/error_messages', object: f.object %>
     <%= f.hidden_field :lock_version %>
 
-  <br><br><br>
+  <br>
 
   <div class="panel-group well well-lg well-color">
     <div class="panel panel-primary">

app/views/projects/_form_early.html.erb

@@ -1,19 +1,5 @@
 <div>
   <span id="project_entry_form"></span>
-  <div class="hidden-print">
-      <button id="toggle-expand-all-panels"
-              class="btn btn-info btn-xs btn-stack"
-              title="<%= t 'projects.misc.in_javascript.expand_all_title' %>"
-              type="button"><%= t 'projects.misc.in_javascript.expand_all' %></button>
-      <button id="toggle-show-all-details"
-              class="btn btn-info btn-xs btn-stack"
-              title="<%= t 'projects.misc.in_javascript.show_all_details' %>"
-              type="button"><%= t 'projects.misc.in_javascript.show_all_details' %></button>
-      <button id="toggle-hide-metna-criteria"
-              class="btn btn-info btn-xs btn-stack"
-              title="<%= t 'projects.misc.in_javascript.hide_met_title' %>"
-              type="button"><%= t 'projects.misc.in_javascript.hide_met_html' %></button>
-  </div>
   <div class="hidden">
     <%= image_tag "result_symbol_check.png", id: "result_symbol_check_img", size: "40x40" %>
     <%= image_tag "result_symbol_x.png", id: "result_symbol_x_img", size: "40x40" %>
@@ -62,5 +48,29 @@
 
 <div class="col-sm-3">
 </div>
-<%# end row started outside %>
+<%# end row started outside: %>
+</div>
+
+<div class="row">
+   <div class="col-md-12">
+     <div class="hidden-print">
+         <br>
+         <%# This is a terrible way to "move to right" but it works.
+             Improvements welcome. %>
+         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+         <%# We use btn-primary to ensure these buttons are clearly seen. %>
+         <button id="toggle-expand-all-panels"
+                 class="btn btn-primary btn-xs btn-stack"
+                 title="<%= t 'projects.misc.in_javascript.expand_all_title' %>"
+                 type="button"><%= t 'projects.misc.in_javascript.expand_all' %></button>
+         <button id="toggle-show-all-details"
+                 class="btn btn-primary btn-xs btn-stack"
+                 title="<%= t 'projects.misc.in_javascript.show_all_details' %>"
+                 type="button"><%= t 'projects.misc.in_javascript.show_all_details' %></button>
+         <button id="toggle-hide-metna-criteria"
+                 class="btn btn-primary btn-xs btn-stack"
+                 title="<%= t 'projects.misc.in_javascript.hide_met_title' %>"
+                 type="button"><%= t 'projects.misc.in_javascript.hide_met_html' %></button>
+     </div>
+   </div>
 </div>

config/locales/en.yml

@@ -717,11 +717,11 @@ en:
         hide_details: Hide details
         show_all_details: Show all details
         hide_all_details: Hide all details
-        show_met_title: Show met & N/A criteria
-        show_met_html: Show met & N/A
-        hide_met_title: Hide met & N/A criteria (leaving unmet
+        show_met_title: Show complete and incomplete criteria
+        show_met_html: Show complete and incomplete criteria
+        hide_met_title: Show only incomplete criteria (showing only unmet
           and unknown)
-        hide_met_html: Hide met & N/A
+        hide_met_html: Show only incomplete criteria
         passing_alt: Enough for a badge!
         barely_alt: Barely enough for a badge.
         failing_alt: Not enough for a badge.

docs/criteria.md

@@ -605,4 +605,4 @@ Development processes and security:
 * [design.md](design.md) - Architectural design information
 * [implementation.md](implementation.md) - Implementation notes
 * [testing.md](testing.md) - Information on testing
-* [assurance-case.md](assurance-case.md) - Why it's adequately secure (assurance case)
+* [security.md](security.md) - Why it's adequately secure (assurance case)

docs/dependency_decisions.yml

@@ -524,3 +524,9 @@
       in its README
     :versions: []
     :when: 2020-11-06 14:47:00.991793938 Z
+- - :permit
+  - MIT AND (BSD-2-Clause OR GPL-2.0-or-later)
+  - :who:
+    :why:
+    :versions: []
+    :when: 2024-01-18 16:10:46.361805391 Z

docs/testing.md

@@ -206,7 +206,7 @@ You may also need to set your PATH to run npm binaries: `PATH="$PATH:node_module
 
 ### Mac
 
-Run `./install-badge-dev-env` 
+Run `./install-badge-dev-env`
 
 ### Binding.pry