diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index 05d01cc5..e5314050 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -139,6 +139,7 @@ $link-color: $primary
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
$font-size-base: .9rem
+$font-size-xs: .75rem
$dropdown-border-width: 0
$dropdown-box-shadow: 0 10px 25px rgba($black, .1)
diff --git a/src/styles/_project.sass b/src/styles/_project.sass
index b9501e0a..60ce760e 100644
--- a/src/styles/_project.sass
+++ b/src/styles/_project.sass
@@ -995,9 +995,6 @@ a.learn-more
font-size: 1.6em
left: 7px
- .ribbon
- +ribbon
-
.info
width: 100%
height: 100%
@@ -2087,3 +2084,6 @@ section.node-children
margin: 25px 0 0 0
padding: 5px 35px
text-align: center
+
+.ribbon
+ +ribbon
diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass
index 8ddfbddf..03ada884 100644
--- a/src/styles/_utils.sass
+++ b/src/styles/_utils.sass
@@ -507,28 +507,22 @@
=ribbon
background-color: $color-success
- cursor: default
+ border: thin dashed rgba(white, .5)
+ color: white
+ pointer-events: none
+ font-size: 70%
overflow: hidden
- white-space: nowrap
position: absolute
right: -40px
top: 10px
- -webkit-transform: rotate(45deg)
- -moz-transform: rotate(45deg)
- -ms-transform: rotate(45deg)
- -o-transform: rotate(45deg)
transform: rotate(45deg)
+ white-space: nowrap
span
- border: thin dashed rgba(white, .5)
- color: white
display: block
- font-size: 70%
margin: 1px 0
padding: 3px 50px
- text:
- align: center
- transform: uppercase
+
@mixin text-background($text-color, $background-color, $roundness, $padding)
border-radius: $roundness
@@ -672,3 +666,6 @@
img
// Just re-use Bootstrap's mixin here.
+img-fluid
+
+.overflow-hidden
+ overflow: hidden
diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass
index d13003b7..fd57a9e7 100644
--- a/src/styles/components/_card.sass
+++ b/src/styles/components/_card.sass
@@ -5,6 +5,9 @@
min-width: 30%
max-width: 30%
+ .card.asset
+ margin-left: 10px
+ margin-right: 10px
.card-padless
.card
@@ -21,3 +24,22 @@
&:hover
img
opacity: 1
+
+
+.card.asset
+ color: $color-text
+
+ &.free
+ overflow: hidden
+
+ &:after
+ +ribbon
+ content: 'FREE'
+ padding: 2px 50px
+
+ .card-body
+ font-size: $font-size-xs
+
+ .card-img-top
+ background-size: cover
+ background-position: center
diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug
index 68826aad..8f498528 100644
--- a/src/templates/mixins/components.pug
+++ b/src/templates/mixins/components.pug
@@ -62,8 +62,28 @@ mixin card-deck(columns)
// +card(data-url="{{ url_for('projects.view', project_url=project.url) }}", tabindex='{{ loop.index }}')
// #}
mixin card()
- .card.card-fade.cursor-pointer.mb-4.js-project-go&attributes(attributes)
+ .card&attributes(attributes)
if block
block
else
p No card content defined.
+
+mixin list-asset(name, url, image, type, date)
+ a(href=url).card.asset&attributes(attributes)
+ if image
+ .embed-responsive.embed-responsive-16by9
+ .card-img-top.embed-responsive-item(style="background-image: url(" + image + ")")
+
+ .card-body
+ if name
+ h6.card-title.mb-1
+ =name
+
+ ul.card-text.list-unstyled.d-flex.text-black-50
+ if type
+ li.pr-2=type
+ if date
+ li=date
+
+ if block
+ block
diff --git a/src/templates/projects/view_embed.pug b/src/templates/projects/view_embed.pug
index 19cc05cf..ba722754 100644
--- a/src/templates/projects/view_embed.pug
+++ b/src/templates/projects/view_embed.pug
@@ -1,5 +1,6 @@
-| {% block body %}
+include ../mixins/components
+| {% block body %}
#node-container
section.node-preview.project
| {% if header_video_file %}
@@ -34,54 +35,19 @@
a.learn-more(href="{{ url_for( 'projects.view', project_url=project.url) }}") LEARN MORE
| #}
- .node-extra
-
+ .p-4
| {% if activity_stream %}
- .node-updates
- ul.node-updates-list
- | {% for n in activity_stream %}
- | {% if n.node_type not in ['comment'] %}
- li.node-updates-list-item(
- data-node_id="{{ n._id }}",
- class="{{ n.node_type }} {{ n.properties.content_type | hide_none }}")
- a.image(href="{{ url_for_node(node=n) }}")
- | {% if n.picture %}
- img(src="{{ n.picture.thumbnail('l', api=api) }}")
- | {% endif %}
-
- | {% if n.node_type == 'post' %}
- i.pi-newspaper
- | {% elif n.node_type == 'texture' or n.node_type == 'group_texture' %}
- i.pi-texture
- | {% elif 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 %}
-
- | {% if n.permissions.world %}
- .ribbon
- span free
- | {% endif %}
-
- .info
- a.title(href="{{ url_for_node(node=n) }}") {{ n.name }}
- p.description(href="{{ url_for_node(node=n) }}")
- | {% if n.node_type == 'post' %}
- | {{ n.properties | markdowned('content') | striptags | truncate(140, end="... read more") | safe | hide_none }}
- | {% else %}
- | {{ n | markdowned('description') | striptags | truncate(140, end="... read more") | safe | hide_none }}
- | {% endif %}
- span.details
- span.what {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %} ยท
- span.when {{ n._updated | pretty_date }} by
- span.who {{ n.user.full_name }}
- | {% endif %}
- | {% endfor %}
+ +card-deck(3)
+ | {% for n in activity_stream %}
+ | {% if n.node_type not in ['comment'] %}
+ +list-asset(
+ '{{ n.name }}',
+ '{{ url_for_node(node=n) }}',
+ "{% if n.picture %}{{ n.picture.thumbnail('l', api=api) }}{% endif %}",
+ "{% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %}",
+ "{{ n._updated | pretty_date }}")(class="{% if n.permissions.world %}free{% endif %}")
+ | {% endif %}
+ | {% endfor %}
| {% endif %}
include _scripts