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

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

View File

@ -1,12 +1,12 @@
::-webkit-scrollbar
width: 9px
height: 9px
width: 5px
height: 5px
::-webkit-scrollbar-track
background-color: transparent
::-webkit-scrollbar-thumb
background-color: rgba($color-text-dark-hint, .6)
background-color: darken($color-background, 40%)
::placeholder
color: $color-text-dark-hint

View File

@ -1,9 +1,7 @@
$comments-width-max: 710px
#comments-container
margin-top: 15px
position: relative
border-top: 1px solid $color-background
min-height: 170px
&.texture

View File

@ -9,7 +9,7 @@ body.workshops
#project-container
display: flex
flex-direction: row
min-height: 800px
min-height: 300px
position: relative
z-index: $z-index-base
@ -123,10 +123,8 @@ body.workshops
&:after
content: ''
border: 7px solid $color-background
border-left-color: transparent
border-top-color: transparent
border-bottom-color: transparent
border: 7px solid transparent
border-right-color: $project-sidebar-background
display: block
position: absolute
top: 50%
@ -186,14 +184,14 @@ body.workshops
+media-xs
width: initial
/* Header with name, breadcrumbs and node edit tools */
/* Header with name and node edit tools */
#project_nav-header,
#project_context-header
display: flex
align-items: center
position: relative
color: white
display: flex
position: relative
#project_context-header
z-index: $z-index-base + 3
@ -582,33 +580,32 @@ ul.project_nav-edit-list
margin: $project_header-height 0 0 0
li
background-color: $color-background
border-bottom: 1px solid $color-background-dark
font:
size: .9em
weight: 400
family: $font-body
text-transform: uppercase
border-bottom: thin solid lighten($color-background-nav, 8%)
color: $color-text-light-primary
background-color: $color-background-nav-light
color: $color-text-dark
position: relative
&:hover
color: $color-text-light
cursor: pointer
background-color: lighten($color-background-nav, 5%)
background-color: $color-background-light
a
padding: 10px 15px
display: inline-block
width: 100%
text-decoration: none
color: $color-text-light-primary
color: $color-text-dark
i
padding-right: 15px
&.active
border-right: 5px solid $color-primary
background-color: lighten($color-background-nav, 5%)
background-color: white
a
color: $color-primary-dark
.project_nav-toggle-btn
position: absolute
@ -656,7 +653,7 @@ ul.project_nav-edit-list
display: block !important
#comments-embed
padding: 5px 20px 20px 20px
padding: 0 20px 20px 20px
/* Project context on the right of the navigation */
/* Contains #project_context */
@ -674,11 +671,11 @@ ul.project_nav-edit-list
content: '\e827'
.project_split
background-color: $color-background-nav
background-color: $project-sidebar-background
cursor: e-resize
right: 0
left: 8px
width: 10px
width: 5px
#project_nav
width: 5px
@ -735,9 +732,8 @@ ul.project_nav-edit-list
=project-node-title
font:
family: $font-body
size: 2em
weight: 300
color: lighten($color-background-nav, 15%)
size: 1.5em
color: $color-text-dark-primary
$node-preview-max-height-sm: 300px
$node-preview-max-height-md: 500px
@ -1049,56 +1045,12 @@ section.node-preview
margin-right: 10px
&.group, &.project
background-color: $color-background
@include overlay(rgba($color-background, .3), 0%, transparent, 100%)
position: relative
overflow: hidden
.header
max-width: 100%
width: 100%
.backdrop
width: 105%
left: -5px
position: relative
z-index: 0
// We can't have nice things because of Edge
// filter: blur(10px)
.overlay
@include overlay(rgba($color-background-nav, .1), 0%, rgba(white, .6), 100%)
width: 100%
height: 100%
z-index: 1
.node-title
position: absolute
z-index: 2
color: lighten($color-background-nav, 15%)
text-shadow: 1px 1px 0 rgba(white, .2)
left: 20px
padding: 20px 20px 20px 0
font:
size: 2em
weight: 300
.author
color: $color-text-dark-secondary
&.group
height: 80px
.node-title
max-width: 80%
.backdrop
opacity: .25
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
align-items: center
display: flex
padding: 20px
section.node-details-container
@ -1114,29 +1066,23 @@ body.about
max-width: $screen-lg / 1.4
margin: 0 auto
.node-title
+project-node-title
section.node-details-container,
section.node-preview.group
position: relative
.node-details-header
width: 55%
max-width: 55%
float: left
align-items: center
display: flex
align-items: baseline
min-height: 50px
padding: 20px 20px 5px 20px
padding: 15px 20px
+media-xs
font-size: .7em
width: 100%
max-width: 100%
.node-title
+project-node-title
color: $color-text-dark-primary
.node-title-details
margin-left: auto
line-height: 1em
@ -1156,26 +1102,8 @@ section.node-preview.group
border-radius: 3px
cursor: default
.node-details-description
+node-details-description
&.group, &.project
.node-details-header
max-width: 35%
float: right
.node-details-description
max-width: 75%
padding: 0
&.group
.node-details-description
padding-top: 15px
.node-details-meta.preview
top: -45px
bottom: initial
.node-details-meta-list
display: inline-block
@ -1199,61 +1127,6 @@ section.node-preview.group
.node-details-title
padding: 10px 20px 0 20px
.node-details-meta
font-weight: 400
padding: 15px 20px 25px 20px
span.updated
color: $color-text-dark-hint
font-size: .8em
float: right
&.preview
padding: 0
color: $color-text-light-primary
position: absolute
right: 10px
bottom: 20px
z-index: 1
ul.node-details-meta-list
li.node-details-meta-list-item
&.date
&:before
content: ''
&.author
color: lighten($color-background-nav, 25%)
&.status
color: $color-text-dark
&.footer
+clearfix
&.header
float: left
width: 45%
max-width: 45%
padding:
top: 25px
left: 0
+media-xs
width: 100%
max-width: 100%
padding-top: 15px
ul.node-details-meta-list
> li:first-child
margin-left: auto
> li:not(:last-child)
margin-right: 10px
&.license
+clearfix
padding-bottom: 5px
color: $color-text-dark-secondary
ul.node-details-meta-list
display: flex
align-items: center
@ -1415,57 +1288,161 @@ section.node-preview.group
&.texture.download
width: 100%
/* Download dropdown options */
ul.dropdown-menu
width: auto
min-width: 240px
padding: 0
margin: 0
top: initial
left: initial
right: 0
bottom: 35px
border: thin solid rgba(darken($color-background, 5%), .3)
border-top-left-radius: 3px
border-top-right-radius: 3px
border-bottom-left-radius: 0
border-bottom-right-radius: 0
li
padding: 0
text-align: right
clear: both
display: flex
align-items: center
a
padding: 10px 15px
width: 100%
&:hover
color: $color-primary
background-color: transparent
span
&.length
color: lighten($color-primary, 10%)
span
&.length
float: left
color: $color-text-dark-hint
padding-right: 15px
&.format
text-transform: uppercase
align-self: flex-end
margin-left: auto
&.size
display: inline-block
padding-left: 15px
&.open
button
box-shadow: none
.node-details-description
+node-details-description
padding-left: 20px
padding-right: 20px
.node-details-meta
background-color: $color-background-light
border-bottom: thin solid $color-background
display: flex
flex-direction: column
font-weight: lighter
padding: 10px 20px
> ul
align-items: center
display: flex
list-style-type: none
margin: 0
padding: 0
> li
align-items: baseline
display: flex
padding-left: 10px
margin-left: 10px
&:first-child
margin-left: 0
padding-left: 0
&.status-pending
color: $color-danger
&.public
color: $color-success
&.download
position: relative
button
+button($color-success, 3px)
.dropdown-toggle
padding-right: 0
i.icon-dropdown-menu
padding-left: 10px
/* Download dropdown options */
ul.dropdown-menu
width: auto
min-width: 240px
padding: 0
margin: 0
top: initial
left: initial
right: 0
bottom: 35px
border: thin solid rgba(darken($color-background, 5%), .3)
border-top-left-radius: 3px
border-top-right-radius: 3px
border-bottom-left-radius: 0
border-bottom-right-radius: 0
li
padding: 0
text-align: right
clear: both
display: flex
align-items: center
a
padding: 10px 15px
width: 100%
&:hover
color: $color-primary
background-color: transparent
span
&.length
color: lighten($color-primary, 10%)
span
&.length
float: left
color: $color-text-dark-hint
padding-right: 15px
&.format
text-transform: uppercase
align-self: flex-end
margin-left: auto
&.size
display: inline-block
padding-left: 15px
&.dim
color: $color-text-dark-secondary
&.left-side
margin-left: auto
&.preview
padding: 0
color: $color-text-light-primary
position: absolute
right: 10px
bottom: 20px
z-index: 1
ul.node-details-meta-list
li.node-details-meta-list-item
&.date
&:before
content: ''
&.author
color: lighten($color-background-nav, 25%)
&.status
color: $color-text-dark
.node-details-license
align-items: center
border-bottom: thin solid $color-background
color: $color-text-dark
display: flex
font-weight: lighter
padding: 10px 20px
&:hover
color: $color-text-dark
span.type
i
color: $color-text-dark-primary
font-size: 1.8rem
margin-left: -5px
padding-right: 10px
&:after
top: 2px
left: -22px
position: relative
&:before
top: 2px
position: relative
span
text-transform: uppercase
section.node-details-container
&.storage
.node-details-meta

View File

@ -351,7 +351,7 @@
=node-details-description
padding: 15px 0 25px 0
padding-bottom: 20px
color: darken($color-text-dark, 5%)
font:
family: $font-body
@ -376,9 +376,6 @@
color: $color-primary
p
padding:
left: 20px
right: 20px
margin-bottom: 20px
line-height: 1.5em
word-wrap: break-word

View File

@ -23,5 +23,4 @@ section#nav-tabs
| My Organizations
| {% endif %}
| {% endmacro %}

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