List style for homepage activities

src/styles/_homepage.sass

@@ -20,14 +20,14 @@ $node-type-post: #647bce
 	section#main
 		+container-box
 		margin: 20px auto
-		width: 64%
+		width: 52%
 
 		+media-xs
 			width: 100%
 			border-radius: 0
 
 	section#side
-		width: 33%
+		width: 46%
 		flex-direction: column
 		margin-right: auto
 
@@ -158,7 +158,7 @@ $node-type-post: #647bce
 		h3
 			padding:
 				top: 25px
-				left: 20px
+				left: 15px
 				bottom: 0
 			span
 				padding-left: 5px
@@ -170,21 +170,20 @@ $node-type-post: #647bce
 			list-style: none
 
 			li.activity-stream__list-item
+				position: relative
 				display: flex
-				align-items: center
 				margin: 0 10px 10px
-				+clearfix
+				background-color: white
+				border-radius: 3px
+				box-shadow: 0 0 0 1px rgba(black, .05), 0 2px 5px rgba(black, .1)
+
+				&.post .activity-stream__list-details .title
+					color: darken($node-type-post, 15%)
 
 				&:hover
 					.title
 						text-decoration: underline
-
+					&.video
-				&.asset
-					.activity-stream__list-details
-						.title
-							font-size: 1.2em
-
-					&.video .activity-stream__list-details
 						border-color: $node-type-asset_video
 						a.image
 							&:hover
@@ -204,18 +203,38 @@ $node-type-post: #647bce
 								font-size: 3em
 								transition: font-size 100ms ease-in-out
 
-					&.image .activity-stream__list-details
+					&.image
 						border-color: $node-type-asset_image
-					&.file .activity-stream__list-details
+
+					&.file
 						border-color: $node-type-asset_file
 
 				&.comment
-					.activity-stream__list-details
+					.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.4em
+
+						i
+							position: absolute
+							left: 21px
+							top: 18px
+
+					.activity-stream__list-details
 						.title
 							color: $color-text-dark
-							padding: 10px 15px 5px 15px
+							padding: 5px 10px 2px 10px
-							width: 100%
+							font-size: 1em
+							margin: 0
+
+						ul.meta
+							padding: 0 10px 5px 10px
+							margin: 0
 
 						li.where-parent:before
 							content: '\e83a'
@@ -227,28 +246,22 @@ $node-type-post: #647bce
 								content: ''
 
 				&.post
-					.activity-stream__list-thumbnail
+					border-right: 2px solid $node-type-post
-						color: $node-type-post
-					.activity-stream__list-details
-						border-color: $node-type-post
 
-						.title
+					.activity-stream__list-thumbnail
-							color: $color-text-dark-primary
+						border-color: $node-type-post
-							max-width: 80%
+						background-color: $node-type-post
-							padding-bottom: 5px
+					.activity-stream__list-details .title
-							font:
+						font:
-								size: 1.2em
+							size: 1.3em
-								weight: 500
+							weight: 500
 
 				&.asset, &.comment, &.post
 					&:hover
 						cursor: pointer
 
 					&.active
-						.activity-stream__list-details
+						border-color: $color-primary
-							border-color: $color-primary
-						.spin
-							animation-duration: 5s
 
 				&.empty
 					display: none
@@ -261,48 +274,49 @@ $node-type-post: #647bce
 							text-decoration: underline
 							cursor: pointer
 
+				$activity-stream-thumbnail-size: 75px
 				.activity-stream__list-thumbnail
+					position: relative
 					display: flex
-					align-self: flex-start
 					justify-content: center
-					font-size: 1.4em
+					align-items: center
-					width: 30px
+					overflow: hidden
-					height: 30px
+					width: $activity-stream-thumbnail-size * 1.69
-					min-width: 30px
+					min-width: $activity-stream-thumbnail-size * 1.69
-					min-height: 30px
+					min-height: $activity-stream-thumbnail-size
-					color: $node-type-comment
+					font-size: 1.8em
+					color: rgba(white, .5)
+					background-color: $color-background-light
+					border-top-left-radius: 3px
+					border-bottom-left-radius: 3px
 
 					+media-xs
 						display: none
 
 					&.image
-						color: $node-type-asset_image
+						background-color: $node-type-asset_image
 					&.file
