Skip to content

Commit

Permalink
Merge pull request #745 from alphagov/govspeak-attachments
Browse files Browse the repository at this point in the history 
Govspeak attachments
  • Loading branch information
@dsingleton
dsingleton committed Feb 25, 2016
2 parents e5d2978 + ce3e55a commit 9371328
Show file tree
Hide file tree
Showing 3 changed files with 298 additions and 13 deletions.
29 changes: 29 additions & 0 deletions app/assets/stylesheets/govuk-component/_govspeak-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,33 @@
.play-container {
display: none;
}

.attachment {
margin: $gutter 0;

&:first-child {
margin-top: 0;
}

.attachment-thumb {
display: none;
}

.attachment-details {
.download {
display: block;
}
}

.accessibility-warning {
h2 {
@include core-14;
}

.toggler {
display: none;
}
}
}

}
112 changes: 99 additions & 13 deletions app/assets/stylesheets/govuk-component/_govspeak.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,6 @@
h3 {
@include bold-19;
margin-top: $gutter + 5px;

&.hosted-externally {
@include bold-27;
padding-top: 2px;

a {
text-decoration: none;

&:hover {
text-decoration: underline;
}
}
}
}

h4 {
Expand Down Expand Up @@ -413,4 +400,103 @@
.media-player {
@include media-player;
}

// This block is duplicated from Whitehall as a transitional step, see the
// commit adding this warning before making changes, original version:
// https://github.com/alphagov/whitehall/blob/master/app/assets/stylesheets/frontend/helpers/_attachment.scss
$thumbnail-width: 99px;

.attachment {
position: relative;
margin: $gutter 0;
padding: $gutter-half 0 0 ($thumbnail-width + $gutter);
@extend %contain-floats;

&:first-child {
margin-top: 0;
padding-top: 0;
}

.attachment-thumb {
$thumb-border-width: $gutter-one-third / 2;

position: relative;
float: left;
margin-top: $thumb-border-width;
margin-left: -($thumbnail-width + $gutter - $thumb-border-width);
padding-bottom: $gutter-half;

img {
display: block;
width: $thumbnail-width;
height: 140px;
background: $white;
outline: $thumb-border-width solid transparentize($black, 0.9);

@include ie-lte(8) {
border: $thumb-border-width solid $grey-3;
}

@include box-shadow(0 2px 2px rgba($black, .4));
}
}

.attachment-details {
h2 {
@include core-27;
margin: 0;
}

p {
margin: $gutter-one-third 0;
}

.metadata {
@include core-14;
}

.changed,
.references,
.unnumbered-paper {
display: block;
}

.preview,
.download {
@include core-19;

strong {
font-weight: bold;
}
}

.preview {
padding-right: $gutter-half;
}

.opendocument-help {
@include core-14;
a {
@include external-link-14;
}
}

.accessibility-warning {
h2 {
@include core-14;
margin: 0;
}
}
}
}

&.direction-rtl .attachment {
padding: $gutter-half ($thumbnail-width + $gutter) 0 0;

.attachment-thumb {
float: right;
margin-left: 0;
margin-right: (($thumbnail-width * -1) - $gutter-half);
}
}
}
170 changes: 170 additions & 0 deletions app/views/govuk_component/docs/govspeak.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,3 +241,173 @@ fixtures:
</li>
</ol>
</div>
inline_attachment:
content: |
<p>testing my attachment <span class="inline-attachment" id="attachment_1399340">
<a href="/government/uploads/system/uploads/attachment_data/file/498071/PHE_Payments_over__25k_Jun_15.csv">testing</a>
(<span class="type"><abbr title="Comma-separated Values">CSV</abbr></span>, <span class="file-size">65.4KB</span>)</span> works in the middle of copy.
</p>
block_attachments:
content: |
<section class="attachment embedded" id="attachment_1399345">
<div class="attachment-thumb">
<a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/minimum-wage-jobs-in-ashfield-local-authority-since-2009"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/uploads/system/uploads/attachment_data/file/496127/thumbnail_LPC_FoI_09.12.15_NMW_jobs_Ashfield_LA.pdf.png"></a>
</div>
<div class="attachment-details">
<h2 class="title"><a href="https://www.gov.uk/government/publications/minimum-wage-jobs-in-ashfield-local-authority-since-2009">PDF Attachment</a></h2>
<p class="metadata">
<span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">198KB</span>, <span class="page-length">2 pages</span>
</p>
</div>
</section>
<section class="attachment embedded" id="attachment_1399344">
<div class="attachment-thumb">
<a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/world-location-news/294043.es-419"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-doc-afe3b0a8a9511beeca890340170aee8b5649413f948e512c9b8ce432d8513d32.png"></a>
</div>
<div class="attachment-details">
<h2 class="title"><a href="https://www.gov.uk/government/world-location-news/294043.es-419">Document attachment</a></h2>
<p class="metadata">
<span class="type">MS Word Document</span>, <span class="file-size">24.2KB</span>
</p>
</div>
</section>
<section class="attachment embedded" id="attachment_1105176">
<div class="attachment-thumb">
<a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/post-legislative-memorandum-the-equality-act-2010"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/uploads/system/uploads/attachment_data/file/441838/thumbnail_Memo_to_Women_Equalities.pdf.png"></a>
</div>
<div class="attachment-details">
<h2 class="title"><a href="https://www.gov.uk/government/publications/post-legislative-memorandum-the-equality-act-2010">File attachment with additional metadata</a></h2>
<p class="metadata">
<span class="references">
Ref: ISBN <span class="isbn">9781474121767</span>, <span class="command_paper_number">CM 9101</span>
</span>
<span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">2.02MB</span>, <span class="page-length">86 pages</span>
</p>
<p>
<a class="order_url" title="Order a copy of the publication" href="https://www.gov.uk/how-to-buy-printed-copies-of-official-documents%20">Order a copy</a>
</p>
</div>
</section>
<section class="attachment embedded" id="attachment_1399348">
<div class="attachment-thumb">
<img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-spreadsheet-471052e0d03e940bbc62528a05ac204a884b553e4943e63c8bffa6b8baef8967.png">
</div>
<div class="attachment-details">
<h2 class="title">Previewable online example</h2>
<p class="metadata">
<span class="preview">
<strong>
<a href="https://www.gov.uk/government/publications/phe-spend-over-25000-june-2015">View online</a>
</strong>
</span>
<span class="download">
<a href="https://www.gov.uk/government/publications/phe-spend-over-25000-june-2015">
<strong>Download CSV</strong>
65.4KB
</a>
</span>
</p>
</div>
</section>
<section class="attachment embedded" id="attachment_1243761">
<div class="attachment-thumb">
<a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/statistical-data-sets/env24-fly-tipping-incidents-and-actions-taken-in-england"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-spreadsheet-471052e0d03e940bbc62528a05ac204a884b553e4943e63c8bffa6b8baef8967.png"></a>
</div>
<div class="attachment-details">
<h2 class="title"><a aria-describedby="attachment-1243761-accessibility-help" href="https://www.gov.uk/government/statistical-data-sets/env24-fly-tipping-incidents-and-actions-taken-in-england">Fly-tipping incidents and actions reported by local authorities in 2014 to 2015</a></h2>
<p class="metadata">
<span class="type"><abbr title="OpenDocument Spreadsheet">ODS</abbr></span>, <span class="file-size">173KB</span>
</p>
<p class="opendocument-help">
This file is in an <a rel="external" href="https://en.wikipedia.org/wiki/OpenDocument_software">OpenDocument</a> format
</p>
<div data-module="toggle" class="accessibility-warning" id="attachment-1243761-accessibility-help">
<h2>This file may not be suitable for users of assistive technology.
<a class="toggler" href="#attachment-1243761-accessibility-request" data-controls="attachment-1243761-accessibility-request" data-expanded="false">Request a different format.</a>
</h2>
<p id="attachment-1243761-accessibility-request" class="help-block js-hidden"><span class="arrow"></span>
If you use assistive technology and need a version of this document
in a more accessible format, please email
<a href="mailto:[email protected]?body=Details%20of%20document%20required%3A%0A%0A%20%20Title%3A%20Fly-tipping%20incidents%20and%20actions%20reported%20by%20local%20authorities%20in%202014%20to%202015%0A%20%20Original%20format%3A%20ods%0A%0APlease%20tell%20us%3A%0A%0A%20%201.%20What%20makes%20this%20format%20unsuitable%20for%20you%3F%0A%20%202.%20What%20format%20you%20would%20prefer%3F%0A%20%20%20%20%20%20&amp;subject=Request%20for%20%27Fly-tipping%20incidents%20and%20actions%20reported%20by%20local%20authorities%20in%202014%20to%202015%27%20in%20an%20alternative%20format">[email protected]</a>.
Please tell us what format you need. It will help us if you say what assistive technology you use.
</p>
</div>
</div>
</section>
<section class="attachment embedded" id="attachment_1112527">
<div class="attachment-thumb">
<a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/summer-budget-2015/summer-budget-2015"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-html-b0465911e56983d98c70f0e25fba24bc206d37e8c83d4addf6421dcf6022c6cd.png"></a>
</div>
<div class="attachment-details">
<h2 class="title"><a href="https://www.gov.uk/government/publications/summer-budget-2015/summer-budget-2015">Summer Budget 2015</a></h2>
<p class="metadata">
<span class="type">HTML</span>
</p>
</div>
</section>
<section class="attachment hosted-externally" id="attachment_1425055">
<div class="attachment-thumb">
<a aria-hidden="true" class="thumbnail" href="http://example.com"><img alt="" src="//whitehall-admin.integration.publishing.service.gov.uk/government/assets/pub-cover-a380604bb953dc22ac9dcfbf3cc65598327f493c37b09ac497c45148cbaa21b1.png"></a>
</div>
<div class="attachment-details">
<h2 class="title"><a rel="external" href="http://example.com">An external link</a></h2>
<p class="metadata">
<span class="url">http://example.com</span>
</p>
</div>
</section>
<section class="attachment hosted-externally" id="attachment_1425056">
<div class="attachment-thumb">
<a aria-hidden="true" class="thumbnail" href="http://example.com"><img alt="" src="//whitehall-admin.integration.publishing.service.gov.uk/government/assets/pub-cover-a380604bb953dc22ac9dcfbf3cc65598327f493c37b09ac497c45148cbaa21b1.png"></a>
</div>
<div class="attachment-details">
<h2 class="title"><a rel="external" href="http://example.com">An external link (with all possible metadata)</a></h2>
<p class="metadata">
<span class="references">
Ref: ISBN <span class="isbn">9780605039070</span>, <span class="unique_reference">ABC-12345</span>, <span class="command_paper_number">Cmd.987654321</span>, <span class="house_of_commons_paper_number">HC 0123456789</span> <span class="parliamentary_session">2015-16</span>
</span>
<span class="url">http://example.com</span>
</p>
<p>
<a class="order_url" title="Order a copy of the publication" href="http://www.example.com">Order a copy</a>
(<span class="price">£1.00</span>)
</p>
</div>
</section>
<section class="attachment embedded" id="attachment_1398523">
<div class="attachment-thumb">
<a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/consultations/environmental-permitting-updating-the-standards-for-petrol-vapour-recovery-at-service-stations"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/uploads/system/uploads/attachment_data/file/498443/thumbnail_petrol-vapour-recovery-consult-sum-resp.pdf.png"></a>
</div>
<div class="attachment-details">
<h2 class="title"><a href="https://www.gov.uk/government/consultations/environmental-permitting-updating-the-standards-for-petrol-vapour-recovery-at-service-stations">Consultation outcome with published date</a></h2>
<p class="metadata">
<span class="changed">Published: <time class="date" datetime="2016-02-08"> 8 February 2016</time></span>
<span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">106KB</span>, <span class="page-length">7 pages</span>
</p>
</div>
</section>
block_attachment_rtl:
direction: rtl
content: |
<section class="attachment embedded" id="attachment_514218">
<div class="attachment-thumb">
<a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/future-of-food-and-farming.ar"><img alt="" src="https://assets-origin.integration.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/288236/thumbnail_11-924-future-of-food-and-farming-summary-arabic.pdf.png"></a>
</div>
<div class="attachment-details">
<h2 class="title"><a aria-describedby="attachment-514218-accessibility-help" href="https://www.gov.uk/government/publications/future-of-food-and-farming.ar">مستقبل الغذاء والزراعة: موجز تنفيذي</a></h2>
<p class="metadata">
<span class="references">
إشارة: <span class="unique_reference">BIS/11/924</span>
</span>
<span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">906KB</span>, <span class="page-length">44 pages</span>
</p>
<div data-module="toggle" class="accessibility-warning" id="attachment-514218-accessibility-help">
<h2>هذا المف قد لا يكون مناسبا لمستخدمي التكنولوجيا المساعدة على القراءة
<a class="toggler" href="#attachment-514218-accessibility-request" data-controls="attachment-514218-accessibility-request" data-expanded="false" role="button" aria-controls="attachment-514218-accessibility-request" aria-expanded="false">طلب الوثيقة بشكل آخر</a>
</h2>
<p id="attachment-514218-accessibility-request" class="js-hidden" aria-live="polite" role="region">
لاستلام وثيقة مكتوبة بشكل آخر، كلغة بريل أو وثيقة صوتية أو أي نوع آخر من الوثائق، يرجى إرسال رسالة إلكترونية إلى <a href="mailto:[email protected]?body=Details%20of%20document%20required%3A%0A%0A%20%20Title%3A%20%D9%85%D8%B3%D8%AA%D9%82%D8%A8%D9%84%20%D8%A7%D9%84%D8%BA%D8%B0%D8%A7%D8%A1%20%D9%88%D8%A7%D9%84%D8%B2%D8%B1%D8%A7%D8%B9%D8%A9%3A%20%D9%85%D9%88%D8%AC%D8%B2%20%D8%AA%D9%86%D9%81%D9%8A%D8%B0%D9%8A%0A%20%20Original%20format%3A%20pdf%0A%20%20Unique%20reference%3A%20BIS%2F11%2F924%0A%0APlease%20tell%20us%3A%0A%0A%20%201.%20What%20makes%20this%20format%20unsuitable%20for%20you%3F%0A%20%202.%20What%20format%20you%20would%20prefer%3F%0A%20%20%20%20%20%20&amp;subject=Request%20for%20%27%D9%85%D8%B3%D8%AA%D9%82%D8%A8%D9%84%20%D8%A7%D9%84%D8%BA%D8%B0%D8%A7%D8%A1%20%D9%88%D8%A7%D9%84%D8%B2%D8%B1%D8%A7%D8%B9%D8%A9%3A%20%D9%85%D9%88%D8%AC%D8%B2%20%D8%AA%D9%86%D9%81%D9%8A%D8%B0%D9%8A%27%20in%20an%20alternative%20format">[email protected]</a> مع كتابة عنوانك ورقم هاتفك إلى جانب عنوان الوثيقة المطلوبة ("{title}"), and its reference (Unique reference: BIS/11/924)
</p>
</div>
</div>
</section>

0 comments on commit 9371328

Please sign in to comment.