VOTE-2972 additional check reg box (#1060)

usagov · Oct 23, 2024 · 330cd03 · 330cd03
1 parent 88cf019
commit 330cd03
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 15 deletions.
diff --git a/web/themes/custom/votegov/src/sass/components/call-out-box.scss b/web/themes/custom/votegov/src/sass/components/call-out-box.scss
@@ -15,6 +15,16 @@
     @include u-padding-x(3);
     @include u-margin-x(-3);
   }
+
+  .vote-side-nav__container > & {
+    @include u-padding(3);
+    @include u-margin-x(0);
+    @include u-margin-y(3);
+
+    h2 {
+      @include u-font('sans','sm');
+    }
+  }
 }
 
 .vote-call-out-box--offset {

diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-in-page-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-in-page-nav.scss
@@ -2,16 +2,29 @@
 @use "variables" as *;
 @use "mixins" as *;
 
-.usa-in-page-nav {
-  @include grid-offset(1);
-  margin-inline-start: calc(100% / 12);
-  padding-inline-start: 2rem;
+.vote-side-nav__container {
+  @include u-padding-left(8);
+  @include u-margin-left(8);
+  @include u-width('full');
+  @include u-position('sticky');
+  @include u-order(2);
+  margin-top: units($theme-in-page-nav-margin-top);
+  max-width: 20rem;
+  top: units($theme-in-page-nav-top);
 
   @include at-media-max('tablet-lg') {
     @include u-display('none');
   }
 }
 
+.usa-in-page-nav {
+  @include grid-offset(1);
+  @include u-margin-left(0);
+  @include u-padding(0);
+  max-width: inherit;
+  position: unset;
+}
+
 .usa-in-page-nav__list {
   @include u-border(0);
   border-inline-start: 1px solid $bg-light-medium;

diff --git a/web/themes/custom/votegov/templates/node/node--state-territory.html.twig b/web/themes/custom/votegov/templates/node/node--state-territory.html.twig
@@ -40,7 +40,7 @@
 
 {# State content with fallbacks. #}
 {# Get default state display content from the block type. #}
-{% set state_display_content = drupal_entity('block_content', 22) | children %}
+{% set state_display_content = drupal_entity('block_content', 23) | children %}
 {% set registration_not_needed = state_display_content.field_registration_not_needed.0 | default([]) | merge(content.field_registration_not_needed.0 | default([])) %}
 {% set online_registration = state_display_content.field_online_registration.0 | default([]) | merge(content.field_online_registration.0 | default([])) %}
 {% set military_overseas_registration = state_display_content.field_military_and_overseas_regi.0 | default([]) | merge(content.field_military_and_overseas_regi.0 | default([])) %}
@@ -81,18 +81,29 @@
   {% endif %}
 
   {% block aside %}
-    <aside
-      class="usa-in-page-nav"
-      data-main-content-selector=".usa-in-page-nav-container"
-      data-title-text="{{ 'Jump to registration options' | t }}"
-      data-title-heading-level="h2"
-      data-scroll-offset="-600"
-      data-root-margin="48px 0px -90% 0px"
-      data-threshold="1"
-    ></aside>
+    <aside class="vote-side-nav__container">
+      <div
+        class="usa-in-page-nav"
+        data-main-content-selector="#main-content-state-page"
+        data-title-text="{{ 'Jump to registration options' | t }}"
+        data-title-heading-level="h2"
+        data-scroll-offset="-600"
+        data-root-margin="48px 0px -90% 0px"
+        data-threshold="1"
+      >
+      </div>
+      {% if check_registration is not empty %}
+      {% include '@votegov/component/call-out-box.html.twig' with {
+        'heading': check_registration.heading,
+        'text': check_registration.text | render | trim,
+        'link_text': check_registration.link_text | render | trim | t({'@state_name': title_english}),
+        'link_url': confirm_registration_link
+      } %}
+      {% endif %}
+    </aside>
   {% endblock %}
 
-  <div class="vote-page-content vote-page-content--alt">
+  <div id="main-content-state-page" class="vote-page-content vote-page-content--alt">
    {% block content %}
     {% if check_registration is not empty %}
       {% include '@votegov/component/call-out-box.html.twig' with {