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

Layout and styling of asset groups

Browse Source
This commit is contained in:
Pablo Vazquez 2018-09-11 15:14:51 +02:00
parent 094d15116e
commit 48df0583ab
9 changed files with 162 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/styles/_apps_base.sass
View File

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

2
src/styles/_config.sass
View File

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

43
src/styles/_project.sass
View File

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

73
src/styles/components/_card.sass
View File

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

14
src/templates/mixins/components.pug
View File

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

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

@ -33,7 +33,7 @@ script(type="text/javascript").
} else if (node_type === 'group_hdri') {
node_type_str = 'HDRi Folder';
}
$('a', '.button-edit').html('<i class="pr-2 pi-edit button-edit-icon"></i> Edit ' + node_type_str);
$('a', '.button-delete').html('<i class="pr-2 pi-trash button-delete-icon"></i>Delete ' + node_type_str);
{% if parent %}

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

@ -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();

2
src/templates/nodes/error_type_not_found.pug
View File

@ -10,7 +10,7 @@
| {{node.name}}
| {% if node.description %}
.node-details-description#node-description
.node-details-description
| {{node.description}}
| {% endif %}

7
src/templates/nodes/view_base.pug
View File

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