Add new project landing with jumbotron, responsive iframe, gallery and updates.
This commit is contained in:
Sam Lu
@@ -1,4 +0,0 @@
|
||||
body
|
||||
font-family: 'Source Sans Pro', sans-serif
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
@@ -33,18 +33,18 @@ footer.container-fluid
|
||||
h5
|
||||
color: $dark
|
||||
font-weight: 600
|
||||
font-size: 15px
|
||||
letter-spacing: 0.6px
|
||||
margin-bottom: 12px
|
||||
text-transform: uppercase
|
||||
p
|
||||
color: #6d6d6e
|
||||
font-size: 16px
|
||||
line-height: 30px
|
||||
.list-unstyled
|
||||
a
|
||||
color: #6d6d6e
|
||||
li
|
||||
line-height: 30px
|
||||
a
|
||||
color: #6d6d6e
|
||||
font-size: 16px
|
||||
.social-icons
|
||||
.list-inline-item:not(:last-child)
|
||||
margin-right: 22px
|
||||
@@ -20,7 +20,6 @@
|
||||
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.30)
|
||||
.lead
|
||||
max-width: 722px
|
||||
letter-spacing: 0.4px
|
||||
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.80)
|
||||
p
|
||||
color: white
|
||||
28
src/styles/_typography.sass
Normal file
28
src/styles/_typography.sass
Normal file
@@ -0,0 +1,28 @@
|
||||
html
|
||||
// changing font-size here, will change all bootstrap font-sizes
|
||||
font-size: 20px
|
||||
body
|
||||
font-family: 'Source Sans Pro', sans-serif
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
h1
|
||||
font-size: 48px
|
||||
line-height: 57px
|
||||
h2
|
||||
font-size: 36px
|
||||
line-height: 47px
|
||||
h3
|
||||
font-size: 27px
|
||||
line-height: 38px
|
||||
h4
|
||||
font-size 21px
|
||||
line-height: 34px
|
||||
h5
|
||||
font-size: 15px
|
||||
letter-spacing: 0.6px
|
||||
p
|
||||
font-size: 20px
|
||||
line-height: 32px
|
||||
.lead
|
||||
font-size: 20px
|
||||
letter-spacing: 0.4px
|
||||
@@ -1,353 +1,36 @@
|
||||
@import ../../../pillar/src/styles/_config
|
||||
@import ../../../pillar/src/styles/_utils
|
||||
|
||||
$node-latest-thumbnail-size: 160px
|
||||
$node-latest-gallery-thumbnail-size: 200px
|
||||
body
|
||||
background-color: white
|
||||
.page-body
|
||||
background-color: white
|
||||
|
||||
nav.navbar
|
||||
background-color: white
|
||||
.navbar-header
|
||||
+media-xs
|
||||
width: 100%
|
||||
|
||||
.navbar-brand
|
||||
color: $color-text
|
||||
|
||||
li a.navbar-item
|
||||
color: $color-text
|
||||
&:hover
|
||||
color: black
|
||||
&:focus
|
||||
color: black
|
||||
&.active
|
||||
color: black
|
||||
.dropdown.open
|
||||
a
|
||||
background-color: white
|
||||
.dropdown.libraries
|
||||
&:hover
|
||||
background: none
|
||||
ul.dropdown-menu
|
||||
background-color: white
|
||||
li
|
||||
a
|
||||
color: $color-text
|
||||
&:hover
|
||||
color: black
|
||||
background-color: white
|
||||
.navbar-container
|
||||
+container-behavior
|
||||
|
||||
.navbar-toggle
|
||||
border: none
|
||||
color: $color-text
|
||||
position: absolute
|
||||
right: 10px
|
||||
|
||||
.navbar-nav
|
||||
+media-xs
|
||||
padding: 10px
|
||||
|
||||
.search-input
|
||||
display: none
|
||||
|
||||
.node-details-container
|
||||
max-width: 620px
|
||||
font-family: $font-body
|
||||
font-size: 1.3em
|
||||
line-height: 1.5em
|
||||
margin: 0 auto 40px auto
|
||||
padding-bottom: 40px
|
||||
+media-xs
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
|
||||
p
|
||||
margin-bottom: 1.3em
|
||||
|
||||
header
|
||||
display: flex
|
||||
flex-direction: column /* stack flex items vertically */
|
||||
position: relative
|
||||
img.header
|
||||
width: 100%
|
||||
flex-direction: column /* stack flex items vertically */
|
||||
position: relative
|
||||
a.page-card-cta
|
||||
position: absolute
|
||||
left: 76%
|
||||
top: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
color: white
|
||||
font-weight: bold
|
||||
background: #ff4970
|
||||
border-radius: 3px
|
||||
border: none
|
||||
box-shadow: 1px 1px 0 rgba(black, .2)
|
||||
padding: 7px 20px
|
||||
text-decoration: none
|
||||
text-shadow: none
|
||||
|
||||
&:hover
|
||||
background: lighten(#ff4970, 5%)
|
||||
|
||||
.landing
|
||||
h2
|
||||
text-align: center
|
||||
margin-bottom: 40px
|
||||
@import ../styles/breakpoints
|
||||
@import ../styles/colors
|
||||
@import ../styles/typography
|
||||
@import ../styles/navbar
|
||||
@import ../styles/jumbotron
|
||||
@import ../styles/navbar-secondary
|
||||
@import ../styles/cards
|
||||
@import ../styles/footer
|
||||
|
||||
.node-details-title
|
||||
&.container
|
||||
max-width: 730px
|
||||
.iframe-container
|
||||
position: relative
|
||||
padding-top: 25px
|
||||
padding-bottom: 52%
|
||||
height: 0
|
||||
margin-top: 16px
|
||||
margin-bottom: 32px
|
||||
iframe
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
section
|
||||
max-width: 1024px
|
||||
padding-top: 20px
|
||||
border-top: thin solid $color-background
|
||||
margin: 0 auto
|
||||
|
||||
a.btn
|
||||
margin: 20px auto
|
||||
font-size: 1.3em
|
||||
padding: 9px 18px
|
||||
border-radius: 8px
|
||||
color: $color-text-dark
|
||||
|
||||
.navbar-secondary
|
||||
max-width: 620px
|
||||
margin: 0 auto
|
||||
|
||||
.navbar-container
|
||||
border-bottom: 1px solid #dddddd
|
||||
|
||||
.navbar-collapse
|
||||
padding-left: 0
|
||||
|
||||
li
|
||||
a
|
||||
padding-left: 20px
|
||||
padding-right: 20px
|
||||
color: $color-text
|
||||
&:hover
|
||||
&.active
|
||||
background: none
|
||||
color: black
|
||||
box-shadow: 0px 2px 0 rgba(red, .8)
|
||||
|
||||
.node-extra
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
//padding: 0 20px
|
||||
width: 100%
|
||||
|
||||
|
||||
.node-updates
|
||||
flex: 1
|
||||
font-size: 1.1em
|
||||
|
||||
ul
|
||||
padding: 0
|
||||
margin: 0 0 15px 0
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
|
||||
li
|
||||
display: flex
|
||||
flex-direction: column
|
||||
list-style: none
|
||||
padding: 5px
|
||||
cursor: pointer
|
||||
width: 33.3333%
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
|
||||
&.texture, &.group_texture
|
||||
width: 25%
|
||||
|
||||
&:hover
|
||||
img
|
||||
opacity: .9
|
||||
a.title
|
||||
//color: $color-primary
|
||||
text-decoration: underline
|
||||
|
||||
&.post
|
||||
.info .title
|
||||
//color: $node-type-post
|
||||
font-size: 1.1em
|
||||
a.image
|
||||
border: none
|
||||
//border-color: $node-type-post
|
||||
background-color: hsl(hue($node-type-post), 20%, 55%)
|
||||
|
||||
&.asset.image a.image
|
||||
border-color: $node-type-asset_image
|
||||
background-color: hsl(hue($node-type-asset_image), 20%, 55%)
|
||||
&.asset.file a.image
|
||||
border-color: $node-type-asset_file
|
||||
background-color: hsl(hue($node-type-asset_file), 20%, 55%)
|
||||
&.asset.video a.image
|
||||
border-color: $node-type-asset_video
|
||||
background-color: hsl(hue($node-type-asset_video), 20%, 55%)
|
||||
|
||||
.image
|
||||
width: 100%
|
||||
height: $node-latest-thumbnail-size
|
||||
min-height: $node-latest-thumbnail-size
|
||||
max-height: $node-latest-thumbnail-size
|
||||
background-color: $color-background
|
||||
margin: 5px auto 10px auto
|
||||
position: relative
|
||||
overflow: hidden
|
||||
border-radius: 0
|
||||
|
||||
img
|
||||
max-height: $node-latest-thumbnail-size
|
||||
+position-center-translate
|
||||
|
||||
i
|
||||
color: rgba(white, .9)
|
||||
font-size: 1.8em
|
||||
position: absolute
|
||||
bottom: 3px
|
||||
left: 5px
|
||||
text-shadow: 1px 1px 0 rgba(black, .2)
|
||||
|
||||
&.pi-file-archive
|
||||
font-size: 1.5em
|
||||
bottom: 5px
|
||||
&.pi-newspaper
|
||||
font-size: 1.6em
|
||||
left: 7px
|
||||
|
||||
.ribbon
|
||||
+ribbon
|
||||
|
||||
.info
|
||||
width: 100%
|
||||
height: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: space-between
|
||||
word-break: break-word
|
||||
|
||||
.description
|
||||
font-size: 1em
|
||||
line-height: 1.8em
|
||||
padding-top: 8px
|
||||
color: $color-text-dark-primary
|
||||
|
||||
.title
|
||||
display: block
|
||||
font-size: 1.3em
|
||||
color: $color-text-dark
|
||||
font-weight: 600
|
||||
+clearfix
|
||||
+text-overflow-ellipsis
|
||||
|
||||
span.details
|
||||
width: 100%
|
||||
display: block
|
||||
font-size: 1em
|
||||
line-height: 1.2em
|
||||
padding: 5px 0
|
||||
color: $color-text-dark-secondary
|
||||
+clearfix
|
||||
|
||||
.who
|
||||
margin-left: 3px
|
||||
.what
|
||||
text-transform: capitalize
|
||||
|
||||
|
||||
$bg-color: #444
|
||||
$bg-color2: #666
|
||||
$yellow: rgb(249,229,89)
|
||||
$almost-white: rgb(255,255,255)
|
||||
$btn-transparent-color: rgba(249,229,89,1)
|
||||
$btn-transparent-bg: rgba(249,229,89,0)
|
||||
|
||||
|
||||
section.gallery
|
||||
max-width: 1024px
|
||||
margin: 60px auto 0 auto
|
||||
text-align: center
|
||||
padding-bottom: 40px
|
||||
|
||||
p
|
||||
color: $almost-white
|
||||
padding: 0 40px
|
||||
|
||||
|
||||
.thumbnail
|
||||
float: left
|
||||
position: relative
|
||||
width: 23%
|
||||
padding-bottom: 23%
|
||||
margin: 0.83%
|
||||
overflow: hidden
|
||||
&:hover
|
||||
box-shadow: 2px 2px 50px 0 rgba(0,0,0,0.3)
|
||||
|
||||
.img-container
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
img
|
||||
width: 300%
|
||||
transform: translate(-20%,-10%)
|
||||
|
||||
&:hover .img-caption
|
||||
top: 0
|
||||
left: 0
|
||||
.btn-trans
|
||||
background: rgba(255,255,255,0.4)
|
||||
|
||||
.img-caption
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
background: rgba(0, 0, 0, 0.3)
|
||||
text-align: center
|
||||
|
||||
.table
|
||||
display: table
|
||||
.table-cell
|
||||
display: table-cell
|
||||
vertical-align: bottom
|
||||
border: none
|
||||
|
||||
@media screen and (max-width: 992px)
|
||||
.thumbnail
|
||||
width: 22%
|
||||
padding-bottom: 22%
|
||||
margin: 1.5%
|
||||
|
||||
.img-container:hover .img-caption
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
.img-caption
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
background: rgba(0, 0, 0, .7)
|
||||
text-align: center
|
||||
a
|
||||
color: $yellow
|
||||
|
||||
@media screen and (max-width: 720px)
|
||||
.thumbnail
|
||||
width: 29%
|
||||
padding-bottom: 29%
|
||||
margin: 2.16%
|
||||
|
||||
@media screen and (max-width: 470px)
|
||||
.thumbnail
|
||||
width: 44%
|
||||
padding-bottom: 44%
|
||||
margin: 3%
|
||||
margin-top: 200px
|
||||
&:first-child
|
||||
margin-top: 0
|
||||
.gallery
|
||||
.container
|
||||
max-width: 1190px
|
||||
.col-sm-3
|
||||
padding: 20px
|
||||
img
|
||||
width: 100%
|
||||
@@ -1,6 +1,6 @@
|
||||
@import ../styles/breakpoints
|
||||
@import ../styles/colors
|
||||
@import ../styles/custom-font
|
||||
@import ../styles/typography
|
||||
@import ../styles/navbar
|
||||
@import ../styles/jumbotron
|
||||
@import ../styles/navbar-secondary
|
||||
|
||||
@@ -79,88 +79,193 @@ script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotke
|
||||
|
||||
| {% block css %}
|
||||
link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet")
|
||||
link(href="{{ url_for('static_pillar', filename='assets/css/base.css') }}", rel="stylesheet")
|
||||
//- link(href="{{ url_for('static_pillar', filename='assets/css/base.css') }}", rel="stylesheet")
|
||||
link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') }}", rel="stylesheet")
|
||||
| {% endblock %}
|
||||
|
||||
| {% block body %}
|
||||
header
|
||||
//a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
|
||||
img.header(src="{{ project.picture_header.thumbnail('h', api=api) }}")
|
||||
//- a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
|
||||
//- img.header(src="{{ project.picture_header.thumbnail('h', api=api) }}")
|
||||
//- Jumbotron
|
||||
.jumbotron.jumbotron-fluid(style="background-image: url('../../../static/assets/img/backgrounds/banner-hero.jpg')")
|
||||
.container
|
||||
h1.display-4.node_index-collection-name {{ page_title }}
|
||||
p.lead.node_index-collection-description {{ page_header_text }}
|
||||
|
||||
| {% block navbar_secondary %}
|
||||
| {{ projectmacros.render_secondary_navigation(project, pages=pages) }}
|
||||
//- Secondary Navigation
|
||||
//- | {% block navbar_secondary %}
|
||||
//- | {{ projectmacros.render_secondary_navigation(project, pages=pages) }}
|
||||
|
||||
| {% endblock navbar_secondary %}
|
||||
//- | {% endblock navbar_secondary %}
|
||||
.container.navbar-secondary
|
||||
ul.nav.justify-content-left
|
||||
li.nav-item
|
||||
a.nav-link.nav-title(href="#") Hero
|
||||
li.nav-item
|
||||
a.nav-link(href="#", class="{% if title == 'updates' %}active{% endif %}") Updates
|
||||
li.nav-item
|
||||
a.nav-link(href="#", class="{% if title == 'team' %}active{% endif %}") Team
|
||||
li.nav-item
|
||||
a.nav-link(href="#", class="{% if title == 'gallery' %}active{% endif %}") Gallery
|
||||
li.nav-item
|
||||
a.nav-link(href="#", class="{% if title == 'assets' %}active{% endif %}") Assets
|
||||
li.nav-item
|
||||
a.nav-link(href="#", class="{% if title == 'dashboard' %}active{% endif %}") Dashboard
|
||||
#container.landing
|
||||
section.node-details-container.project
|
||||
.node-details-title
|
||||
h1 {{ project.name }}
|
||||
|
||||
| {% if project.description %}
|
||||
.node-details-description
|
||||
| {{ project | markdowned('description') }}
|
||||
| {% endif %}
|
||||
.node-details-title.container
|
||||
//- h1 {{ project.name }}
|
||||
h1 Hero
|
||||
p Hero is a showcase for the upcoming Grease Pencil in Blender 2.8. Grease Pencil means 2D animation tools within a full 3D pipeline. In Blender. In Open Source. Free for everyone!
|
||||
p Hero is directed by Daniel M Lara, and it is the 6th short film funded by the Blender Cloud.
|
||||
.iframe-container
|
||||
iframe(allowfullscreen="", frameborder="0", height="", src="https://www.youtube.com/embed/pKmSdY56VtY", width="")
|
||||
p Following the classic Blender Cloud publishing model, blend files, walkthroughs and breakdowns will be released in the upcoming weeks. You can already enjoy a couple of shots #[a(href="https://cloud.blender.org/p/hero/5ad4cbd8f87ec500fea61c22") in the gallery link].
|
||||
p #[strong Join Blender Cloud!] Projects like Hero are made possible by Blender Cloud subscribers. Consider #[a(href="https://store.blender.org/product/membership/") supporting us] so we can create more Open Content and improve the best 3D (and 2D) animation software in the world!
|
||||
//- | {% if project.description %}
|
||||
//- .node-details-description
|
||||
//- | {{ project | markdowned('description') }}
|
||||
//- | {% endif %}
|
||||
|
||||
|
||||
section.gallery
|
||||
h2 Gallery
|
||||
| {% for n in activity_stream %}
|
||||
| {% if n.node_type not in ['comment', 'post'] and n.picture %}
|
||||
.thumbnail.expand-image-links
|
||||
.img-container
|
||||
a(href="{{ n.picture.thumbnail('l', api=api) }}", data-node_id="{{ n._id }}")
|
||||
img(src="{{ n.picture.thumbnail('l', api=api) }}", alt="{{ n.name }}")
|
||||
.img-caption.table
|
||||
| {# Not using for the moment
|
||||
span.table-cell {{ n.name }}
|
||||
| #}
|
||||
| {% endif %}
|
||||
| {% endfor %}
|
||||
div(class="clearfix")
|
||||
| {% if project.nodes_featured %}
|
||||
| {# In some cases featured_nodes might might be embedded #}
|
||||
| {% if '_id' in project.nodes_featured[0] %}
|
||||
| {% set featured_node_id=project.nodes_featured[0]._id %}
|
||||
| {% else %}
|
||||
| {% set featured_node_id=project.nodes_featured[0] %}
|
||||
| {% endif %}
|
||||
a.btn(href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}") See more
|
||||
| {% endif %}
|
||||
h2.text-center Gallery
|
||||
//- | {% for n in activity_stream %}
|
||||
//- | {% if n.node_type not in ['comment', 'post'] and n.picture %}
|
||||
//- .thumbnail.expand-image-links
|
||||
//- .img-container
|
||||
//- a(href="{{ n.picture.thumbnail('l', api=api) }}", data-node_id="{{ n._id }}")
|
||||
//- img(src="{{ n.picture.thumbnail('l', api=api) }}", alt="{{ n.name }}")
|
||||
//- .img-caption.table
|
||||
//- | {# Not using for the moment
|
||||
//- span.table-cell {{ n.name }}
|
||||
//- | #}
|
||||
//- | {% endif %}
|
||||
//- | {% endfor %}
|
||||
//- div(class="clearfix")
|
||||
//- | {% if project.nodes_featured %}
|
||||
//- | {# In some cases featured_nodes might might be embedded #}
|
||||
//- | {% if '_id' in project.nodes_featured[0] %}
|
||||
//- | {% set featured_node_id=project.nodes_featured[0]._id %}
|
||||
//- | {% else %}
|
||||
//- | {% set featured_node_id=project.nodes_featured[0] %}
|
||||
//- | {% endif %}
|
||||
//- a.btn(href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}") See more
|
||||
//- | {% endif %}
|
||||
.container
|
||||
.row
|
||||
.col-4.col-sm-3
|
||||
a(href="#")
|
||||
//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-8.jpg")
|
||||
img(src="http://placehold.it/260x260")
|
||||
.col-4.col-sm-3
|
||||
a(href="#")
|
||||
//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-7.jpg")
|
||||
img(src="http://placehold.it/260x260")
|
||||
.col-4.col-sm-3
|
||||
a(href="#")
|
||||
//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-6.png")
|
||||
img(src="http://placehold.it/260x260")
|
||||
.col-4.col-sm-3
|
||||
a(href="#")
|
||||
//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-5.png")
|
||||
img(src="http://placehold.it/260x260")
|
||||
.col-4.col-sm-3
|
||||
a(href="#")
|
||||
//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-4.png")
|
||||
img(src="http://placehold.it/260x260")
|
||||
.col-4.col-sm-3
|
||||
a(href="#")
|
||||
//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-3.png")
|
||||
img(src="http://placehold.it/260x260")
|
||||
.col-4.col-sm-3
|
||||
a(href="#")
|
||||
//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-2.jpg")
|
||||
img(src="http://placehold.it/260x260")
|
||||
.col-4.col-sm-3
|
||||
a(href="#")
|
||||
//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-1.jpg")
|
||||
img(src="http://placehold.it/260x260")
|
||||
a(href="#")
|
||||
| See Hero Gallery
|
||||
|
||||
|
||||
|
||||
section.node-extra
|
||||
h2 Latest Updates
|
||||
h2.text-center Latest Updates
|
||||
.container.card-container
|
||||
.row
|
||||
.col-md-4
|
||||
.card
|
||||
a(href="#")
|
||||
img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
|
||||
.card-body
|
||||
h4.card-title
|
||||
a(href="#") Title
|
||||
p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
|
||||
.col-md-4
|
||||
.card
|
||||
a(href="#")
|
||||
img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
|
||||
.card-body
|
||||
h4.card-title
|
||||
a(href="#") Title
|
||||
p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
|
||||
.col-md-4
|
||||
.card
|
||||
a(href="#")
|
||||
img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
|
||||
.card-body
|
||||
h4.card-title
|
||||
a(href="#") Title
|
||||
p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
|
||||
.col-md-4
|
||||
.card
|
||||
a(href="#")
|
||||
img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
|
||||
.card-body
|
||||
h4.card-title
|
||||
a(href="#") Title
|
||||
p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
|
||||
.col-md-4
|
||||
.card
|
||||
a(href="#")
|
||||
img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
|
||||
.card-body
|
||||
h4.card-title
|
||||
a(href="#") Title
|
||||
p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
|
||||
|
||||
| {% if activity_stream %}
|
||||
.node-updates
|
||||
ul.node-updates-list
|
||||
| {% for n in activity_stream %}
|
||||
| {% if n.node_type == 'post' %}
|
||||
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 activity_stream %}
|
||||
//- .node-updates
|
||||
//- ul.node-updates-list
|
||||
//- | {% for n in activity_stream %}
|
||||
//- | {% if n.node_type == 'post' %}
|
||||
//- 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 %}
|
||||
|
||||
.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="... <small>read more</small>") | safe | hide_none }}
|
||||
| {% else %}
|
||||
| {{ n | markdowned('description') | striptags | truncate(140, end="... <small>read more</small>") | 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 %}
|
||||
| {% endif %}
|
||||
a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See all updates
|
||||
//- .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="... <small>read more</small>") | safe | hide_none }}
|
||||
//- | {% else %}
|
||||
//- | {{ n | markdowned('description') | striptags | truncate(140, end="... <small>read more</small>") | 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 %}
|
||||
//- | {% endif %}
|
||||
//- a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See all updates
|
||||
|
||||
| {% endblock body %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user