-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1712 from uktrade/release
Prod Release
- Loading branch information
Showing
22 changed files
with
581 additions
and
123,279 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,99 @@ | ||
| @import '../../partials/typography'; | ||
| @import '../../partials/colours'; | ||
|
|
||
| .statistics-card-grid { | ||
| margin-top: -15px; | ||
| // Heading and CTA offset is: 0 - (half line height) - (30px padding) | ||
| // Line height is 1.0475 for small screens and 1.1111 for larger ones, | ||
| // so using 0.55em is around average for both. | ||
| $offset: calc(0px - .55em - 30px); | ||
|
|
||
| .statistic-heading { | ||
| .statistics-card { | ||
| padding: 0 30px; | ||
| } | ||
|
|
||
| .statistics-card-heading { | ||
| margin: 0 0 $offset 0; | ||
|
|
||
| & span { | ||
| display: inline-block; | ||
| padding: 30px; | ||
| background: $grey; | ||
| color: $white; | ||
|
|
||
| @media (min-width: 768px) { | ||
| padding: 30px 60px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .statistics-card-content { | ||
| margin: 0 -30px; | ||
| background: $white; | ||
| padding: 60px 30px; | ||
|
|
||
| & .statistic-heading { | ||
| margin-bottom: 0.5em; | ||
| } | ||
|
|
||
| .statistic-number { | ||
| margin-bottom: 0.4em; | ||
| & .statistic-number { | ||
| margin-bottom: 0; | ||
| font-family: $brand-font; | ||
| } | ||
|
|
||
| .statistic-smallprint { | ||
| & .statistic-smallprint { | ||
| color: $mid-grey; | ||
| } | ||
|
|
||
| & .flex-grid { | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| } | ||
| } | ||
|
|
||
| .statistics-card__column { | ||
| flex: 1 0 100%; | ||
|
|
||
| @media (min-width: 480px) { | ||
| flex-basis: 50%; | ||
| max-width: 50%; | ||
| } | ||
|
|
||
| @media (min-width: 768px) { | ||
| flex-basis: 33.3333%; | ||
| max-width: 33.3333%; | ||
| } | ||
|
|
||
| &.statistics-card__column-5 { | ||
| @media (min-width: 961px) { | ||
| flex-basis: 20%; | ||
| max-width: 20%; | ||
| } | ||
| } | ||
|
|
||
| &.statistics-card__column-6 { | ||
| @media (min-width: 1024px) { | ||
| flex-basis: 16.6666%; | ||
| max-width: 16.6666%; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| .statistics-card-cta { | ||
| margin: $offset 0 0 0; | ||
| text-align: right; | ||
|
|
||
| & .cta-link { | ||
| & span { | ||
| text-align: center; | ||
| padding: 25px 30px; | ||
|
|
||
| @media (min-width: 768px) { | ||
| padding: 25px 60px; | ||
| } | ||
| } | ||
|
|
||
| &:after { | ||
| margin-right: 15px; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,69 @@ | ||
| {% comment %} | ||
| Args: | ||
| statistics - streamfield of IndividualStatisticBlocks | ||
| Args: | ||
| statistics - streamfield of IndividualStatisticBlocks | ||
| {% endcomment %} | ||
|
|
||
| <div class="statistics-card-grid flex-grid underline-active-blue"> | ||
| {% with statistics|length as num_of_statistics %} | ||
| {% load component_tags %} | ||
|
|
||
| <div class="statistics-card margin-vertical-30"> | ||
| <h2 class="statistics-card-heading heading-large"> | ||
| <span>{{ country }}: at a glance</span> | ||
| </h2> | ||
|
|
||
| <div class="statistics-card-content"> | ||
| <div class="flex-grid"> | ||
| {% with statistics|length as num_of_statistics %} | ||
| {% for statistics_block in statistics %} | ||
| {% if statistics_block.value.number %} | ||
| {% if num_of_statistics >= 6 %} | ||
| <figure class="padding-vertical-15 column-half column-third-l column-sixth-xl"> | ||
| {% elif num_of_statistics == 5 %} | ||
| <figure class="padding-vertical-15 column-half column-third-l column-sixth-xl"> | ||
| {% elif num_of_statistics == 4 %} | ||
| <figure class="padding-vertical-15 column-half column-quarter-xl"> | ||
| {% elif num_of_statistics == 3 %} | ||
| <figure class="padding-vertical-15 column-half column-third-l"> | ||
| {% else %} | ||
| <figure class="padding-vertical-15 column-half"> | ||
| {% endif %} | ||
|
|
||
| {% if not number_first %} | ||
| <p class="statistic-heading font-xsmall">{{ statistics_block.value.heading }}</p> | ||
| {% endif %} | ||
| <p class="active-blue-text statistic-number {% if statistics_block.value.number|length > 8 %} bold-medium{% else %} bold-large{% endif %}"> | ||
| {{ statistics_block.value.number }} | ||
| </p> | ||
| {% if number_first %} | ||
| <p class="statistic-heading font-xsmall">{{ statistics_block.value.heading }}</p> | ||
| {% endif %} | ||
| <figcaption> | ||
| <p class="font-xsmall statistic-smallprint">{{ statistics_block.value.smallprint }}</p> | ||
| </figcaption> | ||
|
|
||
| </figure> | ||
| {% endif %} | ||
| {% if statistics_block.value.number %} | ||
| <figure | ||
| class="padding-vertical-15 statistics-card__column statistics-card__column-{% if num_of_statistics >= 6 %}6{% else %}5{% endif %}" | ||
| > | ||
|
|
||
| {% if not number_first %} | ||
| <p class="statistic-heading font-xsmall">{{ statistics_block.value.heading }}</p> | ||
| {% endif %} | ||
|
|
||
| <p | ||
| class="active-blue-text statistic-number {% if statistics_block.value.number|length > 8 %} bold-medium{% else %} bold-large{% endif %}" | ||
| > | ||
| {{ statistics_block.value.number }} | ||
| </p> | ||
|
|
||
| {% if number_first %} | ||
| <p class="statistic-heading font-xsmall">{{ statistics_block.value.heading }}</p> | ||
| {% endif %} | ||
|
|
||
| <figcaption> | ||
| <p class="font-xsmall statistic-smallprint">{{ statistics_block.value.smallprint }}</p> | ||
| </figcaption> | ||
| </figure> | ||
| {% endif %} | ||
| {% endfor %} | ||
| {% endwith %} | ||
| {% endwith %} | ||
| </div> | ||
|
|
||
| <p class="font-medium"> | ||
| Want to see more on {{ country }}? | ||
|
|
||
| {% if sso_is_logged_in %} | ||
| View additional market data, content specific to your product or sector and compare {{ country }} side by side | ||
| with other markets | ||
| {% else %} | ||
| Sign up for additional market data, content specific to your product or sector and to compare {{ country }} side | ||
| by side with other markets. | ||
| {% endif %} | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="statistics-card-cta"> | ||
| <a href="/where-to-export/" class="cta-link with-arrow"> | ||
| <span> | ||
| {% if sso_is_logged_in %} | ||
| View data | ||
| {% else %} | ||
| Sign up for free | ||
| {% endif %} | ||
| </span><br> | ||
| </a> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.