diff --git a/ds_judgements_public_ui/sass/includes/_judgment_text_download_options.scss b/ds_judgements_public_ui/sass/includes/_judgment_text_download_options.scss new file mode 100644 index 000000000..e70917d89 --- /dev/null +++ b/ds_judgements_public_ui/sass/includes/_judgment_text_download_options.scss @@ -0,0 +1,38 @@ +.judgment-download-options { + max-width: 90%; + margin: 0 auto calc($spacer__unit*3) auto; + + @media (min-width: $grid__breakpoint-medium) { + max-width: 46rem; + } + + &__header { + border-bottom: 4px solid $color__yellow; + padding-bottom: calc($spacer__unit * 0.5); + margin-bottom: calc($spacer__unit * 2); + display: inline-block; + } + + &__options-list { + display: flex; + flex-direction: column; + gap: $spacer__unit; + + @media (min-width: $grid__breakpoint-medium) { + flex-direction: row; + } + } + + &__download-option { + border: 1px solid $color__yellow; + padding: $spacer__unit; + } + + h3 { + margin-top: 0; + } + + p { + margin-bottom: 0; + } +} diff --git a/ds_judgements_public_ui/sass/includes/_judgment_text_toolbar.scss b/ds_judgements_public_ui/sass/includes/_judgment_text_toolbar.scss index afecd78f7..7f457551e 100644 --- a/ds_judgements_public_ui/sass/includes/_judgment_text_toolbar.scss +++ b/ds_judgements_public_ui/sass/includes/_judgment_text_toolbar.scss @@ -12,11 +12,7 @@ display: inline-block; text-decoration: none; outline-offset: 3px; - margin: 0 $spacer__unit $spacer__unit 0; - - @media (min-width: $grid__breakpoint-small) { - margin-bottom: 0; - } + margin: 0; } &__return-link { @@ -33,6 +29,7 @@ &__download { display: inline-block; + } &__container { @@ -41,12 +38,13 @@ > div { @media (max-width: $grid__breakpoint-small) { text-align: center; + display: block; padding: 0.25rem $spacer__unit; } } @media (min-width: $grid__breakpoint-small) { - text-align: center; + text-align: right; } @media (min-width: $grid__breakpoint-medium) { @@ -58,3 +56,33 @@ } } } + +.judgment-download { + + &__option--pdf { + padding-left: 0 !important; + padding-right: 0 !important; + margin: 0 !important; + width: 100%; + text-align: center; + } + + &__download-options { + color: $color__dark-grey; + font-size: 0.7rem; + font-style: italic; + margin: calc($spacer__unit * 0.5) 0 0 0; + + a { + background-color: transparent; + color: $color__aqua-blue; + padding: 0; + display: inline; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + } +} diff --git a/ds_judgements_public_ui/sass/main.scss b/ds_judgements_public_ui/sass/main.scss index 273456386..be78906e0 100644 --- a/ds_judgements_public_ui/sass/main.scss +++ b/ds_judgements_public_ui/sass/main.scss @@ -20,6 +20,7 @@ @import "includes/judgment_text_toolbar"; @import "includes/judgment_text_source"; @import "includes/judgment_text_service_introduction"; +@import "includes/judgment_text_download_options"; @import "includes/standard_text_template"; @import "includes/how_can_this_service_be_improved"; @import "includes/back_to_top_link"; diff --git a/ds_judgements_public_ui/templates/includes/judgment_text_download_options.html b/ds_judgements_public_ui/templates/includes/judgment_text_download_options.html new file mode 100644 index 000000000..64ac56014 --- /dev/null +++ b/ds_judgements_public_ui/templates/includes/judgment_text_download_options.html @@ -0,0 +1,26 @@ +{% load i18n %} +
diff --git a/ds_judgements_public_ui/templates/includes/judgment_text_toolbar.html b/ds_judgements_public_ui/templates/includes/judgment_text_toolbar.html index 609cf1c33..d72a92c88 100644 --- a/ds_judgements_public_ui/templates/includes/judgment_text_toolbar.html +++ b/ds_judgements_public_ui/templates/includes/judgment_text_toolbar.html @@ -1,14 +1,16 @@ {% load i18n %} diff --git a/ds_judgements_public_ui/templates/layout_judgment_html.html b/ds_judgements_public_ui/templates/layout_judgment_html.html index 54fed0b15..289923e08 100644 --- a/ds_judgements_public_ui/templates/layout_judgment_html.html +++ b/ds_judgements_public_ui/templates/layout_judgment_html.html @@ -40,6 +40,7 @@ {% endblock %} Back to top +{% include 'includes/judgment_text_download_options.html' %} {% include 'includes/footer.html' %}