diff --git a/cloud/routes.py b/cloud/routes.py index 5e8d5be..c0ddc36 100644 --- a/cloud/routes.py +++ b/cloud/routes.py @@ -191,8 +191,8 @@ def open_projects(): def render_page(): projects = get_projects('film') return render_template( - 'projects_index_collection.html', - title='open-projects', + 'films.html', + title='films', projects=projects._items, api=system_util.pillar_api()) diff --git a/src/styles/_list_films.sass b/src/styles/_list_films.sass new file mode 100644 index 0000000..790d0ea --- /dev/null +++ b/src/styles/_list_films.sass @@ -0,0 +1,37 @@ +body.films + .page-content + @extend .text-white + background-color: $color-bg-dark-pages + + h1 + @extend .text-white + + hr + background-color: lighten($color-bg-dark-pages, 20%) + + +.films-item + animation: fade-in-down .2s ease-out + animation-fill-mode: both + + img + box-shadow: 0 10px 25px $black + transition: box-shadow 800ms ease-in-out, transform 200ms ease-in-out + + &:hover + box-shadow: 0 0 25px rgba($primary, .1), 0 0 50px rgba(white, .1) + transform: scale(1.05) + + +@for $i from 1 through 20 + .films-item:nth-child(#{$i}n) + animation-delay: #{$i * 0.1}s + +@keyframes fade-in-down + 0% + opacity: 0 + transform: translateY(-25px) + 80% + opacity: 1 + 100% + transform: translateY(0) diff --git a/src/templates/_macros/_navigation.pug b/src/templates/_macros/_navigation.pug index 72a30e0..0335980 100644 --- a/src/templates/_macros/_navigation.pug +++ b/src/templates/_macros/_navigation.pug @@ -22,7 +22,7 @@ button.navbar-toggler( +nav-secondary-link( href="{{ url_for('cloud.open_projects') }}", - class="{% if title == 'open-projects' %}active{% endif %}") + class="{% if title == 'films' %}active{% endif %}") span Films +nav-secondary-link( diff --git a/src/templates/films.pug b/src/templates/films.pug new file mode 100644 index 0000000..ce69df9 --- /dev/null +++ b/src/templates/films.pug @@ -0,0 +1,60 @@ +| {% extends 'layout.html' %} +| {% from '_macros/_navigation.html' import navigation_homepage %} +| {% from '_macros/_opengraph.html' import opengraph %} + +include ../../../pillar/src/templates/mixins/components +include mixins/components + +| {% set page_title = 'Films' %} +| {% set page_description = 'The iconic Blender Open Movies. Featuring all the production files, assets, artwork, and never-seen-before content.' %} +| {% set page_header_image = url_for('static', filename='assets/img/backgrounds/background_agent327_01.jpg', _external=true) %} + +| {% block og %} +| {{ opengraph(page_title, page_description, page_header_image, request.url) }} +| {% endblock %} + +| {% block page_title %} +| {{ page_title }} +| {% endblock %} + +| {% block navigation_tabs %} +| {{ navigation_homepage(title) }} +| {% endblock navigation_tabs %} + +| {% block body %} +.container.py-4 + +category_list_header('{{ page_title }}', '{{ page_description }}', '{{ request.url }}') + + .row.films-list + | {% for project in projects %} + | {% if (project.status == 'published') or (project.status == 'pending' and current_user.is_authenticated) and project._id != config.MAIN_PROJECT_ID %} + .films-item.col-md-4.col-sm-6.col-lg-3.my-5 + .d-flex.flex-column.h-100 + | {% if project.picture_header %} + a.mx-auto(href="{{ url_for('projects.view', project_url=project.url) }}", tabindex='{{ loop.index }}') + img.rounded.w-100( + alt="{{ project.name }}", + src="{{ project.picture_header.thumbnail('l', api=api) }}") + | {% endif %} + + h5.pt-5.pb-3.text-center + a.font-weight-bold.text-white(href="{{ url_for('projects.view', project_url=project.url) }}") + | {{ project.name }} + + | {% if project.summary %} + .lead.text-secondary + small {{ project | markdowned('summary') }} + + .d-flex.align-items-center.mt-auto + a.btn-link.mr-auto.my-3(href="{{ url_for('projects.view', project_url=project.url) }}") + | Explore #[i.pi-angle-right] + | {% endif %} + + | {% if project.status == 'pending' and current_user.is_authenticated and current_user.has_role('admin') %} + p.text-danger + small Project Not Published + | {% endif %} + | {% endif %} + | {% endfor %} + +| {% endblock body %}