Merge branch 'main' into depfu/batch_all/yarn/2023-07-17

.github/workflows/build.yml

@@ -137,9 +137,9 @@ jobs:
         echo "Running tests..."
         if [[ "x${{ github.event.inputs.ignoreLowerCoverage }}" == "xtrue" ]]; then
           echo "Lower coverage failures will be ignored."
-          ./ietf/manage.py test --settings=settings_postgrestest --ignore-lower-coverage
+          ./ietf/manage.py test --validate-html-harder --settings=settings_test --ignore-lower-coverage
         else
-          ./ietf/manage.py test --settings=settings_postgrestest
+          ./ietf/manage.py test --validate-html-harder --settings=settings_test
         fi
         coverage xml
 

.github/workflows/ci-run-tests.yml

@@ -45,7 +45,7 @@ jobs:
           exit 1
         fi
         echo "Running tests..."
-        ./ietf/manage.py test --settings=settings_postgrestest
+        ./ietf/manage.py test --validate-html-harder --settings=settings_test
         coverage xml
 
     - name: Upload Coverage Results to Codecov

.vscode/tasks.json

@@ -48,7 +48,7 @@
             "args": [
                 "${workspaceFolder}/ietf/manage.py",
                 "test",
-                "--settings=settings_postgrestest"
+                "--settings=settings_test"
             ],
             "group": "test",
             "presentation": {
@@ -68,7 +68,7 @@
             "args": [
                 "${workspaceFolder}/ietf/manage.py",
                 "test",
-                "--settings=settings_postgrestest",
+                "--settings=settings_test",
                 "--pattern=tests_js.py"
             ],
             "group": "test",

LICENSE

@@ -1,6 +1,6 @@
 BSD 3-Clause License
 
-Copyright (c) 2008-2022, The IETF Trust
+Copyright (c) 2008-2023, The IETF Trust
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without
@@ -26,4 +26,4 @@ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
 SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
 CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -83,7 +83,7 @@ If VS Code is not available to you, in your clone, type `cd docker; ./run`
 
 Once the containers are started, run the tests to make sure your checkout is a good place to start from (all tests should pass - if any fail, ask for help at tools-develop@). Inside the app container's shell type:
 ```sh
-ietf/manage.py test --settings=settings_postgrestest
+ietf/manage.py test --settings=settings_test
 ```
 
 Note that we recently moved the datatracker onto PostgreSQL - you may still find older documentation that suggests testing with settings_sqlitetest. That will no longer work.
@@ -228,7 +228,7 @@ before activating a new release.
 
 From a datatracker container, run the command:
 ```sh
-./ietf/manage.py test --settings=settings_postgrestest
+./ietf/manage.py test --settings=settings_test
 ```
 
 > You can limit the run to specific tests using the `--pattern` argument.

client/App.vue

@@ -26,6 +26,21 @@ const siteStore = useSiteStore()
 
 const appContainer = ref(null)
 
+// --------------------------------------------------------------------
+// Set user theme
+// --------------------------------------------------------------------
+
+const desiredTheme = window.localStorage?.getItem('theme')
+if (desiredTheme === 'dark') {
+  siteStore.theme = 'dark'
+} else if (desiredTheme === 'light') {
+  siteStore.theme = 'light'
+} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+  siteStore.theme = 'dark'
+} else {
+  siteStore.theme = 'light'
+}
+
 // --------------------------------------------------------------------
 // Handle browser resize
 // --------------------------------------------------------------------

client/agenda/Agenda.vue