-						color: $node-type-asset_file
+						background-color: $node-type-asset_file
-						font-size: 1.1em
 					&.video
-						color: $node-type-asset_video
+						background-color: $node-type-asset_video
 						i.pi-film-thick
 							font-size: .8em
 
 					i
-						position: relative
+						+position-center-translate
-
+					img
-					img.thumbnail
+						max-height: $activity-stream-thumbnail-size
-						width: 100%
 						+position-center-translate
 
 				.activity-stream__list-details
+					display: flex
+					flex-direction: column
+					justify-content: center
 					flex: 1
 					overflow: hidden
 					position: relative
 					max-width: 100%
-					background-color: white
-					margin-left: 5px
 					margin-right: auto
-					border-radius: 3px
-					border-left: 2px solid $color-background
-					box-shadow: 0 0 1px 1px rgba(black, .1), 0 2px 5px rgba(black, .05)
 
 					+media-xs
 						margin-left: 0
@@ -320,8 +334,9 @@ $node-type-post: #647bce
 
 					.title
 						display: inline-block
-						padding: 10px 15px
+						padding: 5px 15px
 						color: $color-text-dark
+						font-size: 1.1em
 
 						span
 							@include badge(hsl(hue($color-success), 60%, 45%), 3px)
@@ -329,41 +344,24 @@ $node-type-post: #647bce
 							padding: 1px 5px
 							margin-right: 5px
 
-					.date
-						display: inline-block
-						float: right
-						color: $color-text-dark-secondary
-						padding: 15px
-						font-size: .9em
-
-					.date+.ribbon
-						box-shadow: 0 0 15px 5px white
-
-					.image
-						display: block
-						position: relative
-						text-align: center
-						background-color: $color-background
-
-						img
-							max-width: 100%
-							display: inline-block
-							margin: 0 auto
-							border-top-left-radius: 3px
-							border-top-right-radius: 3px
-
 					ul.meta
 						+list-meta
-						padding: 0 10px 5px 15px
+						padding: 0 10px 7px 15px
 						font-size: .85em
 						color: $color-text-dark-secondary
+						display: flex
+						white-space: nowrap
 
 						li
 							padding-left: 10px
 							&:before
 								left: -5px
-							&.what
+							&.where-project
-								text-transform: capitalize
+								+text-overflow-ellipsis
+							&.when
+								margin-left: auto
+								&:before
+									display: none
 
 		ul#activity-stream__filters
 			margin: 0
@@ -414,112 +412,6 @@ $node-type-post: #647bce
 					color: $color-danger
 
 
-	section#blog-stream
-		position: relative
-
-		.feed
-			position: absolute
-			top: 10px
-			right: 10px
-			font-size: 1.4em
-			color: lighten($color-text-dark-hint, 10%)
-
-			&:hover
-				color: $color-primary
-
-		ul#blog-stream__list
-			background-color: $color-background-light
-			margin: 0
-			padding: 0
-			list-style: none
-			border:
-				top: thin solid $color-background
-				bottom-left-radius: 3px
-				bottom-right-radius: 3px
-
-			.blog-stream__list-item
-				display: flex
-				padding: 7px 15px
-				border-top: thin solid $color-background
-
-				&:first-child
-					border-top: none
-				&:last-child
-					border:
-						bottom-left-radius: 3px
-						bottom-right-radius: 3px
-
-				&.more
-					font-size: .9em
-					a
-						width: 100%
-						text-align: right
-						color: $color-text-dark-secondary
-						&:hover
-							color: $color-primary
-
-				.blog-stream__list-thumbnail
-					display: block
-					position: relative
-					width: 50px
-					min-width: 50px
-					height: 50px
-					min-height: 50px
-					margin-right: 15px
-					background-color: $node-type-post
-					border-radius: 50%
-					overflow: hidden
-
-					img
-						width: 100%
-
-					i
-						+position-center-translate
-						font-size: 1.6em
-						color: $color-text-light-primary
-
-				.blog-stream__list-details
-					.title
-						display: block
-						color: $color-text-dark-primary
-						&:hover
-							color: $color-primary
-
-					ul.meta
-						+list-meta
-						padding-top: 5px
-						font-size: .9em
-						color: $color-text-dark-secondary
-
-						li
-							padding-left: 10px
-							&:before
-								left: -5px
-
-				&.featured
-					flex-direction: column
-					padding: 0
-
-					a.title
-						font-size: 1.1em
-						padding: 10px 0 0 15px
-						display: block
-						color: $color-text-dark-primary
-						&:hover
-							color: $color-primary
-
-					a.blog-stream__thumbnail
-						display: block
-						position: relative
-						img
-							width: 100%
-
-					ul.meta
-						+list-meta
-						padding: 5px 15px 10px 15px
-						font-size: .9em
-
-
 	section.announcement
 		border-bottom: thin solid $color-background
 

