From c546dd28813964ca833c15a30d3c31ee524f3327 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 11 Sep 2018 16:11:05 +0200 Subject: [PATCH] Video: new macro for showing video progress Import video_progress_bar from '_macros/_asset_video_progress.html' and pass it the video and current_user. --- src/styles/_apps_base.sass | 3 +++ src/styles/_config.sass | 4 ++-- src/styles/components/_card.sass | 20 ++++++++++++---- .../_macros/_asset_video_progress.pug | 24 +++++++++++++++++++ src/templates/mixins/components.pug | 2 +- .../nodes/custom/group/view_embed.pug | 18 ++++++-------- 6 files changed, 53 insertions(+), 18 deletions(-) create mode 100644 src/templates/_macros/_asset_video_progress.pug diff --git a/src/styles/_apps_base.sass b/src/styles/_apps_base.sass index 10072a1b..ddf0e279 100644 --- a/src/styles/_apps_base.sass +++ b/src/styles/_apps_base.sass @@ -450,3 +450,6 @@ $loader-bar-height: 2px to left: 100% + +.progress-bar + background-color: $primary diff --git a/src/styles/_config.sass b/src/styles/_config.sass index 22c03588..40075a71 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -12,9 +12,10 @@ $color-background-active-dark: hsl(hue($color-background-active), 50%, 50%) !def $font-body: 'Roboto' !default $font-headings: 'Lato' !default $font-size: 14px !default +$font-size-xs: .75rem +$font-size-xxs: .65rem $color-text: #4d4e53 !default - $color-text-dark: $color-text !default $color-text-dark-primary: #646469 !default $color-text-dark-secondary: #9E9FA2 !default @@ -139,7 +140,6 @@ $link-color: $primary $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" $font-size-base: .9rem -$font-size-xs: .75rem $dropdown-border-width: 0 $dropdown-box-shadow: 0 10px 25px rgba($black, .1) diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass index a61ce2f0..23fef5e4 100644 --- a/src/styles/components/_card.sass +++ b/src/styles/components/_card.sass @@ -81,10 +81,22 @@ background-position: center .progress - height: 3px + height: 4px position: absolute - top: -3px + top: -4px width: 100% -.progress-bar - background-color: $primary + &.group + + +.card-label + background-color: rgba($black, .5) + border-radius: 3px + color: $white + display: block + font-size: $font-size-xxs + left: 5px + top: -25px + position: absolute + padding: 1px 5px + z-index: 1 diff --git a/src/templates/_macros/_asset_video_progress.pug b/src/templates/_macros/_asset_video_progress.pug new file mode 100644 index 00000000..15942d98 --- /dev/null +++ b/src/templates/_macros/_asset_video_progress.pug @@ -0,0 +1,24 @@ +| {% 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 %} diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug index 1daed454..6d150285 100644 --- a/src/templates/mixins/components.pug +++ b/src/templates/mixins/components.pug @@ -69,7 +69,7 @@ mixin card() p No card content defined. mixin list-asset(name, url, image, type, date) - a(href=url, class=type).card.asset.card-stretch.card-image-fade&attributes(attributes) + 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 + ")") diff --git a/src/templates/nodes/custom/group/view_embed.pug b/src/templates/nodes/custom/group/view_embed.pug index 0d638ec3..1c9f3fdb 100644 --- a/src/templates/nodes/custom/group/view_embed.pug +++ b/src/templates/nodes/custom/group/view_embed.pug @@ -1,3 +1,4 @@ +| {% from '_macros/_asset_video_progress.html' import video_progress_bar %} include ../../../mixins/components | {% block body %} @@ -75,6 +76,7 @@ include ../../../mixins/components | {% 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 %} @@ -87,22 +89,16 @@ include ../../../mixins/components '{{ 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 %}", + "{{ 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 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 child.properties.content_type == 'video' %} + | {{ video_progress_bar(child, current_user) }} | {% endif %} - | {% endfor %} + | {% endfor %} | {% else %} .list-node-children-container .list-node-children-empty No items... yet!