data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: media modal uses full height on mobile (#1481)

Browse source 
fixes #1465
This commit is contained in:
Nolan Lawson 2019-09-13 22:11:22 -07:00 committed by GitHub
parent 97af0ccdf0
commit dbb746ff34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/routes/_components/dialog/components/MediaDialog.html
View file

@ -86,11 +86,11 @@
<Shortcut scope='modal-{id}' key="ArrowRight" on:pressed="next()" /> <Shortcut scope='modal-{id}' key="ArrowRight" on:pressed="next()" />
<style> <style>
:global(.media-modal-dialog) { :global(.media-modal-dialog) {
max-width: calc(100%); max-width: 100%;
} }
.media-container { .media-container {
height: calc(100% - 64px); /* 44px X button height + 20px padding */ height: calc(100% - 64px); /* 44px X button height + 20px padding */
width: calc(100vw); width: 100vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -196,8 +196,15 @@
.media-scroll-item { .media-scroll-item {
scroll-snap-coordinate: 0 0; scroll-snap-coordinate: 0 0;
} }
} }
@media (max-width: 767px) {
.media-container {
height: calc(100vh - 64px);
}
}
</style> </style>
<script> <script>
import ModalDialog from './ModalDialog.html' import ModalDialog from './ModalDialog.html'