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

Tweaks to asset listing

Browse Source
This commit is contained in:
Pablo Vazquez
2018-09-11 17:45:33 +02:00
parent c546dd2881
commit 3ae16d7750
8 changed files with 185 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/styles/_project.sass
View File

@@ -152,6 +152,15 @@ body.blog
display: none display: none
ul.project-edit-tools ul.project-edit-tools
li:not(.disabled)
.btn
background-color: $white
&:hover
border-color: $primary
background-color: $white
color: $primary
li li
&.button-save &.button-save
&.field-error &.field-error
@@ -239,9 +248,6 @@ ul.project-edit-tools
background-color: white background-color: white
#node-container #node-container
background-color: white
flex: 1
/* For error messages (403) and other overlaid text*/ /* For error messages (403) and other overlaid text*/
#node-overlay #node-overlay
z-index: $z-index-base + 2 z-index: $z-index-base + 2
@@ -515,7 +521,6 @@ section.node-preview
background-color: black background-color: black
color: $color-text-light-primary color: $color-text-light-primary
display: flex display: flex
flex: 1
justify-content: center justify-content: center
max-height: 500px max-height: 500px
min-height: 200px min-height: 200px
@@ -638,11 +643,6 @@ section.node-preview-forbidden
hr hr
opacity: .5 opacity: .5
section.node-details-container
background-color: white
&.project
padding-bottom: 15px
/* Narrower details for about page (since it doesn't have navtree) */ /* Narrower details for about page (since it doesn't have navtree) */
body.about body.about

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

@@ -1,15 +1,6 @@
.card-deck .card-deck
// Custom, as of bootstrap 4.1.3 there is no way to do this. // Custom, as of bootstrap 4.1.3 there is no way to do this.
&.card-3-columns &.card-deck-responsive
@extend .row
.card
@extend .col-md-4
+media-lg
background: green
&.card-4-columns
@extend .row @extend .row
.card .card

41
src/templates/_macros/_asset_list_item.pug Normal file
View 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 %}

24
src/templates/_macros/_asset_video_progress.pug
View File

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

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

@@ -48,9 +48,8 @@ mixin nav-secondary-link()
a.nav-link&attributes(attributes) a.nav-link&attributes(attributes)
block block
// {# Takes as argument the number of columns to use in this deck. 1-6 #} mixin card-deck()
mixin card-deck(columns) .card-deck.card-padless.card-deck-responsive()&attributes(attributes)
.card-deck.card-padless(class='card-' + columns + '-columns')&attributes(attributes)
if block if block
block block
else else
@@ -73,6 +72,10 @@ mixin list-asset(name, url, image, type, date)
if image if image
.embed-responsive.embed-responsive-16by9 .embed-responsive.embed-responsive-16by9
.card-img-top.embed-responsive-item(style="background-image: url(" + image + ")") .card-img-top.embed-responsive-item(style="background-image: url(" + image + ")")
else
.card-img-top
.card-icon
i.pi-blender
.card-body.py-2 .card-body.py-2
if name if name

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

