Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated the results page design and header #26

Merged
merged 1 commit into from
Jul 18, 2024
Merged

Updated the results page design and header #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,36 @@ const markdownItAnchor = require('markdown-it-anchor');
const yaml = require("js-yaml");
const svgSprite = require("eleventy-plugin-svg-sprite");
const { imageShortcode, imageWithClassShortcode } = require('./config');
const htmlmin = require("html-minifier");
const UglifyJS = require("uglify-js");

module.exports = function (config) {
// Set pathPrefix for site
let pathPrefix = '/';

// Minify inline (not imported) JS
config.addFilter("jsmin", function (code) {
let minified = UglifyJS.minify(code);
if (minified.error) {
console.log("UglifyJS error: ", minified.error);
return code;
}
return minified.code;
});

// Minify HTML output
config.addTransform("htmlmin", function (content, outputPath) {
if (outputPath && outputPath.indexOf(".html") > -1) {
let minified = htmlmin.minify(content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true
});
return minified;
}
return content;
});

// Copy the `admin` folders to the output
config.addPassthroughCopy('admin');

Expand Down
4 changes: 2 additions & 2 deletions _data/assetPaths.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,6 @@
"admin.map": "/assets/js/admin-GBLI77MO.js.map",
"app.js": "/assets/js/app-34WFVF7Q.js",
"app.map": "/assets/js/app-34WFVF7Q.js.map",
"index.css": "/assets/styles/index-5E5ZLEB3.css",
"index.map": "/assets/styles/index-5E5ZLEB3.css.map"
"index.css": "/assets/styles/index-Q7BANZGB.css",
"index.map": "/assets/styles/index-Q7BANZGB.css.map"
}
4 changes: 2 additions & 2 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<div class="usa-banner__content usa-accordion__content" id="gov-banner-default">
<div class="grid-row grid-gap-lg">
<div class="usa-banner__guidance tablet:grid-col-6">
<img class="usa-banner__icon usa-media-block__img" src="{{'/assets/uswds/img/icon-dot-gov.svg' | url }}" role="img" alt="" aria-hidden="true" width="40" height="40" />
<img class="usa-banner__icon usa-media-block__img" src="{{'/assets/uswds/img/icon-dot-gov.svg' | url }}" role="img" alt="" aria-hidden="true" width="40" height="40" fetchpriority="low" />
<div class="usa-media-block__body">
<p>
<strong>Official websites use .gov</strong><br />A
Expand All @@ -35,7 +35,7 @@
</div>
</div>
<div class="usa-banner__guidance tablet:grid-col-6">
<img class="usa-banner__icon usa-media-block__img" src="{{'/assets/uswds/img/icon-https.svg' | url }}" role="img" alt="" aria-hidden="true" width="40" height="40" />
<img class="usa-banner__icon usa-media-block__img" src="{{'/assets/uswds/img/icon-https.svg' | url }}" role="img" alt="" aria-hidden="true" width="40" height="40" fetchpriority="low" />
<div class="usa-media-block__body">
<p>
<strong>Secure .gov websites use HTTPS</strong><br />A
Expand Down
7 changes: 5 additions & 2 deletions _includes/hero.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<section class="usa-hero" id="mutual-aid-search" aria-label="Introduction">
<img fetchpriority="high" src="{{ '/assets/img/hero.webp' | url }}" alt="" width="0" height="0"
style="display: none !important;" />
<picture>
<source media="(min-width: 40em)" srcset="{{ assetPaths['hero.webp'] }}"/>
<img src="{{ assetPaths['hero.webp'] }}" alt="" width="0" height="0"
style="display: none !important;" fetchpriority="high"/>
</picture>
<div class="grid-container">
<div class="usa-hero__callout">
<h1 class="usa-hero__heading margin-bottom-4">
Expand Down
132 changes: 82 additions & 50 deletions _includes/layouts/results.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,36 @@
layout: layouts/base
---

<div class="usa-section {{ className }}">
<div class="usa-section {{ className }} padding-top-2">
<div class="grid-container">
<div class="grid-row grid-gap">
<main class="grid-col-12 usa-prose" id="main-content">
<h1>Mutual Aid Assistance Results</h1>
<nav class="usa-breadcrumb" aria-label="Breadcrumbs,,">
<ol class="usa-breadcrumb__list">
<li class="usa-breadcrumb__list-item">
<a href="{{ '/' | url }}" class="usa-breadcrumb__link">
<span>Home</span>
</a>
</li>
<li class="usa-breadcrumb__list-item">
<span>Results</span>
</li>
</ol>
</nav>
{% assign imagePath = "/assets/img/states/" | append: item.Abbr | append: ".svg" %}
{% assign stateString = item.State %}
{% assign emacEGC = item["EMA+E:GC"] %}
{% assign imacPublicVariable = item["Variable-IMAC-Public"] %}
{% assign imacPrivateVariable = item["Variable_IMAC_Private"] %}