src/templates/homepage.jade

@@ -50,29 +50,17 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 
 			ul#activity-stream__list
 				| {% for n in activity_stream %}
-				| {% if n.node_type == 'comment' %}
-				li.activity-stream__list-item.hidden(
-					class="{{ n.node_type }}",
-					data-url="{{ url_for_node(node=n) }}")
-					a.activity-stream__list-thumbnail(href="{{ url_for_node(node=n) }}")
-						i.pi-comment
-					.activity-stream__list-details
-						a.title(href="{{ url_for_node(node=n) }}") {{ n.properties.content | striptags | truncate(200) }}
-						ul.meta
-							li.who {{ n.user.full_name }}
-							li.where-project
-								a.project(href="{{ url_for('projects.view', project_url=n.project.url) }}") {{ n.project.name }}
-							li.where-parent
-								a(href="{{ url_for_node(node_id=n.attached_to._id) }}") {{ n.attached_to.name }}
-							li.when
-								a(href="{{ url_for_node(node=n) }}", title="{{ n._created }}") {{ n._created | pretty_date_time }}
-				| {% elif n.node_type == 'asset' %}
 				li.activity-stream__list-item(
 					class="{{ n.node_type }} {{ n.properties.content_type }}",
 					data-url="{{ url_for_node(node=n) }}")
 					a.activity-stream__list-thumbnail(
-						class="{{ n.properties.content_type }}",
+						class="{{ n.properties.content_type }} {% if n.picture %}with-picture{% endif %}",
 						href="{{ url_for_node(node=n) }}")
+						| {% if n.picture %}
+						img(src="{{ n.picture.thumbnail('m', api=api) }}")
+						| {% else %}
+
+						| {% if n.node_type == 'asset' %}
 						| {% if n.properties.content_type == 'video' %}
 						i.pi-film-thick
 						| {% elif n.properties.content_type == 'image' %}
@@ -82,47 +70,40 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 						| {% 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
-						| {% if n.picture %}
-						a.image(href="{{ url_for_node(node=n) }}")
-							| {% if n.properties.content_type == 'video' %}
-							i.pi-play
-							| {% endif %}
-							img(src="{{ n.picture.thumbnail('l', api=api) }}")
-						| {% endif %}
-						a.date(href="{{ url_for_node(node=n) }}", title="{{ n._created }}") {{ n._created | pretty_date_time }}
 						a.title(href="{{ url_for_node(node=n) }}")
+							| {% if n.node_type == 'comment' %}
+							| {{ n.properties.content | striptags | truncate(200) }}
+							| {% else %}
 							| {{ n.name }}
+							| {% endif %}
 						| {% if n.permissions.world %}
 						.ribbon
 							span free
 						| {% endif %}
 						ul.meta
-							li.what {{ n.properties.content_type }}
+							li.what
+								| {% if n.node_type == 'asset' %}{{ n.properties.content_type | undertitle  }}{% else %}{{ n.node_type | undertitle }}{% endif %}
+							| {% if n.node_type != 'post' %}
 							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 }}
-				| {% elif n.node_type == 'post' %}
+							li.when
-				li.activity-stream__list-item(
+								a(href="{{ url_for_node(node=n) }}", title="{{ n._created }}") {{ n._created | pretty_date_time }}
-					class="{{ n.node_type }}",
-					data-url="{{ url_for_node(node=n) }}")
-					a.activity-stream__list-thumbnail(href="{{ url_for_node(node=n) }}")
-						i.pi-newspaper
-					.activity-stream__list-details
-						| {% if n.picture %}
-						a.image(href="{{ url_for_node(node=n) }}")
-							img(src="{{ n.picture.thumbnail('l', api=api) }}")
-						| {% endif %}
-						a.date(href="{{ url_for_node(node=n) }}", title="{{ n._created }}") {{ n._created | pretty_date_time }}
-						a.title(href="{{ url_for_node(node=n) }}") {{ n.name }}
-						ul.meta
-							li.what Blog Post
-							li.where-project
-								a.project(href="{{ url_for('projects.view', project_url=n.project.url) }}")
-									| {{ n.project.name }}
-				| {% endif %}
 				| {% endfor %}
