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
parent c52bfd2236
commit ba5923044a
2 changed files with 97 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/styles/_homepage.sass
View File

@ -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

55
src/templates/homepage.jade
View File

@ -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