<h1>Mutual Aid Resources Available in {{ stateString }}</h1>
<div class="jump-to-section">
<p class="margin-bottom-0">Jump to section</p>
<ul class="usa-list">
<li><a class="usa-link" href="#understand-mutual-aid-section">Understanding mutual aid options in {{ stateString }}</a></li>
<li><a class="usa-link" href="#mutual-aid-contacts-section">Mutual aid contacts in {{ stateString }}</a></li>
</ul>
</div>
<div class="usa-alert usa-alert--warning grid-container padding-x-0">
<div class="usa-alert__body">
<h2 class="usa-alert__heading">Disclaimer</h2>
Expand All @@ -24,14 +49,7 @@ <h2 class="usa-alert__heading">Disclaimer</h2>
</div>
<div class="contentRow margin-top-1">
<div class="grid-row grid-gap">

<div class="grid-col-12">
{% assign imagePath = "/assets/img/states/" | append: item.Abbr | append: ".webp" %}
{% assign stateString = item.State %}
{% assign emacEGC = item["EMA+E:GC"] %}
{% assign imacPublicVariable = item["Variable-IMAC-Public"] %}
{% assign imacPrivateVariable = item["Variable_IMAC_Private"] %}

{% capture emacStandard %}
<p><span class="capitalize">{{ stateString }}</span> has <span class="text-bold">Standard EMAC</span>
which covers:</p>
Expand Down Expand Up @@ -161,56 +179,54 @@ <h2 class="usa-alert__heading">Disclaimer</h2>

<section class="usa-section intro-section">
<div class="grid-row grid-gap padding-bottom-3">
<div class="image-block tablet:grid-col-3 mobile:grid-col-12">
<img src="{{ imagePath | url }}" role="img" alt="" aria-hidden="true" width="154" height="154" />
</div>
<div class="intro-content-block tablet:grid-col-9 mobile:grid-col-12">
<h2 class="margin-y-0">
Mutual Aid Resources Available in {{ item.State }}
</h2>
<p class="margin-bottom-0">Jump to section</p>
<ul class="usa-list">
<li><a class="usa-link" href="#understand-mutual-aid-section">Understanding mutual aid options in {{ stateString }}
</li>
<li><a class="usa-link" href="#mutual-aid-contacts-section">Mutual aid contacts in {{ stateString }}</a></li>
</ul>
</div>

</div>
</section>
<section id="understand-mutual-aid-section" class="usa-section understand-mutual-aid">
<h2 class="margin-top-0 margin-bottom-3">
Understanding mutual aid options in {{ stateString }}
</h2>
<div id="federal-mutual-aid-section" class="federal-mutual-aid">
<h3 class="bg-accent-cool-lighter">
<span class="text-bold">Federal</span> - Emergency Mutual Aid Compact (EMAC)
</h3>
<p>EMAC is an agreement among U.S. states and territories that allows them to share resources and
personnel during disasters or emergencies. It helps states manage large-scale emergencies that
exceed their individual capacities.</p>

{{ emacEGCText }}
</div>

<div id="state-mutual-aid-section" class="state-mutual-aid margin-top-5">
<h3 class="bg-accent-warm-lighter">
<span class="text-bold">State</span> - Intrastate Mutual Aid Compact (IMAC)
<div id="state-mutual-aid-section" class="state-mutual-aid information-section margin-top-4 margin-bottom-5">
<h3 class="bg-accent-warm-lighter grid-row">
<span class="image-block tablet:grid-col-2 mobile:grid-col-12 display-inline-block">
<img class="text-middle" src="{{ imagePath | url }}" role="img" alt="" aria-hidden="true" width="88" height="88" />
</span>
<span class="intro-content-block tablet:grid-col-10 mobile:grid-col-12 padding-top-105">
<span class="text-bold">In-state mutual aid</span> <br>
Intrastate Mutual Aid Compact (IMAC)
</span>
</h3>
<p>IMAC is an agreement that allows local governments, such as cities and counties, to share resources
and personnel during emergencies. IMAC helps local jurisdictions coordinate and support each other
within the state. </p>

{{ imacPublicText }}
</div>
<div id="federal-mutual-aid-section" class="federal-mutual-aid information-section">
<h3 class="bg-accent-cool-lighter grid-row">
<span class="image-block tablet:grid-col-2 mobile:grid-col-12 display-inline-block">
<img class="text-middle" src="{{ '/assets/img/states/usa.svg'| url }}" role="img" alt="" aria-hidden="true" width="88" height="88" />
</span>
<span class="intro-content-block tablet:grid-col-10 mobile:grid-col-12 padding-top-105">
<span class="text-bold">Federal mutual aid</span> <br>
Emergency Mutual Aid Compact (EMAC)
</span>
</h3>
<p>EMAC is an agreement among U.S. states and territories that allows them to share resources and
personnel during disasters or emergencies. It helps states manage large-scale emergencies that
exceed their individual capacities.</p>

{{ emacEGCText }}
</div>
{{ backToTop }}
</section>

