Den Haag Design System

Bestandsbox: Downloadbox (zonder omschrijving) 

<div class="file-thumbnail">
    <div class="file-thumbnail__header">
        <div class="file-thumbnail__name">Bestand 1</div>
    </div>
    <div class="file-thumbnail__primary-button">
        <a href="/download-link" class="button button--secondary button--sm">
            <span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" class="icon">
                    <g>
                        <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1" />
                        <polygon points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9" />
                    </g>
                </svg>
            </span>
            <span>Download bestand 1</span>
        </a>
    </div>
    <div class="file-thumbnail__meta-info">
        <span>PDF</span>
        <span>123 KB</span>
        <span>23-10-2017</span>
    </div>
</div>
 
<div class="file-thumbnail">
  <div class="file-thumbnail__header">
    <div class="file-thumbnail__name">Bestand 1</div>
    {{#if hasDeleteButton}}
      <div class="file-thumbnail__delete-button">
        <button type="button" class="button button--icon button--close">
          <span aria-hidden="true">{{> @icon--cross }}</span>
          <span class="screen-reader-only">Uitleg over perceel</span>
        </button>
      </div>
    {{/if}}
  </div>
  {{#if hasDescription}}
    <div class="file-thumbnail__description"><span>Omschrijving:</span> Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Aspernatur doloremque laboriosam placeat vel voluptate. Amet architecto assumenda atque
      blanditiis deleniti eveniet facere iste laudantium nemo nesciunt optio quae repellat, totam!
    </div>
  {{/if}}
  {{#if hasDownloadButton}}
    <div class="file-thumbnail__primary-button">
      <a href="/download-link" class="button button--secondary button--sm">
        <span aria-hidden="true">{{> @icon--download }}</span>
        <span>Download bestand 1</span>
      </a>
    </div>
  {{/if}}
  <div class="file-thumbnail__meta-info">
    <span>PDF</span>
    <span>123 KB</span>
    <span>23-10-2017</span>
  </div>
</div>
 
{
  "hasDescription": null,
  "hasDeleteButton": null,
  "hasDownloadButton": true
}
  • Content: 
    import {
  getFileInfo,
} from '../../../js/utils/file';

/**
 * Custom events
 */
var event = document.createEvent('Event');
event.initEvent('file-thumbnail:file-added', true, true);
event.initEvent('file-thumbnail:file-removed', true, true);
event.initEvent('file-thumbnail:hidden', true, true);

/**
 * Initialize component.
 *
 * @param {HTMLElement} element
 */
export default function FileThumbnail (element) {
  var component = {
    containerElement: element,
    buttonCloseElement: null,

    originalFile: null,
    fileInfo: null,
    // datetime: null,
  };

  // Set close button if applicable.
  var buttonClose = component.containerElement.getElementsByClassName('button--close');
  if (buttonClose) {
    component.buttonCloseElement = buttonClose;
  }

  component.containerElement.addEventListener('change', handleInputChange(component));
}

/**
 *
 * @param {Object} component
 * @return {EventListener}
 */
function handleInputChange(component) {
  return function(event) {
    if (event.target.files[0]) {
      component.originalFile = event.target.files[0];
    }

    if (component.originalFile) {
      component.fileInfo = getFileInfo(component.originalFile);
    }
  }
}
  • URL: /components/raw/file-thumbnail/file-thumbnail.js
  • Filesystem Path: src/components/01-componenten/file-thumbnail/file-thumbnail.js
  • Size: 1.2 KB
  • Content: 
    .file-thumbnail {

  $parent: &;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin: $space-xs;

  dl & {
    padding-left: 0;
    padding-right: 0;
  }

  &__header,
  &__description,
  &__primary-button,
  &__meta-info {
    flex: 1 0 100%;
  }

  &__primary-button,
  &__meta-info {
    margin-top: $space-xs;
  }

  &__header {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  &__delete-button {
    flex: 1 1 auto;
    display: inline-flex;
    justify-content: flex-end;
  }

  &__name {
    flex: 9 0 auto;
    font-weight: $fw-bold;
  }

  &__description {
    order: 2;
    border: $border;
    padding: $space-xs;
    font-size: $fs-down-1;

    span {
      font-weight: $fw-bold;
    }
  }

  &__primary-button {
    order: 4;
  }

  &__meta-info {
    order: 3;
    color: $grey-dark;

    span + span {
      margin-left: $space-xs;

      &::before {
        content: '-';
        display: inline;
        margin-right: $space-xs;
      }
    }
  }

  @media (min-width: $phablet) {

    &__meta-info,
    &__primary-button {
      flex: 0 1 auto;
    }

    &__primary-button {
      order: 3;
    }

    &__meta-info {
      order: 4;

      #{$parent}__primary-button + & {
        margin-left: $space-s;
      }
    }
  }
}
  • URL: /components/raw/file-thumbnail/file-thumbnail.scss
  • Filesystem Path: src/components/01-componenten/file-thumbnail/file-thumbnail.scss
  • Size: 1.3 KB

Omschrijving: downloads

Downloadbox

Een downloadbox bevat informatie over een bestand dat gedownload kan worden. De gebruiker moet aan de hand van de verstrekte informatie een bestand kunnen identificeren, waarna de hij/zij kan beslissen om de inhoud te bekijken door deze eerst te downloaden.

Downloaden

Download vs bekijken

In moderne browsers worden .pdf bestanden automatisch in een ‘pdf viewer’ weergegeven. De gebruiker dient dit bestand handmatig van de ‘pdf viewer’ op te slaan. Als de gebruiker dit uit heeft staan, dan gaat het .pdf bestand automatisch naar een download manager.

Best practice op desktop

PDF bestanden: altijd de in-browser view in de huidige tabblad van gebruiker - niet als background of foreground tab. De gebruiker dient de “terugknop” van de browser te gebruiken om naar vorige pagina te gaan.

Best practice op mobile

PDF bestanden: altijd de in-browser view in de huidige tabblad van gebruiker - niet als background of foreground tab. De gebruiker dient de “terugknop” van de browser te gebruiken om naar vorige pagina te gaan.