diff --git a/src/styles/_apps_base.sass b/src/styles/_apps_base.sass
index 409b5b76..10072a1b 100644
--- a/src/styles/_apps_base.sass
+++ b/src/styles/_apps_base.sass
@@ -429,15 +429,15 @@ $loader-bar-height: 2px
visibility: visible
&:before
- animation: loader-bar-slide 2.5s linear infinite
+ animation: loader-bar-slide 2s linear infinite
@keyframes loader-bar-slide
from
- left: -$loader-bar-width
- width: 0%
+ left: -($loader-bar-width / 2)
+ width: 3%
50%
- width: 30%
+ width: 20%
70%
width: 70%
diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index e5314050..22c03588 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -150,3 +150,5 @@ $dropdown-item-padding-y: .4rem
$tooltip-font-size: 0.83rem
$tooltip-max-width: auto
$tooltip-opacity: 1
+
+$nav-link-height: 37px
diff --git a/src/styles/_project.sass b/src/styles/_project.sass
index 60ce760e..70f15706 100644
--- a/src/styles/_project.sass
+++ b/src/styles/_project.sass
@@ -141,13 +141,8 @@ body.blog
/* Header with name and node edit tools */
#project_context-header
- transition: box-shadow 250ms ease-in-out
+ right: 0
z-index: $z-index-base + 3
- left: 0
- width: 100%
-
- &.is-offset
- box-shadow: 0 0 25px rgba(black, .2)
/* Edit Asset buttons */
@@ -243,11 +238,6 @@ ul.project-edit-tools
height: 100%
background-color: white
-// Add padding to project_context because project_context-header is fixed on top.
-// It contains the New, Edit, Save Changes, etc. buttons.
-#project_context-header+#project_context
- padding-top: $project_header-height
-
#node-container
background-color: white
flex: 1
@@ -604,12 +594,6 @@ section.node-preview
color: $color-warning
margin-right: 10px
- &.group
- align-items: center
- display: flex
- padding: 20px
- position: relative
-
&.project
background-color: black
width: 100%
@@ -670,8 +654,7 @@ body.about
.node-title
+project-node-title
-section.node-details-container,
-section.node-preview.group
+section.node-details-container
position: relative
.node-details-header
@@ -684,24 +667,8 @@ section.node-preview.group
width: 100%
max-width: 100%
- .node-details-meta-actions
- margin-left: auto
-
- .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
-
-
.node-details-description
+node-details-description
- padding-left: 20px
- padding-right: 20px
.node-details-meta
background-color: $color-background-light
@@ -1029,12 +996,6 @@ a.learn-more
text-transform: capitalize
-section.node-children
- &.group, &.storage
- flex: 1
- padding: 10px 0 25px 20px
- +clearfix
-
.list-node-children-container
position: relative
width: $list-node-children-item-width
diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass
index fd57a9e7..a61ce2f0 100644
--- a/src/styles/components/_card.sass
+++ b/src/styles/components/_card.sass
@@ -1,34 +1,66 @@
.card-deck
// Custom, as of bootstrap 4.1.3 there is no way to do this.
&.card-3-columns
- .card
- min-width: 30%
- max-width: 30%
+ @extend .row
+
+ .card
+ @extend .col-md-4
+
+ +media-lg
+ background: green
+
+ &.card-4-columns
+ @extend .row
+
+ .card
+ @extend .col-md-3
+ +media-xs
+ flex: 1 0 50%
+ max-width: 50%
+
+ +media-sm
+ flex: 1 0 33%
+ max-width: 33%
+
+ +media-md
+ flex: 1 0 25%
+ max-width: 25%
+
+ +media-lg
+ flex: 1 0 20%
+ max-width: 20%
- .card.asset
- margin-left: 10px
- margin-right: 10px
.card-padless
.card
- border: none
+ @extend .border-0
.card-body
- padding: 15px 0
+ @extend .px-0
-.card-fade
- img
- opacity: .8
- transition: opacity ease-in-out 150ms
+.card-stretch
+ .card-body
+ @extend .d-flex
+ @extend .flex-column
+
+ .card-text
+ @extend .mt-auto
+
+.card-image-fade
+ .card-img-top
+ opacity: .9
&:hover
- img
+ .card-img-top
opacity: 1
.card.asset
color: $color-text
+ &:hover
+ text-decoration: none
+
&.free
overflow: hidden
@@ -38,8 +70,21 @@
padding: 2px 50px
.card-body
- font-size: $font-size-xs
+ position: relative // for placing the progress
+
+ .card-text
+ font-size: $font-size-xs
.card-img-top
+ background-color: $color-background
background-size: cover
background-position: center
+
+ .progress
+ height: 3px
+ position: absolute
+ top: -3px
+ width: 100%
+
+.progress-bar
+ background-color: $primary
diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug
index 8f498528..1daed454 100644
--- a/src/templates/mixins/components.pug
+++ b/src/templates/mixins/components.pug
@@ -50,7 +50,7 @@ mixin nav-secondary-link()
// {# Takes as argument the number of columns to use in this deck. 1-6 #}
mixin card-deck(columns)
- .card-deck.card-padless(class='card-' + columns + '-columns')
+ .card-deck.card-padless(class='card-' + columns + '-columns')&attributes(attributes)
if block
block
else
@@ -69,21 +69,21 @@ mixin card()
p No card content defined.
mixin list-asset(name, url, image, type, date)
- a(href=url).card.asset&attributes(attributes)
+ a(href=url, class=type).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 + ")")
- .card-body
+ .card-body.py-2
if name
- h6.card-title.mb-1
+ .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
-
- if block
- block
diff --git a/src/templates/nodes/custom/_scripts.pug b/src/templates/nodes/custom/_scripts.pug
index 4481af55..e4b01c48 100644
--- a/src/templates/nodes/custom/_scripts.pug
+++ b/src/templates/nodes/custom/_scripts.pug
@@ -33,7 +33,7 @@ script(type="text/javascript").
} else if (node_type === 'group_hdri') {
node_type_str = 'HDRi Folder';
}
- $('a', '.button-edit').html(' Edit ' + node_type_str);
+
$('a', '.button-delete').html('Delete ' + node_type_str);
{% if parent %}
diff --git a/src/templates/nodes/custom/group/view_embed.pug b/src/templates/nodes/custom/group/view_embed.pug
index db4c1a86..0d638ec3 100644
--- a/src/templates/nodes/custom/group/view_embed.pug
+++ b/src/templates/nodes/custom/group/view_embed.pug
@@ -1,142 +1,118 @@
+include ../../../mixins/components
+
| {% block body %}
#node-container
+ section.px-3.pt-3.d-flex
+ h4 {{node.name}}
- section.node-details-container
- .node-details-header
- .node-title#node-title
- | {{node.name}}
-
- .node-details-meta-actions
- .btn-browsetoggle(
- title="Toggle between list/grid view",
- data-toggle="tooltip",
- data-placement="top")
- i.pi-list
+ .ml-auto
+ .btn.btn-sm.btn-browsetoggle(
+ title="Toggle between list/grid view",
+ data-toggle="tooltip",
+ data-placement="top")
+ i.pi-list
| {% if node.description %}
- .node-details-description
+ section.node-details-description.p-3
| {{ node | markdowned('description') }}
| {% endif %}
-
- section.node-children.group
-
+ section.container-fluid
| {% if children %}
- | {% for child in children %}
+ +card-deck(4)(class="pr-3 pl-1")
+ | {% for child in children %}
+ | {# Browse type: List #}
+ a(
+ href="{{ url_for_node(node=child) }}",
+ data-node_id="{{ child._id }}",
+ class="js-item-open list-node-children-item browse-list")
+ .list-node-children-item-thumbnail
- | {# Browse type: List #}
- a(
- href="{{ url_for_node(node=child) }}",
- data-node_id="{{ child._id }}",
- class="item_icon list-node-children-item browse-list")
- .list-node-children-item-thumbnail
-
- | {% if child.picture %}
- img(
- src="{{ child.picture.thumbnail('t', api=api)}} ")
- | {% else %}
- .cloud-logo
- i.pi-blender-cloud
- | {% endif %}
-
- | {% if child.permissions.world %}
- .list-node-children-item-ribbon
- span free
- | {% endif %}
-
- .list-node-children-item-thumbnail-icon
- | {% if child.properties.content_type and child.properties.content_type == 'video' %}
- i.pi-play
- | {% elif child.properties.content_type and child.properties.content_type == 'image' %}
- i.pi-image
- | {% elif child.properties.content_type and child.properties.content_type == 'file' %}
- i.pi-file-archive
+ | {% if child.picture %}
+ img(
+ src="{{ child.picture.thumbnail('t', api=api)}} ")
| {% else %}
- i.pi-folder
+ .cloud-logo
+ i.pi-blender-cloud
| {% endif %}
- .list-node-children-item-name {{ child.name }}
-
- .list-node-children-item-meta
- | {% if child.properties.status != 'published' %}
- span.status {{ child.properties.status }}
- | {% endif %}
- span.type
- | {% if child.properties.content_type %}
- | {{ child.properties.content_type | undertitle }} ·
- | {% elif child.node_type == 'group' %}
- | Folder ·
- | {% else %}
- | {{ child.node_type | undertitle }} ·
+ | {% if child.permissions.world %}
+ .list-node-children-item-ribbon
+ span free
| {% endif %}
- span(title="Created on {{ child._created }}") {{ child._created | pretty_date }}
+ .list-node-children-item-thumbnail-icon
+ | {% if child.properties.content_type and child.properties.content_type == 'video' %}
+ i.pi-play
+ | {% elif child.properties.content_type and child.properties.content_type == 'image' %}
+ i.pi-image
+ | {% elif child.properties.content_type and child.properties.content_type == 'file' %}
+ i.pi-file-archive
+ | {% else %}
+ i.pi-folder
+ | {% endif %}
- | {# Browse type: Icon #}
- a(href="{{ url_for_node(node=child) }}",
- data-node_id="{{ child._id }}",
- title="{{ child.name }}",
- class="item_icon list-node-children-item browse-icon {% if child.picture %}has-picture{% endif %}")
- .list-node-children-item-thumbnail
+ .list-node-children-item-name {{ child.name }}
- | {% if child.picture %}
- img(
- src="{{ child.picture.thumbnail('m', api=api)}} ")
- | {% else %}
- .cloud-logo
- i.pi-blender-cloud
- | {% endif %}
-
- .list-node-children-item-thumbnail-icon
- | {% if child.properties.content_type and child.properties.content_type == 'video' %}
- i.pi-play
- | {% elif child.properties.content_type and child.properties.content_type == 'image' %}
- i.pi-image
- | {% elif child.properties.content_type and child.properties.content_type == 'file' %}
- i.pi-file-archive
- | {% else %}
- i.pi-folder
+ .list-node-children-item-meta
+ | {% if child.properties.status != 'published' %}
+ span.status {{ child.properties.status }}
| {% endif %}
- | {% if child.properties.status != 'published' %}
- .list-node-children-item-status {{ child.properties.status }}
- | {% endif %}
+ span.type
+ | {% if child.properties.content_type %}
+ | {{ child.properties.content_type | undertitle }} ·
+ | {% elif child.node_type == 'group' %}
+ | Folder ·
+ | {% else %}
+ | {{ child.node_type | undertitle }} ·
+ | {% endif %}
- | {% if child.permissions.world %}
- .list-node-children-item-ribbon
- span free
- | {% endif %}
+ span(title="Created on {{ child._created }}") {{ child._created | pretty_date }}
- .list-node-children-item-name
- span {{ child.name }}
+ | {# Browse type: Icon #}
+
+ | {% set node_type = child.properties.content_type if child.properties.content_type else child.node_type %}
| {% if child.properties.content_type == 'video' %}
- | {% set view_progress = current_user.nodes.view_progress %}
- | {% if child._id in view_progress %}
- | {% set progress = current_user.nodes.view_progress[child._id] %}
- | {% set progress_in_percent = progress.progress_in_percent %}
- | {% set progress_done = progress.done %}
- //- TODO(Pablo): turn this into a nice progress bar
- span.progress(class="{% if progress.done %}done{% endif %}")
- | {{ progress_in_percent }}%
- | {% else %}
- span.jemoeder no progress because never watched
- | {% endif %}
- | {% else %}
- span.jemoeder no progress because not video
+ | {% if child._id in view_progress %}
+ | {% set progress = current_user.nodes.view_progress[child._id] %}
+ | {% set progress_in_percent = progress.progress_in_percent %}
+ | {% set progress_done = progress.done %}
+ | {% endif %}
| {% endif %}
- | {% endfor %}
- | {% else %}
- .list-node-children-container
- .list-node-children-empty No items... yet!
+ +list-asset(
+ '{{ child.name }}',
+ '{{ url_for_node(node=child) }}',
+ "{% if child.picture %}{{ child.picture.thumbnail('m', api=api) }}{% endif %}",
+ "{{ node_type | undertitle }}",
+ "{{ child._updated | pretty_date }}")(
+ class="js-item-open pr-0 mx-0 mb-2 {% if child.permissions.world %}free{% endif %} {% if progress and progress.done %}done{% endif %}",
+ data-node_id="{{ child._id }}",
+ title="{{ child.name }}")
+
+ | {% 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")
+ | {% endif %}
+
+ | {% endfor %}
+ | {% else %}
+ .list-node-children-container
+ .list-node-children-empty No items... yet!
| {% endif %}
script.
// Generate GA pageview
ga('send', 'pageview', location.pathname);
- $('a.item_icon').unbind("click")
+ $('a.js-item-open').unbind("click")
.click(function(e){
e.preventDefault();
diff --git a/src/templates/nodes/error_type_not_found.pug b/src/templates/nodes/error_type_not_found.pug
index 900ec4db..752eb851 100644
--- a/src/templates/nodes/error_type_not_found.pug
+++ b/src/templates/nodes/error_type_not_found.pug
@@ -10,7 +10,7 @@
| {{node.name}}
| {% if node.description %}
- .node-details-description#node-description
+ .node-details-description
| {{node.description}}
| {% endif %}
diff --git a/src/templates/nodes/view_base.pug b/src/templates/nodes/view_base.pug
index ff398d3d..e4e337a6 100644
--- a/src/templates/nodes/view_base.pug
+++ b/src/templates/nodes/view_base.pug
@@ -18,14 +18,11 @@
section.node-details-container
| {# NAME #}
- .node-details-header
- .node-title#node-title
- | {{node.name}}
-
+ h4.pt-4.px-4 {{node.name}}
| {# DESCRIPTION #}
| {% if node.description %}
- .node-details-description#node-description
+ .node-details-description.px-4
| {{ node | markdowned('description') }}
| {% endif %}