<section id="mutual-aid-contacts-section" class="usa-section mutual-aid-contacts">
<h2 class="margin-top-0 margin-bottom-3">
Mutual aid contacts
Mutual aid contacts in {{ stateString }}
</h2>

<p>The following organizations are familiar with the processes for mutual aid in Florida and can help
<p class="margin-bottom-4">The following organizations are familiar with the processes for mutual aid in Florida and can help
connect you with personnel and resources when you need them most. You can reach out to these
organizations for guidance and assistance in navigating the EMAC and IMAC systems to support your
building department during emergencies and disasters.</p>
Expand All @@ -223,31 +239,47 @@ <h3>
{{ entry.orgName }}
</h3>
{% if entry.orgName == "International Code Council Regional Office" %}
<p>The International Code Council (ICC) is a nonprofit association that is focused on building safety
worldwide. The ICC can provide skilled volunteers to assist local building department officials with
building inspections and code enforcement in the aftermath of a disaster.</p>
<h4>Assistance provided:</h4>
<ul class="usa-list">
<li>Permitting and building code assistance</li>
</ul>
<h4>Group details:</h4>
<ul class="usa-list">
<li>The International Code Council (ICC) is a nonprofit association that is focused on building safety
worldwide. The ICC can provide skilled volunteers to assist local building department officials with
building inspections and code enforcement in the aftermath of a disaster.</li>
</ul>
{% endif %}

{% if entry.orgName contains "Association of State Flood Plain Managers" %}
<p>The Association of State Floodplain Managers (ASFPM) is an organization of professionals involved
in floodplain management, flood hazard mitigation, National Flood Insurance Program, and flood
preparedness, warning and recovery. The ASFPM can provide communities with expert assistance in
handling floodplain management responsibilities, conducting damage assessments, and offering
guidance on code-compliant reconstruction after a natural disaster.</p>
<h4>Assistance provided:</h4>
<ul class="usa-list">
<li>Flood response, recovery, and mitigation</li>
</ul>
<h4>Group details:</h4>
<ul class="usa-list">
<li>The Association of State Floodplain Managers (ASFPM) is an organization of professionals involved
in floodplain management, flood hazard mitigation, National Flood Insurance Program, and flood
preparedness, warning and recovery. The ASFPM can provide communities with expert assistance in
handling floodplain management responsibilities, conducting damage assessments, and offering
guidance on code-compliant reconstruction after a natural disaster.</li>
</ul>
{% endif %}

<h4>Contact Information</h4>
<div class="grid-row grid-gap-2 display-flex">
<div class="grid-row grid-gap-4 display-flex">
{% for contact in entry.contacts %}
<div class="mobile:grid-col-12 tablet:grid-col-6 addressBlock margin-bottom-3">
<div class="bg-primary-lighter padding-y-1 padding-x-3 height-full radius-md">
<div class="bg-gray-10 padding-y-1 padding-x-3 height-full radius-md">
{% if contact['First Name'] or contact['Title / Org'] != blank %}
<p>
{% if contact['First Name'] != blank %}
<span class="nameText text-bold">{{ contact['First Name'] }} {{ contact['Last Name'] }}</span><br>
{% endif %}

{% if contact['Title / Org'] != blank %}
{% if contact['First Name'] == blank and contact['Title / Org'] != blank %}
<span class="nameText text-bold">{{ contact['Title / Org'] }}</span>
{% else %}
{{ contact['Title / Org'] }}
{% endif %}
</p>
Expand Down
2 changes: 1 addition & 1 deletion _includes/menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<button type="button" class="usa-nav__close">
<img src="{{'/assets/uswds/img/usa-icons/close.svg' | url }}" role="img" alt="Close" width="24" height="24" />
<img src="{{'/assets/uswds/img/usa-icons/close.svg' | url }}" role="img" alt="Close" width="24" height="24" fetchpriority="low" />
</button>
<ul class="usa-nav__primary usa-accordion">
{% for nav_item in primary_navigation %}
Expand Down
55 changes: 55 additions & 0 deletions federalist.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{
"fullClone": true,
"headers": [
{
"/*.html": {
"cache-control": "public, max-age=0, must-revalidate"
}
},
{
"/page-data/*": {
"cache-control": "public, max-age=0, must-revalidate"
}
},
{
"/static/*": {
"cache-control": "public, max-age=31536000, immutable"
}
},
{
"/sw.js": {
"cache-control": "public, max-age=0, must-revalidate"
}
},
{
"/*.js": {
"cache-control": "public, max-age=31536000, immutable"
}
},
{
"/*.css": {
"cache-control": "public, max-age=31536000, immutable"
}
},
{
"/*.map": {
"cache-control": "public, max-age=31536000, immutable"
}
},
{
"/assets/assets/*.woff2": {
"cache-control": "public, max-age=31536000, immutable"
}
},
{
"/icons/*": {
"cache-control": "public, max-age=31536000, immutable"
}
},
{
"/*": {
"cache-control": "public, max-age=0, must-revalidate"
}
}
]
}
4 changes: 4 additions & 0 deletions theme/img/states/AK.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions theme/img/states/AL.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading