diff --git a/src/styles/_apps_base.sass b/src/styles/_apps_base.sass index 308be047..7216faa8 100644 --- a/src/styles/_apps_base.sass +++ b/src/styles/_apps_base.sass @@ -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 diff --git a/src/styles/_comments.sass b/src/styles/_comments.sass index c9b16d8b..9b3f850b 100644 --- a/src/styles/_comments.sass +++ b/src/styles/_comments.sass @@ -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 diff --git a/src/styles/_project.sass b/src/styles/_project.sass index 28dbe187..156d3965 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -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 diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index b720fd86..ac1bf4e5 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -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 diff --git a/src/templates/_macros/_navigation.pug b/src/templates/_macros/_navigation.pug index ac60fd46..866f78ca 100644 --- a/src/templates/_macros/_navigation.pug +++ b/src/templates/_macros/_navigation.pug @@ -23,5 +23,4 @@ section#nav-tabs | My Organizations | {% endif %} - | {% endmacro %} diff --git a/src/templates/nodes/custom/_node_details.pug b/src/templates/nodes/custom/_node_details.pug new file mode 100644 index 00000000..719f8ef5 --- /dev/null +++ b/src/templates/nodes/custom/_node_details.pug @@ -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 {{ node.properties.license_type }} + | {% if node.properties.license_notes %} + | — {{ node.properties.license_notes }} + | {% endif %} +| {% endif %} diff --git a/src/templates/nodes/custom/asset/file/view_embed.pug b/src/templates/nodes/custom/asset/file/view_embed.pug index 4e958191..b4a0aab6 100644 --- a/src/templates/nodes/custom/asset/file/view_embed.pug +++ b/src/templates/nodes/custom/asset/file/view_embed.pug @@ -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 diff --git a/src/templates/nodes/custom/asset/image/view_embed.pug b/src/templates/nodes/custom/asset/image/view_embed.pug index 9c49772c..166166cb 100644 --- a/src/templates/nodes/custom/asset/image/view_embed.pug +++ b/src/templates/nodes/custom/asset/image/view_embed.pug @@ -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 diff --git a/src/templates/nodes/custom/asset/video/view_embed.pug b/src/templates/nodes/custom/asset/video/view_embed.pug index 8c17eea1..d1b4ced1 100644 --- a/src/templates/nodes/custom/asset/video/view_embed.pug +++ b/src/templates/nodes/custom/asset/video/view_embed.pug @@ -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 diff --git a/src/templates/nodes/custom/group/view_embed.pug b/src/templates/nodes/custom/group/view_embed.pug index cf06be31..1507e8fd 100644 --- a/src/templates/nodes/custom/group/view_embed.pug +++ b/src/templates/nodes/custom/group/view_embed.pug @@ -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