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('