diff --git a/src/scripts/tutti/1_project-navigation.js b/src/scripts/tutti/1_project-navigation.js index eceb97ae..7cc9985a 100644 --- a/src/scripts/tutti/1_project-navigation.js +++ b/src/scripts/tutti/1_project-navigation.js @@ -66,10 +66,9 @@ function containerResizeY(window_height){ var project_container = document.getElementById('project-container'); var container_offset = project_container.offsetTop; - var nav_header_height = 40; var container_height = window_height - container_offset.top; - var container_height_wheader = window_height - container_offset.top - nav_header_height; - var window_height_minus_nav = window_height - nav_header_height - 1; // 1 is border width + var container_height_wheader = window_height - container_offset; + var window_height_minus_nav = window_height - container_offset; if ($(window).width() > 768) { $('#project-container').css( @@ -77,13 +76,14 @@ function containerResizeY(window_height){ 'height': window_height_minus_nav + 'px'} ); - $('#project_nav-container, #project_tree, .project_split').css( + $('#project_nav-container, #project_tree').css( {'max-height': (window_height_minus_nav) + 'px', 'height': (window_height_minus_nav) + 'px'} ); if (container_height > parseInt($('#project-container').css("min-height"))) { if (typeof projectTree !== "undefined"){ + $(projectTree).css( {'max-height': container_height_wheader + 'px', 'height': container_height_wheader + 'px'} diff --git a/src/styles/_project.sass b/src/styles/_project.sass index c2b86baa..40865d14 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -24,6 +24,7 @@ body.blog flex-direction: row min-height: 300px position: relative + overflow-y: auto z-index: $z-index-base +media-xs @@ -216,9 +217,6 @@ ul.project-edit-tools color: $primary text-decoration: none - i - padding-right: 10px - /* Icons per asset type. */ i &.icon-group:after @@ -520,11 +518,11 @@ section.node-preview align-items: center background-color: black color: $color-text-light-primary - display: flex + // display: flex justify-content: center max-height: 500px - min-height: 200px - overflow: hidden + // min-height: 200px + // overflow: hidden iframe width: 100% @@ -545,6 +543,8 @@ section.node-preview &.image cursor: zoom-in + display: flex + overflow: hidden &.video background-color: black @@ -671,26 +671,16 @@ section.node-details-container +node-details-description .node-details-meta - background-color: $color-background-light - border-bottom: thin solid $color-background - display: flex - flex-direction: column - font-weight: lighter - padding: 10px 20px - > ul align-items: center display: flex - list-style-type: none - margin: 0 - padding: 0 > li align-items: baseline color: $color-text-dark-secondary display: flex - padding-left: 10px - margin-left: 10px + padding-left: 5px + margin-left: 5px &:first-child margin-left: 0 @@ -765,33 +755,19 @@ section.node-details-container color: $color-text-dark .node-details-license - align-items: center - border-bottom: thin solid $color-background - color: $color-text-dark - display: flex - padding: 5px 20px - font-size: $font-size-sm - + color: $color-text-dark-secondary &:hover - color: $color-text-dark + color: $primary - span.type - i - color: $color-text-dark-primary - font-size: 1.2rem - margin-left: -5px - padding-right: 10px + i + font-size: 1.2rem + margin-left: -15px - &:after - top: 2px - left: -22px - position: relative - &:before - top: 2px - position: relative + &:after + left: -22px + position: relative + top: 1px - span - text-transform: uppercase section.node-details-container &.storage diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass index 0c265752..024865dd 100644 --- a/src/styles/components/_card.sass +++ b/src/styles/components/_card.sass @@ -29,21 +29,11 @@ .card-body @extend .px-0 -.card-stretch - .card-body - @extend .d-flex - @extend .flex-column - - .card-text - @extend .mt-auto .card-image-fade - .card-img-top - opacity: .9 - &:hover .card-img-top - opacity: 1 + opacity: .9 .card.asset @@ -71,14 +61,22 @@ background-size: cover background-position: center + .progress height: 4px position: absolute top: -4px width: 100% - &.group +.card-img-top + &.card-icon + display: flex + align-items: center + justify-content: center + font-size: 2em + i + opacity: .2 .card-label background-color: rgba($black, .5) diff --git a/src/styles/font-pillar.sass b/src/styles/font-pillar.sass index b38534e1..f6eee02f 100644 --- a/src/styles/font-pillar.sass +++ b/src/styles/font-pillar.sass @@ -39,12 +39,10 @@ $pillar-font-path: "../font" !default display: inline-block text-decoration: inherit width: 1em - margin-right: .2em text-align: center font-variant: normal text-transform: none line-height: 1em - margin-left: .2em -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale position: relative @@ -55,10 +53,28 @@ $pillar-font-path: "../font" !default .pi-svnman:before content: '\f1c0' +/* Assets */ +.pi-group + @extend .pi-folder +.pi-video + @extend .pi-film-thick +.pi-file + @extend .pi-file-archive +.pi-asset + @extend .pi-file-archive +.pi-group_texture + @extend .pi-folder-texture +.pi-post + @extend .pi-newspaper +.pi-page + @extend .pi-document + +/* License */ .pi-license-cc-zero:before content: '\e85a' .pi-license-cc-sa:before content: '\e858' + top: 1px .pi-license-cc-nd:before content: '\e859' .pi-license-cc-nc:before diff --git a/src/templates/_macros/_add_new_menu.pug b/src/templates/_macros/_add_new_menu.pug index 65db350f..7dd9e433 100644 --- a/src/templates/_macros/_add_new_menu.pug +++ b/src/templates/_macros/_add_new_menu.pug @@ -14,7 +14,7 @@ li(class="button-{{ node_type['name'] }}") data-node-type-name="{{ node_type['name'] }}", data-toggle="tooltip", data-placement="left") - i.pi(class="icon-{{ node_type['name'] }}") + i.pi(class="pi-{{ node_type['name'] }}") | {% if node_type_name == 'group_texture' %} | Texture Folder | {% elif node_type_name == 'group_hdri' %} diff --git a/src/templates/_macros/_asset_list_item.pug b/src/templates/_macros/_asset_list_item.pug index 9645010f..1445c616 100644 --- a/src/templates/_macros/_asset_list_item.pug +++ b/src/templates/_macros/_asset_list_item.pug @@ -4,38 +4,50 @@ include ../mixins/components | {% set node_type = asset.properties.content_type if asset.properties.content_type else asset.node_type %} -+list-asset( - '{{ asset.name }}', - '{{ url_for_node(node=asset) }}', - "{% if asset.picture %}{{ asset.picture.thumbnail('m', api=api) }}{% endif %}", - "{{ node_type | undertitle }}", - "{{ asset._created | pretty_date }}")( - class="js-item-open pr-0 mx-0 mb-2 {% if asset.permissions.world %}free{% endif %}", +a.card.asset.card-image-fade.pr-0.mx-0.mb-2( + class="js-item-open {% if asset.permissions.world %}free{% endif %}", data-node_id="{{ asset._id }}", - title="{{ asset.name }}") + title="{{ asset.name }}", + href='{{ url_for_node(node=asset) }}') + .embed-responsive.embed-responsive-16by9 + | {% if asset.picture %} + .card-img-top.embed-responsive-item(style="background-image: url({{ asset.picture.thumbnail('m', api=api) }})") + | {% else %} + .card-img-top.card-icon.embed-responsive-item + i(class="pi-{{ node_type }}") + | {% endif %} - | {% if asset.properties.content_type == 'video' %} + .card-body.py-2.d-flex.flex-column + .card-title.mb-1.font-weight-bold + | {{ asset.name }} - | {% set view_progress = current_user.nodes.view_progress %} - | {% if asset._id in view_progress %} - | {% set progress = current_user.nodes.view_progress[asset._id] %} - | {% set progress_in_percent = progress.progress_in_percent %} - | {% set progress_done = progress.done %} - | {% endif %} + ul.card-text.list-unstyled.d-flex.text-black-50.mt-auto + li.pr-2 {{ node_type | undertitle }} + li {{ asset._created | pretty_date }} - | {% if progress %} - .progress.rounded-0 - .progress-bar( - role="progressbar", - style="width: {{ progress_in_percent }}%;", - aria-valuenow="{{ progress_in_percent }}", - aria-valuemin="0", - aria-valuemax="100") - | {% if progress.done %} - .card-label WATCHED - | {% endif %} - | {% endif %} {# endif progress #} - | {% endif %} {# endif video #} + | {% if asset.properties.content_type == 'video' %} + + | {% set view_progress = current_user.nodes.view_progress %} + | {% if asset._id in view_progress %} + | {% set progress = current_user.nodes.view_progress[asset._id] %} + | {% set progress_in_percent = progress.progress_in_percent %} + | {% set progress_done = progress.done %} + | {% endif %} + + | {% if progress %} + .progress.rounded-0 + .progress-bar( + role="progressbar", + style="width: {{ progress_in_percent }}%;", + aria-valuenow="{{ progress_in_percent }}", + aria-valuemin="0", + aria-valuemax="100") + + | {% if progress.done %} + .card-label WATCHED + | {% endif %} + | {% endif %} {# endif progress #} + | {% endif %} {# endif video #} | {% endmacro %} diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug index dcc34bda..a85dab99 100644 --- a/src/templates/mixins/components.pug +++ b/src/templates/mixins/components.pug @@ -68,25 +68,6 @@ mixin card() p No card content defined. mixin list-asset(name, url, image, type, date) - a(href=url).card.asset.card-stretch.card-image-fade&attributes(attributes) - if image - .embed-responsive.embed-responsive-16by9 - .card-img-top.embed-responsive-item(style="background-image: url(" + image + ")") - else - .card-img-top - .card-icon - i.pi-blender + if block + block - .card-body.py-2 - if name - .card-title.mb-1.font-weight-bold - =name - - if block - block - - ul.card-text.list-unstyled.d-flex.text-black-50 - if type - li.pr-2=type - if date - li=date diff --git a/src/templates/nodes/view_base.pug b/src/templates/nodes/view_base.pug index c8ab7bd2..7f9ae74e 100644 --- a/src/templates/nodes/view_base.pug +++ b/src/templates/nodes/view_base.pug @@ -26,24 +26,20 @@ | {% endif %} - | {# LICENSE #} - section - | {% 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 #} - section.node-details-meta - ul + section.node-details-meta.px-4.py-2 + ul.list-unstyled.m-0 + | {% if node.properties.license_type %} + li + a.node-details-license( + href="https://creativecommons.org/licenses/", + target="_blank", + title="{{ node.properties.license_type }} {% if node.properties.license_notes %}{{ node.properties.license_notes }}{% endif %}", + data-toggle="tooltip", + data-placement="top") + i(class="pi-license-{{ node.properties.license_type }}") + | {% endif %} + | {% if node.has_method('PUT') and (node.properties.status != 'published') %} li(class="status-{{ node.properties.status }}") | {{ node.properties.status | undertitle }} @@ -63,6 +59,8 @@ | Shared | {% endif %} + + li.left-side | {% if node.file %} diff --git a/src/templates/projects/view_embed.pug b/src/templates/projects/view_embed.pug index bb25e5c0..d8e062e0 100644 --- a/src/templates/projects/view_embed.pug +++ b/src/templates/projects/view_embed.pug @@ -4,19 +4,20 @@ include ../mixins/components | {% block body %} section.node-preview.project | {% if header_video_file %} - video#videoplayer.video-js.vjs-fluid( - controls, - data-setup="{}", - preload="auto", - poster="{% if header_video_node.picture %}{{ header_video_node.picture.thumbnail('l', api=api) }}{% endif %}") - | {% for source in header_video_file.variations %} - source( - src="{{ source.link | safe }}", - type="{{ source.content_type }}") - | {% endfor %} - p.vjs-no-js. - To view this video please enable JavaScript, and consider upgrading to a web browser that - supports HTML5 video + .embed-responsive.embed-responsive-16by9 + video#videoplayer.video-js.vjs-fluid.embed-responsive-item( + controls, + data-setup="{}", + preload="auto", + poster="{% if header_video_node.picture %}{{ header_video_node.picture.thumbnail('l', api=api) }}{% endif %}") + | {% for source in header_video_file.variations %} + source( + src="{{ source.link | safe }}", + type="{{ source.content_type }}") + | {% endfor %} + p.vjs-no-js. + To view this video please enable JavaScript, and consider upgrading to a web browser that + supports HTML5 video | {% elif project.picture_header %} a(href="{{ url_for( 'projects.view', project_url=project.url) }}") img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")