archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Asset: style and cleanup listing

Browse Source 
Font pillar aliases for asset icons
This commit is contained in:
Pablo Vazquez 2018-09-11 19:37:22 +02:00
parent 3ae16d7750
commit f87c7a25df
9 changed files with 121 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/scripts/tutti/1_project-navigation.js
View File

@ -66,10 +66,9 @@ function containerResizeY(window_height){
var project_container = document.getElementById('project-container');
var container_offset = project_container.offsetTop;
var nav_header_height = 40;
var container_height = window_height - container_offset.top;
var container_height_wheader = window_height - container_offset.top - nav_header_height;
var window_height_minus_nav = window_height - nav_header_height - 1; // 1 is border width
var container_height_wheader = window_height - container_offset;
var window_height_minus_nav = window_height - container_offset;
if ($(window).width() > 768) {
$('#project-container').css(
@ -77,13 +76,14 @@ function containerResizeY(window_height){
'height': window_height_minus_nav + 'px'}
);
$('#project_nav-container, #project_tree, .project_split').css(
$('#project_nav-container, #project_tree').css(
{'max-height': (window_height_minus_nav) + 'px',
'height': (window_height_minus_nav) + 'px'}
);
if (container_height > parseInt($('#project-container').css("min-height"))) {
if (typeof projectTree !== "undefined"){
$(projectTree).css(
{'max-height': container_height_wheader + 'px',
'height': container_height_wheader + 'px'}

58
src/styles/_project.sass
View File

@ -24,6 +24,7 @@ body.blog
flex-direction: row
min-height: 300px
position: relative
overflow-y: auto
z-index: $z-index-base
+media-xs
@ -216,9 +217,6 @@ ul.project-edit-tools
color: $primary
text-decoration: none
i
padding-right: 10px
/* Icons per asset type. */
i
&.icon-group:after
@ -520,11 +518,11 @@ section.node-preview
align-items: center
background-color: black
color: $color-text-light-primary
display: flex
// display: flex
justify-content: center
max-height: 500px
min-height: 200px
overflow: hidden
// min-height: 200px
// overflow: hidden
iframe
width: 100%
@ -545,6 +543,8 @@ section.node-preview
&.image
cursor: zoom-in
display: flex
overflow: hidden
&.video
background-color: black
@ -671,26 +671,16 @@ section.node-details-container
+node-details-description
.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
color: $color-text-dark-secondary
display: flex
padding-left: 10px
margin-left: 10px
padding-left: 5px
margin-left: 5px
&:first-child
margin-left: 0
@ -765,33 +755,19 @@ section.node-details-container
color: $color-text-dark
.node-details-license
align-items: center
border-bottom: thin solid $color-background
color: $color-text-dark
display: flex
padding: 5px 20px
font-size: $font-size-sm
color: $color-text-dark-secondary
&:hover
color: $color-text-dark
color: $primary
span.type
i
color: $color-text-dark-primary
font-size: 1.2rem
margin-left: -5px
padding-right: 10px
i
font-size: 1.2rem
margin-left: -15px
&:after
top: 2px
left: -22px
position: relative
&:before
top: 2px
position: relative
&:after
left: -22px
position: relative
top: 1px
span
text-transform: uppercase
section.node-details-container
&.storage

22
src/styles/components/_card.sass
View File

@ -29,21 +29,11 @@
.card-body
@extend .px-0
.card-stretch
.card-body
@extend .d-flex
@extend .flex-column
.card-text
@extend .mt-auto
.card-image-fade
.card-img-top
opacity: .9
&:hover
.card-img-top
opacity: 1
opacity: .9
.card.asset
@ -71,14 +61,22 @@
background-size: cover
background-position: center
.progress
height: 4px
position: absolute
top: -4px
width: 100%
&.group
.card-img-top
&.card-icon
display: flex
align-items: center
justify-content: center
font-size: 2em
i
opacity: .2
.card-label
background-color: rgba($black, .5)

20
src/styles/font-pillar.sass
View File

@ -39,12 +39,10 @@ $pillar-font-path: "../font" !default
display: inline-block
text-decoration: inherit
width: 1em
margin-right: .2em
text-align: center
font-variant: normal
text-transform: none
line-height: 1em
margin-left: .2em
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
position: relative
@ -55,10 +53,28 @@ $pillar-font-path: "../font" !default
.pi-svnman:before
content: '\f1c0'
/* Assets */
.pi-group
@extend .pi-folder
.pi-video
@extend .pi-film-thick
.pi-file
@extend .pi-file-archive
.pi-asset
@extend .pi-file-archive
.pi-group_texture
@extend .pi-folder-texture
.pi-post
@extend .pi-newspaper
.pi-page
@extend .pi-document
/* License */
.pi-license-cc-zero:before
content: '\e85a'
.pi-license-cc-sa:before
content: '\e858'
top: 1px
.pi-license-cc-nd:before
content: '\e859'
.pi-license-cc-nc:before

2
src/templates/_macros/_add_new_menu.pug
View File

@ -14,7 +14,7 @@ li(class="button-{{ node_type['name'] }}")
data-node-type-name="{{ node_type['name'] }}",
data-toggle="tooltip",
data-placement="left")
i.pi(class="icon-{{ node_type['name'] }}")
i.pi(class="pi-{{ node_type['name'] }}")
| {% if node_type_name == 'group_texture' %}
| Texture Folder
| {% elif node_type_name == 'group_hdri' %}

68
src/templates/_macros/_asset_list_item.pug
View File

@ -4,38 +4,50 @@ include ../mixins/components
| {% 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 %}",
a.card.asset.card-image-fade.pr-0.mx-0.mb-2(
class="js-item-open {% if asset.permissions.world %}free{% endif %}",
data-node_id="{{ asset._id }}",
title="{{ asset.name }}")
title="{{ asset.name }}",
href='{{ url_for_node(node=asset) }}')
.embed-responsive.embed-responsive-16by9
| {% if asset.picture %}
.card-img-top.embed-responsive-item(style="background-image: url({{ asset.picture.thumbnail('m', api=api) }})")
| {% else %}
.card-img-top.card-icon.embed-responsive-item
i(class="pi-{{ node_type }}")
| {% endif %}
| {% if asset.properties.content_type == 'video' %}
.card-body.py-2.d-flex.flex-column
.card-title.mb-1.font-weight-bold
| {{ asset.name }}
| {% 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 %}
ul.card-text.list-unstyled.d-flex.text-black-50.mt-auto
li.pr-2 {{ node_type | undertitle }}
li {{ asset._created | pretty_date }}
| {% 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 #}
| {% 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 %}

23
src/templates/mixins/components.pug
View File

@ -68,25 +68,6 @@ mixin card()
p No card content defined.
mixin list-asset(name, url, image, type, date)
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 + ")")
else
.card-img-top
.card-icon
i.pi-blender
if block
block
.card-body.py-2
if name
.card-title.mb-1.font-weight-bold
=name
if block
block
ul.card-text.list-unstyled.d-flex.text-black-50
if type
li.pr-2=type
if date
li=date

32
src/templates/nodes/view_base.pug
View File

@ -26,24 +26,20 @@
| {% endif %}
| {# LICENSE #}
section
| {% 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 %}
| {# DETAILS #}
section.node-details-meta
ul
section.node-details-meta.px-4.py-2
ul.list-unstyled.m-0
| {% if node.properties.license_type %}
li
a.node-details-license(
href="https://creativecommons.org/licenses/",
target="_blank",
title="{{ node.properties.license_type }} {% if node.properties.license_notes %}{{ node.properties.license_notes }}{% endif %}",
data-toggle="tooltip",
data-placement="top")
i(class="pi-license-{{ node.properties.license_type }}")
| {% endif %}
| {% if node.has_method('PUT') and (node.properties.status != 'published') %}
li(class="status-{{ node.properties.status }}")
| {{ node.properties.status | undertitle }}
@ -63,6 +59,8 @@
| Shared
| {% endif %}
li.left-side
| {% if node.file %}

27
src/templates/projects/view_embed.pug
View File

@ -4,19 +4,20 @@ include ../mixins/components
| {% block body %}
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
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
.embed-responsive.embed-responsive-16by9
video#videoplayer.video-js.vjs-fluid.embed-responsive-item(
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
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
| {% elif project.picture_header %}
a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")