@@ -533,6 +533,13 @@ onMounted(() => {
     color: $blue-700;
     position: relative;
 
+    @at-root .theme-dark & {
+      border: 1px solid $blue-800;
+      background: linear-gradient(to top, lighten($blue-900, 2%), lighten($blue-900, 5%));
+      color: $blue-100;
+      box-shadow: inset 0 0 0 1px #000;
+    }
+
     > button {
       position: absolute;
       top: 15px;

client/agenda/AgendaDetailsModal.vue

@@ -282,6 +282,10 @@ async function fetchSessionMaterials () {
   .bi {
     font-size: 20px;
     color: $indigo;
+
+    @at-root .theme-dark & {
+      color: $indigo-300;
+    }
   }
 
   .detail-header {
@@ -343,6 +347,11 @@ async function fetchSessionMaterials () {
     border-radius: 5px;
     font-weight: 500;
 
+    @at-root .theme-dark & {
+      background-color: $gray-900;
+      border-color: $gray-700;
+    }
+
     a {
       cursor: pointer;
 
@@ -365,6 +374,11 @@ async function fetchSessionMaterials () {
     margin-top: 12px;
     border-radius: 5px;
 
+    @at-root .theme-dark & {
+      background-color: $gray-900;
+      border-color: $gray-700;
+    }
+
     .bi {
       color: $blue;
     }
@@ -377,6 +391,10 @@ async function fetchSessionMaterials () {
       border: none;
       border-radius: 5px;
       display: block;
+
+      @at-root .theme-dark & {
+        background-color: $gray-900;
+      }
     }
   }
 

client/agenda/AgendaFilter.vue

@@ -217,30 +217,58 @@ function toggleFilterGroup (key) {
     padding: 5px;
     border-radius: 10px;
 
+    @at-root .theme-dark & {
+      background-color: $gray-800;
+    }
+
     &:nth-child(2) {
       background-color: $blue-100;
 
+      @at-root .theme-dark & {
+        background-color: $gray-800;
+      }
+
       .agenda-personalize-areamain {
         button {
           color: $blue-600;
+
+          @at-root .theme-dark & {
+            color: $blue-100;
+          }
         }
       }
 
       .agenda-personalize-groups {
         background-color: lighten($blue-100, 7%);
+
+        @at-root .theme-dark & {
+          background-color: $gray-700;
+        }
       }
     }
     &:nth-child(3) {
       background-color: $orange-100;
 
+      @at-root .theme-dark & {
+        background-color: $gray-800;
+      }
+
       .agenda-personalize-areamain {
         button {
           color: $orange-600;
+
+          @at-root .theme-dark & {
+            color: $orange-100;
+          }
         }
       }
 
       .agenda-personalize-groups {
         background-color: lighten($orange-100, 7%);
+
+        @at-root .theme-dark & {
+          background-color: $gray-700;
+        }
       }
     }
 
@@ -276,6 +304,12 @@ function toggleFilterGroup (key) {
       transition: background-color .5s ease;
       position: relative;
 
+      @at-root .theme-dark & {
+        background-color: $gray-600;
+        border-color: $gray-700;
+        color: #FFF;
+      }
+
       > .bi {
         margin-right: .5rem;
       }
@@ -310,6 +344,10 @@ function toggleFilterGroup (key) {
     flex: 1;
     display: flex;
     flex-wrap: wrap;
+
+    @at-root .theme-dark & {
+      background-color: $gray-700;
+    }
   }
 
   &-group {
@@ -324,6 +362,12 @@ function toggleFilterGroup (key) {
     color: $gray-600;
     margin-right: 0px;
 
+    @at-root .theme-dark & {
+      background-color: $gray-600;
+      border-color: $gray-700;
+      color: #FFF;
+    }
+
     @media screen and (max-width: $bs5-break-sm) {
       font-size: .9em;
     }

client/agenda/AgendaQuickAccess.vue

@@ -219,6 +219,9 @@ function scrollToNow (ev) {
 </script>
 
 <style lang="scss">
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+
 .agenda-quickaccess {
   width: 300px;
 
@@ -252,6 +255,10 @@ function scrollToNow (ev) {
     text-align: center;
     margin-top: 12px;
 
+    @at-root .theme-dark & {
+      border-color: $secondary;
+    }
+
     @media screen and (max-width: 1350px) {
       flex-direction: column;
     }
@@ -267,6 +274,11 @@ function scrollToNow (ev) {
       background-color: #FFF;
       transform: translate(-50%, 0);
       text-transform: uppercase;
+
+      @at-root .theme-dark & {
+        background-color: $gray-900;
+        color: #FFF;
+      }
     }
 
     button {