Assets: Move details to its own file and share across assets

And new styling for the details as well
This commit is contained in:
2017-09-04 19:13:38 +02:00
parent 923b4bd9d6
commit b8153b5c9a
10 changed files with 285 additions and 478 deletions

View File

@@ -0,0 +1,94 @@
.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 {{ node.user.full_name }}
li.dim(
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 %}
li.left-side
| {% if node.file %}
li.dim
| {{ node.file.length | filesizeformat }}
li.dim
| {{ 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.file %}
li.download
| {% if node.properties.content_type == 'video' %}
| {% if node.file_variations %}
button.btn.btn-default.dropdown-toggle(
type="button",
data-toggle="dropdown",
aria-haspopup="true",
aria-expanded="false")
i.pi-download
| Download
i.pi-angle-down.icon-dropdown-menu
ul.dropdown-menu
| {% for child in node.file_variations %}
li
a(href="{{ child.link }}",
title="Download this format",
download)
span.length {{ child.length | filesizeformat }}
span.format {{ child.format }}
span.size {{ child.size }}
| {% endfor %}
| {% endif %}
| {% else %}
a(
title="Download {{ node.properties.content_type | undertitle }}",
href="{{ node.file.link }}",
download="{{ node.file.filename }}")
button.btn(type="button")
i.pi-download
| Download
| {% endif %}
| {% else %}
a.btn(
title="Login to download {{ node.properties.content_type | undertitle }}",
href="{{ url_for('users.login') }}")
i.pi-lock
| Download
| {% endif %}
| {% 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 %}

View File

@@ -16,87 +16,12 @@
.node-title#node-title
| {{node.name}}
.node-details-meta.header
ul.node-details-meta-list
| {% if node.permissions.world %}
li.node-details-meta-list-item.access.public(
data-toggle="tooltip",
data-placement="left",
title="Anybody can download. Share it!")
i.pi-lock-open
span Public
| {% endif %}
| {% if node.file %}
li.node-details-meta-list-item.type
| {{ node.file.content_type }}
li.node-details-meta-list-item.file.length
| {{ node.file.length | filesizeformat }}
| {% endif %}
| {% if node.properties.license_type %}
| {% if node.properties.license_notes %}
li.node-details-meta-list-item.license(
id="asset-license",
data-toggle="popover",
data-placement="left",
data-trigger="hover",
data-content="{{ node.properties.license_notes }}",
title="{{ node.properties.license_type }}")
i(class="pi-license-{{ node.properties.license_type }}")
| {% else %}
li.node-details-meta-list-item.license(
id="asset-license",
data-toggle="tooltip",
data-placement="bottom",
title="{{ node.properties.license_type }}")
i(class="pi-license-{{ node.properties.license_type }}")
| {% endif %}
| {% endif %}
| {% if node.file %}
li.node-details-meta-list-item.file.download(title="Download File")
| {% if node.file.link %}
a(href="{{ node.file.link }}",
title="Download file",
download="{{ node.file.filename }}")
button.btn.btn-default(type="button")
i.pi-download
| {% else %}
button.btn.btn-default.disabled.sorry(type="button")
i.pi-lock
i.pi-download
| {% endif %}
| {% endif %}
| {% if node.description %}
.node-details-description#node-description
| {{node.description}}
| {% endif %}
| {% if node.properties.license_notes %}
.node-details-meta.license
| {{ node.properties.license_notes }}
| {% endif %}
.node-details-meta.footer
ul.node-details-meta-list
li.node-details-meta-list-item.status
| {{ node.properties.status | undertitle }}
li.node-details-meta-list-item.author
| {{ node.user.full_name }}
li.node-details-meta-list-item.date(title="Created {{ node._created }}")
| {{ node._created | pretty_date }}
| {% if (node._created | pretty_date) != (node._updated | pretty_date) %}
span(title="Updated {{ node._updated }}") (updated {{ node._updated | pretty_date }})
| {% endif %}
include ../../node_details
#comments-embed
#comments-list-items-loading

View File

@@ -16,93 +16,12 @@
.node-title#node-title
| {{node.name}}
.node-details-meta.header
ul.node-details-meta-list
| {% if node.permissions.world %}
li.node-details-meta-list-item.access.public(
data-toggle="tooltip",
data-placement="left",
title="Anybody can download. Share it!")
i.pi-lock-open
span Public
| {% endif %}
| {% if node.short_link %}
li.node-details-meta-list-item.access.shared
a(href="{{ node.short_link }}")
i.pi-share
| Shared
| {% endif %}
| {% if node.file %}
li.node-details-meta-list-item.type
| {{ node.file.content_type }}
li.node-details-meta-list-item.image.length
| {{ node.file.length | filesizeformat }}
| {% endif %}
| {% if node.properties.license_type %}
| {% if node.properties.license_notes %}
li.node-details-meta-list-item.license(
id="asset-license",
data-toggle="popover",
data-placement="left",
data-trigger="hover",
data-content="{{ node.properties.license_notes }}",
title=" {{ node.properties.license_type }}")
i(class="pi-license-{{ node.properties.license_type }}")
| {% else %}
li.node-details-meta-list-item.license(
id="asset-license",
data-toggle="tooltip",
data-placement="bottom",
title="{{ node.properties.license_type }}")
i(class="pi-license-{{ node.properties.license_type }}")
| {% endif %}
| {% endif %}
| {% if node.file %}
li.node-details-meta-list-item.image.download(title="Download Image")
| {% if node.file.link %}
a(href="{{ node.file.link }}",
title="Download image",
download="{{ node.file.filename }}")
button.btn.btn-default(type="button")
i.pi-download
| {% else %}
button.btn.btn-default.disabled.sorry(type="button")
i.pi-lock
i.pi-download
| {% endif %}
| {% endif %}
| {% if node.description %}
.node-details-description#node-description
| {{node.description}}
| {% endif %}
| {% if node.properties.license_notes %}
.node-details-meta.license
| {{ node.properties.license_notes }}
| {% endif %}
.node-details-meta.footer
ul.node-details-meta-list
| {% if node.has_method('PUT') %}
li.node-details-meta-list-item.status
| {{ node.properties.status | undertitle }}
| {% endif %}
li.node-details-meta-list-item.author
| {{ node.user.full_name }}
li.node-details-meta-list-item.date(title="Created {{ node._created }}")
| {{ node._created | pretty_date }}
| {% if (node._created | pretty_date) != (node._updated | pretty_date) %}
span(title="Updated {{ node._updated }}") (updated {{ node._updated | pretty_date }})
| {% endif %}
include ../../node_details
#comments-embed
#comments-list-items-loading

View File

@@ -35,96 +35,12 @@
.node-title#node-title
| {{node.name}}
.node-details-meta.header
ul.node-details-meta-list
| {% if node.permissions.world %}
li.node-details-meta-list-item.access.public(
data-toggle="tooltip",
data-placement="bottom",
title="Anybody can download. Share it!")
i.pi-lock-open
span Public
| {% endif %}
| {% if node.properties.license_type %}
| {% if node.properties.license_notes %}
li.node-details-meta-list-item.video.license(
id="asset-license",
data-toggle="popover",
data-placement="left",
data-trigger="hover",
data-content="{{ node.properties.license_notes }}",
title="{{ node.properties.license_type }}")
i(class="pi-license-{{ node.properties.license_type }}")
| {% else %}
li.node-details-meta-list-item.video.license(
id="asset-license",
data-toggle="tooltip",
data-placement="bottom",
title="{{ node.properties.license_type }}")
i(class="pi-license-{{ node.properties.license_type }}")
| {% endif %}
| {% endif %}
| {% if node.file %}
| {% if node.file_variations %}
li.btn-group.node-details-meta-list-item.video.download(
title="Download Video")
button.btn.btn-default.dropdown-toggle(
type="button",
data-toggle="dropdown",
aria-haspopup="true",
aria-expanded="false")
i.pi-download
i.pi-angle-down.icon-dropdown-menu
ul.dropdown-menu
| {% for child in node.file_variations %}
li
a(href="{{ child.link }}",
title="Download this video format",
download)
span.length {{ child.length | filesizeformat }}
span.format {{ child.format }}
span.size {{ child.size }}
| {% endfor %}
| {% else %}
li.btn-group.node-details-meta-list-item.video.download.disabled(
title="Download Video")
button.btn.btn-default.sorry(type="button")
i.pi-lock
i.pi-download
| {% endif %}
| {% endif %}
| {% if node.description %}
.node-details-description#node-description
| {{node.description}}
| {% endif %}
| {% if node.properties.license_notes %}
.node-details-meta.license
| {{ node.properties.license_notes }}
| {% endif %}
.node-details-meta.footer
ul.node-details-meta-list
li.node-details-meta-list-item.status
| {{ node.properties.status | undertitle }}
li.node-details-meta-list-item.author
| {{ node.user.full_name }}
li.node-details-meta-list-item.date(title="Created {{ node._created }}")
| {{ node._created | pretty_date }}
| {% if (node._created | pretty_date) != (node._updated | pretty_date) %}
span(title="Updated {{ node._updated }}") (updated {{ node._updated | pretty_date }})
| {% endif %}
include ../../node_details
#comments-embed
#comments-list-items-loading

View File

@@ -2,27 +2,10 @@
#node-container
section.node-preview.group
| {% if node.picture %}
img.backdrop(src="{{ node.picture.thumbnail('l', api=api) }}")
.overlay
| {% endif %}
.node-title#node-title
| {{node.name}}
section.node-details-container.group
.node-details-meta.preview
ul.node-details-meta-list
li.node-details-meta-list-item.date(title="Updated {{ node._updated | pretty_date }}")
| {{ node._created | pretty_date }}
li.node-details-meta-list-item.author
| {{ node.user.full_name }}
| {% if node.properties.status != 'published' %}
li.node-details-meta-list-item.status
| {{ node.properties.status | undertitle }}
| {% endif %}
.node-details-meta-actions
.btn-browsetoggle(
title="Toggle between list/grid view",
@@ -30,11 +13,10 @@
data-placement="top")
i.pi-list
| {% if node.description %}
.node-details-description
| {{node.description}}
| {% endif %}
| {% if node.description %}
.node-details-description
| {{node.description}}
| {% endif %}
section.node-children.group