From a738cdcad8d0e41e827345d22829058b8df1ae04 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 1 Oct 2018 11:56:52 +0200 Subject: [PATCH] Fix and tweaks to theatre mode * Only show width/height if available (would be None otherwise) * If image width/height is not available, allow zooming * Fix styling and cleanup * Remove footer (reported by Vulp35 on Twitter, thanks!) --- src/styles/theatre.sass | 105 +++++++++--------- .../nodes/custom/asset/view_theatre_embed.pug | 29 ++--- src/templates/projects/view_theatre.pug | 14 +-- 3 files changed, 74 insertions(+), 74 deletions(-) diff --git a/src/styles/theatre.sass b/src/styles/theatre.sass index 371af62e..feeec7f3 100644 --- a/src/styles/theatre.sass +++ b/src/styles/theatre.sass @@ -1,21 +1,53 @@ -@import base -@import _comments +// Bootstrap variables and utilities. +@import "../../node_modules/bootstrap/scss/functions" +@import "../../node_modules/bootstrap/scss/variables" +@import "../../node_modules/bootstrap/scss/mixins" + +// Pillar variables and utilities. +@import "config" +@import "utils" + +// Bootstrap components. +@import "../../node_modules/bootstrap/scss/root" +@import "../../node_modules/bootstrap/scss/reboot" + +@import "../../node_modules/bootstrap/scss/type" + +@import "../../node_modules/bootstrap/scss/code" +@import "../../node_modules/bootstrap/scss/grid" +@import "../../node_modules/bootstrap/scss/dropdown" + +@import "../../node_modules/bootstrap/scss/nav" +@import "../../node_modules/bootstrap/scss/navbar" + +@import "../../node_modules/bootstrap/scss/tooltip" + +@import "../../node_modules/bootstrap/scss/utilities" + + +// Pillar components. +@import "apps_base" + +@import "components/navbar" +@import "components/dropdown" +@import "components/footer" +@import "components/shortcode" + +@import "components/flyout" +@import "components/buttons" +@import "components/popover" +@import "components/tooltip" +@import "components/checkbox" +@import "components/overlay" +@import "components/card" + +@import "comments" +@import "notifications" -$color-theatre-background: #222 -$color-theatre-background-light: lighten($color-theatre-background, 5%) -$color-theatre-background-dark: darken($color-theatre-background, 5%) $theatre-width: 350px body.theatre - background-color: $color-theatre-background - nav.navbar - +media-lg - background-color: $color-background-nav - background-image: none - a.navbar-item.info - font-size: 1.4em - .page-content position: absolute top: 0 @@ -32,15 +64,7 @@ body.theatre #theatre-container - display: flex - position: relative - height: 100% - overflow: hidden - #theatre-media - display: flex - align-items: center - justify-content: center height: 100% width: 100% padding: 25px @@ -53,7 +77,6 @@ body.theatre img display: block - border: thin solid $color-theatre-background-light box-shadow: 1px 1px 10px rgba(black, .2) max-width: 100% max-height: 100% @@ -135,42 +158,16 @@ body.theatre display: block #theatre-info + min-width: $theatre-width + overflow-y: auto + position: absolute + right: -$theatre-width + top: 0 + transition: right 200ms ease-in-out visibility: hidden width: $theatre-width - min-width: $theatre-width - height: 100% - position: relative - top: 0 - right: -$theatre-width - background-color: white - border-left: 2px solid $color-background-nav - transition: right 200ms ease-in-out - position: absolute - overflow-y: auto - - .theatre-info-header - border-bottom: thin solid $color-background - padding-bottom: 10px - - .theatre-info-title - padding: 20px 10px 5px 20px - font: - size: 1.2em - weight: 500 - .theatre-info-user, - .theatre-info-date - display: inline-block - padding: 0 0 0 20px - font-size: .9em - color: $color-text-dark-secondary - ul.theatre-info-details - padding: 10px 20px 0 20px - margin: 0 - list-style: none - color: $color-text-dark-primary - li display: flex padding: 2px 0 diff --git a/src/templates/nodes/custom/asset/view_theatre_embed.pug b/src/templates/nodes/custom/asset/view_theatre_embed.pug index 217e23d5..d32bb502 100644 --- a/src/templates/nodes/custom/asset/view_theatre_embed.pug +++ b/src/templates/nodes/custom/asset/view_theatre_embed.pug @@ -1,4 +1,4 @@ -#theatre-media +#theatre-media.d-flex.justify-content-center.align-items-center.bg-dark img(src="{{ node.picture.thumbnail('h', api=api) }}", onmousedown="return false") ul#theatre-tools @@ -18,19 +18,21 @@ i.pi-download | {% endif %} -#theatre-info - .theatre-info-header - .theatre-info-title {{ node.name }} - .theatre-info-user {{ node.user.full_name }} - .theatre-info-date {{ node._created | pretty_date_time }} +#theatre-info.bg-white.h-100 + h5.p-3 {{ node.name }} + small.d-flex.text-secondary.pl-3 + span.font-weight-bold {{ node.user.full_name }} + span.px-3 {{ node._created | pretty_date_time }} - ul.theatre-info-details + ul.theatre-info-details.border-bottom.mb-3.p-3.list-unstyled li span Type span {{ node.file.content_type }} + | {% if node.file.width %} li span Dimensions span {{ node.file.width }} x {{ node.file.height }} + | {% endif %} li span Size span {{ node.file.length | filesizeformat }} @@ -41,21 +43,22 @@ | {% endif %} #comments-embed - .comments-list-loading - i.pi-spin include ../_scripts script. $(function () { - var file_width = {{ node.file.width }}; - var file_height = {{ node.file.height }}; + var file_width = '{{ node.file.width }}'; + var file_height = '{{ node.file.height }}'; var theatre_media = document.getElementById('theatre-media'); var $theatre_media = $(theatre_media); function canZoom() { - return theatre_media.scrollWidth < file_width || + // If there is no width/height defined, let's just let it zoom. + // It might just be a non-image asset, like a file. + return file_width == 'None' || + theatre_media.scrollWidth < file_width || theatre_media.scrollHeight < file_height; } @@ -90,7 +93,7 @@ script. theatreZoom(); }); - $('ul.nav.navbar-nav a.navbar-item.info').on('click', function (e) { + $('.js-toggle-info').on('click', function (e) { e.preventDefault(); $('#theatre-container').toggleClass('with-info'); }); diff --git a/src/templates/projects/view_theatre.pug b/src/templates/projects/view_theatre.pug index 376d8c94..6493ddd9 100644 --- a/src/templates/projects/view_theatre.pug +++ b/src/templates/projects/view_theatre.pug @@ -21,10 +21,10 @@ meta(property="twitter:image", content="{{ og_picture.thumbnail('l', api=api) }} | {% block navigation_search %}{% endblock %} | {% block navigation_sections %} -li - a.navbar-item.info( - href="", - title="Toggle info & sidebar") +li.nav-item + a.nav-link.js-toggle-info( + href="#", + title="Toggle sidebar") i.pi-info | {% endblock %} @@ -34,7 +34,8 @@ link(href="{{ url_for('static_pillar', filename='assets/css/theatre.css') }}", r | {% endblock %} | {% block body %} -#theatre-container(class="{% if current_user.is_authenticated %}with-info{% endif %}") +#theatre-container.d-flex.position-relative.h-100.overflow-hidden( + class="{% if current_user.is_authenticated %}with-info{% endif %}") | {% endblock %} @@ -48,5 +49,4 @@ script. }); | {% endblock %} -| {% block footer %}{% endblock %} -| {% block footer_navigation %}{% endblock %} +| {% block footer_container %}{% endblock %}