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

Jump to bottom

Update alert tab #1933

Merged
merged 3 commits into from
Oct 17, 2024
Merged

Update alert tab #1933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fe63ac5
update alert tab
greg-does-weather Oct 16, 2024
d8125d5
review feedback
greg-does-weather Oct 17, 2024
9b70ea3
do it in css rather than js!
greg-does-weather Oct 17, 2024
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
2 changes: 1 addition & 1 deletion web/themes/new_weather_theme/assets/css/styles.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion web/themes/new_weather_theme/assets/css/styles.css.map
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions web/themes/new_weather_theme/assets/sass/components/alert-details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,8 @@ wx-alerts {
// align bullet with the text
padding-left: 2ch;
}

.usa-accordion .usa-prose p {
@include u-measure(6);
}
}
9 changes: 7 additions & 2 deletions web/themes/new_weather_theme/assets/sass/components/safety-tips.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
@use "uswds-core" as *;

.usa-prose.wx-safety-tips ul li p {
.usa-prose.wx-safety-tips {
a {
@include typeset-link;
}

ul li p {
margin-top: 0;
margin-bottom: units(0.5);
}
}

117 changes: 64 additions & 53 deletions web/themes/new_weather_theme/templates/block/block--weathergov-local-alerts.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<h2 class="usa-sr-only">Alerts</h2>
<div class="grid-container padding-x-2">
<div class="grid-row">
<div class="grid-col-12 tablet-lg:grid-offset-2 tablet-lg:grid-col-8">
<div class="grid-col-12">
<wx-alerts class="display-block">
{% for alert in content.alerts %}
<div class="usa-accordion usa-accordion--bordered margin-bottom-1" id="alert_{{ alert.alertId }}">
Expand Down Expand Up @@ -56,62 +56,73 @@
</p>
{% endif %}

<h4 class="wx-visual-h3 text-normal text-primary-dark">{{ "Areas impacted" |t }}</h4>
<hr class="border-base-light">

{#
Some alerts come with location information in the description text
in a common text formatting. In those cases, the location information
is lists of counties by region of the state, and sometimes a list of
impacted cities as well. When we have that more fine-grained data,
we will display it.
#}
{% if alert.alertAreas != false %}
{% for area in alert.alertAreas.countyAreas %}
<wx-alert-county-region>
<h5 class="wx-visual-h4 text-normal text-primary-dark margin-top-205 margin-bottom-0">
{{ "Counties in" | t }} {{ area.area }}
</h5>
<ul class="usa-list margin-top-1 {%- if area.counties | length > 7 %} wx-col-2 {%- endif -%}">
{% for county in area.counties %}
<li class="">{{ county }}</li>
{% endfor %}
</ul>
</wx-alert-county-region>
{% endfor %}
{% if alert.alertAreas.cities %}
<wx-alert-cities>
<h5 class="wx-visual-h4 text-normal text-primary-dark margin-top-105 margin-bottom-0">
{{ "Including these cities" | t }} {{ area.area }}
</h5>
<ul class="usa-list margin-top-1 {%- if alert.alertAreas.cities | length > 7 %} wx-col-2 {%- endif -%}">
<div class="grid-container margin-0 padding-0">
<div class="grid-row">
<div class="grid-col-12 tablet-lg:grid-col-6">
<h4 class="wx-visual-h3 text-normal text-primary-dark margin-bottom-05">{{ "Areas impacted" |t }}</h4>
{#
Some alerts come with location information in the description text
in a common text formatting. In those cases, the location information
is lists of counties by region of the state, and sometimes a list of
impacted cities as well. When we have that more fine-grained data,
we will display it.
#}
{% if alert.alertAreas != false %}
{% for area in alert.alertAreas.countyAreas %}
<wx-alert-county-region>
<h5 class="wx-visual-h4 text-normal text-primary-dark margin-top-205 margin-bottom-0">
{{ "Counties in" | t }} {{ area.area }}
</h5>
<ul class="usa-list margin-top-1 {%- if area.counties | length > 7 %} wx-col-2 {%- endif -%}">
{% for county in area.counties %}
<li class="">{{ county }}</li>
{% endfor %}
</ul>
</wx-alert-county-region>
{% endfor %}
{% if alert.alertAreas.cities %}
<wx-alert-cities>
<h5 class="wx-visual-h4 text-normal text-primary-dark margin-top-105 margin-bottom-0">
{{ "Including these cities" | t }} {{ area.area }}
</h5>
<ul class="usa-list margin-top-1 {%- if alert.alertAreas.cities | length > 7 %} wx-col-2 {%- endif -%}">

{% for city in alert.alertAreas.cities %}
<li class="">{{ city }}</li>
{% endfor %}
</ul>
</wx-alert-cities>
{% endif %}

{#
If the alert doesn't have that location information in the description
text, we can use the list of impacted areas provided by AWIPS. This
list is based on the alert polygon drawn by a forecaster, and then
AWIPS identifies the areas.
#}
{% else %}
<ul class="usa-list {%- if alert.areaDesc | length > 7 %} wx-col-2 {%- endif -%}">
{% for areaName in alert.areaDesc %}
<li class="">{{ areaName }}</li>
{% endfor %}
</ul>
{% endif %}
{% for city in alert.alertAreas.cities %}
<li class="">{{ city }}</li>
{% endfor %}
</ul>
</wx-alert-cities>
{% endif %}

<wx-alert-map class="display-block grid-col-12 wx-radar-container wx-isolation-isolate" data-geo-json="{{ alert.geometry | json_encode | url_encode }}" data-alert-id="{{ alert.alertId}}" data-lat="{{ weather.point.lat }}" data-lon="{{ weather.point.lon }}" data-alert-name="{{ alert.event }}">
<div id="wx_alert_map_{{ alert.alertId }}" class="height-full"></div>
<div class="wx_alert_map_legend margin-top-3 display-flex flex-align-center">
<div class="wx_alert_map_legend_impact_area display-block width-3 height-3 border-2px margin-right-1"></div><span>Impacted Area</span>
{#
If the alert doesn't have that location information in the description
text, we can use the list of impacted areas provided by AWIPS. This
list is based on the alert polygon drawn by a forecaster, and then
AWIPS identifies the areas.
#}
{% else %}
<ul class="usa-list {%- if alert.areaDesc | length > 7 %} wx-col-2 {%- endif -%}">
{% for areaName in alert.areaDesc %}
<li class="">{{ areaName }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</wx-alert-map>

<div class="grid-col-12 tablet-lg:grid-col-6 margin-top-3">
<wx-alert-map class="display-block grid-col-12 wx-radar-container wx-isolation-isolate" data-geo-json="{{ alert.geometry | json_encode | url_encode }}" data-alert-id="{{ alert.alertId}}" data-lat="{{ weather.point.lat }}" data-lon="{{ weather.point.lon }}" data-alert-name="{{ alert.event }}">
<div id="wx_alert_map_{{ alert.alertId }}" class="height-full"></div>
<div class="wx_alert_map_legend margin-top-3 display-flex flex-align-center">
<div class="wx_alert_map_legend_impact_area display-block width-3 height-3 border-2px margin-right-1"></div><span>Impacted Area</span>
</div>
</wx-alert-map>
</div>
</div>
</div>

<hr class="border-base-light">

{{ drupal_block("weathergov_dynamic_safety_information", { weather_event: alert.event }) }}

Expand Down
Loading