Skip to content

Commit

Permalink
Update health advice page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jdudley1123
jdudley1123 committed Dec 2, 2024
1 parent f1ae9b9 commit 0077175
Show file tree
Hide file tree
Showing 5 changed files with 204 additions and 69 deletions.
2 changes: 2 additions & 0 deletions app/assets/stylesheets/application.tailwind.css.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@import "leaflet.fullscreen/Control.FullScreen.css"; /* Fullscreen button */
@import "header.scss";
@import "forecast-page.scss";
@import "health-advice-page.scss";
@import "subscription-form.scss";
@import "map.scss";
@import "daqi-levels.scss";
Expand All @@ -18,4 +19,5 @@
:root {
--main-colour: #3880d1;
--main-colour-light: #dae7f7;
--main-colour-lightest: #EDF4FB;;
}
2 changes: 1 addition & 1 deletion app/assets/stylesheets/daqi-levels.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
--daqi-level-10-text: white;
}

.daqi-scale, .tabs {
.daqi-scale, .tabs, .daqi-table {
.daqi-level-1 {
background-color: var(--daqi-level-1-bg);
color: var(--daqi-level-1-text);
Expand Down
44 changes: 44 additions & 0 deletions app/assets/stylesheets/health-advice-page.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
.advice-table {
@apply border-collapse mb-4;

thead {
@apply bg-gray-500 py-4;
color: white;

th {
font-weight: normal;
}
}

tr.levels {
font-weight: bold;
text-align: center;
border: 1px solid #ccc;
border-width: 1px 0;
background: var(--main-colour-light);

td:first-child {
text-align: left;
background: var(--main-colour-lightest);
}
}

th, td {
border-left: 1px solid white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 0.25rem 0.5rem;

&:first-child {
border-left: none;
}
}

h3 {
font-size: 1.25rem;
}

h4 {
font-weight: bold;
}
}
10 changes: 5 additions & 5 deletions app/assets/stylesheets/text-block.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,19 @@
}

.text-block {
h1 {
> h1 {
@apply h1;
}

h2 {
> h2 {
@apply h2;
}

h3 {
> h3 {
@apply h3;
}

h4 {
> h4 {
@apply h4;
}

Expand All @@ -51,7 +51,7 @@
}
}

table {
.table {
@apply max-w-sm border-collapse;

th {
Expand Down
215 changes: 152 additions & 63 deletions app/views/pages/health_advice.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,103 +4,192 @@
<h1>Health advice</h1>

<h2>Air pollution index</h2>
<p>The index used to describe air quality is the <%= link_to('daily air quality index (DAQI)', 'http://uk-air.defra.gov.uk/air-pollution/daqi') %> for the UK. </p>
<p>The index represents air pollution using a 1 to 10 scale divided into four bands: </p>
<table>
<p>The index used to describe air quality is the <%= link_to('daily air quality index (DAQI)', 'http://uk-air.defra.gov.uk/air-pollution/daqi') %> for the UK. It represents air pollution using a 1 to 10 scale divided into four bands: low, moderate, high, and very high.</p>

<h2>Air pollution advice</h2>
<p>The health advice shown below for at-risk individuals and for the general population.<p>
<p>It's important that you do not become alarmed or panic when you receive an airTEXT alert. It is designed to help you ensure you have any necessary medication at hand and to prepare your day ahead to reduce your exposure.</p>

<div>
At-risk individuals
<p>Adults and children with heart or lung problems are at greater risk of symptoms. Follow your doctor's usual advice about exercising and managing your condition.</p>
<p>Susceptible individuals may experience health effects even on Low air pollution days. Anyone experiencing symptoms should follow the guidance provided below.</p>
</div>

<table class="advice-table daqi-table">
<thead>
<tr>
<th>Band</th>
<th>Indexes</th>
<th colspan="3">Indexes</th>
</tr>
</thead>
<tbody>
<tr>
<td class="daqi-low-level">Low</td>
<td class="text-center">1-3</td>
<tr class="levels">
<td><h3>Low</h3></td>
<td class="daqi-level-1">1</td>
<td class="daqi-level-2">2</td>
<td class="daqi-level-3">3</td>
</tr>
<tr>
<td class="daqi-moderate-level">Moderate</td>
<td class="text-center">4-6</td>
<tr class="advice">
<td colspan="4">
<h4>Health advice for at-risk individuals and the general population</h4>
<p>Enjoy your usual outdoor activities.</p>
</td>
</tr>
<tr>
<td class="daqi-high-level">High</td>
<td class="text-center">7-9</td>
<tr class="levels">
<td><h3>Moderate</h3></td>
<td class="daqi-level-4">4</td>
<td class="daqi-level-5">5</td>
<td class="daqi-level-6">6</td>
</tr>
<tr>
<td class="daqi-very-high-level">Very high</td>
<td class="text-center">10</td>
<tr class="advice">
<td colspan="4">
<h4>Health advice for at-risk individuals</h4>
<p>Adults and children with heart or lung problems should reduce physical exertion, particularly outdoors, and particularly if they experience symptoms.</p>
<h4>Health advice for the general population</h4>
<p>Enjoy your usual outdoor activities.</p>
</td>
</tr>
<tr class="levels">
<td><h3>High</h3></td>
<td class="daqi-level-7">7</td>
<td class="daqi-level-8">8</td>
<td class="daqi-level-9">9</td>
</tr>
<tr class="advice">
<td colspan="4">
<h4>Health advice for at-risk individuals</h4>
<p>Adults and children with lung problems and those with heart problems who experience symptoms should consider reducing strenuous physical activity, particularly outdoors.</p>
<p>People with asthma may find they need to use their reliever inhaler more often.</p>
<p>Older people should also reduce physical exertion.</p>
<h4>Health advice for the general population</h4>
<p>Anyone experiencing discomfort such as sore eyes, cough or sore throat should consider reducing activity, particularly outdoors.</p>
</td>
</tr>
<tr class="levels">
<td><h3>Very high</h3></td>
<td class="daqi-level-10" colspan="3">10</td>
</tr>
<tr class="advice">
<td colspan="4">
<h4>Health advice for at-risk individuals</h4>
<p>Adults and children with lung problems, adults with heart problems, and older people should avoid strenuous physical activity.</p>
<p>People with asthma may find they need to use their reliever inhaler more often.</p>
<p>Older people should also avoid physical exertion.</p>
<h4>Health advice for the general population</h4>
<p>Reduce physical exertion, particularly outdoors, especially if you experience cough or sore throat symptoms.</p>
</td>
</tr>
</tbody>
</table>

<h2>Air pollution advice</h2>
<p>Air pollution levels are normally low in London and for most of the time you will not notice any effects on your health. It's important that you do not become alarmed or panic when you receive an airTEXT alert. It is designed to help you ensure you have any necessary medication at hand and to prepare your day ahead to reduce your exposure.</p>

<h2>Long term effects of air pollution</h2>
<p>Information on the long-term health effects of air pollution is available in the 2009 Committee on the Medical Effects of Air Pollutants COMEAP report <%= link_to('Long-Term Exposure to Air Pollution: Effect on Mortality', 'http://www.hpa.org.uk/webc/HPAwebFile/HPAweb_C/1317137020526') %>.</p>

<h2>UV advice</h2>
<p>The forecasts of UV are forecasts of maximum hourly cloud-adjusted solar UV index over a 24-hr period.</p>
<p>Cancer Research UK’s website has <%= link_to('information and advice about sun safety', 'https://www.cancerresearchuk.org/about-cancer/causes-of-cancer/sun-uv-and-cancer/the-uv-index-and-sunburn-risk') %>.</p>
<table>
<thead>
<tr>
<th>Band</th>
<th>Indexes</th>
</tr>
</thead>
<p>The UV forecasts predict the maximum hourly cloud-adjusted solar UV index over 24 hours. The higher the UV index number, the less time it takes for the sun to damage your skin.</p>
<table class="advice-table">
<tbody>
<tr>
<td class="daqi-low-level">Low</td>
<td class="text-center">1-2</td>
<tr class="levels">
<td>Low</td>
<td colspan="3">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td class="daqi-moderate-level">Moderate</td>
<td class="text-center">3-5</td>
<tr class="advice">
<td colspan="7">
<p>No sun protection required.</p>
</td>
</tr>
<tr>
<td class="daqi-high-level">High</td>
<td class="text-center">6-7</td>
<tr class="levels">
<td>Moderate</td>
<td colspan="2">3</td>
<td colspan="2">4</td>
<td colspan="2">5</td>
</tr>
<tr>
<td class="daqi-very-high-level">Very high</td>
<td class="text-center">10</td>
<tr class="levels">
<td>High</td>
<td colspan="3">6</td>
<td colspan="3">7</td>
</tr>
<tr class="advice">
<td colspan="7">
<p>Be sun-safe and consider protecting your skin by finding shades, covering it with clothing and using sunscreen with at least SPF 30.</p>
</td>
</tr>
<tr class="levels">
<td>Very high</td>
<td colspan="6">8+
</tr>
<tr class="advice">
<td colspan="7">
<p>Everyone, no matter their skin tone, should prioritize protecting their skin.</p>
</td>
</tr>
</tbody>
</table>

<p>Cancer Research UK’s website has more <%= link_to('information and advice about sun safety', 'https://www.cancerresearchuk.org/about-cancer/causes-of-cancer/sun-uv-and-cancer/the-uv-index-and-sunburn-risk') %>.</p>

<h2>Pollen advice</h2>
<p>The forecasts of pollen are forecasts of daily grass pollen and may be</p>
<p>The NHS hay fever webpage has <%= link_to('advice on prevention and treatment of hay fever', 'http://www.nhs.uk/Conditions/Hay-fever/Pages/Introduction.aspx') %></p>
<table>
<thead>
<tr>
<th>Band</th>
<th>Indexes</th>
</tr>
</thead>
<p>Pollen forecasts are predictors of daily grass pollen. Between late March and September, pollen count is at its highest, potentiated by a warm, humid, and windy atmosphere.</p>
<table class="advice-table">
<tbody>
<tr>
<td class="daqi-low-level">Low</td>
<td class="text-center">1-2</td>
<tr class="levels">
<td>Low</td>
</tr>
<tr>
<td class="daqi-moderate-level">Moderate</td>
<td class="text-center">3-5</td>
<tr class="advice">
<td >
<p>No action needed.</p>
</td>
</tr>
<tr>
<td class="daqi-high-level">High</td>
<td class="text-center">6-7</td>
<tr class="levels">
<td>Moderate</td>
</tr>
<tr>
<td class="daqi-very-high-level">Very high</td>
<td class="text-center">8-10</td>
<tr class="advice">
<td>
<p>Individuals suffering hay fever or allergies should consider wearing a face mask and sunglasses for outdoors.</p>
</td>
</tr>
<tr class="levels">
<td>High and very high</td>
</tr>
<tr class="advice">
<td colspan="7">
<p>Individuals suffering from hay fever or allergies should stay indoors with doors and windows shut, if possible. If outdoors, wear a face mask, sunglasses, or a wide-brimmed hat.</p>
<p>To ease the symptoms, put petroleum jelly around the nostrils, shower and change clothes after being outside.</p>
</td>
</tr>
</tbody>
</table>

<p>The NHS hay fever website has more <%= link_to('advice on prevention and treatment of hay fever', 'http://www.nhs.uk/Conditions/Hay-fever/Pages/Introduction.aspx') %></p>

<h2>Extreme weather advice</h2>
<p>The forecasts show the minimum and maximum hourly temperatures predicted over a 24-hour period.</p>
<p>The NHS heatwave webpage has <%= link_to('advice about how to keep cool in hot weather', 'http://www.nhs.uk/Livewell/Summerhealth/Pages/Heatwave.aspx') %>.</p>
<p>The NHS Winter health web page has <%= link_to('advice about how to keep warm in cold weather', 'http://www.nhs.uk/Livewell/Winterhealth/Pages/Winterhealthhome.aspx') %>.</p>

<table class="advice-table">
<tbody>
<tr class="levels">
<td>Heatwave</td>
<td>Over 28°C</td>
</tr>
<tr class="advice">
<td >
<p>Keep out of the heat if possible. If you have to go outside, stay in the shade, especially between 11 a.m. and 3 p.m. Wear sunscreen with at least SPF 30, a hat, and light clothes, and avoid strenuous physical activity.</p>
</td>
</tr>
<tr class="levels">
<td colspan="2">Winter</td>
</tr>
<tr class="advice">
<td>
<p>If you're eligible, it's important to get winter flu and COVID-19 vaccinations to help you stay well in winter.</p>
<p>If possible, heat your home to at least 18°C (65°F), keep your bedroom window closed on cold nights, wear lots of layers of thin clothes, eat enough, and have hot drinks.</p>
</td>
</tr>
</tbody>
</table>

<p>The NHS Heatwave website has <%= link_to('advice about how to keep cool in hot weather', 'http://www.nhs.uk/Livewell/Summerhealth/Pages/Heatwave.aspx') %>.</p>
<p>The NHS Winter Health website has <%= link_to('advice about how to keep warm in cold weather', 'http://www.nhs.uk/Livewell/Winterhealth/Pages/Winterhealthhome.aspx') %>.</p>
</article>

0 comments on commit 0077175

Please sign in to comment.