darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-06 05:08:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

Style and format updates

Browse Source
This commit is contained in:
Jonathan Bobel
2025-01-13 13:57:59 -05:00
parent 6d3bf9ae49
commit ecadc49a55
4 changed files with 111 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -198,8 +198,8 @@ td.table-empty-message {
word-wrap: break-word; word-wrap: break-word;
} }
border: 1px solid color('gray-cool-10'); // border: 1px solid color('gray-cool-10');
padding: units(2); // padding: units(2);
.tick-cross-list-permissions { .tick-cross-list-permissions {
margin: units(1) 0; margin: units(1) 0;
@@ -852,21 +852,36 @@ $do-dont-top-bar-width: 1;
} }
} }
.linked-content:hover { .linked-card a {
cursor: pointer; text-decoration: none;
transform: scale(1.05); .usa-card__header, .usa-card__media {
transition: transform 0.3s ease, background-color 0.3s ease; @include at-media('tablet') {
} padding-top: units(1);
}
}
&:visited {
color: color('ink');
}
&:focus .usa-card__container {
outline: units(2px) solid color('blue-40v');
outline-offset: 0.3rem;
}
&:hover .usa-card__container, &:focus .usa-card__container {
border-color: color('blue-60v');
background: color('blue-60v');
p, h3 {
color: white;
}
svg {
filter: brightness(0) invert(1);
}
}
li.linked-card:hover > div:first-child:hover { &.linked-content:hover, &.linked-content:focus {
border-color: #005ea2; cursor: pointer;
} transition: transform 0.3s ease, background-color 0.3s ease;
}
li.linked-card:hover h4,
li.linked-card:hover p,
li.linked-card:hover svg,
.best-practices_card_img:hover {
color: #005ea2;
} }
.best-practices_card_img { .best-practices_card_img {
@@ -876,10 +891,6 @@ li.linked-card:hover svg,
margin: 0 auto; margin: 0 auto;
} }
.best-practices_link {
text-decoration: none;
}
.usa-link--downloadable { .usa-link--downloadable {
position: relative; position: relative;
} }
@@ -914,6 +925,11 @@ li.linked-card:hover svg,
mask-size: 1.75ex 1.75ex; mask-size: 1.75ex 1.75ex;
} }
nav.nav {
position: sticky;
top: units(3);
}
.usa-sidenav__sublist { .usa-sidenav__sublist {
display: none; display: none;
} }

14
app/templates/components/guides/cards.html
View File

@@ -1,18 +1,17 @@
<ul class="usa-card-group"> <ul class="usa-card-group grid-row flex-row">
{% for item in card_contents %} {% for item in card_contents %}
<li class="usa-card grid-col tablet:grid-col-4 {% if item.link %}linked-card linked-content{% endif %}"> <li class="usa-card grid-col mobile-lg:grid-col-12 tablet:grid-col-6 desktop:grid-col-4 {% if item.link %}linked-card linked-content{% endif %}">
{% if item.link %}
<a href="{{ item.link }}">
{% endif %}
<div class="usa-card__container"> <div class="usa-card__container">
{% if item.card_heading %} {% if item.card_heading %}
<div class="usa-card__header"> <div class="usa-card__header">
{% if item.link %}
<a href="{{ item.link }}">
{% endif %}
<h3 <h3
class="usa-card__heading {% if text_align != 'left' or text_align is not defined %}text-center{% else %}text-left{% endif %} {% if item.link %}linked-card{% endif %}"> class="usa-card__heading {% if text_align != 'left' or text_align is not defined %}text-center{% else %}text-left{% endif %} {% if item.link %}linked-card{% endif %}">
{{ item.card_heading }} {{ item.card_heading }}
</h3> </h3>
{% if item.link %} {% if item.link %}
</a>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
@@ -37,6 +36,9 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
{% if item.link %}
</a>
{% endif %}
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

167
app/templates/views/guides/benchmark-performance.html
View File

