archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Work in progress in blurring asset preview and minor CSS/template cleanups

Browse Source
This commit is contained in:
Pablo Vazquez
2018-03-21 20:15:29 +01:00
parent d30a11c8f7
commit 479a435ec5
6 changed files with 78 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/styles/_project.sass
View File

@@ -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

9
src/templates/nodes/custom/_node_details.pug
View File

@@ -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') %}

4
src/templates/nodes/custom/_scripts.pug
View File

@@ -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('<div class="nav-prev"></div><img src="' + src + '"/><div class="nav-next"></div>');
}
$('#node-preview.image, #node-preview.file').click(function(e){
$('.js-node-preview-image').click(function(e){
e.preventDefault();
e.stopPropagation();

13
src/templates/nodes/custom/asset/file/view_embed.pug
View File

@@ -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

21
src/templates/nodes/custom/asset/image/view_embed.pug
View File

@@ -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

17
src/templates/nodes/custom/group/view_embed.pug
View File

@@ -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