+
 				li.activity-stream__list-item.empty#activity-stream__empty
 					| No items to list.
 
@@ -152,65 +133,6 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 						href="https://cloud.blender.org/p/agent-327/")
 						| Learn More
 
-
-		section#blog-stream
-			a.feed(
-				href="{{ url_for('main.feeds_blogs') }}",
-				title="Blender Cloud & Projects Blog Feed",
-				data-toggle="tooltip",
-				data-placement="left")
-				i.pi-rss
-
-			h3
-				a(href="{{ url_for('main.main_blog') }}") Blog
-
-			ul#blog-stream__list
-				| {% if latest_posts %}
-				| {% for n in latest_posts %}
-				| {% if n.picture and loop.first %}
-				li.blog-stream__list-item.featured
-					a.blog-stream__thumbnail(
-						href="{{ url_for_node(node=n) }}")
-						img(src="{{ n.picture.thumbnail('l', api=api) }}")
-					a.title(href="{{ url_for_node(node=n) }}")
-						| {{ n.name }}
-
-					ul.meta
-						li.when
-							a(href="{{ url_for_node(node=n) }}",
-								title="Updated {{ n._updated | pretty_date }}")
-								| {{ n._created | pretty_date }}
-						li.where-project
-							a.project(href="{{ url_for('projects.view', project_url=n.project.url) }}") {{ n.project.name }}
-				| {% else %}
-				li.blog-stream__list-item
-					a.blog-stream__list-thumbnail(href="{{ url_for_node(node=n) }}")
-						| {% if n.picture %}
-						img.image(src="{{ n.picture.thumbnail('s', api=api) }}")
-						| {% else %}
-						i.pi-newspaper
-						| {% endif %}
-					.blog-stream__list-details
-						a.title(href="{{ url_for_node(node=n) }}") {{ n.name }}
-						ul.meta
-							li.when
-								a(href="{{ url_for_node(node=n) }}",
-									title="Updated {{ n._updated | pretty_date }}")
-									| {{ n._created | pretty_date }}
-							li.where-project
-								a.project(href="{{ url_for('projects.view', project_url=n.project.url) }}") {{ n.project.name }}
-				| {% endif %}
-				| {% endfor %}
-				| {% else %}
-				li.blog-stream__list-item
-					.blog-stream__list-details
-						ul.meta
-							li.when No updates yet
-				| {% endif %}
-				li.blog-stream__list-item.more
-					a(href="{{ url_for('main.main_blog') }}") See All Blog Posts
-
-
 		section#random-asset
 			h3
 				a(href="/search") Explore the Cloud
@@ -281,32 +203,6 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 				| {% endfor %}
 
 
-		section.announcement
-			a(href="https://cloud.blender.org/blog/introducing-blender-sync")
-			img.header(
-				src="{{ url_for('static', filename='assets/img/blender_sync_header.jpg') }}")
-			.text
-				.title
-					a(href="https://cloud.blender.org/blog/introducing-blender-sync") Textures Browser & Settings Sync
-
-				.lead
-					span.
-						Get the official Blender Cloud add-on:
-					ul
-						li Save your Blender settings online, use them anywhere
-						li Browse over 800 textures & HDRIs within Blender
-						li Share Screenshots & Renders directly to Blender Cloud
-
-				.buttons
-					a.btn.btn-default.btn-outline.orange(
-						href="https://cloud.blender.org/r/downloads/blender_cloud-latest-bundle.zip")
-						i.pi-download
-						| Download Add-on <small>v</small> {{ config.BLENDER_CLOUD_ADDON_VERSION }}
-					a.btn.btn-default.btn-outline.blue(
-						href="https://cloud.blender.org/blog/introducing-blender-sync")
-						| Learn More
-
-
 | {% endblock %}
 
 | {% block footer_scripts %}