Implement baseline phase 1: Change URLs, adjusting styles, pre for new criteria set (#2518)

This PR implements baseline plan phase 1. It transitions the application from using numeric criteria levels (0, 1, 2) to human-readable named levels (passing, silver, gold) in URLs, preparing the codebase for future baseline levels. The changes maintain backward compatibility through redirects while establishing a cleaner, more maintainable URL structure. It adds a new "section" tab to projects and fixes the stylesheets to prep for baseline.

Key Changes:

* URL Structure: Routes now use /projects/:id/:level with named levels (passing/silver/gold) instead of numeric IDs
* Routing Layer: Adds redirect rules for deprecated numeric/synonym forms with appropriate 301/302 status codes
* Level Conversion: Introduces LevelConversion concern and helper methods to translate between URL-friendly names and internal numeric representations
* Test Updates: Comprehensive test coverage for new routing patterns, redirects, and level normalization
* Adds new "permissions" section so baseline users won't need to walk through "passing" questions to change permissions.
* Project page shows new "Section" tab to make it easier to see and switch sections
* Stylesheets reorganized and changed to support new information in navbar

Specifics:

* Change external URLs to prep for baseline
* Small improvements for new routing
* 100% test coverage for routing changes
* IDA wasn't involved in this file
* AGENTS.md: Minimize new code
* First try at DRY in routes
* DRY out code for redirecting from router
* Remove unused parameter
* Implement new _form_permissions form
* Redirect missing criteria_level for projects
* Simplify routing code
* Cleanup: Consistently append criteria level in URL
* Improve permissions page handling
* Fix broken test
* Add tests
* Simplify level normalization and its tests
* Add test to reach 100% statement coverage
* Rename is_disabled to view_only

Many UI components look different when they allow editing vs.
when they *disable* editing. So we've been using "is_disabled"
to indicate the mode that only permits viewing (not editing).
However, in higher-level constructs this is confusing
(what is being disabled?).

This changes the name of the boolean to "view_only".
It still has the same sense ("true" means "only viewing no editing),
but giving its name a higher-level meaning makes it easier to follow.

* Add section selector at top

Add selector - this makes the various sections MUCH more
discoverable and easy to use. It does use up precious
space on mobile, but I think it's worth it.

The term "section" is vague, but I couldn't find a better term.

* Simplify end of "show project" form

Historically we had some links at the bottom that didn't look
pretty, but they're no longer needed. Clean this up
so that the end of the project form is nicer-looking and simpler.

* Organize stylesheet files

These stylesheet files have become a mess over time and
it's now hard to fix style problems.

Solution: Reorganize style files so they "make sense"
and follow more recent conventions. Then we can fix the
bug involving the navigation bar (now that we've added
"Section" we can have way-too-long navigation bars, and
we need to deal with it).

* Improve navbar hamburger processing

* Fix header so it works "enough"

* Fix navbar by removing extraneous boxes

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

* Regenerate db/schema.rb

ActiveRecord wants to regenerate this file, so let's allow it.

* Eliminate double-line navbar in wide widths

* Add edge margins for navbar logo and hamburger

* Force progress bar to be vertically aligned

* Cleanup progress bar stylesheet settings

* Reduce navbar padding to keep on 1 line

* Add RHS margin in navbar

* Improve navbar stacking in medium width screens

* Put progressbar in top line only and always

* Fix subtle problems from incorrect CSS load order

The GitHub button was mysteriously not working well
(when hovering the text and image disappeared).
Eventually I found that the problem was a bad
CSS load order. Loading the CSS in the correct order
solved it cleanly.

* Fix preload stylesheet type so it loads

* Fix regex for SPDX License Expression

Parentheses must be escaped in these regexes, even inside brackets.

* Fix JavaScript: line width, omit some in dev mode

* Fix test, preload stylesheet should be "sheet"

* Fix CSV test (make it more flexible)

The order of the CSV headers has changed (now it's alphabetical).
Let's modify the test so that it's not so sensitive,
we just want to ensure that many expected values are in it.

* Fix progress bar and a test

* Clarify comment in SCSS

* Improve rakefile

Add an asset precompilation task, and modify the whitespace
checker to ignore generated assets (we don't control much of those).

* Remove unnecessary navbar !important markings

The !important marking is sometimes necessary, but best avoided
if possible. These weren't necessary; remove them.

* Remove unnecessary !important in navbar

* Clean up navbar (remove more !important)

* Remove more unnecessary !important

* Document navbar layout strategy in comments

The navbar layout approach is unusual. Clearly document
it in the comments (including why we do it this way).

* Highlight current section in list of sections

The server-side code already indicated the "active" section,
but previously there was no style that made it visible.

This adds styling so the current (active) section is highlighted,
in this case by a colored checkmark. Exactly the same text is
transparently before the other sections to ensure that the text
alignment is perfect.

* Minor cleanup in CSS load order

* Reorg: application.scss should only import

Move the specific CSS commands into _base.scss.

* Rename SCSS partial filenames per convention

SCSS partials are supposed to have filenames beginning
with "_", but we didn't do that consistently.
Rename to make them consistent.

The "application.scss" becomes "application.css" which
imports everything else. This single CSS is cached on the
user's browser, so once a user loads it, they won't need
to load it again. We don't use the other files as anything
other than partials, so rendering them so they can be
used independently is a waste of time.

* Move key shared CSS variables in separate file

We have a few width values that are shared across files.
Put them in a single "_variables.scss" file, so their
values are shared and in exactly one place.

* Identify criteria CSS as a partial

Follow the filename convention for SCSS partials.

* Minor cleanup of .scss files

---------

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

Author: david-a-wheeler

AGENTS.md

@@ -313,6 +313,15 @@ moves like the direct use of `rails app:update` or adding `load_defaults
 8.0` is likely to cause a cascade of many changes, leading to
 many hard-to-fix failures with little obvious external benefit.
 
+## Simple DRY code
+
+It's critically important to make the code small and
+DRY (don't repeat yourself). If the same function or method is written
+more than once, it's wrong. If many lines are duplicated between
+functions/methods, it's usually wrong.
+
+Prefer having many small pure methods called by others.
+
 ## Miscellaneous
 
 IMPORTANT: Never have trailing whitespace in text-like files including

app/assets/javascripts/project-form.js

@@ -58,7 +58,9 @@ function getLocale() {
 
 // Return current level based upon parameters in location.search
 function getLevel() {
-  var levelFromUrl = location.pathname.match('projects/[0-9]*/([0-2])');
+  // Match named levels (passing, silver, gold) or numeric (0, 1, 2)
+  var levelPattern = 'projects/[0-9]*/(passing|silver|gold|[0-2])';
+  var levelFromUrl = location.pathname.match(levelPattern);
   if (levelFromUrl) {
     return levelFromUrl[1];
   }
@@ -665,9 +667,17 @@ function TogglePanel(e) {
 function setupProjectForm() {
   // We're told progress, so don't recalculate - just display it.
   T_HASH = TRANSLATION_HASH_FULL[getLocale()];
-  var percentageScaled = $('#badge-progress').attr('aria-valuenow');
-  var percentAsString = percentageScaled.toString() + '%';
-  $('#badge-progress').css('width', percentAsString);
+  // Use class selector to handle multiple progress bars
+  // (collapsed and expanded)
+  $('.badge-progress').each(function() {
+    var badgeProgress = $(this);
+    var percentageScaled = badgeProgress.attr('aria-valuenow');
+    if (percentageScaled !== undefined && percentageScaled !== null &&
+        percentageScaled !== '') {
+      var percentAsString = percentageScaled.toString() + '%';
+      badgeProgress.css('width', percentAsString);
+    }
+  });
 
 
   // By default, hide details.  We do the hiding in JavaScript, so
@@ -705,7 +715,18 @@ function setupProjectForm() {
   });
 
   if (globalisEditing) {
-    CRITERIA_HASH = CRITERIA_HASH_FULL[getLevel()];
+    var level = getLevel();
+    // Normalize named levels to numeric for CRITERIA_HASH_FULL access
+    if (level === 'passing' || level === 'bronze') {
+      level = '0';
+    }
+    if (level === 'silver') {
+      level = '1';
+    }
+    if (level === 'gold') {
+      level = '2';
+    }
+    CRITERIA_HASH = CRITERIA_HASH_FULL[level];
     $('#project_entry_form').on('criteriaResultHashComplete', function(e) {
       setupProjectFields();
       resetProgressBar();

app/assets/stylesheets/_base.scss

@@ -0,0 +1,93 @@
+// Base element styles (global HTML elements)
+
+@import "variables";
+
+/* Work around a bug in Bootstrap's navigation bar. When the display is narrow,
+   the navigation bar gets longer, but the body padding doesn't adjust.
+   The result is that the navigation bar overlaps the beginning of the
+   body content below it.  This particular workaround is based on:
+   http://stackoverflow.com/questions/10336194/
+   twitter-bootstrap-top-nav-bar-blocking-top-content-of-the-page */
+
+body {
+  padding-top: 80px;
+}
+
+@media (max-width: $screen-xs-max) {
+  body {
+    padding-top: 100px;
+  }
+}
+
+html, body {
+  height: 100%;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-weight: 450;
+}
+
+section {
+  overflow: auto;
+}
+
+textarea {
+  resize: vertical;
+  min-height: 12ex;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1;
+}
+
+p {
+  font-size: 1.1em;
+  line-height: 1.7em;
+}
+
+// Project Display tables
+.table thead tr th, .table tbody tr td {
+  text-align: center;
+}
+
+.tab-title {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+td p {
+  text-align: left;
+  font-size: 14px;
+  line-height: 1.42857143;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+nav {
+  min-width: 15em;
+}
+
+// Container utilities
+.container_padding {
+  padding: 1em 0;
+}
+
+.container_margins {
+  min-height: 100%;
+  height: auto;
+  margin: 1.5em auto -9.6em;
+  padding-bottom: 100px;
+}
+
+// Bootstrap button override
+.btn {
+  padding-left: 3px;
+  padding-right: 3px;
+}

app/assets/stylesheets/criteria.css app/assets/stylesheets/_criteria.scssapp/assets/stylesheets/criteria.css renamed to app/assets/stylesheets/_criteria.scss

@@ -1,5 +1,7 @@
 // footer styles
 
+@import "variables";
+
 footer {
   margin-top: 60px;
   padding-top: 5px;
@@ -33,7 +35,7 @@ footer ul li {
   margin-left: 25px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: $screen-sm-min) {
   footer {
     nav {
       float: left;

app/assets/stylesheets/footer.scss app/assets/stylesheets/_footer.scssapp/assets/stylesheets/footer.scss renamed to app/assets/stylesheets/_footer.scss

@@ -0,0 +1,70 @@
+// frozen_string_literal: true
+
+// Global form styles
+// Moved from static_pages.scss during CSS reorganization
+// NOTE: Mixins and Bootstrap variables available via application.scss import context
+
+input, textarea, select, .discussion-markdown, .uneditable-input {
+  border: 1px solid #bbb;
+  width: 100%;
+  margin-bottom: 15px;
+  box-sizing: border-box;
+}
+
+form.project_search input {
+  width: auto;
+}
+
+form.project_search select {
+  width: auto;
+}
+
+input {
+  height: auto !important;
+}
+
+input[type=checkbox] {
+  width: initial;
+}
+
+#error_explanation {
+  color: red;
+  ul {
+    color: red;
+    margin: 0 0 30px 0;
+  }
+}
+
+.field_with_errors {
+  @extend .has-error !optional;
+  .form-control {
+    color: #a94442;
+  }
+}
+
+label.required:after {
+  content:" *";
+}
+
+.radio {
+  width: 15px;
+}
+
+.checkbox {
+  margin-top: -10px;
+  margin-bottom: 10px;
+  span {
+    margin-left: 20px;
+    font-weight: normal;
+  }
+}
+
+// Status chooser table
+.borderless tbody tr td, .borderless tbody tr td label, .borderless tbody tr th, .borderless thead tr th, .borderless {
+  border: none;
+  padding: 0px 5px 0px 5px;
+}
+
+.required-data {
+  background-color: yellow;
+}