Fix game/study embeds on mobile in forum
parent
2873bd8da5
commit
816a6fa4ec
|
@ -19,7 +19,7 @@
|
|||
grid-template-columns: auto;
|
||||
grid-template-rows: 100vw minmax(150px, calc(100vh - 100vw - 5.5rem)) 3rem;
|
||||
|
||||
@include breakpoint(min-width 400px) {
|
||||
@media (min-width: 400px) and (min-aspect-ratio: 1/1) {
|
||||
grid-template-columns: minmax(200px, calc(100vh - 2.5rem)) minmax(200px, 1fr);
|
||||
grid-template-rows: auto 2.5rem;
|
||||
grid-template-areas: 'board tools' 'board controls';
|
||||
|
|
|
@ -206,6 +206,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
%game-embed {
|
||||
@include breakpoint($mq-not-xx-small) {
|
||||
padding-bottom: 160%;
|
||||
}
|
||||
}
|
||||
|
||||
%data-icon {
|
||||
font-size: 1.2em;
|
||||
vertical-align: middle;
|
||||
|
|
|
@ -103,6 +103,10 @@
|
|||
.embed {
|
||||
@extend %video;
|
||||
|
||||
&--game {
|
||||
@extend %game-embed;
|
||||
}
|
||||
|
||||
&.not-found {
|
||||
height: 100px;
|
||||
padding: 0;
|
||||
|
|
|
@ -131,6 +131,10 @@
|
|||
.embed {
|
||||
@extend %video;
|
||||
|
||||
&--game {
|
||||
@extend %game-embed;
|
||||
}
|
||||
|
||||
margin: $block-gap auto;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -89,6 +89,10 @@
|
|||
@extend %video;
|
||||
|
||||
margin: $block-gap auto;
|
||||
|
||||
.embed--game {
|
||||
@extend %game-embed;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
@ -93,7 +93,7 @@ lichess.load.then(() => {
|
|||
const $iframe: any = $('<iframe>')
|
||||
.addClass('analyse ' + a.type)
|
||||
.attr('src', a.src);
|
||||
$(a.element).replaceWith($('<div class="embed">').prepend($iframe));
|
||||
$(a.element).replaceWith($('<div class="embed embed--game">').prepend($iframe));
|
||||
return $iframe
|
||||
.on('load', function (this: HTMLIFrameElement) {
|
||||
if (this.contentDocument?.title.startsWith('404')) this.style.height = '100px';
|
||||
|
|
Loading…
Reference in New Issue