From 8288b4eab191dc6b0c46bf8df66b51c94f820553 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 9 Nov 2017 18:37:25 +0100 Subject: [PATCH] New Homepage: Featuring more in the blog posts --- cloud/routes.py | 18 +- src/styles/_homepage.sass | 663 +++++++++++++------------------------ src/styles/_welcome.sass | 13 +- src/templates/homepage.pug | 283 ++++++---------- 4 files changed, 348 insertions(+), 629 deletions(-) diff --git a/cloud/routes.py b/cloud/routes.py index 333b557..747fa06 100644 --- a/cloud/routes.py +++ b/cloud/routes.py @@ -39,12 +39,19 @@ def _homepage_context() -> dict: # Get latest blog posts api = system_util.pillar_api() latest_posts = Node.all({ - 'projection': {'name': 1, 'project': 1, 'node_type': 1, - 'picture': 1, 'properties.status': 1, 'properties.url': 1}, + 'projection': { + 'name': 1, + 'project': 1, + 'node_type': 1, + 'picture': 1, + 'properties.url': 1, + 'properties.content': 1 + }, + 'where': {'node_type': 'post', 'properties.status': 'published'}, 'embedded': {'project': 1}, 'sort': '-_created', - 'max_results': '5' + 'max_results': '3' }, api=api) # Append picture Files to last_posts @@ -106,9 +113,7 @@ def _homepage_context() -> dict: def sort_key(item): return item._created - activities = itertools.chain(latest_assets._items, - latest_comments._items) - activity_stream = sorted(activities, key=sort_key, reverse=True) + activity_stream = sorted(latest_assets._items, key=sort_key, reverse=True) for node in activity_stream: node.url = url_for_node(node=node) @@ -116,6 +121,7 @@ def _homepage_context() -> dict: return dict( main_project=main_project, latest_posts=latest_posts._items, + latest_comments=latest_comments._items, activity_stream=activity_stream, random_featured=random_featured) diff --git a/src/styles/_homepage.sass b/src/styles/_homepage.sass index 5628d43..2076520 100644 --- a/src/styles/_homepage.sass +++ b/src/styles/_homepage.sass @@ -26,10 +26,8 @@ +media-xs width: 100% - section.announcement, - section#blog-stream, - section#random-asset - +container-box + section.blog-stream, + section.random-asset margin: 20px auto +media-xs @@ -42,16 +40,23 @@ section#main, section#side - h3 - margin: 0 - padding: 15px - cursor: default - font: - family: $font-body - size: 1.4em + h4 + padding-bottom: 5px + margin-bottom: 20px + position: relative + + &:before + position: absolute + width: 50px + height: 2px + top: 125% + content: ' ' + display: block + background-color: $color-primary a - color: $color-text-dark + color: $color-text + &:hover color: $color-primary cursor: pointer @@ -68,9 +73,7 @@ li.nav-tabs__list-tab float: left - font: - size: 1.2em - weight: 400 + // font-size: 1.1em border: none border-bottom: 3px solid transparent color: $color-text-dark-primary @@ -86,7 +89,7 @@ a display: block text-decoration: none - padding: 15px 20px 10px 20px + padding: 10px 15px 5px color: $color-text-dark-primary i @@ -119,13 +122,14 @@ pointer-events: none li.create - float: right cursor: pointer + display: inline-block + float: right font: size: 1.2em weight: 400 - display: inline-block - padding: 10px 10px + padding: 5px 10px + margin-top: 3px a color: $color-success @@ -138,35 +142,27 @@ a cursor: wait - section#stream + section.stream + background-color: white + border-bottom: thin solid $color-background-dark + padding: 15px 15px 0 position: relative - background-color: $color-background-light - border-bottom-left-radius: 3px - border-bottom-right-radius: 3px - h3 - padding: - top: 25px - left: 15px - bottom: 0 - span - padding-left: 5px - color: $color-text-dark-secondary - - ul#activity-stream__list - margin: 0 - padding: 15px 0 + ul.activity-stream__list list-style: none + margin: 0 + padding: 0 $activity-stream-thumbnail-size: 110px - li.activity-stream__list-item + > li position: relative display: flex - margin: 0 10px 5px - background-color: white - border-radius: 3px - box-shadow: 0 0 0 1px rgba(black, .05), 0 2px 2px rgba(black, .1) + padding: 10px 0 overflow: hidden + border-top: thin solid $color-background-dark + + &:first-child + border: none &.active .activity-stream__list-details .title color: $color-primary @@ -175,7 +171,6 @@ .title text-decoration: underline &.video - border-color: $node-type-asset_video a.image &:hover i @@ -194,16 +189,9 @@ font-size: 3em transition: font-size 100ms ease-in-out - &.image - border-color: $node-type-asset_image - - &.file - border-color: $node-type-asset_file - &.comment .activity-stream__list-thumbnail background: transparent - border-color: $node-type-comment color: $node-type-comment font-size: 1.2em box-shadow: none @@ -351,73 +339,53 @@ padding: 1px 5px margin-right: 5px - ul.meta - +list-meta - padding: 5px 10px 0 10px - font-size: .85em - color: $color-text-dark-secondary - display: flex - white-space: nowrap + ul.meta + +list-meta + padding: 5px 10px 0 10px + font-size: .85em + color: $color-text-dark-secondary + display: flex + white-space: nowrap - &.extra - margin-top: auto + &.extra + margin-top: auto - li - padding-left: 10px - &:before - left: -5px - &.where-project - +text-overflow-ellipsis + li + padding-left: 10px + &:before + left: -5px + &.where-project + +text-overflow-ellipsis - ul#activity-stream__filters - margin: 0 + section.comments + padding: 0 15px 5px + + ul padding: 0 - list-style: none - position: absolute - top: 20px - right: 15px - border-radius: 3px - li - float: left - padding: 5px - cursor: pointer - border: thin solid $color-background - border-right: none - background-color: white - color: $color-text-dark-primary + > ul + list-style-type: none + margin: 10px 0 0 - &:hover - color: $color-primary + > li + +text-overflow-ellipsis + border-top: thin solid $color-background-dark + padding: 10px 0 - /* First is the 'filter by' label */ &:first-child border: none - background-color: transparent - border-top-left-radius: 3px - border-bottom-left-radius: 3px - color: $color-text-dark-hint - font-size: .9em - &:nth-child(2) - border-top-left-radius: 3px - border-bottom-left-radius: 3px + > a + +text-overflow-ellipsis + color: $color-text + display: block + padding-bottom: 5px - &:last-child - border-right: thin solid $color-background - border-top-right-radius: 3px - border-bottom-right-radius: 3px - - &:active - background-color: $color-background-dark - - &.active - background-color: $color-background - - &.clear:hover - color: $color-danger - - section#blog-stream + section.blog-stream + +media-md + padding-left: 10px + +media-sm + padding-left: 10px position: relative .feed @@ -430,20 +398,17 @@ &:hover color: $color-primary - ul#blog-stream__list - background-color: $color-background-light + > ul margin: 0 padding: 0 list-style: none - border: - top: thin solid $color-background - bottom-left-radius: 3px - bottom-right-radius: 3px + border-top: thin solid $color-background - .blog-stream__list-item + > li + +container-box display: flex - padding: 7px 15px - border-top: thin solid $color-background + padding: 15px + margin-bottom: 15px &:first-child border-top: none @@ -452,14 +417,16 @@ bottom-left-radius: 3px bottom-right-radius: 3px + &.blog-non-featured + border-radius: 0 + margin: 0 + &.more font-size: .9em + justify-content: space-between + a - width: 100% - text-align: right color: $color-text-dark-secondary - &:hover - color: $color-primary .blog-stream__list-thumbnail display: block @@ -470,7 +437,7 @@ min-height: 50px margin-right: 15px background-color: $node-type-post - border-radius: 50% + border-radius: 3px overflow: hidden img @@ -481,10 +448,16 @@ font-size: 1.6em color: $color-text-light-primary + .description + +node-details-description + padding: 5px 15px + .blog-stream__list-details .title - display: block color: $color-text-dark-primary + display: block + font-size: 1.3em + &:hover color: $color-primary @@ -504,8 +477,8 @@ padding: 0 a.title - font-size: 1.1em - padding: 10px 0 0 15px + font-size: 1.5em + padding: 20px 0 0 15px display: block color: $color-text-dark-primary &:hover @@ -514,145 +487,34 @@ a.blog-stream__thumbnail display: block position: relative + img + border-top-left-radius: 3px + border-top-right-radius: 3px width: 100% ul.meta +list-meta - padding: 5px 15px 10px 15px font-size: .9em + padding: 5px 15px 10px + section.random-asset + border-bottom: thin solid $color-background-dark + margin: 40px 0 - section.announcement - border-bottom: thin solid $color-background - - .header-icons - display: flex - align-items: center - justify-content: center - padding: 20px 0 5px 0 - - i - font-size: 2.5em - color: $color-info - - &.pi-heart-filled - color: $color-danger - margin-left: 5px - - img.header - width: 100% - margin: 0 auto - border-top-left-radius: 3px - border-top-right-radius: 3px - - iframe - width: 100% - position: relative - left: 15px - margin: 25px auto - - +media-sm - height: 500px - +media-md - height: 520px - +media-lg - height: 580px - - .text - padding: 15px - - .title - padding-bottom: 10px - font: - family: $font-body - size: 1.4em - weight: 300 - - +media-xs - font-size: 1.4em - - strong - color: $color-primary-dark - - a - color: $color-text-dark-primary - - .lead - font-size: 1em - +list-bullets - - ul - margin-top: 10px - padding-left: 10px - - hr - border: none - height: 1px - width: 100% - margin: 10px 0 - background-color: $color-background - clear: both - - +media-xs - padding-left: 10px - - - .buttons - margin: 15px auto 0 auto - display: flex - align-items: center - justify-content: space-around - flex-wrap: wrap - - a - +button($color-text-light, 3px) - padding: 5px 0 - margin: - bottom: 5px - right: auto - left: auto - font-size: .9em - opacity: 1 - flex: 1 - - +media-xs - margin: 10px auto - width: 100% - - &:first-child - margin-right: 15px - - &.blue - +button(hsl(hue($color-info), 60%, 45%), 3px) - - &.orange - +button(hsl(hue($color-secondary), 50%, 50%), 3px) - padding: 5px 15px - - &.green - +button(hsl(hue($color-success), 60%, 40%), 3px, true) - - section#random-asset - - h3 - padding-bottom: 0 + h4 + padding-left: 15px ul.random-asset__list - border-top: thin solid $color-background - background-color: $color-background-light - border-bottom-left-radius: 3px - border-bottom-right-radius: 3px - padding: 0 - margin: 0 list-style: none + padding: 0 15px - .random-asset__list-item - display: flex + > li align-items: center - padding: 7px 15px border-top: thin solid $color-background + display: flex + padding: 7px 0 position: relative overflow: hidden @@ -667,21 +529,21 @@ size: 12px weight: 500 + z-index: 1 + span padding: 1px 50px .random-asset__list-thumbnail - width: 50px - min-width: 50px - height: 50px - min-height: 50px - margin-right: 15px background-color: $color-background - - border-radius: 50% - overflow: hidden display: block + height: 50px + margin-right: 15px + min-height: 50px + min-width: 50px + overflow: hidden position: relative + width: 50px img width: 100% @@ -707,6 +569,7 @@ display: block font-size: 1em color: $color-text-dark-primary + &:hover color: $color-primary @@ -721,28 +584,6 @@ &.what text-transform: capitalize - &.project - padding: 10px 15px - - a.title - font-size: 1.2em - - a.random-asset__list-thumbnail - border-radius: 3px - - ul.meta - padding-top: 0 - - li.what - text-transform: initial - - a - color: $color-text-dark-primary - - &:hover - color: $color-text-dark-primary - text-decoration: none - &.featured align-items: flex-start flex-direction: column @@ -750,7 +591,7 @@ a.title font-size: 1.1em - padding: 10px 0 0 15px + padding: 10px 0 5px display: block color: $color-text-dark-primary &:hover @@ -759,7 +600,6 @@ a.random-asset__thumbnail display: block position: relative - width: 100% &.video background-color: black @@ -767,8 +607,9 @@ opacity: .7 img - width: 100% transition: opacity 150ms ease-in-out + width: 100% + max-width: 100% i +position-center-translate @@ -785,11 +626,118 @@ ul.meta +list-meta - padding: 5px 15px 10px 15px - font-size: .9em + padding-bottom: 10px - li.what - text-transform: capitalize + +section.announcement + +container-box + margin: 20px 15px + + .header-icons + display: flex + align-items: center + justify-content: center + padding: 20px 0 5px 0 + + i + font-size: 2.5em + color: $color-info + + &.pi-heart-filled + color: $color-danger + margin-left: 5px + + img.header + width: 100% + margin: 0 auto + border-top-left-radius: 3px + border-top-right-radius: 3px + + iframe + width: 100% + position: relative + left: 15px + margin: 25px auto + + +media-sm + height: 500px + +media-md + height: 520px + +media-lg + height: 580px + + .text + padding: 15px + + .title + padding-bottom: 10px + font: + family: $font-body + size: 1.4em + weight: 300 + + +media-xs + font-size: 1.4em + + strong + color: $color-primary-dark + + a + color: $color-text-dark-primary + + .lead + font-size: 1em + +list-bullets + + ul + margin-top: 10px + padding-left: 10px + + hr + border: none + height: 1px + width: 100% + margin: 10px 0 + background-color: $color-background + clear: both + + +media-xs + padding-left: 10px + + .buttons + margin: 15px auto 0 auto + display: flex + align-items: center + justify-content: space-around + flex-wrap: wrap + + a + +button($color-text-light, 3px) + padding: 5px 0 + margin: + bottom: 5px + right: auto + left: auto + font-size: .9em + opacity: 1 + flex: 1 + + +media-xs + margin: 10px auto + width: 100% + + &:first-child + margin-right: 15px + + &.blue + +button(hsl(hue($color-info), 60%, 45%), 3px) + + &.orange + +button(hsl(hue($color-secondary), 50%, 50%), 3px) + padding: 5px 15px + + &.green + +button(hsl(hue($color-success), 60%, 40%), 3px, true) /* Sections for the non-logged in */ @@ -914,159 +862,8 @@ section.pricing +button($color-success, 3px, true) -section.supported-by - padding: 50px 0 - text-align: center - background-color: $color-background - border-top: 5px solid $color-background-dark - - img.logos - max-height: 500px - padding: 60px 0 100px 0 - - +media-xs - max-width: 100% - - -section.team - background: - color: white - size: cover - position: 50% 50% - padding: 50px 0 40px 0 - text-align: center - - h2 - padding-bottom: 30px - font-size: 2.2em - color: $color-text-light - - .people-container - max-width: $screen-lg - margin: 0 auto 60px auto - - .people-intro - opacity: 1 - position: relative - top: 0 - transition: opacity 100ms ease-in-out, top 150ms ease-out - - &.active - opacity: 0 - top: 15px - - h3 - font: - family: $font-body - color: $color-danger - - span - color: $color-text-light-primary - - .people-faces - padding-top: 40px - display: flex - flex: row flex - flex-wrap: wrap - margin: 0 auto - align-items: center - justify-content: center - width: 100% - max-width: 750px - - .face - background-color: $color-background - border-radius: 50% - padding: 4px - - opacity: 1 - width: 120px - height: 120px - margin: 7px 15px - z-index: 0 - position: relative - transition: transform 100ms ease-in-out, background-color 100ms ease-in-out, opacity 100ms ease-in-out - - +media-xs - height: initial - margin-top: 20px - - &:hover - transform: scale(1.1) - z-index: 1 - background-color: $color-primary - - img - opacity: .8 - - img - position: relative - width: 100% - border-radius: 50% - transition: opacity 150ms ease-in-out - - - .people-bio - display: block - width: 100% - position: relative - - +media-xs - display: none - - - .bio - opacity: 0 - visibility: hidden - margin: 0 - padding: 0 - position: absolute - top: -370px - left: 50% - transform: translateX(-50%) - - transition: opacity 180ms ease-in-out, top 150ms ease-out - - &.active - top: -370px - opacity: 1 - visibility: visible - - h3 - position: relative - top: -18px - font-family: $font-body - color: $color-info - - small - position: absolute - left: 50% - transform: translateX(-50%) - bottom: -22px - white-space: nowrap - font-size: .6em - color: $color-text-light-primary - span - color: $color-text-light-hint - - &.online - .people-faces - max-width: 1000px - - .people-bio - .bio - top: -250px - &.active - top: -240px - - body.homepage .dashboard-container - +media-xs - flex-direction: column-reverse - - flex-direction: row-reverse - #main +media-xs width: 100% diff --git a/src/styles/_welcome.sass b/src/styles/_welcome.sass index e2703b8..e90b14c 100644 --- a/src/styles/_welcome.sass +++ b/src/styles/_welcome.sass @@ -226,10 +226,21 @@ margin-bottom: 0 padding-bottom: 100px + .supported-by - img + padding: 50px 0 + text-align: center + background-color: $color-background + border-top: 5px solid $color-background-dark + + img.logos + padding: 60px 0 100px 0 + max-height: 500px max-width: 100% + +media-xs + max-width: 100% + .assets padding-bottom: 80px diff --git a/src/templates/homepage.pug b/src/templates/homepage.pug index afc7373..e897c21 100644 --- a/src/templates/homepage.pug +++ b/src/templates/homepage.pug @@ -19,36 +19,66 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ | {% block body %} .dashboard-container + section#side + + section.blog-stream + ul.blog-stream__list + | {% if latest_posts %} + | {% for n in latest_posts %} + li.blog-stream__list-item.featured + | {% if n.picture %} + a.blog-stream__thumbnail( + href="{{ n.url }}") + img(src="{{ n.picture.thumbnail('l', api=api) }}") + | {% endif %} + a.title(href="{{ n.url }}") + | {{ n.name }} + + ul.meta + li.when + a(href="{{ n.url }}", + 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 }} + + .description + | {{ n.properties.content | markdown }} + + | {% endfor %} + | {% else %} + li.blog-stream__list-item + .blog-stream__list-details + ul.meta + li.when No blog entries... yet! + | {% endif %} + + li.blog-stream__list-item.more + a( + href="{{ url_for('main.feeds_blogs') }}", + title="Blender Cloud & Projects Blog Feed") + | RSS Feed + a(href="{{ url_for('main.main_blog') }}") + | See All Blog Posts + + a.feed( + href="{{ url_for('main.feeds_blogs') }}", + title="Blender Cloud & Projects Blog Feed", + data-toggle="tooltip", + data-placement="left") + i.pi-rss + + section#main | {{ navigation_tabs(title) }} - section#stream + section.stream - h3#activity-stream__title - | Activity Stream + h4 Latest Assets - ul#activity-stream__filters - li Filter - li.filter.active( - data-filter='image', - title="List images") - i.pi-picture - li.filter.active( - data-filter='video', - title="List videos") - i.pi-film-thick - li.filter.active( - data-filter='file', - title="List files") - i.pi-file-archive - li.filter( - data-filter='comment', - title="List comments") - i.pi-comment - - ul#activity-stream__list + ul.activity-stream__list | {% for n in activity_stream %} - li.activity-stream__list-item( + li( class="{{ n.node_type }} {{ n.properties.content_type }} {% if n.picture %}with-picture{% endif %}", data-url="{{ n.url }}") a.activity-stream__list-thumbnail( @@ -69,24 +99,19 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ | {% else %} i.pi-folder | {% endif %} - | {% elif n.node_type == 'comment' %} - i.pi-comment | {% endif %} .activity-stream__list-details a.title(href="{{ n.url }}") - | {% 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 - | {% if n.node_type == 'comment' or not n.picture %} + | {% if not n.picture %} li.when a(href="{{ n.url }}", title="{{ n._created }}") {{ n._created | pretty_date_time }} li.who {{ n.user.full_name }} @@ -101,8 +126,6 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ 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 %} @@ -117,91 +140,8 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ | No items to list. - section#side - section.announcement.hidden - | {% if main_project.picture_header %} - a(href="https://cloud.blender.org/p/agent-327/") - img.header( - src="{{ main_project.picture_header.thumbnail('l', api=api) }}") - | {% endif %} - .text - .title - a(href="https://cloud.blender.org/p/agent-327/") - span In production: - strong Agent 327 - - .lead - span. - Follow the ongoing progress of the Barbershop fight scene, a character study for the Agent 327 project. - - .buttons - a.btn.btn-default.btn-outline.orange( - href="https://cloud.blender.org/p/agent-327/blog/") - | Blog - a.btn.btn-default.btn-outline.blue( - 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="{{ n.url }}") - img(src="{{ n.picture.thumbnail('l', api=api) }}") - a.title(href="{{ n.url }}") - | {{ n.name }} - - ul.meta - li.when - a(href="{{ n.url }}", - 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="{{ n.url }}") - | {% if n.picture %} - img.image(src="{{ n.picture.thumbnail('s', api=api) }}") - | {% else %} - i.pi-newspaper - | {% endif %} - .blog-stream__list-details - a.title(href="{{ n.url }}") {{ n.name }} - ul.meta - li.when - a(href="{{ n.url }}", - 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 + section.random-asset + h4 a(href="/search") Explore the Cloud span.section-lead Random selection of the best assets & tutorials @@ -244,13 +184,13 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ ul.meta li.what a(href="{{ n.url }}") - | {% if n.properties.content_type %}{{ n.properties.content_type }}{% else %}Folder{% endif %} + | {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}Folder{% endif %} li.where a(href="{{ n.project.url }}") | {{ n.project.name }} | {% else %} - li.random-asset__list-item + li | {% if n.permissions.world %} .ribbon span free @@ -284,8 +224,42 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ | {% endfor %} + section.comments + + h4 Latest Comments + + ul + | {% if latest_comments %} + | {% for n in latest_comments %} + li( + class="{{ n.node_type }}", + data-url="{{ n.url }}") + + a.comment-content(href="{{ n.url }}") + | {{ n.properties.content | striptags | truncate(200) }} + + ul.meta + li.who {{ n.user.full_name }} + | {% if n.attached_to %} + + li.where-parent + a(href="{{ n.attached_to.url }}") {{ n.attached_to.name }} + | {% endif %} + + li.when + a(href="{{ n.url }}", title="{{ n._created }}") + | {{ n._created | pretty_date_time }} + | {% endfor %} + + | {% else %} + li.activity-stream__list-item.empty#activity-stream__empty + | No comments... yet! + + | {% endif %} + | {% endblock %} + | {% block footer_scripts %} script. $(function () { @@ -295,75 +269,6 @@ script. $(this).text($(this).text().replace(/\*|\@|\<(.*?)\>/g, '')); }); - function saveFilters(){ - var filtersEnabled = []; - - $('ul#activity-stream__filters li.filter.active').each(function(){ - filtersEnabled.push($(this).attr('data-filter')); - }); - - setJSONCookie('bcloud_ui', 'homepage_activity_filters', filtersEnabled); - } - - function loadFilters(){ - - var filters = Cookies.getJSON('bcloud_ui'); - - if (filters) { - if (filters.homepage_activity_filters && filters.homepage_activity_filters.length){ - /* Clear style on filters/items */ - $('ul#activity-stream__filters li.filter').removeClass('active'); - $('ul#activity-stream__list li.activity-stream__list-item').addClass('hidden'); - - for (var f in filters.homepage_activity_filters){ - - var savedFilter = filters.homepage_activity_filters[f]; - - /* Style each filter type */ - $('ul#activity-stream__filters li.filter').each(function(){ - if ($(this).attr('data-filter') == savedFilter){ - $(this).addClass('active'); - } - }); - - /* Show items that are on the cookie */ - $('ul#activity-stream__list li.activity-stream__list-item').each(function(){ - if ($(this).hasClass(savedFilter)) { - $(this).removeClass('hidden'); - } - }); - } - } - } - } - - /* Toggle filters */ - $('ul#activity-stream__filters li.filter').click(function(){ - - // Style the filter button - $(this).toggleClass('active'); - - var filterType = $(this).attr('data-filter'); - - saveFilters(); - - // Toggle hidden class on list item if it has class matching the filter - $('ul#activity-stream__list li.activity-stream__list-item').each(function(){ - if ($(this).hasClass(filterType)) { - $(this).toggleClass('hidden'); - } - }); - - var hiddenItems = $('ul#activity-stream__list li.activity-stream__list-item.hidden').length; - - if (hiddenItems == '{{ activity_stream|length }}'){ - $('#activity-stream__empty').show(); - } - - }); - - loadFilters(); - /* Click on the whole asset/comment row to go */ $('li.activity-stream__list-item.asset, li.activity-stream__list-item.comment').click(function(e){ window.location.href = $(this).data('url');