Initial styling of production lessons.

src/scripts/tagged_assets.js

@@ -6,28 +6,29 @@
     const LOAD_INITIAL_COUNT = 5;
     const LOAD_NEXT_COUNT = 3;
 
-    /* Renders a node as a <li> element, returns a jQuery object. */
+    /* Renders a node as an asset card, returns a jQuery object. */
     function renderAsset(node) {
-        let li = $('<li>').addClass('js-tagged-asset');
+        let card = $('<a class="card asset card-image-fade pr-0 mx-0 mb-2">')
-        let link = $('<a>')
+            .addClass('js-tagged-asset')
             .attr('href', '/nodes/' + node._id + '/redir')
-            .appendTo(li);
+            .attr('title', node.name);
+
+        let thumbnail_container = $('<div class="embed-responsive embed-responsive-16by9">');
 
         function warnNoPicture() {
-            li.addClass('warning');
+            let card_icon = $('<div class="card-img-top card-icon embed-responsive-item">');
-            link.text('no picture for node ' + node._id);
+            card_icon.html('<i class="pi-' + node.node_type + '">');
+            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);
-                li.addClass('error').text(msg);
+                    console.log(msg);
                 })
                 .done(function(resp) {
                     // Render the picture if it has the proper size.
@@ -45,64 +46,79 @@
                         return;
                     }
 
-                let img = $('<img>')
+                    let img = $('<img class="card-img-top embed-responsive-item">')
                         .attr('alt', node.name)
                         .attr('src', variation.link)
                         .attr('width', variation.width)
                         .attr('height', variation.height);
-                link.append(img);
+                    thumbnail_container.append(img);
                 });
-
-        return li;
         }
 
-    function loadNext(ul_element) {
+        card.append(thumbnail_container);
-        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;
 
-        let load_next = $ul.find('li.js-load-next');
+        /* Card body for title and meta info. */
+        let card_body = $('<div class="card-body py-2 d-flex flex-column">');
+        let card_title = $('<div class="card-title mb-1 font-weight-bold">');
+        card_title.text(node.name);
+        card_body.append(card_title);
+
+        card.append(card_body);
+
+        /* 'Free' ribbon for public assets. */
+        if (node.permissions && node.permissions.world){
+            card.addClass('free');
+        }
+
+        return card;
+    }
+
+    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 = $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);
+            let link = renderAsset(node);
-            load_next.before(li);
+            load_next.before(link);
         }
 
         if (already_loaded + LOAD_NEXT_COUNT >= tagged_assets.length)
             load_next.remove();
     }
 
-    $.fn.loadTaggedAssets = function(api_base_url) {
+    $.fn.loadTaggedAssets = function() {
-        this.each(function(index, ul_element) {
+        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);
-                    $('<li>').addClass('error').text(msg).appendTo(ul_element);
+                    $('<a>').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 <ul>-element so that we can later render more.
+                    // Store the response on the DOM card_deck_element so that we can later render more.
-                    ul_element.tagged_assets = resp;
+                    card_deck_element.tagged_assets = resp;
 
                     // Here render the first N.
                     for (node of resp.slice(0, LOAD_INITIAL_COUNT)) {
                         let li = renderAsset(node);
-                        li.appendTo(ul_element);
+                        li.appendTo(card_deck_element);
                     }
 
                     // Don't bother with a 'load next' link if there is no more.
                     if (resp.length <= LOAD_INITIAL_COUNT) return;
 
                     // Construct the 'load next' link.
-                    let load_next = $('<li>').addClass('js-load-next');
                     let link = $('<a>')
+                        .addClass('js-load-next')
                         .attr('href', 'javascript:void(0);')
-                        .click(function() { loadNext(ul_element); return false; })
+                        .click(function() { loadNext(card_deck_element); return false; })
-                        .text('Load next')
+                        .text('Load next');
-                        .appendTo(load_next);
+                    link.appendTo(card_deck_element);
-                    load_next.appendTo(ul_element);
                 });
         });
     };

src/templates/production.pug

@@ -1,13 +1,13 @@
 | {% extends 'layout.html' %}
-| {% block page_title %}Production of Stuff{% endblock %}
+| {% block page_title %}Production Lessons{% endblock %}
-| {% set page_header_text = "Here are our hand-selected assets 'bout stuff." %}
+| {% set page_header_text = "Tips and tricks by the Open Movie crew." %}
 
 | {% block head %}
 script(src="{{ url_for('static_cloud', filename='assets/js/tagged_assets.min.js') }}")
 
 script.
 	$(function() {
-		$('ul.js-asset-list').loadTaggedAssets();
+		$('.js-asset-list').loadTaggedAssets();
 	})
 | {% endblock %}
 | {% block body %}
@@ -20,22 +20,28 @@ script.
 
 		hr.pb-2
 
+		section.py-3.my-3.border-bottom
 			h3 Animation
-		ul.js-asset-list(data-asset-tag="animation")
+			.card-deck.card-padless.card-deck-responsive.list-unstyled(
+				class="js-asset-list",
+				data-asset-tag="animation")
 
+		section.py-3.my-3.border-bottom
 			h3 Modeling
-		ul.js-asset-list(data-asset-tag="modelling")
+			.card-deck.card-padless.card-deck-responsive.list-unstyled(
+				class="js-asset-list",
+				data-asset-tag="modelling")
 
+		section.py-3.my-3.border-bottom
 			h3 Rigging
-		ul.js-asset-list(data-asset-tag="rigging")
+			.card-deck.card-padless.card-deck-responsive.list-unstyled(
+				class="js-asset-list",
+				data-asset-tag="rigging")
 
+		section.py-3.my-3
 			h3 Pipeline
-		ul.js-asset-list(data-asset-tag="pipeline")
+			.card-deck.card-padless.card-deck-responsive.list-unstyled(
-
+				class="js-asset-list",
-		h3 Look-dev
+				data-asset-tag="pipeline")
-		ul.js-asset-list(data-asset-tag="lookdev")
-
-		h3 Crazyspace
-		ul.js-asset-list(data-asset-tag="crazyspace")
 
 | {% endblock body%}