From 479a435ec5f22ca5aed4eb07c8aeee534a4f46f7 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 21 Mar 2018 20:15:29 +0100 Subject: [PATCH 01/10] Work in progress in blurring asset preview and minor CSS/template cleanups --- src/styles/_project.sass | 93 ++++++++++--------- src/templates/nodes/custom/_node_details.pug | 9 ++ src/templates/nodes/custom/_scripts.pug | 4 +- .../nodes/custom/asset/file/view_embed.pug | 13 +-- .../nodes/custom/asset/image/view_embed.pug | 21 ++--- .../nodes/custom/group/view_embed.pug | 17 ++-- 6 files changed, 78 insertions(+), 79 deletions(-) diff --git a/src/styles/_project.sass b/src/styles/_project.sass index 72f797b3..688edc69 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -940,37 +940,35 @@ section.node-preview iframe width: 100% - &.image, - &.file, - min-height: 200px - flex: 1 - max-height: 500px - background-color: black - display: flex - justify-content: center - align-items: center + min-height: 200px + flex: 1 + max-height: 500px + background-color: black + display: flex + justify-content: center + align-items: center - cursor: zoom-in + cursor: zoom-in + + +media-md + max-height: $node-preview-max-height-md + +media-lg + max-height: $node-preview-max-height-lg + + img + display: block + max-height: $node-preview-max-height-lg + max-width: 100% + object-fit: scale-down + + +media-xs + width: 100% +media-md max-height: $node-preview-max-height-md +media-lg max-height: $node-preview-max-height-lg - img - display: block - max-height: $node-preview-max-height-lg - max-width: 100% - object-fit: scale-down - - +media-xs - width: 100% - - +media-md - max-height: $node-preview-max-height-md - +media-lg - max-height: $node-preview-max-height-lg - &.video background-color: black position: relative @@ -1041,6 +1039,22 @@ section.node-preview width: 100% + &.image.node-preview-blur + cursor: default + min-height: 400px + position: relative + + img + height: 130% + left: -60px + max-width: initial + filter: blur(30px) + object-fit: cover + position: absolute + top: -60px + width: 130% + + section.node-details-container background-color: white @@ -1090,26 +1104,18 @@ section.node-preview.group border-radius: 3px cursor: default - &.group - .node-details-meta.preview - .node-details-meta-list - display: inline-block + .node-details-meta-actions + margin-left: auto - > li - padding: 0 5px - - .node-details-meta-actions - display: inline-block - - .btn-browsetoggle - +button(lighten($color-background-nav, 20%), 3px) - width: 48px - text-align: center - padding: 2px 4px - i - font-size: 1.3em - padding: 0 - margin: 0 + .btn-browsetoggle + +button(lighten($color-background-nav, 20%), 3px) + width: 48px + text-align: center + padding: 2px 4px + i + font-size: 1.3em + padding: 0 + margin: 0 &.project .node-details-title @@ -1191,7 +1197,6 @@ section.node-preview.group span display: inline-block - &.type text-transform: uppercase padding: 0 5px 0 15px diff --git a/src/templates/nodes/custom/_node_details.pug b/src/templates/nodes/custom/_node_details.pug index a4384169..b29d2ff9 100644 --- a/src/templates/nodes/custom/_node_details.pug +++ b/src/templates/nodes/custom/_node_details.pug @@ -1,3 +1,12 @@ +.node-details-header + .node-title#node-title + | {{node.name}} + +| {% if node.description %} +.node-details-description#node-description + | {{ node.description | markdown }} +| {% endif %} + .node-details-meta ul | {% if node.has_method('PUT') and (node.properties.status != 'published') %} diff --git a/src/templates/nodes/custom/_scripts.pug b/src/templates/nodes/custom/_scripts.pug index 8b010ba0..16f91268 100644 --- a/src/templates/nodes/custom/_scripts.pug +++ b/src/templates/nodes/custom/_scripts.pug @@ -41,7 +41,7 @@ script(type="text/javascript"). {% endif %} - // If we are im preview mode, update the image source + // If we are in preview mode, update the image source if (page_overlay.classList.contains('active')) { var node_preview = document.getElementById('node-preview'); @@ -73,7 +73,7 @@ script(type="text/javascript"). .html('
'); } - $('#node-preview.image, #node-preview.file').click(function(e){ + $('.js-node-preview-image').click(function(e){ e.preventDefault(); e.stopPropagation(); diff --git a/src/templates/nodes/custom/asset/file/view_embed.pug b/src/templates/nodes/custom/asset/file/view_embed.pug index 1100ae57..4483d710 100644 --- a/src/templates/nodes/custom/asset/file/view_embed.pug +++ b/src/templates/nodes/custom/asset/file/view_embed.pug @@ -9,18 +9,7 @@ src="{{ node.picture.thumbnail('l', api=api) }}") | {% endif %} - - section.node-details-container.file - - .node-details-header - .node-title#node-title - | {{node.name}} - - | {% if node.description %} - .node-details-description#node-description - | {{ node.description | markdown }} - | {% endif %} - + section.node-details-container include ../../_node_details #comments-embed diff --git a/src/templates/nodes/custom/asset/image/view_embed.pug b/src/templates/nodes/custom/asset/image/view_embed.pug index ccb6cb53..5eea445d 100644 --- a/src/templates/nodes/custom/asset/image/view_embed.pug +++ b/src/templates/nodes/custom/asset/image/view_embed.pug @@ -4,23 +4,18 @@ #node-overlay | {% if node.picture %} - section#node-preview.node-preview.image + | {% if current_user.has_cap('subscriber') %} + section#node-preview.node-preview.image.js-node-preview-image img.node-preview-thumbnail#node-preview-thumbnail( src="{{ node.picture.thumbnail('l', api=api) }}") + | {% else %} + section#node-preview.node-preview.image.node-preview-blur + img.node-preview-thumbnail#node-preview-thumbnail( + src="{{ node.picture.thumbnail('t', api=api) }}") + | {% endif %} | {% endif %} - - section.node-details-container.image - - .node-details-header - .node-title#node-title - | {{node.name}} - - | {% if node.description %} - .node-details-description#node-description - | {{ node.description | markdown }} - | {% endif %} - + section.node-details-container include ../../_node_details #comments-embed diff --git a/src/templates/nodes/custom/group/view_embed.pug b/src/templates/nodes/custom/group/view_embed.pug index a39b62e1..2e90d371 100644 --- a/src/templates/nodes/custom/group/view_embed.pug +++ b/src/templates/nodes/custom/group/view_embed.pug @@ -1,11 +1,11 @@ | {% block body %} #node-container - section.node-preview.group - .node-title#node-title - | {{node.name}} + section.node-details-container + .node-details-header + .node-title#node-title + | {{node.name}} - .node-details-meta.preview .node-details-meta-actions .btn-browsetoggle( title="Toggle between list/grid view", @@ -13,10 +13,11 @@ data-placement="top") i.pi-list - | {% if node.description %} - .node-details-description - | {{ node.description | markdown }} - | {% endif %} + | {% if node.description %} + .node-details-description#node-description + | {{ node.description | markdown }} + | {% endif %} + section.node-children.group From bca8fac4cdb13bbc3b73aed2ce1d1d074e4ec8d7 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 27 Mar 2018 19:08:28 +0200 Subject: [PATCH 02/10] Cleanup: Unused templates --- .../nodes/custom/asset/image/view.pug | 4 -- .../nodes/custom/asset/video/view.pug | 6 --- .../nodes/custom/storage/index_embed.pug | 53 ------------------- .../nodes/custom/storage/view_embed.pug | 33 ------------ 4 files changed, 96 deletions(-) delete mode 100644 src/templates/nodes/custom/asset/image/view.pug delete mode 100644 src/templates/nodes/custom/asset/video/view.pug delete mode 100644 src/templates/nodes/custom/storage/index_embed.pug delete mode 100644 src/templates/nodes/custom/storage/view_embed.pug diff --git a/src/templates/nodes/custom/asset/image/view.pug b/src/templates/nodes/custom/asset/image/view.pug deleted file mode 100644 index 36bf706b..00000000 --- a/src/templates/nodes/custom/asset/image/view.pug +++ /dev/null @@ -1,4 +0,0 @@ -| {% extends 'layout.html' %} - -| {% block footer_scripts %} -| {% endblock %} diff --git a/src/templates/nodes/custom/asset/video/view.pug b/src/templates/nodes/custom/asset/video/view.pug deleted file mode 100644 index d13e9d53..00000000 --- a/src/templates/nodes/custom/asset/video/view.pug +++ /dev/null @@ -1,6 +0,0 @@ -| {% extends 'layout.html' %} -| {% from '_macros/_file_uploader_javascript.html' import render_file_uploader_javascript %} - -| {% block footer_scripts %} -| {{render_file_uploader_javascript()}} -| {% endblock %} diff --git a/src/templates/nodes/custom/storage/index_embed.pug b/src/templates/nodes/custom/storage/index_embed.pug deleted file mode 100644 index b1615608..00000000 --- a/src/templates/nodes/custom/storage/index_embed.pug +++ /dev/null @@ -1,53 +0,0 @@ -| {% block body %} - -#node-container - - section.node-details-container.storage - - .node-details-header - .node-title - | {{node.name}} - - - section.node-children.storage - - | {% if node.children %} - | {% for child in node.children %} - - a(href="#", data-node_id="{{ node._id }}" data-path="{{ child['path'] }}", title="{{ child['name'] }}", class="item_icon") - .list-node-children-item - .list-node-children-item-thumbnail - - .list-node-children-item-thumbnail-icon - | {% if child['content_type'] == 'video' %} - i.pi-film - | {% elif child['content_type'] == 'image' %} - i.pi-image - | {% elif child['content_type'] == 'file' %} - i.pi-document - | {% elif child['content_type'] == 'binary' %} - i.pi-file-archive - | {% else %} - i.pi-folder - | {% endif %} - - .list-node-children-item-name - - span {{ child['name'] }} - - | {% endfor %} - | {% endif %} - - script. - $('a.item_icon').click(function(e){ - // When clicking on a node preview, we load its content - e.preventDefault; - var nodeId = $(this).data('node_id'); - var path = $(this).data('path'); - displayStorage(nodeId, path); - // Update tree with current selection - //$('#project_tree').jstree('select_node', 'n_' + nodeId); - }); - -| {% endblock %} - diff --git a/src/templates/nodes/custom/storage/view_embed.pug b/src/templates/nodes/custom/storage/view_embed.pug deleted file mode 100644 index e77efe88..00000000 --- a/src/templates/nodes/custom/storage/view_embed.pug +++ /dev/null @@ -1,33 +0,0 @@ -| {% block body %} - -#node-container - - section.node-details-container.storage - - .node-details-header - .node-title - | {{node.name}} - - //- .node-details-description - //- | {{node.description}} - - .node-details-meta - - ul.node-details-meta-list - li.node-details-meta-list-item.status - | {{node.status}} - - li.node-details-meta-list-item.date(title="Created {{ node._created | pretty_date }}") - | {{ node._updated | pretty_date }} - - li.node-details-meta-list-item.file.length - | {{ node.length | filesizeformat }} - - li.node-details-meta-list-item.file.download - a(href="{% if node.has_method('GET') %}{{ node.download_link }}{% else %}{{ url_for('users.login') }}{% endif %}") - button.btn.btn-default(type="button") - | Download - - -| {% endblock %} - From 17792df85eff5e1f4857161372e048723b39802c Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 27 Mar 2018 19:13:14 +0200 Subject: [PATCH 03/10] Cleanup: Unused block --- src/templates/projects/view_embed.pug | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/templates/projects/view_embed.pug b/src/templates/projects/view_embed.pug index 6ba828f5..67164ce0 100644 --- a/src/templates/projects/view_embed.pug +++ b/src/templates/projects/view_embed.pug @@ -22,17 +22,6 @@ | {% endif %} section.node-details-container.project - - | {# Hide for now - .node-details-header - .node-title-details - .date(title="Last updated {{ project._updated | pretty_date }}") {{ project._created | pretty_date }} - - | {% if project.status %} - .status {{project.status}} - | {% endif %} - | #} - .node-details-title h1 a(href="{{ url_for( 'projects.view', project_url=project.url) }}") {{ project.name }} From 641f29ab30ccc49f9e75740256bf71e840c6adc6 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 27 Mar 2018 19:38:45 +0200 Subject: [PATCH 04/10] Introducing: view_base template for nodes Contains all the basics divided in blocks: * node_preview * node_details * node_details_meta_extra (for additional list items) * node_download - to override the download button * node_comments * node_scripts - for node specific scripts, like hdri or video * footer_scripts --- src/templates/nodes/view_base.pug | 140 ++++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 src/templates/nodes/view_base.pug diff --git a/src/templates/nodes/view_base.pug b/src/templates/nodes/view_base.pug new file mode 100644 index 00000000..826ca3ae --- /dev/null +++ b/src/templates/nodes/view_base.pug @@ -0,0 +1,140 @@ +| {% block body %} +#node-container + #node-overlay + + | {% block node_preview %} + | {% if node.picture %} + | {% if current_user.has_cap('subscriber') %} + section#node-preview.node-preview.image.js-node-preview-image + img.node-preview-thumbnail#node-preview-thumbnail( + src="{{ node.picture.thumbnail('l', api=api) }}") + | {% else %} + | {% include 'nodes/custom/_node_preview_forbidden.html' %} + | {% endif %} + | {% endif %} + | {% endblock node_preview %} + + | {% block node_details %} + section.node-details-container + + | {# NAME #} + .node-details-header + .node-title#node-title + | {{node.name}} + + + | {# DESCRIPTION #} + | {% if node.description %} + .node-details-description#node-description + | {{ node.description | markdown }} + | {% endif %} + + + | {# LICENSE #} + | {% if node.properties.license_type %} + a.node-details-license( + href="https://creativecommons.org/licenses/", + target="_blank") + span.type + i(class="pi-license-{{ node.properties.license_type }}") + | License {{ node.properties.license_type }} + | {% if node.properties.license_notes %} + | — {{ node.properties.license_notes }} + | {% endif %} + | {% endif %} + + + | {# DETAILS #} + .node-details-meta + ul + | {% if node.has_method('PUT') and (node.properties.status != 'published') %} + li(class="status-{{ node.properties.status }}") + | {{ node.properties.status | undertitle }} + | {% endif %} + + li(title="Author") + | {{ node.user.full_name }} + + li.dim( + title="Created {{ node._created }} (updated {{ node._updated | pretty_date_time }})") + | {{ node._created | pretty_date }} + + | {% if node.short_link %} + li.shared + a(href="{{ node.short_link }}") + i.pi-share + | Shared + | {% endif %} + + li.left-side + + | {% if node.file %} + li.dim(title="File size") + | {{ node.file.length | filesizeformat }} + li.dim.js-type(title="File format") + | {{ node.file.content_type }} + | {% endif %} + + | {% if node.permissions.world %} + li.public( + data-toggle="tooltip", + data-placement="bottom", + title="Anybody can download. Share it!") + i.pi-lock-open + span Public + | {% endif %} + + | {% block node_details_meta_extra %}{% endblock %} + + li.download + | {% if (current_user.has_cap('subscriber') or node.permissions.world) and (node.file or node.properties.files) %} + | {% block node_download %} + a( + title="Download {{ node.properties.content_type | undertitle }}", + href="{{ node.file.link }}", + download="{{ node.file.filename }}") + button.btn(type="button") + i.pi-download + | Download + | {% endblock node_download %} + + | {% elif current_user.has_cap('can-renew-subscription') %} + a.btn.btn-success( + title="Renew your subscription to download", + target="_blank", + href="/renew") + i.pi-heart + | Renew subscription to download + + | {% elif current_user.is_authenticated %} + .btn.disabled + i.pi-lock + | Download + + | {% else %} + a.btn( + title="Login to download {{ node.properties.content_type | undertitle }}", + href="{{ url_for('users.login') }}") + i.pi-lock + | Download + | {% endif %} + + | {% endblock node_details %} + + | {% block node_comments %} + #comments-embed + .comments-list-loading + i.pi-spin + | {% endblock node_comments %} + +| {% include 'nodes/custom/_scripts.html' %} + +| {% endblock %} + + +| {% block node_scripts %}{% endblock %} +| {% block footer_scripts %} +script. + // Generate analytics pageview + ga('send', 'pageview', location.pathname); +| {% endblock %} From a7cb3b9658482ae7c2ae6e7eec3ddfe31a907aed Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 27 Mar 2018 19:39:49 +0200 Subject: [PATCH 05/10] Use view_base for assets --- .../nodes/custom/asset/file/view_embed.pug | 44 +---- .../nodes/custom/asset/image/view_embed.pug | 45 +---- .../nodes/custom/asset/video/view_embed.pug | 114 +++++------ .../nodes/custom/hdri/view_embed.pug | 187 +++++------------- 4 files changed, 102 insertions(+), 288 deletions(-) diff --git a/src/templates/nodes/custom/asset/file/view_embed.pug b/src/templates/nodes/custom/asset/file/view_embed.pug index 4483d710..3e1b5b87 100644 --- a/src/templates/nodes/custom/asset/file/view_embed.pug +++ b/src/templates/nodes/custom/asset/file/view_embed.pug @@ -1,43 +1 @@ -| {% block body %} - -#node-container - #node-overlay - - | {% if node.picture %} - section#node-preview.node-preview.file - img.node-preview-thumbnail#node-preview-thumbnail( - src="{{ node.picture.thumbnail('l', api=api) }}") - | {% endif %} - - section.node-details-container - include ../../_node_details - - #comments-embed - .comments-list-loading - i.pi-spin - -include ../../_scripts - -| {% endblock %} - -| {% block footer_scripts %} -script. - // Generate GA pageview - ga('send', 'pageview', location.pathname); - - var content_type = $("li.node-details-meta-list-item.type").text(); - var type_trimmed = content_type.substring(content_type.indexOf("/") + 1); - - if (type_trimmed == 'x-blender' || type_trimmed == 'blend'){ - type_trimmed = ''; - }; - - $("li.node-details-meta-list-item.type").html(type_trimmed); - - $('.sorry').click(function() { - $.get('/403', function(data) { - $('#node-overlay').html(data).addClass('active'); - }) - }); - -| {% endblock %} +| {% extends "nodes/view_base.html" %} diff --git a/src/templates/nodes/custom/asset/image/view_embed.pug b/src/templates/nodes/custom/asset/image/view_embed.pug index 5eea445d..3e1b5b87 100644 --- a/src/templates/nodes/custom/asset/image/view_embed.pug +++ b/src/templates/nodes/custom/asset/image/view_embed.pug @@ -1,44 +1 @@ -| {% block body %} - -#node-container - #node-overlay - - | {% if node.picture %} - | {% if current_user.has_cap('subscriber') %} - section#node-preview.node-preview.image.js-node-preview-image - img.node-preview-thumbnail#node-preview-thumbnail( - src="{{ node.picture.thumbnail('l', api=api) }}") - | {% else %} - section#node-preview.node-preview.image.node-preview-blur - img.node-preview-thumbnail#node-preview-thumbnail( - src="{{ node.picture.thumbnail('t', api=api) }}") - | {% endif %} - | {% endif %} - - section.node-details-container - include ../../_node_details - - #comments-embed - .comments-list-loading - i.pi-spin - -include ../../_scripts - -| {% endblock %} - -| {% block footer_scripts %} -script. - // Generate GA pageview - ga('send', 'pageview', location.pathname); - - var content_type = $("li.node-details-meta-list-item.type").text(); - $("li.node-details-meta-list-item.type").text(content_type.substring(content_type.indexOf("/") + 1)); - - $('.sorry').click(function() { - $.get('/403', function(data) { - $('#node-overlay').html(data).addClass('active'); - }) - }); - -| {% endblock %} - +| {% extends "nodes/view_base.html" %} diff --git a/src/templates/nodes/custom/asset/video/view_embed.pug b/src/templates/nodes/custom/asset/video/view_embed.pug index ae1faf90..72cd5a73 100644 --- a/src/templates/nodes/custom/asset/video/view_embed.pug +++ b/src/templates/nodes/custom/asset/video/view_embed.pug @@ -1,60 +1,53 @@ -| {% block body %} +| {% extends "nodes/view_base.html" %} -#node-container - #node-overlay +| {% block node_preview %} +| {% if node.video_sources %} +section.node-preview.video + video#videoplayer.video-js( + controls, + data-setup="{}", + preload="auto", + poster="{% if node.picture %}{{ node.picture.thumbnail('l', api=api) }}{% endif %}") + | {% for source in node.video_sources %} + source( + src="{{ source.src }}", + type="{{ source.type }}") + | {% endfor %} + p.vjs-no-js. + To view this video please enable JavaScript, and consider upgrading to a web browser that + supports HTML5 video +| {% else %} +| {% include 'nodes/custom/_node_preview_forbidden.html' %} +| {% endif %} +| {% endblock node_preview %} - section.node-preview.video - | {% if node.video_sources %} - video#videoplayer.video-js( - controls, - data-setup="{}", - preload="auto", - poster="{% if node.picture %}{{ node.picture.thumbnail('l', api=api) }}{% endif %}") - | {% for source in node.video_sources %} - source( - src="{{ source.src }}", - type="{{ source.type }}") - | {% endfor %} - p.vjs-no-js. - To view this video please enable JavaScript, and consider upgrading to a web browser that - supports HTML5 video - | {% else %} - .video-dummy.sorry( - style="{% if node.picture %}background-image: url({{ node.picture.thumbnail('l', api=api) }});{% endif %}") - .video-dummy-content - .video-dummy-content-text - span Available to Blender Cloud subscribers - span - small Support Blender and get awesome stuff! - hr - | {% if current_user.has_cap('can-renew-subscription') %} - a.subscribe(href="/renew") You have a subscription, it just needs to be renewed. Renew your subscription now! - | {% else %} - a.subscribe(href="{{ url_for('cloud.join') }}") Subscribe to Blender Cloud. - | {% endif %} - | {% if current_user.is_anonymous %} - a(href="{{ url_for('users.login') }}") Already a subscriber? Log in - | {% endif %} - | {% endif %} +| {% block node_download %} +| {% if node.file_variations %} +button.btn.btn-default.dropdown-toggle( + type="button", + data-toggle="dropdown", + aria-haspopup="true", + aria-expanded="false") + i.pi-download + | Download + i.pi-angle-down.icon-dropdown-menu + +ul.dropdown-menu + | {% for variation in node.file_variations %} + li + a(href="{{ variation.link }}", + title="Download this format", + download) + span.length {{ variation.length | filesizeformat }} + + span.format {{ variation.format }} + span.size {{ variation.size }} + | {% endfor %} +| {% endif %} +| {% endblock node_download %} - section.node-details-container.video - - .node-details-header - .node-title#node-title - | {{node.name}} - - | {% if node.description %} - .node-details-description#node-description - | {{ node.description | markdown }} - | {% endif %} - - include ../../_node_details - - #comments-embed - .comments-list-loading - i.pi-spin - +| {% block node_scripts %} script(type="text/javascript"). {% if node.video_sources %} @@ -114,17 +107,6 @@ script(type="text/javascript"). } }; - {% endif %} + {% endif %} // if node.video_sources - $(function(){ - // Generate GA pageview - ga('send', 'pageview', location.pathname); - - var content_type = $("li.node-details-meta-list-item.type").text(); - $("li.node-details-meta-list-item.type").text(content_type.substring(content_type.indexOf("/") + 1)); - - }); - -include ../../_scripts - -| {% endblock %} +| {% endblock node_scripts %} diff --git a/src/templates/nodes/custom/hdri/view_embed.pug b/src/templates/nodes/custom/hdri/view_embed.pug index 9a6f02ff..2fc00288 100644 --- a/src/templates/nodes/custom/hdri/view_embed.pug +++ b/src/templates/nodes/custom/hdri/view_embed.pug @@ -1,144 +1,62 @@ -| {% block body %} +| {% extends "nodes/view_base.html" %} -#node-container.texture - #node-overlay - section.node-preview - | {% if node.picture %} - iframe( - id='vrview_window' - width='100%', - height='450px', - scrolling='no', - frameborder='0', - allowfullscreen='', - src="{{url_for('main.vrview', preview=node.picture.thumbnail('l', api=api), image=node.picture.thumbnail('h', api=api), default_yaw=(node.properties.default_yaw or 0))}}") - | {% endif %} +| {% block node_preview %} +| {% if node.picture %} +iframe( +id='vrview_window' +width='100%', +height='450px', +scrolling='no', +frameborder='0', +allowfullscreen='', +src="{{url_for('main.vrview', preview=node.picture.thumbnail('l', api=api), image=node.picture.thumbnail('h', api=api), default_yaw=(node.properties.default_yaw or 0))}}") +| {% else %} +section.node-preview + h3 Missing Preview +| {% endif %} +| {% endblock node_preview %} - section.node-details-container +| {% block node_details_meta_extra %} +| {% if write_access %} +li.node-details-meta-list-item + a.btn#copy_yaw( + href='javascript:void(0);' + title='Copies current yaw of panorama to the clipboard, so you can set it as default yaw.' + ) Copy yaw +| {% endif %} +| {% endblock node_details_meta_extra %} - .node-details-header - .node-title#node-title - | {{node.name}} +| {% block node_download %} +| {% if node.properties.files %} +button.btn.btn-default.dropdown-toggle( + title="Download HDRI", + type="button", + data-toggle="dropdown", + aria-haspopup="true", + aria-expanded="false") + i.pi-download + | Download + i.pi-angle-down.icon-dropdown-menu - .node-details-meta.header - ul.node-details-meta-list - | {% if node.permissions.world %} - li.node-details-meta-list-item.access.public( - data-toggle="tooltip", - data-placement="bottom", - title="Anybody can download. Share it!") - i.pi-lock-open - span Public - | {% endif %} +ul.dropdown-menu + | {% for var in node.properties.files %} + li + a(href="{{ var.file.link }}", + title="Download this HDRi format", + download) + span.length {{ var.file.length | filesizeformat }} + span.format {{ var.file.format | hide_none }} + span.size {{ var.resolution }} - | {% if node.properties.license_type %} - | {% if node.properties.license_notes %} - li.node-details-meta-list-item.video.license( - id="asset-license", - data-toggle="popover", - data-placement="left", - data-trigger="hover", - data-content="{{ node.properties.license_notes }}", - title="{{ node.properties.license_type }}") + | {% endfor %} +| {% endif %} +| {% endblock node_download %} - i(class="pi-license-{{ node.properties.license_type }}") - | {% else %} - li.node-details-meta-list-item.video.license( - id="asset-license", - data-toggle="tooltip", - data-placement="bottom", - title="{{ node.properties.license_type }}") - i(class="pi-license-{{ node.properties.license_type }}") - | {% endif %} - | {% endif %} +| {% block node_comments %}{% endblock %} - | {% if write_access %} - li.node-details-meta-list-item - a.btn#copy_yaw( - href='javascript:void(0);' - title='Copies current yaw of panorama to the clipboard, so you can set it as default yaw.' - ) Copy yaw - | {% endif %} - - | {% if node.properties.files %} - li.btn-group.node-details-meta-list-item.video.download( - title="Download HDRI") - button.btn.btn-default.dropdown-toggle( - type="button", - data-toggle="dropdown", - aria-haspopup="true", - aria-expanded="false") - i.pi-download - i.pi-angle-down.icon-dropdown-menu - - ul.dropdown-menu - | {% for var in node.properties.files %} - li - a(href="{{ var.file.link }}", - title="Download this HDRi format", - download) - span.length {{ var.file.length | filesizeformat }} - - span.format {{ var.file.format | hide_none }} - span.size {{ var.resolution }} - - | {% endfor %} - | {% else %} - li.btn-group.node-details-meta-list-item.video.download.disabled( - title="Download HDRi") - button.btn.btn-default.sorry(type="button") - i.pi-lock - i.pi-download - | {% endif %} - - | {% if node.description %} - .node-details-description#node-description - | {{ node.description | markdown }} - | {% endif %} - - | {% if node.properties.license_notes %} - .node-details-meta.license - | {{ node.properties.license_notes }} - | {% endif %} - - .node-details-meta.footer - ul.node-details-meta-list - li.node-details-meta-list-item.status - | {{ node.properties.status | undertitle }} - - li.node-details-meta-list-item.author - | {{ node.user.full_name }} - - li.node-details-meta-list-item.date(title="Created {{ node._created }}") - | {{ node._created | pretty_date }} - | {% if (node._created | pretty_date) != (node._updated | pretty_date) %} - span(title="Updated {{ node._updated }}") (updated {{ node._updated | pretty_date }}) - | {% endif %} - - -include ../_scripts - -| {% endblock %} - -| {% block footer_scripts %} +| {% block node_scripts %} script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}") - script. - $('#asset-license').popover(); - // Generate GA pageview - ga('send', 'pageview', location.pathname); - - - $('.sorry').click(function() { - $.get('/403', function(data) { - $('#node-overlay').html(data).show().addClass('active'); - }) - }); - - $('#node-overlay').click(function(){ - $(this).removeClass('active').hide().html(); - }); - $().ready(function () { new Clipboard('#copy_yaw', { text: function(trigger) { @@ -150,8 +68,7 @@ script. } }) .on('success', function(e) { - $(e.trigger).flashOnce(); + $(e.trigger).flashOnce(); }); }); - -| {% endblock %} +| {% endblock node_scripts %} From 8f227076fdb39d30cbfaa285c11140e363f14f56 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 27 Mar 2018 19:40:18 +0200 Subject: [PATCH 06/10] Node details is now part of view_base --- src/templates/nodes/custom/_node_details.pug | 121 ------------------- 1 file changed, 121 deletions(-) delete mode 100644 src/templates/nodes/custom/_node_details.pug diff --git a/src/templates/nodes/custom/_node_details.pug b/src/templates/nodes/custom/_node_details.pug deleted file mode 100644 index b29d2ff9..00000000 --- a/src/templates/nodes/custom/_node_details.pug +++ /dev/null @@ -1,121 +0,0 @@ -.node-details-header - .node-title#node-title - | {{node.name}} - -| {% if node.description %} -.node-details-description#node-description - | {{ node.description | markdown }} -| {% endif %} - -.node-details-meta - ul - | {% if node.has_method('PUT') and (node.properties.status != 'published') %} - li(class="status-{{ node.properties.status }}") - | {{ node.properties.status | undertitle }} - | {% endif %} - - li(title="Author") - | {{ node.user.full_name }} - - li.dim( - title="Created {{ node._created }} (updated {{ node._updated | pretty_date_time }})") - | {{ node._created | pretty_date }} - - | {% if node.short_link %} - li.shared - a(href="{{ node.short_link }}") - i.pi-share - | Shared - | {% endif %} - - li.left-side - - | {% if node.file %} - li.dim(title="File size") - | {{ node.file.length | filesizeformat }} - li.dim(title="File format") - | {{ node.file.content_type }} - | {% endif %} - - | {% if node.permissions.world %} - li.public( - data-toggle="tooltip", - data-placement="bottom", - title="Anybody can download. Share it!") - i.pi-lock-open - span Public - | {% endif %} - - | {% if node.file and (current_user.has_cap('subscriber') or node.permissions.world) %} - li.download - | {% if node.properties.content_type == 'video' %} - | {% if node.file_variations %} - button.btn.btn-default.dropdown-toggle( - type="button", - data-toggle="dropdown", - aria-haspopup="true", - aria-expanded="false") - i.pi-download - | Download - i.pi-angle-down.icon-dropdown-menu - - ul.dropdown-menu - | {% for variation in node.file_variations %} - li - a(href="{{ variation.link }}", - title="Download this format", - download) - span.length {{ variation.length | filesizeformat }} - - span.format {{ variation.format }} - span.size {{ variation.size }} - - | {% endfor %} - | {% endif %} - | {% else %} - li.download - a( - title="Download {{ node.properties.content_type | undertitle }}", - href="{{ node.file.link }}", - download="{{ node.file.filename }}") - button.btn(type="button") - i.pi-download - | Download - | {% endif %} - - | {% elif current_user.has_cap('can-renew-subscription') %} - li.download - a.btn.btn-success( - title="Renew your subscription to download", - target="_blank", - href="/renew") - i.pi-heart - | Renew subscription to download - - | {% elif current_user.is_authenticated %} - li.download - a.btn( - title="Join Blender Cloud", - href="{{ url_for('cloud.join') }}") - i.pi-lock - | Download - | {% else %} - li.download - a.btn( - title="Login to download {{ node.properties.content_type | undertitle }}", - href="{{ url_for('users.login') }}") - i.pi-lock - | Download - | {% endif %} - -| {% if node.properties.license_type %} -a.node-details-license( - href="https://creativecommons.org/licenses/", - target="_blank") - span.type - i(class="pi-license-{{ node.properties.license_type }}") - | License {{ node.properties.license_type }} - | {% if node.properties.license_notes %} - | — {{ node.properties.license_notes }} - | {% endif %} -| {% endif %} From ebfd3d542c488539db0b62b45e4f89898aa1bfdd Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 27 Mar 2018 19:40:44 +0200 Subject: [PATCH 07/10] Generic template for node preview when not subscribed --- .../nodes/custom/_node_preview_forbidden.pug | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/templates/nodes/custom/_node_preview_forbidden.pug diff --git a/src/templates/nodes/custom/_node_preview_forbidden.pug b/src/templates/nodes/custom/_node_preview_forbidden.pug new file mode 100644 index 00000000..89989791 --- /dev/null +++ b/src/templates/nodes/custom/_node_preview_forbidden.pug @@ -0,0 +1,17 @@ +section.node-preview-forbidden + | {% if node.picture %} + img(src="{{ node.picture.thumbnail('t', api=api) }}") + | {% endif %} + div + div Available to Blender Cloud subscribers + div + small Support Blender and get awesome stuff! + hr + | {% if current_user.has_cap('can-renew-subscription') %} + a.btn(href="/renew") You have a subscription, it just needs to be renewed. Renew your subscription now! + | {% else %} + a.btn(href="{{ url_for('cloud.join') }}") Get a Subscription + | {% endif %} + | {% if current_user.is_anonymous %} + a(href="{{ url_for('users.login') }}") Already a subscriber? Log in + | {% endif %} From a4e415f1e359870896b2332d5d1bc33c8d32af27 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 27 Mar 2018 19:46:34 +0200 Subject: [PATCH 08/10] Assets: Trim the first part of the asset type Usually "image" or "application". Also special treatment for .blend files e.g. application/x-blender becomes blend logo --- src/templates/nodes/custom/_scripts.pug | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/templates/nodes/custom/_scripts.pug b/src/templates/nodes/custom/_scripts.pug index 16f91268..05fbbc76 100644 --- a/src/templates/nodes/custom/_scripts.pug +++ b/src/templates/nodes/custom/_scripts.pug @@ -138,3 +138,12 @@ script(type="text/javascript"). } {% endif %} + + var $content_type = $(".js-type"); + var type_value = $content_type.text(); + var type_value_trimmed = type_value.substring(type_value.indexOf("/") + 1); + $content_type.text(type_value_trimmed); + + if (type_value_trimmed == 'x-blender' || type_value_trimmed == 'blend'){ + $content_type.html(''); + }; From ab6b277293b329c4c173b1abb226dba2a70ec3ac Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 27 Mar 2018 19:47:48 +0200 Subject: [PATCH 09/10] Minor tweaks and cleanup on group_hdri, group_texture and texture templates --- src/styles/_project.sass | 279 ++++-------------- .../nodes/custom/group_hdri/view_embed.pug | 5 - .../nodes/custom/group_texture/view_embed.pug | 5 - .../nodes/custom/texture/view_embed.pug | 21 +- 4 files changed, 73 insertions(+), 237 deletions(-) diff --git a/src/styles/_project.sass b/src/styles/_project.sass index 688edc69..c90a7c0a 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -781,7 +781,7 @@ $node-preview-max-height-lg: 700px filter: none -section.node-row +.node-row display: flex width: 100% flex: row @@ -799,19 +799,20 @@ section.node-row background-color: white position: relative - &:nth-child(even), &:last-child + &:last-child, + &:nth-child(even) border-right: none &:last-child border-bottom: none &.texture-info - padding: 10px 20px color: $color-text-dark-secondary - position: relative - z-index: 1 + list-style-type: none + margin: 0 + padding: 10px 20px - span + li &:not(:first-child) padding-left: 15px @@ -820,6 +821,11 @@ section.node-row top: -1px right: 2px + &.status + margin-left: auto + + &.pending + color: $color-danger section.node-preview.texture overflow: hidden @@ -935,26 +941,24 @@ section.node-row text-transform: uppercase section.node-preview - overflow: hidden - - iframe - width: 100% - - min-height: 200px - flex: 1 - max-height: 500px - background-color: black - display: flex - justify-content: center - align-items: center - - cursor: zoom-in - +media-md max-height: $node-preview-max-height-md +media-lg max-height: $node-preview-max-height-lg + align-items: center + background-color: black + color: $color-text-light-primary + display: flex + flex: 1 + justify-content: center + max-height: 500px + min-height: 200px + overflow: hidden + + iframe + width: 100% + img display: block max-height: $node-preview-max-height-lg @@ -969,6 +973,9 @@ section.node-preview +media-lg max-height: $node-preview-max-height-lg + &.image + cursor: zoom-in + &.video background-color: black position: relative @@ -1038,22 +1045,45 @@ section.node-preview object-fit: cover width: 100% +section.node-preview-forbidden + align-items: center + background-color: $color-background-nav + color: $color-text-light + cursor: default + display: flex + justify-content: center + min-height: 400px + position: relative - &.image.node-preview-blur - cursor: default - min-height: 400px + img + height: 130% + left: -60px + max-width: initial + filter: blur(30px) + object-fit: cover + opacity: .5 + position: absolute + top: -60px + width: 130% + z-index: 0 + + > div + font-size: 1.4em position: relative + z-index: 1 - img - height: 130% - left: -60px - max-width: initial - filter: blur(30px) - object-fit: cover - position: absolute - top: -60px - width: 130% + span + display: block + a + color: $color-text-light + + &.btn + border-color: white + color: white + + hr + opacity: .5 section.node-details-container background-color: white @@ -1085,25 +1115,6 @@ section.node-preview.group width: 100% max-width: 100% - .node-title-details - margin-left: auto - line-height: 1em - - & .date - display: inline-block - margin-right: 10px - color: $color-text-dark-secondary - - & .status - display: inline-block - font-size: .9em - text-transform: capitalize - color: $color-text-dark-primary - padding: 5px 15px - border: thin solid $color-text-dark-hint - border-radius: 3px - cursor: default - .node-details-meta-actions margin-left: auto @@ -1121,170 +1132,6 @@ section.node-preview.group .node-details-title padding: 10px 20px 0 20px - ul.node-details-meta-list - display: flex - align-items: center - - list-style-type: none - margin: 0 - padding: 0 - - +media-xs - font-size: .9em - width: 100% - max-width: 100% - - > li - margin: 0 - padding: 0 - line-height: 1em - float: left - - & a.btn - padding: 4px 12px 5px 12px - margin: 0 - - &.date - color: $color-text-dark-secondary - padding-left: 5px - margin-left: 5px - - &:before - color: $color-text-dark-secondary - position: relative - content: 'ยท' - left: -10px - font-weight: 500 - - span /* (updated x mins ago) */ - color: $color-text-dark-hint - margin-left: 3px - font-size: .9em - text-transform: lowercase - - &.author - color: $color-text-dark-primary - - &.status - margin-right: 10px - font-size: .9em - text-transform: capitalize - color: $color-text-dark-secondary - font-weight: 300 - padding: 5px 15px - border: thin solid $color-text-dark-hint - border-radius: 3px - cursor: default - - &.access - color: $color-text-dark-primary - cursor: default - opacity: .5 - white-space: nowrap - - &:hover - opacity: 1 - - &.public - border-color: $color-success - color: $color-success - padding: 0 - i - font-size: 1.2em - position: relative - top: 1px - - span - display: inline-block - - &.type - text-transform: uppercase - padding: 0 5px 0 15px - cursor: default - font-weight: 400 - color: $color-text-dark-hint - - +media-xs - display: none - - /* .blend files are special snowflakes */ - span.blend - display: inline-block - padding: 0 35px 0 0 - font-size: 1.2em - color: $color-text-dark-secondary - - &.access+li.node-details-meta-list-item.video.download, - &.access+.tooltip+li.node-details-meta-list-item.video.download - margin-left: 10px - - &.length - padding: 0 5px 0 15px - cursor: default - font-weight: 400 - color: $color-text-dark-hint - white-space: nowrap - - &.license - color: $color-text-dark-secondary - - i - color: $color-text-dark-primary - font-size: 1.4em - position: relative - bottom: -2px - left: -5px - - /* Download button */ - &.download - align-self: flex-end - padding: 0 0 0 10px - - /* Actual button */ - button - +button($color-primary, 3px) - position: relative - - padding: - left: 20px - right: 20px - - font-size: .9em - - i - margin-right: 0 - - /* Tweaks for specific icons */ - i.icon-dropdown-menu - padding-left: 10px - - &.disabled - border-color: $color-text-dark-hint - color: $color-text-dark-hint - +stripes(rgba($color-text-dark-hint, .1), rgba($color-text-dark-hint, .2), -45deg, 28px) - - /* Videos have dropdown caret, so paddit 5px less */ - &.video.download - button - padding-right: 10px - - &.file.download - button - +button($color-primary, 3px, true) - padding: - left: 15px - right: 15px - - i - margin-right: 0 - - &.texture.download - width: 100% - - &.open - button - box-shadow: none - .node-details-description +node-details-description padding-left: 20px diff --git a/src/templates/nodes/custom/group_hdri/view_embed.pug b/src/templates/nodes/custom/group_hdri/view_embed.pug index bf2f4239..2c6f16eb 100644 --- a/src/templates/nodes/custom/group_hdri/view_embed.pug +++ b/src/templates/nodes/custom/group_hdri/view_embed.pug @@ -4,11 +4,6 @@ .texture-title#node-title | {{node.name}} - | {% if node.picture %} - .texture-backdrop( - style="background-image: url({{ node.picture.thumbnail('m', api=api) }})") - | {% endif %} - | {% if node.description %} section.node-row .node-details-description diff --git a/src/templates/nodes/custom/group_texture/view_embed.pug b/src/templates/nodes/custom/group_texture/view_embed.pug index 01696a28..99ebfa16 100644 --- a/src/templates/nodes/custom/group_texture/view_embed.pug +++ b/src/templates/nodes/custom/group_texture/view_embed.pug @@ -4,11 +4,6 @@ .texture-title#node-title | {{node.name}} - | {% if node.picture %} - .texture-backdrop( - style="background-image: url({{ node.picture.thumbnail('m', api=api) }})") - | {% endif %} - | {% if node.description %} section.node-row .node-details-description diff --git a/src/templates/nodes/custom/texture/view_embed.pug b/src/templates/nodes/custom/texture/view_embed.pug index 707a3ba1..e6d90184 100644 --- a/src/templates/nodes/custom/texture/view_embed.pug +++ b/src/templates/nodes/custom/texture/view_embed.pug @@ -33,24 +33,23 @@ span Public | {% endif %} - section.node-row.texture-info + ul.node-row.texture-info | {% if node.properties.files %} - span.texture-info-files + li i.pi-texture | {{ node.properties.files|length }} map{% if node.properties.files|length != 1 %}s{% endif %} | {% endif %} - span.texture-info-seamless + + li i.pi-puzzle | {% if not node.properties.is_tileable %}Not {% endif %}Seamless - | {% if node.has_method('PUT') %} + | {# Display publishing status only to editors #} - span.texture-info-status - | {% if node.properties.status == 'published' %} - i.pi-laugh - | {% else %} - i.pi-displeased - | {% endif %} - | {{ node.properties.status }} + | {% if node.has_method('PUT') %} + li.status( + class="{{ node.properties.status }}", + title="Status") + | Status: #[strong {{ node.properties.status | undertitle }}] | {% endif %} | {% for f in node.properties.files %} From 5eb464a1f361a79a63f72fbdee157d8658404ffb Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 28 Mar 2018 12:17:11 +0200 Subject: [PATCH 10/10] Minor tweaks to layout when able to re-new subscriptions --- .../nodes/custom/_node_preview_forbidden.pug | 20 +++++++++++++------ .../nodes/custom/comment/list_embed_base.pug | 4 ++-- src/templates/nodes/view_base.pug | 2 +- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/templates/nodes/custom/_node_preview_forbidden.pug b/src/templates/nodes/custom/_node_preview_forbidden.pug index 89989791..aa38db55 100644 --- a/src/templates/nodes/custom/_node_preview_forbidden.pug +++ b/src/templates/nodes/custom/_node_preview_forbidden.pug @@ -2,16 +2,24 @@ section.node-preview-forbidden | {% if node.picture %} img(src="{{ node.picture.thumbnail('t', api=api) }}") | {% endif %} + div - div Available to Blender Cloud subscribers - div - small Support Blender and get awesome stuff! + p Available to Blender Cloud subscribers hr | {% if current_user.has_cap('can-renew-subscription') %} - a.btn(href="/renew") You have a subscription, it just needs to be renewed. Renew your subscription now! + p + small You have a subscription, it just needs to be renewed. + a.btn(href="/renew") + | #[i.pi-heart] Renew Subscription | {% else %} - a.btn(href="{{ url_for('cloud.join') }}") Get a Subscription + p + small Support Blender and get awesome stuff! + a.btn(href="{{ url_for('cloud.join') }}") + | #[i.pi-heart] Get a Subscription | {% endif %} + | {% if current_user.is_anonymous %} - a(href="{{ url_for('users.login') }}") Already a subscriber? Log in + p + small Already a subscriber? + a.btn(href="{{ url_for('users.login') }}") Log In | {% endif %} diff --git a/src/templates/nodes/custom/comment/list_embed_base.pug b/src/templates/nodes/custom/comment/list_embed_base.pug index 7ffa47d9..e42ca2ba 100644 --- a/src/templates/nodes/custom/comment/list_embed_base.pug +++ b/src/templates/nodes/custom/comment/list_embed_base.pug @@ -55,9 +55,9 @@ | Only project members can comment. | {% elif current_user.has_cap('can-renew-subscription') %} i.pi-heart - a(href='/renew', target='_blank') Renew your subscription to join the conversation! + | Join the conversation! #[a(href='/renew', target='_blank') Renew your subscription] to comment. | {% else %} - | Join the conversations! Subscribe to Blender Cloud now. + | Join the conversation! #[a(href="https://store.blender.org/product/membership/") Subscribe to Blender Cloud] to comment. | {% endif %} | {% else %} diff --git a/src/templates/nodes/view_base.pug b/src/templates/nodes/view_base.pug index 826ca3ae..f1ce22cf 100644 --- a/src/templates/nodes/view_base.pug +++ b/src/templates/nodes/view_base.pug @@ -104,7 +104,7 @@ target="_blank", href="/renew") i.pi-heart - | Renew subscription to download + | Renew Subscription | {% elif current_user.is_authenticated %} .btn.disabled