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

Minor tweaks to homepage listing

Browse Source 
Thumbnails are now slightly larger (22px wider), and did some rearrangement
This commit is contained in:
Pablo Vazquez 2017-03-17 18:03:06 +01:00 committed by Sybren A. Stüvel
parent a000176db9
commit 6d1f81b26a
2 changed files with 97 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/styles/_homepage.sass
View File

@ -162,13 +162,14 @@
padding: 15px 0 padding: 15px 0
list-style: none list-style: none
$activity-stream-thumbnail-size: 92px
li.activity-stream__list-item li.activity-stream__list-item
position: relative position: relative
display: flex display: flex
margin: 0 10px 10px margin: 0 10px 5px
background-color: white background-color: white
border-radius: 3px 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 &.active .activity-stream__list-details .title
color: $color-primary color: $color-primary
@ -206,37 +207,33 @@
.activity-stream__list-thumbnail .activity-stream__list-thumbnail
background: transparent background: transparent
border-color: $node-type-comment border-color: $node-type-comment
width: 35px
height: auto
min-width: 35px
min-height: auto
color: $node-type-comment color: $node-type-comment
font-size: 1.25em font-size: 1.2em
box-shadow: none
i i
position: absolute +position-center-translate
left: 22px left: 22px
top: 17px top: 19px
.activity-stream__list-details .activity-stream__list-details
padding: 0
.title .title
color: $color-text-dark color: $color-text-dark
padding: 5px 10px 2px 10px padding: 7px 10px 2px 10px
font-size: 1em font-size: 1em
margin: 0 margin: 0
ul.meta ul.meta
padding: 0 10px 5px 10px padding: 0 10px 7px 10px
margin: 0
li.where-parent:before li
&.where-parent:before
content: '\e83a' content: '\e83a'
font-family: 'pillar-font' font-family: 'pillar-font'
li.when &.what:before
float: right display: none
&:before
content: ''
&.post &.post
.activity-stream__list-thumbnail .activity-stream__list-thumbnail
@ -262,36 +259,60 @@
text-decoration: underline text-decoration: underline
cursor: pointer 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 .activity-stream__list-thumbnail
position: relative position: relative
display: flex display: flex
justify-content: center justify-content: center
align-items: center align-items: center
overflow: hidden overflow: hidden
width: $activity-stream-thumbnail-size * 1.69 width: 35px
min-width: $activity-stream-thumbnail-size * 1.69 height: auto
min-height: $activity-stream-thumbnail-size min-width: 35px
font-size: 1.8em min-height: auto
color: rgba(white, .5)
background-color: $color-background-light
border-top-left-radius: 3px
border-bottom-left-radius: 3px
+media-xs +media-xs
display: none display: none
&.image
background-color: $node-type-asset_image &.image i
&.file color: $node-type-asset_image
background-color: $node-type-asset_file &.file i
&.video color: $node-type-asset_file
background-color: $node-type-asset_video &.video i
i.pi-film-thick color: $node-type-asset_video
font-size: .8em
i i
+position-center-translate +position-center-translate
left: 23px
top: 21px
font-size: 1.1em
img img
max-height: $activity-stream-thumbnail-size max-height: $activity-stream-thumbnail-size
+position-center-translate +position-center-translate
@ -299,12 +320,13 @@
.activity-stream__list-details .activity-stream__list-details
display: flex display: flex
flex-direction: column flex-direction: column
justify-content: center justify-content: space-around
flex: 1 flex: 1
overflow: hidden overflow: hidden
position: relative position: relative
max-width: 100% max-width: 100%
margin-right: auto margin-right: auto
padding: 10px 0
+media-xs +media-xs
margin-left: 0 margin-left: 0
@ -322,7 +344,7 @@
.title .title
display: inline-block display: inline-block
padding: 5px 15px padding: 0 10px
color: $color-text-dark color: $color-text-dark
font-size: 1.1em font-size: 1.1em
@ -334,22 +356,21 @@
ul.meta ul.meta
+list-meta +list-meta
padding: 0 10px 7px 15px padding: 5px 10px 0 10px
font-size: .85em font-size: .85em
color: $color-text-dark-secondary color: $color-text-dark-secondary
display: flex display: flex
white-space: nowrap white-space: nowrap
&.extra
margin-top: auto
li li
padding-left: 10px padding-left: 10px
&:before &:before
left: -5px left: -5px
&.where-project &.where-project
+text-overflow-ellipsis +text-overflow-ellipsis
&.when
margin-left: auto
&:before
display: none
ul#activity-stream__filters ul#activity-stream__filters
margin: 0 margin: 0

31
src/templates/homepage.jade
View File

@ -49,18 +49,19 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
ul#activity-stream__list ul#activity-stream__list
| {% for n in activity_stream %} | {% for n in activity_stream %}
li.activity-stream__list-item( 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) }}") data-url="{{ url_for_node(node=n) }}")
a.activity-stream__list-thumbnail( 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) }}") href="{{ url_for_node(node=n) }}")
| {% if n.picture %} | {% if n.picture %}
img(src="{{ n.picture.thumbnail('m', api=api) }}") img(src="{{ n.picture.thumbnail('m', api=api) }}")
| {% else %} | {% endif %}
.activity-stream__list-thumbnail-icon
| {% if n.node_type == 'asset' %} | {% if n.node_type == 'asset' %}
| {% if n.properties.content_type == 'video' %} | {% if n.properties.content_type == 'video' %}
i.pi-film-thick i.pi-play
| {% elif n.properties.content_type == 'image' %} | {% elif n.properties.content_type == 'image' %}
i.pi-picture i.pi-picture
| {% elif n.properties.content_type == 'file' %} | {% elif n.properties.content_type == 'file' %}
@ -68,12 +69,10 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
| {% else %} | {% else %}
i.pi-folder i.pi-folder
| {% endif %} | {% endif %}
| {% elif n.node_type == 'post' %}
i.pi-newspaper
| {% elif n.node_type == 'comment' %} | {% elif n.node_type == 'comment' %}
i.pi-comment i.pi-comment
| {% endif %} | {% endif %}
| {% endif %}
.activity-stream__list-details .activity-stream__list-details
a.title(href="{{ url_for_node(node=n) }}") 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 span free
| {% endif %} | {% endif %}
ul.meta ul.meta
li.what | {% if n.node_type == 'comment' or not n.picture %}
| {% if n.node_type == 'asset' %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %} li.when
| {% if n.node_type != 'post' %} a(href="{{ url_for_node(node=n) }}", title="{{ n._created }}") {{ n._created | pretty_date_time }}
li.who {{ n.user.full_name }} li.who {{ n.user.full_name }}
| {% endif %} | {% endif %}
| {% if n.attached_to %} | {% if n.attached_to %}
li.where-parent li.where-parent
a(href="{{ url_for_node(node_id=n.attached_to._id) }}") {{ n.attached_to.name }} a(href="{{ url_for_node(node_id=n.attached_to._id) }}") {{ n.attached_to.name }}
| {% endif %} | {% endif %}
li.where-project li.where-project
a.project(href="{{ url_for('projects.view', project_url=n.project.url) }}") {{ n.project.name }} 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 li.when
a(href="{{ url_for_node(node=n) }}", title="{{ n._created }}") {{ n._created | pretty_date_time }} a(href="{{ url_for_node(node=n) }}", title="{{ n._created }}") {{ n._created | pretty_date_time }}
li.who {{ n.user.full_name }}
| {% endif %}
| {% endfor %} | {% endfor %}
li.activity-stream__list-item.empty#activity-stream__empty li.activity-stream__list-item.empty#activity-stream__empty