diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss index 981d2032..097702b5 100644 --- a/app/assets/stylesheets/application.tailwind.css.scss +++ b/app/assets/stylesheets/application.tailwind.css.scss @@ -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"; @@ -18,4 +19,5 @@ :root { --main-colour: #3880d1; --main-colour-light: #dae7f7; + --main-colour-lightest: #EDF4FB;; } diff --git a/app/assets/stylesheets/daqi-levels.scss b/app/assets/stylesheets/daqi-levels.scss index 81d235d5..be3ca80f 100644 --- a/app/assets/stylesheets/daqi-levels.scss +++ b/app/assets/stylesheets/daqi-levels.scss @@ -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); diff --git a/app/assets/stylesheets/health-advice-page.scss b/app/assets/stylesheets/health-advice-page.scss new file mode 100644 index 00000000..eaf9e364 --- /dev/null +++ b/app/assets/stylesheets/health-advice-page.scss @@ -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; + } +} diff --git a/app/assets/stylesheets/text-block.scss b/app/assets/stylesheets/text-block.scss index f9aad5a0..a4a77af0 100644 --- a/app/assets/stylesheets/text-block.scss +++ b/app/assets/stylesheets/text-block.scss @@ -19,19 +19,19 @@ } .text-block { - h1 { + > h1 { @apply h1; } - h2 { + > h2 { @apply h2; } - h3 { + > h3 { @apply h3; } - h4 { + > h4 { @apply h4; } @@ -51,7 +51,7 @@ } } - table { + .table { @apply max-w-sm border-collapse; th { diff --git a/app/views/pages/health_advice.html.erb b/app/views/pages/health_advice.html.erb index 2aa2220e..c3fb55e6 100644 --- a/app/views/pages/health_advice.html.erb +++ b/app/views/pages/health_advice.html.erb @@ -4,103 +4,192 @@
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.
-The index represents air pollution using a 1 to 10 scale divided into four bands:
-Band | -Indexes | +Indexes | ||
---|---|---|---|---|
Low | -1-3 | +|||
Low |
+ 1 | +2 | +3 | |
Moderate | -4-6 | +|||
+ Health advice for at-risk individuals and the general population+Enjoy your usual outdoor activities. + |
||||
High | -7-9 | +|||
Moderate |
+ 4 | +5 | +6 | |
Very high | -10 | +|||
+ Health advice for at-risk individuals+Adults and children with heart or lung problems should reduce physical exertion, particularly outdoors, and particularly if they experience symptoms. +Health advice for the general population+Enjoy your usual outdoor activities. + |
+ ||||
High |
+ 7 | +8 | +9 | +|
+ Health advice for at-risk individuals+Adults and children with lung problems and those with heart problems who experience symptoms should consider reducing strenuous physical activity, particularly outdoors. +People with asthma may find they need to use their reliever inhaler more often. +Older people should also reduce physical exertion. +Health advice for the general population+Anyone experiencing discomfort such as sore eyes, cough or sore throat should consider reducing activity, particularly outdoors. + |
+ ||||
Very high |
+ 10 | +|||
+ Health advice for at-risk individuals+Adults and children with lung problems, adults with heart problems, and older people should avoid strenuous physical activity. +People with asthma may find they need to use their reliever inhaler more often. +Older people should also avoid physical exertion. +Health advice for the general population+Reduce physical exertion, particularly outdoors, especially if you experience cough or sore throat symptoms. + |
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.
-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') %>.
The forecasts of UV are forecasts of maximum hourly cloud-adjusted solar UV index over a 24-hr period.
-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') %>.
-Band | -Indexes | -
---|
Low | -1-2 | +|||||
Low | +1 | +2 | ||||
Moderate | -3-5 | +|||||
+ No sun protection required. + |
||||||
High | -6-7 | +|||||
Moderate | +3 | +4 | +5 | |||
Very high | -10 | +|||||
High | +6 | +7 | +||||
+ Be sun-safe and consider protecting your skin by finding shades, covering it with clothing and using sunscreen with at least SPF 30. + |
+ ||||||
Very high | +8+ + | |||||
+ Everyone, no matter their skin tone, should prioritize protecting their skin. + |
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') %>.
+The forecasts of pollen are forecasts of daily grass pollen and may be
-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') %>
-Band | -Indexes | -
---|
Low | -1-2 | +|||||
Low | ||||||
Moderate | -3-5 | +|||||
+ No action needed. + |
||||||
High | -6-7 | +|||||
Moderate | ||||||
Very high | -8-10 | +|||||
+ Individuals suffering hay fever or allergies should consider wearing a face mask and sunglasses for outdoors. + |
+ ||||||
High and very high | +||||||
+ 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. +To ease the symptoms, put petroleum jelly around the nostrils, shower and change clothes after being outside. + |
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') %>
+The forecasts show the minimum and maximum hourly temperatures predicted over a 24-hour period.
-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') %>.
-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') %>.
+ +Heatwave | +Over 28°C | +
+ 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. + |
+ |
Winter | +|
+ If you're eligible, it's important to get winter flu and COVID-19 vaccinations to help you stay well in winter. +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. + |
+
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') %>.
+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') %>.