diff --git a/src/styles/_project.sass b/src/styles/_project.sass
index 70f15706..c2b86baa 100644
--- a/src/styles/_project.sass
+++ b/src/styles/_project.sass
@@ -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
diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass
index 23fef5e4..0c265752 100644
--- a/src/styles/components/_card.sass
+++ b/src/styles/components/_card.sass
@@ -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
diff --git a/src/templates/_macros/_asset_list_item.pug b/src/templates/_macros/_asset_list_item.pug
new file mode 100644
index 00000000..9645010f
--- /dev/null
+++ b/src/templates/_macros/_asset_list_item.pug
@@ -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 %}
diff --git a/src/templates/_macros/_asset_video_progress.pug b/src/templates/_macros/_asset_video_progress.pug
deleted file mode 100644
index 15942d98..00000000
--- a/src/templates/_macros/_asset_video_progress.pug
+++ /dev/null
@@ -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 %}
diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug
index 6d150285..dcc34bda 100644
--- a/src/templates/mixins/components.pug
+++ b/src/templates/mixins/components.pug
@@ -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
diff --git a/src/templates/nodes/custom/group/view_embed.pug b/src/templates/nodes/custom/group/view_embed.pug
index 1c9f3fdb..b400ee39 100644
--- a/src/templates/nodes/custom/group/view_embed.pug
+++ b/src/templates/nodes/custom/group/view_embed.pug
@@ -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('');
+ $(".js-btn-browsetoggle").html(' List View');
};
function projectBrowseTypeList() {
$(".list-node-children-item.browse-list").show();
$(".list-node-children-item.browse-icon").hide();
- $(".btn-browsetoggle").html('');
+ $(".js-btn-browsetoggle").html(' 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();
});
diff --git a/src/templates/nodes/view_base.pug b/src/templates/nodes/view_base.pug
index e4e337a6..c8ab7bd2 100644
--- a/src/templates/nodes/view_base.pug
+++ b/src/templates/nodes/view_base.pug
@@ -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 %}
diff --git a/src/templates/projects/view_embed.pug b/src/templates/projects/view_embed.pug
index ba722754..bb25e5c0 100644
--- a/src/templates/projects/view_embed.pug
+++ b/src/templates/projects/view_embed.pug
@@ -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
- supports HTML5 video
- | {% 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
+ supports HTML5 video
+ | {% 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