@@ -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 include ../../../mixins/components
| {% block body %} | {% block body %}
#node-container #node-container
section.px-3.pt-3.d-flex section.d-flex
h4 {{node.name}} h4.p-4 {{node.name}}
.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 %} | {% if node.description %}
section.node-details-description.p-3 section.node-details-description.px-4
| {{ node | markdowned('description') }} | {{ node | markdowned('description') }}
| {% endif %} | {% endif %}
section.container-fluid section.container-fluid
| {% if children %} | {% 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 %} | {% for child in children %}
| {# Browse type: List #} | {# Browse type: List #}
a( a(
@@ -73,30 +75,7 @@ include ../../../mixins/components
| {# Browse type: Icon #} | {# Browse type: Icon #}
| {% set node_type = child.properties.content_type if child.properties.content_type else child.node_type %} | {{ asset_list_item(child, current_user) }}
| {% 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 %}
| {% endfor %} | {% endfor %}
| {% else %} | {% else %}
@@ -138,13 +117,13 @@ include ../../../mixins/components
function projectBrowseTypeIcon() { function projectBrowseTypeIcon() {
$(".list-node-children-item.browse-list").hide(); $(".list-node-children-item.browse-list").hide();
$(".list-node-children-item.browse-icon").show(); $(".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() { function projectBrowseTypeList() {
$(".list-node-children-item.browse-list").show(); $(".list-node-children-item.browse-list").show();
$(".list-node-children-item.browse-icon").hide(); $(".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(){ function projectBrowseTypeCheck(){
@@ -184,7 +163,7 @@ include ../../../mixins/components
} }
} }
$('.btn-browsetoggle').on('click', function (e) { $('.js-btn-browsetoggle').on('click', function (e) {
e.preventDefault(); e.preventDefault();
projectBrowseToggle(); projectBrowseToggle();
}); });

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

@@ -5,9 +5,8 @@
| {% block node_preview %} | {% block node_preview %}
| {% if node.picture %} | {% if node.picture %}
| {% if current_user.has_cap('subscriber') or node.permissions.world %} | {% if current_user.has_cap('subscriber') or node.permissions.world %}
section#node-preview.node-preview.image.js-node-preview-image section.node-preview.image.js-node-preview-image
img.node-preview-thumbnail#node-preview-thumbnail( img.node-preview-thumbnail(src="{{ node.picture.thumbnail('l', api=api) }}")
src="{{ node.picture.thumbnail('l', api=api) }}")
| {% else %} | {% else %}
| {% include 'nodes/custom/_node_preview_forbidden.html' %} | {% include 'nodes/custom/_node_preview_forbidden.html' %}
| {% endif %} | {% endif %}
@@ -15,19 +14,20 @@
| {% endblock node_preview %} | {% endblock node_preview %}
| {% block node_details %} | {% block node_details %}
section.node-details-container
| {# NAME #} | {# NAME #}
h4.pt-4.px-4 {{node.name}} section.px-4
h4.pt-4.mb-3 {{node.name}}
| {# DESCRIPTION #} | {# DESCRIPTION #}
| {% if node.description %} | {% if node.description %}
.node-details-description.px-4 .node-details-description
| {{ node | markdowned('description') }} | {{ node | markdowned('description') }}
| {% endif %} | {% endif %}
| {# LICENSE #} | {# LICENSE #}
section
| {% if node.properties.license_type %} | {% if node.properties.license_type %}
a.node-details-license( a.node-details-license(
href="https://creativecommons.org/licenses/", href="https://creativecommons.org/licenses/",
@@ -41,80 +41,80 @@
| {% endif %} | {% endif %}
| {# DETAILS #} | {# DETAILS #}
.node-details-meta section.node-details-meta
ul ul
| {% if node.has_method('PUT') and (node.properties.status != 'published') %} | {% if node.has_method('PUT') and (node.properties.status != 'published') %}
li(class="status-{{ node.properties.status }}") li(class="status-{{ node.properties.status }}")
| {{ node.properties.status | undertitle }} | {{ node.properties.status | undertitle }}
| {% endif %} | {% endif %}
li(title="Author") li(title="Author")
| {{ node.user.full_name }} | {{ node.user.full_name }}
li( li(
title="Created {{ node._created }} (updated {{ node._updated | pretty_date_time }})") title="Created {{ node._created }} (updated {{ node._updated | pretty_date_time }})")
| {{ node._created | pretty_date }} | {{ node._created | pretty_date }}
| {% if node.short_link %} | {% if node.short_link %}
li.shared li.shared
a(href="{{ node.short_link }}") a(href="{{ node.short_link }}")
i.pi-share i.pi-share
| Shared | Shared
| {% endif %} | {% endif %}
li.left-side li.left-side
| {% if node.file %} | {% if node.file %}
li(title="File size") li(title="File size")
| {{ node.file.length | filesizeformat }} | {{ node.file.length | filesizeformat }}
li.js-type(title="File format") li.js-type(title="File format")
| {{ node.file.content_type }} | {{ node.file.content_type }}
| {% endif %} | {% endif %}
| {% if node.permissions.world %} | {% if node.permissions.world %}
li.public( li.public(
data-toggle="tooltip", data-toggle="tooltip",
data-placement="bottom", data-placement="bottom",
title="Anybody can download. Share it!") title="Anybody can download. Share it!")
i.pi-lock-open i.pi-lock-open
span Public span Public
| {% endif %} | {% endif %}
| {% block node_details_meta_extra %}{% endblock %} | {% block node_details_meta_extra %}{% endblock %}
li.download li.download
| {% if (current_user.has_cap('subscriber') or node.permissions.world) and (node.file or node.properties.files) %} | {% if (current_user.has_cap('subscriber') or node.permissions.world) and (node.file or node.properties.files) %}
| {% block node_download %} | {% block node_download %}
a( a(
title="Download {{ node.properties.content_type | undertitle }}", title="Download {{ node.properties.content_type | undertitle }}",
href="{{ node.file.link }}", href="{{ node.file.link }}",
download="{{ node.file.filename }}") download="{{ node.file.filename }}")
button.btn.btn-sm.btn-outline-primary.px-3(type="button") button.btn.btn-sm.btn-outline-primary.px-3(type="button")
i.pi-download.pr-2 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
| Download | Download
| {% endblock node_download %}
| {% else %} | {% elif current_user.has_cap('can-renew-subscription') %}
a.btn( a.btn.btn-success(
title="Login to download {{ node.properties.content_type | undertitle }}", title="Renew your subscription to download",
href="{{ url_for('users.login') }}") target="_blank",
i.pi-lock href="/renew")
| Download i.pi-heart
| {% endif %} | 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 %} | {% endblock node_details %}

85
src/templates/projects/view_embed.pug
View File

@@ -1,54 +1,45 @@
| {% from '_macros/_asset_list_item.html' import asset_list_item %}
include ../mixins/components include ../mixins/components
| {% block body %} | {% block body %}
#node-container section.node-preview.project
section.node-preview.project | {% if header_video_file %}
| {% if header_video_file %} video#videoplayer.video-js.vjs-fluid(
video#videoplayer.video-js.vjs-fluid( controls,
controls, data-setup="{}",
data-setup="{}", preload="auto",
preload="auto", poster="{% if header_video_node.picture %}{{ header_video_node.picture.thumbnail('l', api=api) }}{% endif %}")
poster="{% if header_video_node.picture %}{{ header_video_node.picture.thumbnail('l', api=api) }}{% endif %}") | {% for source in header_video_file.variations %}
| {% for source in header_video_file.variations %} source(
source( src="{{ source.link | safe }}",
src="{{ source.link | safe }}", type="{{ source.content_type }}")
type="{{ source.content_type }}") | {% endfor %}
| {% endfor %} p.vjs-no-js.
p.vjs-no-js. To view this video please enable JavaScript, and consider upgrading to a web browser that
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>
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> | {% elif project.picture_header %}
| {% elif project.picture_header %} a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
a(href="{{ url_for( 'projects.view', project_url=project.url) }}") img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")
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 %} | {% endif %}
| {% endfor %}
section.node-details-container.project | {% endif %}
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 %}
include _scripts include _scripts