From 66d2f9cb50bc18406033e59c63a4e96d2ee242b7 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 13 May 2021 10:29:24 -0300 Subject: [PATCH] Several adjustments to new embeds responsiveness strategy. --- src/assets/scss/_post.scss | 79 ++++++++++++++++++++++++------------ src/assets/scss/style.scss | 1 + src/functions.php | 2 + src/functions/customizer.php | 5 +-- 4 files changed, 57 insertions(+), 30 deletions(-) diff --git a/src/assets/scss/_post.scss b/src/assets/scss/_post.scss index 52840f1..fe2a008 100644 --- a/src/assets/scss/_post.scss +++ b/src/assets/scss/_post.scss @@ -598,26 +598,27 @@ } .single-item-collection--document { position: relative; + color: black; + text-align: center; + font-size: 0.875rem; + font-weight: 400; + display: block; + min-height: 10vh; + img { + width: auto; + } &:hover { .tainacan-item-file-download { opacity: 1; transform: scale(1); } } - color: black; - font : { - size: 0.875rem; - weight: 400; + > iframe { + display: block; + margin: 0 auto; + border: none; } - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 10vh; - img { - width: auto; - } - > iframe, img.attachment-large { + img.attachment-large { display: block; height: auto; margin: 0 auto; @@ -627,27 +628,51 @@ width: 95%; } > iframe { - @media only screen and (min-width: 768px){ - min-height: 600px; - } - @media only screen and (max-width: 576px){ - min-height: 429px; - } + min-height: 10vh; } - .tainacan-embed-container{ + >.twitter-tweet { + margin-left: auto; + margin-right: auto; + } + .tainacan-content-embed { width: 100%; - - iframe { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + height: auto; + + &.tainacan-has-aspect-ratio { + max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 2) / 1); /* Default to 2:1 aspect ratio. */ + margin-left: auto; + margin-right: auto; + } + &.tainacan-embed-aspect-21-9 { + max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 21) / 9); + } + &.tainacan-embed-aspect-18-9 { + max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 18) / 9); + } + &.tainacan-embed-aspect-16-9 { + max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 16) / 9); + } + &.tainacan-embed-aspect-4-3 { + max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 4) / 3); + } + &.tainacan-embed-aspect-1-1 { + max-width: var(--tainacan-media-main-carousel-height, 60vh); + } + &.tainacan-embed-aspect-3-4 { + max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 3) / 4); + } + &.tainacan-embed-aspect-9-16 { + max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 9) / 16); + } + &.tainacan-embed-aspect-1-2 { + max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 1) / 2); } } .document-metadata { text-align: center; + width: 100%; + display: block; &.hide-name .document-metadata__name { display: none; diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 508fde1..4d5a55d 100644 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -299,6 +299,7 @@ nav { padding: 0; left: inherit; overflow: hidden; + z-index: 9999; .input-group { background: white; diff --git a/src/functions.php b/src/functions.php index 304e3f5..8ff3ebb 100644 --- a/src/functions.php +++ b/src/functions.php @@ -23,6 +23,8 @@ if ( ! function_exists( 'tainacan_setup' ) ) { add_theme_support( 'html5', array( 'navigation-widgets', 'comment-list', 'comment-form' ) ); add_theme_support( 'post-thumbnails' ); add_theme_support( 'automatic-feed-links' ); + add_theme_support( 'responsive-embeds' ); + /** * Custom header to change the banner image */ diff --git a/src/functions/customizer.php b/src/functions/customizer.php index 898169d..c621a27 100644 --- a/src/functions/customizer.php +++ b/src/functions/customizer.php @@ -2774,14 +2774,13 @@ function tainacan_single_item_document_max_height_output() { $css = ' /* Custom Settings for Single Item Page Document Height */ - .tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document img, .tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document video, - .tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document audio, - .tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document iframe { + .tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document audio { max-height: ' . $max_document_height . '%; max-height: ' . $max_document_height . 'vh; } + .tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document, .tainacan-single-post .tainacan-content.single-item-collection .tainacan-media-component { --tainacan-media-main-carousel-height: ' . $max_document_height . '%; --tainacan-media-main-carousel-height: ' . $max_document_height . 'vh;