From 6d1f81b26a320bb567e8b7ff61c56d982e8d2580 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 17 Mar 2017 18:03:06 +0100 Subject: [PATCH] Minor tweaks to homepage listing Thumbnails are now slightly larger (22px wider), and did some rearrangement --- src/styles/_homepage.sass | 107 +++++++++++++++++++++--------------- src/templates/homepage.jade | 55 ++++++++++-------- 2 files changed, 97 insertions(+), 65 deletions(-) diff --git a/src/styles/_homepage.sass b/src/styles/_homepage.sass index ddada908..24eef1e9 100644 --- a/src/styles/_homepage.sass +++ b/src/styles/_homepage.sass @@ -162,13 +162,14 @@ padding: 15px 0 list-style: none + $activity-stream-thumbnail-size: 92px li.activity-stream__list-item position: relative display: flex - margin: 0 10px 10px + margin: 0 10px 5px background-color: white border-radius: 3px - box-shadow: 0 0 0 1px rgba(black, .05), 0 2px 5px rgba(black, .1) + box-shadow: 0 0 0 1px rgba(black, .05), 0 2px 2px rgba(black, .1) &.active .activity-stream__list-details .title color: $color-primary @@ -206,37 +207,33 @@ .activity-stream__list-thumbnail background: transparent border-color: $node-type-comment - width: 35px - height: auto - min-width: 35px - min-height: auto color: $node-type-comment - font-size: 1.25em + font-size: 1.2em + box-shadow: none i - position: absolute + +position-center-translate left: 22px - top: 17px + top: 19px .activity-stream__list-details + padding: 0 .title color: $color-text-dark - padding: 5px 10px 2px 10px + padding: 7px 10px 2px 10px font-size: 1em margin: 0 ul.meta - padding: 0 10px 5px 10px - margin: 0 + padding: 0 10px 7px 10px - li.where-parent:before - content: '\e83a' - font-family: 'pillar-font' + li + &.where-parent:before + content: '\e83a' + font-family: 'pillar-font' - li.when - float: right - &:before - content: '' + &.what:before + display: none &.post .activity-stream__list-thumbnail @@ -262,36 +259,60 @@ text-decoration: underline cursor: pointer - $activity-stream-thumbnail-size: 75px + &.with-picture + min-height: $activity-stream-thumbnail-size + + .activity-stream__list-thumbnail + background-color: black + width: $activity-stream-thumbnail-size * 1.69 + min-width: $activity-stream-thumbnail-size * 1.69 + + .activity-stream__list-thumbnail-icon + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + font-size: 1.3em + text-shadow: 1px 1px 0 rgba(black, .2) + background-image: linear-gradient(10deg, rgba(black, .5) 0%, transparent 40%) + + i + position: absolute + bottom: -8px + left: 20px + top: initial + right: initial + color: white + .activity-stream__list-thumbnail position: relative display: flex justify-content: center align-items: center overflow: hidden - width: $activity-stream-thumbnail-size * 1.69 - min-width: $activity-stream-thumbnail-size * 1.69 - min-height: $activity-stream-thumbnail-size - font-size: 1.8em - color: rgba(white, .5) - background-color: $color-background-light - border-top-left-radius: 3px - border-bottom-left-radius: 3px + width: 35px + height: auto + min-width: 35px + min-height: auto +media-xs display: none - &.image - background-color: $node-type-asset_image - &.file - background-color: $node-type-asset_file - &.video - background-color: $node-type-asset_video - i.pi-film-thick - font-size: .8em + + &.image i + color: $node-type-asset_image + &.file i + color: $node-type-asset_file + &.video i + color: $node-type-asset_video i +position-center-translate + left: 23px + top: 21px + font-size: 1.1em + img max-height: $activity-stream-thumbnail-size +position-center-translate @@ -299,12 +320,13 @@ .activity-stream__list-details display: flex flex-direction: column - justify-content: center + justify-content: space-around flex: 1 overflow: hidden position: relative max-width: 100% margin-right: auto + padding: 10px 0 +media-xs margin-left: 0 @@ -322,7 +344,7 @@ .title display: inline-block - padding: 5px 15px + padding: 0 10px color: $color-text-dark font-size: 1.1em @@ -334,22 +356,21 @@ ul.meta +list-meta - padding: 0 10px 7px 15px + padding: 5px 10px 0 10px font-size: .85em color: $color-text-dark-secondary display: flex white-space: nowrap + &.extra + margin-top: auto + li padding-left: 10px &:before left: -5px &.where-project +text-overflow-ellipsis - &.when - margin-left: auto - &:before - display: none ul#activity-stream__filters margin: 0 diff --git a/src/templates/homepage.jade b/src/templates/homepage.jade index aa2ebebd..4025127e 100644 --- a/src/templates/homepage.jade +++ b/src/templates/homepage.jade @@ -49,31 +49,30 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ ul#activity-stream__list | {% for n in activity_stream %} li.activity-stream__list-item( - class="{{ n.node_type }} {{ n.properties.content_type }}", + class="{{ n.node_type }} {{ n.properties.content_type }} {% if n.picture %}with-picture{% endif %}", data-url="{{ url_for_node(node=n) }}") a.activity-stream__list-thumbnail( - class="{{ n.properties.content_type }} {% if n.picture %}with-picture{% endif %}", + class="{{ n.properties.content_type }}", href="{{ url_for_node(node=n) }}") | {% if n.picture %} img(src="{{ n.picture.thumbnail('m', api=api) }}") - | {% else %} + | {% endif %} + + .activity-stream__list-thumbnail-icon + | {% if n.node_type == 'asset' %} + | {% if n.properties.content_type == 'video' %} + i.pi-play + | {% elif n.properties.content_type == 'image' %} + i.pi-picture + | {% elif n.properties.content_type == 'file' %} + i.pi-file-archive + | {% else %} + i.pi-folder + | {% endif %} + | {% elif n.node_type == 'comment' %} + i.pi-comment + | {% endif %} - | {% if n.node_type == 'asset' %} - | {% if n.properties.content_type == 'video' %} - i.pi-film-thick - | {% elif n.properties.content_type == 'image' %} - i.pi-picture - | {% elif n.properties.content_type == 'file' %} - i.pi-file-archive - | {% else %} - i.pi-folder - | {% endif %} - | {% elif n.node_type == 'post' %} - i.pi-newspaper - | {% elif n.node_type == 'comment' %} - i.pi-comment - | {% endif %} - | {% endif %} .activity-stream__list-details a.title(href="{{ url_for_node(node=n) }}") @@ -87,19 +86,31 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ span free | {% endif %} ul.meta - li.what - | {% if n.node_type == 'asset' %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %} - | {% if n.node_type != 'post' %} + | {% if n.node_type == 'comment' or not n.picture %} + li.when + a(href="{{ url_for_node(node=n) }}", title="{{ n._created }}") {{ n._created | pretty_date_time }} li.who {{ n.user.full_name }} | {% endif %} + | {% if n.attached_to %} li.where-parent a(href="{{ url_for_node(node_id=n.attached_to._id) }}") {{ n.attached_to.name }} | {% endif %} li.where-project a.project(href="{{ url_for('projects.view', project_url=n.project.url) }}") {{ n.project.name }} + li.what + | {% if n.node_type == 'asset' %} + | {{ n.properties.content_type | undertitle }} + | {% elif n.node_type != 'comment' %} + | {{ n.node_type | undertitle }} + | {% endif %} + + | {% if n.picture %} + ul.meta.extra li.when a(href="{{ url_for_node(node=n) }}", title="{{ n._created }}") {{ n._created | pretty_date_time }} + li.who {{ n.user.full_name }} + | {% endif %} | {% endfor %} li.activity-stream__list-item.empty#activity-stream__empty