Asset: style and cleanup listing

Font pillar aliases for asset icons
This commit is contained in:
2018-09-11 19:37:22 +02:00
parent 3ae16d7750
commit f87c7a25df
9 changed files with 121 additions and 139 deletions

View File

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

View File

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

View File

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

View File

@@ -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 <span>{{ node.properties.license_type }}</span>
| {% if node.properties.license_notes %}
| &mdash; {{ 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 %}

View File

@@ -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
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
.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
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
| {% elif project.picture_header %}
a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")