diff --git a/src/styles/_config.sass b/src/styles/_config.sass index 8caeb448..ab14b408 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -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 diff --git a/src/styles/_project.sass b/src/styles/_project.sass index b2ef0dec..665f8d60 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -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 diff --git a/src/templates/nodes/custom/group/view_embed.jade b/src/templates/nodes/custom/group/view_embed.jade index 846d95d2..dcb4a170 100644 --- a/src/templates/nodes/custom/group/view_embed.jade +++ b/src/templates/nodes/custom/group/view_embed.jade @@ -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 %} diff --git a/src/templates/nodes/custom/group_hdri/view_embed.jade b/src/templates/nodes/custom/group_hdri/view_embed.jade index 1ef9b951..bbf6bcac 100644 --- a/src/templates/nodes/custom/group_hdri/view_embed.jade +++ b/src/templates/nodes/custom/group_hdri/view_embed.jade @@ -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 %}