From 9fd233a8dc707c07ee5b488bcb929e7e5c695218 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 13 Sep 2018 18:10:02 +0200 Subject: [PATCH] Initial styling of production lessons. --- src/scripts/tagged_assets.js | 124 ++++++++++++++++++++--------------- src/templates/production.pug | 40 ++++++----- 2 files changed, 93 insertions(+), 71 deletions(-) diff --git a/src/scripts/tagged_assets.js b/src/scripts/tagged_assets.js index e2df620..96e78fd 100644 --- a/src/scripts/tagged_assets.js +++ b/src/scripts/tagged_assets.js @@ -6,103 +6,119 @@ const LOAD_INITIAL_COUNT = 5; const LOAD_NEXT_COUNT = 3; - /* Renders a node as a
  • element, returns a jQuery object. */ + /* Renders a node as an asset card, returns a jQuery object. */ function renderAsset(node) { - let li = $('
  • ').addClass('js-tagged-asset'); - let link = $('') + let card = $('') + .addClass('js-tagged-asset') .attr('href', '/nodes/' + node._id + '/redir') - .appendTo(li); + .attr('title', node.name); + + let thumbnail_container = $('
    '); function warnNoPicture() { - li.addClass('warning'); - link.text('no picture for node ' + node._id); + let card_icon = $('
    '); + card_icon.html(''); + thumbnail_container.append(card_icon); } if (!node.picture) { warnNoPicture(); - return li; + } else { + // TODO: show 'loading' thingy + $.get('/api/files/' + node.picture) + .fail(function(error) { + let msg = xhrErrorResponseMessage(error); + console.log(msg); + }) + .done(function(resp) { + // Render the picture if it has the proper size. + var show_variation = null; + if (typeof resp.variations != 'undefined') { + for (variation of resp.variations) { + if (variation.size != 'm') continue; + show_variation = variation; + break; + } + } + + if (show_variation == null) { + warnNoPicture(); + return; + } + + let img = $('') + .attr('alt', node.name) + .attr('src', variation.link) + .attr('width', variation.width) + .attr('height', variation.height); + thumbnail_container.append(img); + }); } - // TODO: show 'loading' thingy - $.get('/api/files/' + node.picture) - .fail(function(error) { - let msg = xhrErrorResponseMessage(error); - li.addClass('error').text(msg); - }) - .done(function(resp) { - // Render the picture if it has the proper size. - var show_variation = null; - if (typeof resp.variations != 'undefined') { - for (variation of resp.variations) { - if (variation.size != 'm') continue; - show_variation = variation; - break; - } - } + card.append(thumbnail_container); - if (show_variation == null) { - warnNoPicture(); - return; - } + /* Card body for title and meta info. */ + let card_body = $('
    '); + let card_title = $('
    '); + card_title.text(node.name); + card_body.append(card_title); - let img = $('') - .attr('alt', node.name) - .attr('src', variation.link) - .attr('width', variation.width) - .attr('height', variation.height); - link.append(img); - }); + card.append(card_body); - return li; + /* 'Free' ribbon for public assets. */ + if (node.permissions && node.permissions.world){ + card.addClass('free'); + } + + return card; } - function loadNext(ul_element) { - let $ul = $(ul_element); - let tagged_assets = ul_element.tagged_assets; // Stored here by loadTaggedAssets(). - let already_loaded = $ul.find('li.js-tagged-asset').length; + function loadNext(card_deck_element) { + let $card_deck = $(card_deck_element); + let tagged_assets = card_deck_element.tagged_assets; // Stored here by loadTaggedAssets(). + let already_loaded = $card_deck.find('a.js-tagged-asset').length; - let load_next = $ul.find('li.js-load-next'); + let load_next = $card_deck.find('a.js-load-next'); let nodes_to_load = tagged_assets.slice(already_loaded, already_loaded + LOAD_NEXT_COUNT); for (node of nodes_to_load) { - let li = renderAsset(node); - load_next.before(li); + let link = renderAsset(node); + load_next.before(link); } if (already_loaded + LOAD_NEXT_COUNT >= tagged_assets.length) load_next.remove(); } - $.fn.loadTaggedAssets = function(api_base_url) { - this.each(function(index, ul_element) { + $.fn.loadTaggedAssets = function() { + this.each(function(index, card_deck_element) { // TODO(Sybren): show a 'loading' animation. - $.get('/api/nodes/tagged/' + ul_element.dataset.assetTag) + $.get('/api/nodes/tagged/' + card_deck_element.dataset.assetTag) .fail(function(error) { let msg = xhrErrorResponseMessage(error); - $('
  • ').addClass('error').text(msg).appendTo(ul_element); + $('').addClass('bg-danger').text(msg).appendTo(card_deck_element); }) .done(function(resp) { // 'resp' is a list of node documents. - // Store the response on the DOM