diff --git a/gulpfile.js b/gulpfile.js index b1827fe..1e1bbc1 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -19,11 +19,11 @@ let enabled = { uglify: argv.production }; -var destination = { +let destination = { css: 'cloud/static/assets/css', pug: 'cloud/templates', - js: 'cloud/static/assets/js', -} + js: 'cloud/static/assets/js' +}; /* CSS */ gulp.task('styles', function(done) { @@ -84,6 +84,17 @@ gulp.task('scripts_tutti', function(done) { }); +/* Simply move these vendor scripts from node_modules */ +gulp.task('scripts_vendor', function(done) { + let toMove = [ + 'node_modules/photoswipe/dist/photoswipe.min.js' + ]; + gulp.src(toMove) + .pipe(gulp.dest(destination.js)); + done(); +}); + + // While developing, run 'gulp watch' gulp.task('watch', function(done) { // Only reload the pages if we run with --livereload @@ -99,4 +110,4 @@ gulp.task('watch', function(done) { // Run 'gulp' to build everything at once -gulp.task('default', gulp.series('styles', 'templates', 'scripts', 'scripts_tutti')); \ No newline at end of file +gulp.task('default', gulp.series('styles', 'templates', 'scripts', 'scripts_tutti', 'scripts_vendor')); diff --git a/package.json b/package.json index 3de0073..275527a 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "dependencies": { "bootstrap": "^4.1.2", "jquery": "^3.3.1", - "popper.js": "^1.14.3" + "popper.js": "^1.14.3", + "photoswipe": "^4.1.2" } } diff --git a/src/styles/_iframe.sass b/src/styles/_iframe.sass index ded62ae..331f83c 100644 --- a/src/styles/_iframe.sass +++ b/src/styles/_iframe.sass @@ -1,13 +1,2 @@ -.iframe-container - position: relative - padding-top: 25px - padding-bottom: 52% - height: 0 - margin-top: 48px - margin-bottom: 48px - iframe - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% \ No newline at end of file +.embed-responsive + margin: 48px auto diff --git a/src/templates/projects/landing.pug b/src/templates/projects/landing.pug index a5d4ce5..e09e0f3 100644 --- a/src/templates/projects/landing.pug +++ b/src/templates/projects/landing.pug @@ -75,6 +75,7 @@ meta(property="og:url", content="{{url_for('projects.view', project_url=project. script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-6.2.8.min.js') }}") script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-ga-0.4.2.min.js') }}") script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotkeys-0.2.20.min.js') }}") +script(src="{{ url_for('static_cloud', filename='assets/js/photoswipe.min.js') }}") | {% endblock %} | {% block css %} @@ -84,13 +85,8 @@ link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') | {% block body %} header - //- 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 }} +.jumbotron.jumbotron-fluid( + style="background-image: url('{{ project.picture_header.thumbnail('h', api=api) }}'); background-position: 50% 50%;") //- Secondary Navigation //- | {% block navbar_secondary %} @@ -102,9 +98,11 @@ header li.nav-item a.nav-link.nav-title(href="#") Hero li.nav-item - a.nav-link(href="#", class="{% if title == 'updates' %}active{% endif %}") Updates + a.nav-link(href="{{ url_for('main.project_blog', project_url=project.url) }}", class="{% if title == 'updates' %}active{% endif %}") Updates + | {% for page in pages %} li.nav-item - a.nav-link(href="#", class="{% if title == 'team' %}active{% endif %}") Team + a.nav-link(href="{{ url_for('projects.view_node', project_url=project.url, node_id=page._id) }}", class="{% if title == 'updates' %}active{% endif %}") {{ page.name }} + | {% endfor %} li.nav-item a.nav-link(href="/projects/gallery.html", class="{% if title == 'gallery' %}active{% endif %}") Gallery li.nav-item @@ -114,18 +112,10 @@ header #container.landing section.node-details-container.project .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 %} + h1 {{ project.name }} + | {% if project.description %} + | {{ project | markdowned('description') }} + | {% endif %} section.gallery @@ -195,82 +185,29 @@ header section.node-extra h2.text-center Latest Updates + | {% if activity_stream %} .container.card-container .row + | {% for n in activity_stream %} + | {% if n.node_type == 'post' %} .col-md-4 .card - a.card-image(href="#") - img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") + a.card-image(href="{{ url_for_node(node=n) }}") + | {% if n.picture %} + img.card-img-top(src="{{ n.picture.thumbnail('l', api=api) }}") + | {% endif %} .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.card-image(href="#") - img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-7.png") - .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.card-image(href="#") - img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-6.png") - .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.card-image(href="#") - img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-5.png") - .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.card-image(href="#") - img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-4.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! - .clearfix + a(href="{{ url_for_node(node=n) }}") {{ n.name }} + p.card-text {{ n.properties | markdowned('content') | striptags | truncate(140, end="... read more") | safe | hide_none }} + | {% endif %} + | {% endfor %} + | {% endif %} + .clearfix p.cta-arrow.text-center - a(href="#") - | See All Updates - img(src="../../static/assets/img/icons/icon-cta-arrow.svg") - //- | {% 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="... 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 %} - //- | {% endif %} - //- a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See all updates + a(href="{{ url_for('main.project_blog', project_url=project.url) }}") + | See all updates + i.pi-angle-right | {% endblock body %}