darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-05 16:38:59 -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;
}
border: 1px solid color('gray-cool-10');
padding: units(2);
// border: 1px solid color('gray-cool-10');
// padding: units(2);
.tick-cross-list-permissions {
margin: units(1) 0;
@@ -852,21 +852,36 @@ $do-dont-top-bar-width: 1;
}
}
.linked-content:hover {
cursor: pointer;
transform: scale(1.05);
transition: transform 0.3s ease, background-color 0.3s ease;
}
.linked-card a {
text-decoration: none;
.usa-card__header, .usa-card__media {
@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 {
border-color: #005ea2;
}
&.linked-content:hover, &.linked-content:focus {
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 {
@@ -876,10 +891,6 @@ li.linked-card:hover svg,
margin: 0 auto;
}
.best-practices_link {
text-decoration: none;
}
.usa-link--downloadable {
position: relative;
}
@@ -914,6 +925,11 @@ li.linked-card:hover svg,
mask-size: 1.75ex 1.75ex;
}
nav.nav {
position: sticky;
top: units(3);
}
.usa-sidenav__sublist {
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 %}
<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">
{% if item.card_heading %}
<div class="usa-card__header">
{% if item.link %}
<a href="{{ item.link }}">
{% endif %}
<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 %}">
{{ item.card_heading }}
</h3>
{% if item.link %}
</a>
{% endif %}
</div>
{% endif %}
@@ -37,6 +36,9 @@
</div>
{% endif %}
</div>
{% if item.link %}
</a>
{% endif %}
</li>
{% endfor %}
</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.
</p>
<h3 class="padding-left-5">Message delivery</h3>
<p class="font-body-lg text-light padding-left-5">Benchmark: <span class="text-bold">80%</span> of texts are
<h3>Message delivery</h3>
<p class="text-light">Benchmark: <span class="text-bold">80%</span> of texts are
successfully delivered
</p>
<div class="padding-left-2 measure-4">
<ul>
<li>
<p>
You may discover that some numbers are temporarily or permanently unavailable due to service being
discontinued,
numbers changing, or being a landline.
</p>
</li>
</ul>
</div>
<ul>
<li>
<p>
You may discover that some numbers are temporarily or permanently unavailable due to service being
discontinued,
numbers changing, or being a landline.
</p>
</li>
</ul>
<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>
<div class="measure-4 padding-left-5">
<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
<h3>Appointment requests</h3>
<p class="text-light">Benchmark: Requesting appointments after receiving texts ranged
from <span class="text-bold">4%</span> to <span class="text-bold">9%</span></p>
</div>
<div class="padding-left-2 measure-4">
<ul>
<li>
<p>
Requesting appointments is a specific type of engagement. Provide a phone number or link to an online
appointment
request form.
</p>
</li>
</ul>
</div>
<ul>
<li>
<p>
Requesting appointments is a specific type of engagement. Provide a phone number or link to an online
appointment
request form.
</p>
</li>
</ul>
<p>
The <a class="use-link usa-link--external" href="https://codeforamerica.org/resources/texting-playbook/"
target="_blank">Code for America’s Texting
@@ -86,63 +74,42 @@
reported specific learnings around appointment reminders, completing
document submission, and maintenance reminders.
</p>
<h3 class="padding-left-5">Appointment reminders</h3>
<div class="measure-4 padding-left-5">
<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>
</div>
<div class="padding-left-2 measure-4">
<ul>
<li>
<p>You will likely see more completed appointments.</p>
</li>
</ul>
</div>
<h3>Appointment reminders</h3>
<p class="text-light">Benchmark: Clients were <span class="text-bold">79%</span> more
likely to keep their appointment after receiving a text reminder.</p>
<ul>
<li>
<p>You will likely see more completed appointments.</p>
</li>
</ul>
<p class="text-light">Benchmark: Clients were <span class="text-bold">55%</span> more
likely to complete an interview after receiving an interview reminder</p>
<ul>
<li>
<p>You will likely see more completed interviews.</p>
</li>
</ul>
<div class="measure-4 padding-left-5">
<p class="font-body-lg text-light">Benchmark: Clients were <span class="text-bold">55%</span> more
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">
<h3>Document submission</h3>
<p class="text-light">
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
</p>
</div>
<div class="padding-left-2 measure-4">
<ul>
<li>
<p>To encourage response, provide a custom list of the needed documents and information about how to submit
them.
</p>
</li>
</ul>
</div>
<ul>
<li>
<p>To encourage response, provide a custom list of the needed documents and information about how to submit
them.
</p>
</li>
</ul>
<h3 class="padding-left-5">Reminders</h3>
<div class="measure-4 padding-left-5">
<p class="font-body-lg text-light">Benchmark: Text reminders improved case maintenance rates by <span
class="text-bold">21%</span></p>
</div>
<div class="padding-left-2 measure-4">
<ul>
<li>
<p>You may see less turnover in your case rates.</p>
</li>
</ul>
</div>
<h3 class="font-body-xl">Reminders</h3>
<p class="text-light">Benchmark: Text reminders improved case maintenance rates by <span
class="text-bold">21%</span></p>
<ul>
<li>
<p>You may see less turnover in your case rates.</p>
</li>
</ul>
</section>
{% endblock %}

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

@@ -15,7 +15,7 @@
</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
</h2>