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

Tweaks to group listing

Browse Source 
Non-square thumbnails, always display icon type
This commit is contained in:
Pablo Vazquez 2017-03-17 16:53:05 +01:00 committed by Sybren A. Stüvel
parent 9f49140230
commit a000176db9
4 changed files with 45 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/styles/_config.sass
View File

@ -112,8 +112,9 @@ $node-type-comment: #66ccbd
$node-type-group: #c3a280
$node-type-post: #647bce
$list-node-children-item-width: 160px
$list-node-children-item-width: 200px
$list-node-children-item-width_list: 48px
$list-node-children-item-width_square: 160px
$z-index-base: 13
.container

77
src/styles/_project.sass
View File

@ -946,7 +946,6 @@ section.node-row
.node-title
color: $color-text-dark-primary
text-transform: capitalize
font:
family: $font-body
weight: 500
@ -1743,14 +1742,15 @@ section.node-children
.list-node-children-item-thumbnail
width: 100%
height: $list-node-children-item-width
+media-sm
img
width: 100%
.list-node-children-item-thumbnail-icon i
position: relative
bottom: 10px
bottom: 30px
.list-node-children-item-name
bottom: 26px
width: 100%
@ -1818,26 +1818,17 @@ section.node-children
.list-node-children-item
float: left
margin: 10px 15px 10px 0
margin: 10px 10px 10px 0
border-radius: 3px
color: $color-background-nav
background-color: darken(white, 6%)
box-shadow: 2px 2px 0 rgba(darken($color-background, 60%), .1)
color: $color-text-dark
box-shadow: 2px 2px 0 rgba(black, .1)
width: $list-node-children-item-width
overflow: hidden
text-overflow: ellipsis
&:hover
color: darken($color-primary, 20%)
& .list-node-children-item-name i
color: darken($color-primary, 20%)
& .list-node-children-item-thumbnail
& .list-node-children-item-thumbnail-icon
transform: translate(-50%, -50%) scale(1.1)
opacity: .9
text-decoration: none
&:active
opacity: .8
@ -1875,9 +1866,6 @@ section.node-children
.list-node-children-item-thumbnail
cursor: pointer
.list-node-children-item-thumbnail-icon
transform: translate(-50%, -50%) scale(1)
&:active
background-color: rgba($color-background, .5)
&:focus
@ -1960,20 +1948,30 @@ section.node-children
justify-content: center
width: $list-node-children-item-width
height: $list-node-children-item-width
background-color: darken($color-background, 5%)
height: $list-node-children-item-width / 1.69
background-color: darken($color-background, 30%)
position: relative
overflow: hidden
img
height: 100%
+position-center-translate
& .list-node-children-item-thumbnail-icon
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
font-size: 4em
top: 0
left: 0
right: 0
bottom: 0
font-size: 1.5em
color: white
text-shadow: 1px 1px 1px rgba(black, .2), 0 0 50px rgba(black, .3)
transition: transform .1s ease-in-out
text-shadow: 1px 1px 0 rgba(black, .2)
background-image: linear-gradient(10deg, darken($color-background, 55%) 0%, transparent 40%)
i
position: absolute
bottom: 5px
left: 5px
& .list-node-children-item-status
color: $color-text-light-primary
@ -1997,33 +1995,26 @@ section.node-children
display: flex
align-items: center
background-color: darken(white, 6%)
// background-color: darken(white, 6%)
color: $color-text-light
text-shadow: 1px 1px 0 rgba(black, .2)
background-color: darken($color-background, 55%)
padding:
top: 5px
bottom: 5px
font-size: .9em
padding: 5px 10px
font-size: .85em
width: $list-node-children-item-width
max-width: $list-node-children-item-width
i
color: $color-text-dark-secondary
padding:
left: 7px
right: 3px
font-size: .9em
span
padding:
left: 0
right: 3px
+text-overflow-ellipsis
&.texture, &.hdri
margin: 5px 10px 5px 0
position: relative
width: $list-node-children-item-width
height: $list-node-children-item-width
.list-node-children-item-thumbnail
height: $list-node-children-item-width
background-color: $color-background-nav
&:hover

61
src/templates/nodes/custom/group/view_embed.jade
View File

@ -12,8 +12,8 @@
section.node-details-container.group
.node-details-meta.preview
ul.node-details-meta-list
li.node-details-meta-list-item.date(title="Created {{ node._created | pretty_date }}")
| {{ node._updated | pretty_date }}
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 }}
@ -53,32 +53,6 @@
src="{{ child.picture.thumbnail('t', api=api)}} ")
| {% endif %}
.list-node-children-item-thumbnail-icon
| {# If there's a type available, otherwise show a folder icon #}
| {% if child.properties.content_type %}
| {# Show an icon if there's no thumbnail #}
| {% if not child.picture %}
| {% if child.properties.content_type == 'image' %}
i.dark.pi-image
| {% elif child.properties.content_type == 'video' %}
i.dark.pi-film-thick
| {% elif child.properties.content_type == 'file' %}
i.dark.pi-document
| {% endif %}
| {% else %}
| {% if child.properties.content_type == 'video' %}
i.pi-play
| {% endif %}
| {% endif %}
| {% else %}
| {% if not child.picture %}
i.dark.pi-folder
| {% endif %}
| {% endif %}
| {% if child.permissions.world %}
.list-node-children-item-ribbon
span free
@ -103,13 +77,7 @@
| {% endif %}
| {% endif %}
| {% if child._updated %}
span(title="Updated on {{ child._created }}") {{ child._updated | pretty_date }}
span.updated(title="Created on {{ child._updated }}") *
| {% else %}
span(title="Created on {{ child._created }}") {{ child._created | pretty_date }}
| {% endif %}
span(title="Created on {{ child._created }}") {{ child._created | pretty_date }}
| {# Browse type: Icon #}
a(href="{{ url_for_node(node=child) }}",
@ -120,16 +88,16 @@
| {% if child.picture %}
img(
src="{{ child.picture.thumbnail('b', api=api)}} ")
src="{{ child.picture.thumbnail('m', api=api)}} ")
| {% endif %}
.list-node-children-item-thumbnail-icon
| {% if child.properties.content_type %}
| {% if child.properties.content_type == 'video' %}
| {% if child.properties.content_type and child.properties.content_type == 'video' %}
i.pi-play
| {% endif %}
| {% elif child.properties.content_type and child.properties.content_type == 'image' %}
i.pi-image
| {% elif child.properties.content_type and child.properties.content_type == 'file' %}
i.pi-file-archive
| {% else %}
i.pi-folder
| {% endif %}
@ -144,17 +112,6 @@
| {% endif %}
.list-node-children-item-name
| {% if child.properties.content_type == 'video' %}
i.pi-film-thick
| {% elif child.properties.content_type == 'image' %}
i.pi-image
| {% elif child.properties.content_type == 'file' %}
i.pi-document
| {% else %}
i.pi-folder
| {% endif %}
span {{ child.name }}
| {% endfor %}

3
src/templates/nodes/custom/group_hdri/view_embed.jade
View File

@ -77,11 +77,8 @@
| {% endif %}
| {% endif %}
| {% if child.node_type == 'group_hdri' %}
.list-node-children-item-name
i.pi-folder-texture
span {{ child.name }}
| {% endif %}
| {% endif %}
| {% endfor %}