@@ -27,58 +27,46 @@
quantity of messages delivered, how people engage with messages, and how they take action. quantity of messages delivered, how people engage with messages, and how they take action.
</p> </p>
<h3 class="padding-left-5">Message delivery</h3> <h3>Message delivery</h3>
<p class="font-body-lg text-light padding-left-5">Benchmark: <span class="text-bold">80%</span> of texts are <p class="text-light">Benchmark: <span class="text-bold">80%</span> of texts are
successfully delivered successfully delivered
</p> </p>
<div class="padding-left-2 measure-4"> <ul>
<ul> <li>
<li> <p>
<p> You may discover that some numbers are temporarily or permanently unavailable due to service being
You may discover that some numbers are temporarily or permanently unavailable due to service being discontinued,
discontinued, numbers changing, or being a landline.
numbers changing, or being a landline. </p>
</p> </li>
</li> </ul>
</ul>
</div>
<h3>Engagement</h3>
<p class="text-light">Benchmark: Engagement rates with texts ranged from <span
class="text-bold">17%</span>
to <span class="text-bold">26%</span></p>
<ul>
<li>
<p>
The highest rate of engagement with a text comes within hours of sending. Engagement rates include any kind
of
action taken due to a text, including replying “STOP” to prevent future texts.
</p>
</li>
</ul>
<h3 class="padding-left-5">Engagement</h3> <h3>Appointment requests</h3>
<div class="measure-4 padding-left-5"> <p class="text-light">Benchmark: Requesting appointments after receiving texts ranged
<p class="font-body-lg text-light">Benchmark: Engagement rates with texts ranged from <span
class="text-bold">17%</span>
to <span class="text-bold">26%</span></p>
</div>
<div class="padding-left-2 measure-4">
<ul>
<li>
<p>
The highest rate of engagement with a text comes within hours of sending. Engagement rates include any kind
of
action taken due to a text, including replying “STOP” to prevent future texts.
</p>
</li>
</ul>
</div>
<h3 class="padding-left-5">Appointment requests</h3>
<div class="measure-4 padding-left-5">
<p class="font-body-lg text-light">Benchmark: Requesting appointments after receiving texts ranged
from <span class="text-bold">4%</span> to <span class="text-bold">9%</span></p> from <span class="text-bold">4%</span> to <span class="text-bold">9%</span></p>
</div> <ul>
<div class="padding-left-2 measure-4"> <li>
<ul> <p>
<li> Requesting appointments is a specific type of engagement. Provide a phone number or link to an online
<p> appointment
Requesting appointments is a specific type of engagement. Provide a phone number or link to an online request form.
appointment </p>
request form. </li>
</p> </ul>
</li>
</ul>
</div>
<p> <p>
The <a class="use-link usa-link--external" href="https://codeforamerica.org/resources/texting-playbook/" The <a class="use-link usa-link--external" href="https://codeforamerica.org/resources/texting-playbook/"
target="_blank">Code for America’s Texting target="_blank">Code for America’s Texting
@@ -86,63 +74,42 @@
reported specific learnings around appointment reminders, completing reported specific learnings around appointment reminders, completing
document submission, and maintenance reminders. document submission, and maintenance reminders.
</p> </p>
<h3 class="padding-left-5">Appointment reminders</h3> <h3>Appointment reminders</h3>
<div class="measure-4 padding-left-5"> <p class="text-light">Benchmark: Clients were <span class="text-bold">79%</span> more
<p class="font-body-lg text-light">Benchmark: Clients were <span class="text-bold">79%</span> more likely to keep their appointment after receiving a text reminder.</p>
likely <ul>
to keep <li>
their appointment after receiving a text reminder.</p> <p>You will likely see more completed appointments.</p>
</div> </li>
<div class="padding-left-2 measure-4"> </ul>
<ul> <p class="text-light">Benchmark: Clients were <span class="text-bold">55%</span> more
<li> likely to complete an interview after receiving an interview reminder</p>
<p>You will likely see more completed appointments.</p> <ul>
</li> <li>
</ul> <p>You will likely see more completed interviews.</p>
</div> </li>
</ul>
<div class="measure-4 padding-left-5"> <h3>Document submission</h3>
<p class="font-body-lg text-light">Benchmark: Clients were <span class="text-bold">55%</span> more <p class="text-light">
likely
to complete
an interview after receiving an interview reminder</p>
</div>
<div class="padding-left-2 measure-4">
<ul>
<li>
<p>You will likely see more completed interviews.</p>
</li>
</ul>
</div>
<h3 class="padding-left-5">Document submission</h3>
<div class="measure-4 padding-left-5">
<p class="font-body-lg text-light">
Benchmark: Clients were <span class="text-bold">6%</span> more likely to complete document submission after Benchmark: Clients were <span class="text-bold">6%</span> more likely to complete document submission after
receiving a customized list of required documents via text receiving a customized list of required documents via text
</p> </p>
</div> <ul>
<div class="padding-left-2 measure-4"> <li>
<ul> <p>To encourage response, provide a custom list of the needed documents and information about how to submit
<li> them.
<p>To encourage response, provide a custom list of the needed documents and information about how to submit </p>
them. </li>
</p> </ul>
</li>
</ul>
</div>
<h3 class="padding-left-5">Reminders</h3> <h3 class="font-body-xl">Reminders</h3>
<div class="measure-4 padding-left-5"> <p class="text-light">Benchmark: Text reminders improved case maintenance rates by <span
<p class="font-body-lg text-light">Benchmark: Text reminders improved case maintenance rates by <span class="text-bold">21%</span></p>
class="text-bold">21%</span></p> <ul>
</div> <li>
<div class="padding-left-2 measure-4"> <p>You may see less turnover in your case rates.</p>
<ul> </li>
<li> </ul>
<p>You may see less turnover in your case rates.</p>
</li>
</ul>
</div>
</section> </section>
{% endblock %} {% endblock %}

2
app/templates/views/guides/best-practices.html
View File

@@ -15,7 +15,7 @@
</p> </p>
<p>This set of best practices will help you get an effective texting initiative up and running.</p> <p>This set of best practices will help you get an effective texting initiative up and running.</p>
<h2 class="padding-bottom-2"> <h2 class="padding-bottom-4">
Key elements of a texting campaign Key elements of a texting campaign
</h2> </h2>