Tweaks to asset listing
This commit is contained in:
parent
c546dd2881
commit
3ae16d7750
@ -152,6 +152,15 @@ body.blog
|
||||
display: none
|
||||
|
||||
ul.project-edit-tools
|
||||
li:not(.disabled)
|
||||
.btn
|
||||
background-color: $white
|
||||
|
||||
&:hover
|
||||
border-color: $primary
|
||||
background-color: $white
|
||||
color: $primary
|
||||
|
||||
li
|
||||
&.button-save
|
||||
&.field-error
|
||||
@ -239,9 +248,6 @@ ul.project-edit-tools
|
||||
background-color: white
|
||||
|
||||
#node-container
|
||||
background-color: white
|
||||
flex: 1
|
||||
|
||||
/* For error messages (403) and other overlaid text*/
|
||||
#node-overlay
|
||||
z-index: $z-index-base + 2
|
||||
@ -515,7 +521,6 @@ section.node-preview
|
||||
background-color: black
|
||||
color: $color-text-light-primary
|
||||
display: flex
|
||||
flex: 1
|
||||
justify-content: center
|
||||
max-height: 500px
|
||||
min-height: 200px
|
||||
@ -638,11 +643,6 @@ section.node-preview-forbidden
|
||||
hr
|
||||
opacity: .5
|
||||
|
||||
section.node-details-container
|
||||
background-color: white
|
||||
|
||||
&.project
|
||||
padding-bottom: 15px
|
||||
|
||||
/* Narrower details for about page (since it doesn't have navtree) */
|
||||
body.about
|
||||
|
||||
@ -1,15 +1,6 @@
|
||||
.card-deck
|
||||
// Custom, as of bootstrap 4.1.3 there is no way to do this.
|
||||
&.card-3-columns
|
||||
@extend .row
|
||||
|
||||
.card
|
||||
@extend .col-md-4
|
||||
|
||||
+media-lg
|
||||
background: green
|
||||
|
||||
&.card-4-columns
|
||||
&.card-deck-responsive
|
||||
@extend .row
|
||||
|
||||
.card
|
||||
|
||||
41
src/templates/_macros/_asset_list_item.pug
Normal file
41
src/templates/_macros/_asset_list_item.pug
Normal file
@ -0,0 +1,41 @@
|
||||
include ../mixins/components
|
||||
|
||||
| {% macro asset_list_item(asset, current_user) %}
|
||||
|
||||
| {% 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 %}",
|
||||
data-node_id="{{ asset._id }}",
|
||||
title="{{ asset.name }}")
|
||||
|
||||
| {% 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 %}
|
||||
@ -1,24 +0,0 @@
|
||||
| {% macro video_progress_bar(video, current_user) %}
|
||||
|
||||
| {% set view_progress = current_user.nodes.view_progress %}
|
||||
| {% if video._id in view_progress %}
|
||||
| {% set progress = current_user.nodes.view_progress[video._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 %}
|
||||
| {% endmacro %}
|
||||
@ -48,9 +48,8 @@ mixin nav-secondary-link()
|
||||
a.nav-link&attributes(attributes)
|
||||
block
|
||||
|
||||
// {# 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')&attributes(attributes)
|
||||
mixin card-deck()
|
||||
.card-deck.card-padless.card-deck-responsive()&attributes(attributes)
|
||||
if block
|
||||
block
|
||||
else
|
||||
@ -73,6 +72,10 @@ mixin list-asset(name, url, image, type, date)
|
||||
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
|
||||
|
||||
.card-body.py-2
|
||||
if name
|
||||
|
||||
@ -1,26 +1,28 @@
|
||||
| {% from '_macros/_asset_video_progress.html' import video_progress_bar %}
|
||||
| {% from '_macros/_asset_list_item.html' import asset_list_item %}
|
||||
include ../../../mixins/components
|
||||
|
||||
| {% block body %}
|
||||
#node-container
|
||||
section.px-3.pt-3.d-flex
|
||||
h4 {{node.name}}
|
||||
|
||||
.ml-auto
|
||||
.btn.btn-sm.btn-browsetoggle(
|
||||
title="Toggle between list/grid view",
|
||||
data-toggle="tooltip",
|
||||
data-placement="top")
|
||||
i.pi-list
|
||||
section.d-flex
|
||||
h4.p-4 {{node.name}}
|
||||
|
||||
| {% if node.description %}
|
||||
section.node-details-description.p-3
|
||||
section.node-details-description.px-4
|
||||
| {{ node | markdowned('description') }}
|
||||
| {% endif %}
|
||||
|
||||
section.container-fluid
|
||||
| {% if children %}
|
||||
+card-deck(4)(class="pr-3 pl-1")
|
||||
|
||||
.d-flex.justify-content-end.mb-2
|
||||
button.btn.btn-sm.btn-outline-secondary(
|
||||
class="js-btn-browsetoggle",
|
||||
title="Toggle between list/grid view",
|
||||
data-toggle="tooltip",
|
||||
data-placement="top")
|
||||
i.pi-list
|
||||
|
||||
+card-deck(class="px-2")
|
||||
| {% for child in children %}
|
||||
| {# Browse type: List #}
|
||||
a(
|
||||
@ -73,30 +75,7 @@ include ../../../mixins/components
|
||||
|
||||
| {# 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 %}
|
||||
| {% endif %}
|
||||
| {% endif %}
|
||||
|
||||
+list-asset(
|
||||
'{{ child.name }}',
|
||||
'{{ url_for_node(node=child) }}',
|
||||
"{% if child.picture %}{{ child.picture.thumbnail('m', api=api) }}{% endif %}",
|
||||
"{{ node_type | undertitle }}",
|
||||
"{{ child._created | pretty_date }}")(
|
||||
class="js-item-open pr-0 mx-0 mb-2 {% if child.permissions.world %}free{% endif %}",
|
||||
data-node_id="{{ child._id }}",
|
||||
title="{{ child.name }}")
|
||||
|
||||
| {% if child.properties.content_type == 'video' %}
|
||||
| {{ video_progress_bar(child, current_user) }}
|
||||
| {% endif %}
|
||||
| {{ asset_list_item(child, current_user) }}
|
||||
|
||||
| {% endfor %}
|
||||
| {% else %}
|
||||
@ -138,13 +117,13 @@ include ../../../mixins/components
|
||||
function projectBrowseTypeIcon() {
|
||||
$(".list-node-children-item.browse-list").hide();
|
||||
$(".list-node-children-item.browse-icon").show();
|
||||
$(".btn-browsetoggle").html('<i class="pi-list"></i>');
|
||||
$(".js-btn-browsetoggle").html('<i class="pi-list"></i> List View');
|
||||
};
|
||||
|
||||
function projectBrowseTypeList() {
|
||||
$(".list-node-children-item.browse-list").show();
|
||||
$(".list-node-children-item.browse-icon").hide();
|
||||
$(".btn-browsetoggle").html('<i class="pi-layout"></i>');
|
||||
$(".js-btn-browsetoggle").html('<i class="pi-layout"></i> Grid View');
|
||||
};
|
||||
|
||||
function projectBrowseTypeCheck(){
|
||||
@ -184,7 +163,7 @@ include ../../../mixins/components
|
||||
}
|
||||
}
|
||||
|
||||
$('.btn-browsetoggle').on('click', function (e) {
|
||||
$('.js-btn-browsetoggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
projectBrowseToggle();
|
||||
});
|
||||
|
||||
@ -5,9 +5,8 @@
|
||||
| {% block node_preview %}
|
||||
| {% if node.picture %}
|
||||
| {% if current_user.has_cap('subscriber') or node.permissions.world %}
|
||||
section#node-preview.node-preview.image.js-node-preview-image
|
||||
img.node-preview-thumbnail#node-preview-thumbnail(
|
||||
src="{{ node.picture.thumbnail('l', api=api) }}")
|
||||
section.node-preview.image.js-node-preview-image
|
||||
img.node-preview-thumbnail(src="{{ node.picture.thumbnail('l', api=api) }}")
|
||||
| {% else %}
|
||||
| {% include 'nodes/custom/_node_preview_forbidden.html' %}
|
||||
| {% endif %}
|
||||
@ -15,19 +14,20 @@
|
||||
| {% endblock node_preview %}
|
||||
|
||||
| {% block node_details %}
|
||||
section.node-details-container
|
||||
|
||||
| {# NAME #}
|
||||
h4.pt-4.px-4 {{node.name}}
|
||||
| {# NAME #}
|
||||
section.px-4
|
||||
h4.pt-4.mb-3 {{node.name}}
|
||||
|
||||
| {# DESCRIPTION #}
|
||||
| {% if node.description %}
|
||||
.node-details-description.px-4
|
||||
.node-details-description
|
||||
| {{ node | markdowned('description') }}
|
||||
| {% endif %}
|
||||
|
||||
|
||||
| {# LICENSE #}
|
||||
| {# LICENSE #}
|
||||
section
|
||||
| {% if node.properties.license_type %}
|
||||
a.node-details-license(
|
||||
href="https://creativecommons.org/licenses/",
|
||||
@ -41,80 +41,80 @@
|
||||
| {% endif %}
|
||||
|
||||
|
||||
| {# DETAILS #}
|
||||
.node-details-meta
|
||||
ul
|
||||
| {% if node.has_method('PUT') and (node.properties.status != 'published') %}
|
||||
li(class="status-{{ node.properties.status }}")
|
||||
| {{ node.properties.status | undertitle }}
|
||||
| {% endif %}
|
||||
| {# DETAILS #}
|
||||
section.node-details-meta
|
||||
ul
|
||||
| {% if node.has_method('PUT') and (node.properties.status != 'published') %}
|
||||
li(class="status-{{ node.properties.status }}")
|
||||
| {{ node.properties.status | undertitle }}
|
||||
| {% endif %}
|
||||
|
||||
li(title="Author")
|
||||
| {{ node.user.full_name }}
|
||||
li(title="Author")
|
||||
| {{ node.user.full_name }}
|
||||
|
||||
li(
|
||||
title="Created {{ node._created }} (updated {{ node._updated | pretty_date_time }})")
|
||||
| {{ node._created | pretty_date }}
|
||||
li(
|
||||
title="Created {{ node._created }} (updated {{ node._updated | pretty_date_time }})")
|
||||
| {{ node._created | pretty_date }}
|
||||
|
||||
| {% if node.short_link %}
|
||||
li.shared
|
||||
a(href="{{ node.short_link }}")
|
||||
i.pi-share
|
||||
| Shared
|
||||
| {% endif %}
|
||||
| {% if node.short_link %}
|
||||
li.shared
|
||||
a(href="{{ node.short_link }}")
|
||||
i.pi-share
|
||||
| Shared
|
||||
| {% endif %}
|
||||
|
||||
li.left-side
|
||||
li.left-side
|
||||
|
||||
| {% if node.file %}
|
||||
li(title="File size")
|
||||
| {{ node.file.length | filesizeformat }}
|
||||
li.js-type(title="File format")
|
||||
| {{ node.file.content_type }}
|
||||
| {% endif %}
|
||||
| {% if node.file %}
|
||||
li(title="File size")
|
||||
| {{ node.file.length | filesizeformat }}
|
||||
li.js-type(title="File format")
|
||||
| {{ node.file.content_type }}
|
||||
| {% endif %}
|
||||
|
||||
| {% if node.permissions.world %}
|
||||
li.public(
|
||||
data-toggle="tooltip",
|
||||
data-placement="bottom",
|
||||
title="Anybody can download. Share it!")
|
||||
i.pi-lock-open
|
||||
span Public
|
||||
| {% endif %}
|
||||
| {% if node.permissions.world %}
|
||||
li.public(
|
||||
data-toggle="tooltip",
|
||||
data-placement="bottom",
|
||||
title="Anybody can download. Share it!")
|
||||
i.pi-lock-open
|
||||
span Public
|
||||
| {% endif %}
|
||||
|
||||
| {% block node_details_meta_extra %}{% endblock %}
|
||||
| {% block node_details_meta_extra %}{% endblock %}
|
||||
|
||||
li.download
|
||||
| {% if (current_user.has_cap('subscriber') or node.permissions.world) and (node.file or node.properties.files) %}
|
||||
| {% block node_download %}
|
||||
a(
|
||||
title="Download {{ node.properties.content_type | undertitle }}",
|
||||
href="{{ node.file.link }}",
|
||||
download="{{ node.file.filename }}")
|
||||
button.btn.btn-sm.btn-outline-primary.px-3(type="button")
|
||||
i.pi-download.pr-2
|
||||
| Download
|
||||
| {% endblock node_download %}
|
||||
|
||||
| {% elif current_user.has_cap('can-renew-subscription') %}
|
||||
a.btn.btn-success(
|
||||
title="Renew your subscription to download",
|
||||
target="_blank",
|
||||
href="/renew")
|
||||
i.pi-heart
|
||||
| Renew Subscription
|
||||
|
||||
| {% elif current_user.is_authenticated %}
|
||||
.btn.disabled
|
||||
i.pi-lock
|
||||
li.download
|
||||
| {% if (current_user.has_cap('subscriber') or node.permissions.world) and (node.file or node.properties.files) %}
|
||||
| {% block node_download %}
|
||||
a(
|
||||
title="Download {{ node.properties.content_type | undertitle }}",
|
||||
href="{{ node.file.link }}",
|
||||
download="{{ node.file.filename }}")
|
||||
button.btn.btn-sm.btn-outline-primary.px-3(type="button")
|
||||
i.pi-download.pr-2
|
||||
| Download
|
||||
| {% endblock node_download %}
|
||||
|
||||
| {% else %}
|
||||
a.btn(
|
||||
title="Login to download {{ node.properties.content_type | undertitle }}",
|
||||
href="{{ url_for('users.login') }}")
|
||||
i.pi-lock
|
||||
| Download
|
||||
| {% endif %}
|
||||
| {% elif current_user.has_cap('can-renew-subscription') %}
|
||||
a.btn.btn-success(
|
||||
title="Renew your subscription to download",
|
||||
target="_blank",
|
||||
href="/renew")
|
||||
i.pi-heart
|
||||
| Renew Subscription
|
||||
|
||||
| {% elif current_user.is_authenticated %}
|
||||
.btn.disabled
|
||||
i.pi-lock
|
||||
| Download
|
||||
|
||||
| {% else %}
|
||||
a.btn(
|
||||
title="Login to download {{ node.properties.content_type | undertitle }}",
|
||||
href="{{ url_for('users.login') }}")
|
||||
i.pi-lock
|
||||
| Download
|
||||
| {% endif %}
|
||||
|
||||
| {% endblock node_details %}
|
||||
|
||||
|
||||
@ -1,54 +1,45 @@
|
||||
| {% from '_macros/_asset_list_item.html' import asset_list_item %}
|
||||
include ../mixins/components
|
||||
|
||||
| {% block body %}
|
||||
#node-container
|
||||
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>
|
||||
| {% elif project.picture_header %}
|
||||
a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
|
||||
img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")
|
||||
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>
|
||||
| {% elif project.picture_header %}
|
||||
a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
|
||||
img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")
|
||||
| {% endif %}
|
||||
|
||||
section.px-4
|
||||
h4.pt-4
|
||||
a.text-muted(href="{{ url_for( 'projects.view', project_url=project.url) }}")
|
||||
| {{ project.name }}
|
||||
|
||||
| {% if project.description %}
|
||||
.node-details-description
|
||||
| {{ project | markdowned('description') }}
|
||||
| {% endif %}
|
||||
|
||||
| {% if activity_stream %}
|
||||
+card-deck(class="pt-4 border-top")
|
||||
| {% for n in activity_stream %}
|
||||
| {% if n.node_type not in ['comment'] %}
|
||||
| {{ asset_list_item(n, current_user) }}
|
||||
| {% endif %}
|
||||
|
||||
section.node-details-container.project
|
||||
h2.px-3.pt-3
|
||||
a.text-muted(href="{{ url_for( 'projects.view', project_url=project.url) }}") {{ project.name }}
|
||||
|
||||
| {% if project.description %}
|
||||
.node-details-description
|
||||
| {{ project | markdowned('description') }}
|
||||
| {% endif %}
|
||||
|
||||
| {# Until we implement urls for pages
|
||||
a.learn-more(href="{{ url_for( 'projects.view', project_url=project.url) }}") LEARN MORE
|
||||
| #}
|
||||
|
||||
.p-4
|
||||
| {% if activity_stream %}
|
||||
+card-deck(3)
|
||||
| {% for n in activity_stream %}
|
||||
| {% if n.node_type not in ['comment'] %}
|
||||
+list-asset(
|
||||
'{{ n.name }}',
|
||||
'{{ url_for_node(node=n) }}',
|
||||
"{% if n.picture %}{{ n.picture.thumbnail('l', api=api) }}{% endif %}",
|
||||
"{% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %}",
|
||||
"{{ n._updated | pretty_date }}")(class="{% if n.permissions.world %}free{% endif %}")
|
||||
| {% endif %}
|
||||
| {% endfor %}
|
||||
| {% endif %}
|
||||
| {% endfor %}
|
||||
| {% endif %}
|
||||
|
||||
include _scripts
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user