From 479a435ec5f22ca5aed4eb07c8aeee534a4f46f7 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 21 Mar 2018 20:15:29 +0100 Subject: [PATCH] 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