fix: Manage the width to take scrollbars into account (#1138)

* Manage the width to take scrollbars into account

* Additional modal layout styles changes
This commit is contained in:
sgenoud 2019-04-13 20:02:25 +02:00 committed by Nolan Lawson
parent 5642b10c72
commit 79184570b1
16 changed files with 19 additions and 34 deletions

View file

@ -16,7 +16,7 @@
opacity: 0;
transition: opacity 0.1s linear;
min-width: 400px;
max-width: calc(100vw - 20px);
max-width: calc(100% - 20px);
z-index: 7000;
}
.compose-autosuggest.is-dialog {

View file

@ -39,19 +39,12 @@
"avatar toolbar toolbar length"
"avatar media media media";
grid-template-columns: min-content minmax(0, max-content) 1fr 1fr;
width: 560px;
max-width: calc(100vw - 40px);
}
.compose-box.direct-reply {
background-color: var(--status-direct-background);
}
.compose-box.slim-size {
width: 540px;
max-width: calc(100vw - 60px);
}
.compose-box-fade-in {
transition: opacity 0.2s linear; /* main page reveal */
}
@ -69,13 +62,6 @@
@media (max-width: 767px) {
.compose-box {
padding: 10px 10px 0 10px;
max-width: calc(100vw - 20px);
width: 580px;
}
.compose-box.slim-size {
width: 560px;
max-width: calc(100vw - 40px);
}
.compose-box-realm-dialog {
@ -142,7 +128,6 @@
'compose-box',
`compose-box-realm-${realm}`,
overLimit && 'over-char-limit',
size === 'slim' && 'slim-size',
isReply && postPrivacyKey === 'direct' && 'direct-reply'
)),
hideAndFadeIn: ({ hidden }) => (classname(

View file

@ -11,6 +11,8 @@
.file-drop {
display: block;
position: relative;
max-width: 100%;
width: 100%;
}
.file-drop-info {

View file

@ -4,7 +4,7 @@
{title}
background="var(--main-bg)"
>
<ComposeBox realm="dialog" size="slim" autoFocus="true" />
<ComposeBox realm="dialog" autoFocus="true" />
</ModalDialog>
<script>
import ModalDialog from './ModalDialog.html'
@ -37,4 +37,4 @@
ComposeBox
}
}
</script>
</script>

View file

@ -21,7 +21,7 @@
grid-gap: 10px;
padding: 10px 20px;
width: 400px;
max-width: calc(100vw - 40px);
max-width: calc(100% - 40px);
}
</style>
<script>

View file

@ -21,7 +21,6 @@
border: 1px solid var(--settings-list-item-border);
box-sizing: border-box;
min-width: 350px;
max-width: calc(100vw - 20px);
}
.generic-dialog-list-item {
border: 1px solid var(--settings-list-item-border);
@ -69,7 +68,7 @@
@media (max-width: 479px) {
.generic-dialog-list {
min-width: calc(100vw - 20px);
min-width: calc(100% - 20px);
}
.generic-dialog-list-button {
padding: 15px 10px;

View file

@ -79,7 +79,7 @@
<Shortcut scope='modal-{id}' key="ArrowRight" on:pressed="next()" />
<style>
:global(.media-modal-dialog) {
max-width: calc(100vw);
max-width: calc(100%);
}
.media-container {
height: calc(100% - 64px); /* 44px X button height + 20px padding */

View file

@ -59,6 +59,8 @@
display: flex;
flex-direction: row;
max-height: calc(100% - 20px);
max-width: calc(100% - 20px);
flex: 0 1 580px;
}
.modal-dialog-contents.should-animate {
transition: opacity 0.2s linear;
@ -69,7 +71,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
max-width: calc(100vw - 20px);
width: 100%;
max-width: 100%;
flex: 1;
}
.modal-dialog-header {

View file

@ -129,7 +129,7 @@
word-wrap: break-word;
}
:global(.report-dialog-contents .confirmation-dialog-form) {
max-width: calc(100vw - 20px);
max-width: calc(100% - 20px);
}
}
</style>

View file

@ -15,7 +15,6 @@
grid-row-gap: 5px;
overflow: hidden;
max-width: calc(100vw - 40px);
margin: 10px 10px 10px 5px;
}

View file

@ -47,7 +47,6 @@
<style>
.status-article {
max-width: calc(100vw - 40px);
padding: 10px 20px;
display: grid;
grid-template-areas:
@ -71,7 +70,6 @@
}
.status-article.status-in-timeline {
width: 560px;
border-bottom: 1px solid var(--main-border);
}
@ -104,10 +102,6 @@
@media (max-width: 767px) {
.status-article {
padding: 10px 10px;
max-width: calc(100vw - 20px);
}
.status-article.status-in-timeline {
width: 580px;
}
}
</style>

View file

@ -27,7 +27,6 @@
color: inherit;
overflow: hidden;
max-width: calc(100vw - 40px);
margin: 10px 10px 10px 5px;
border: 1px solid var(--settings-list-item-border);

View file

@ -1,6 +1,5 @@
<div class="status-article-compose-box">
<ComposeBox realm={originalStatusId}
size="slim"
autoFocus="true"
hideBottomBorder="true"
isReply="true"
@ -12,6 +11,7 @@
<style>
.status-article-compose-box {
grid-area: compose;
max-width: 100%;
}
</style>
<script>

View file

@ -21,6 +21,7 @@
<style>
.virtual-list {
position: relative;
width: 100%;
}
</style>
<script>

View file

@ -12,6 +12,7 @@
<style>
.virtual-list-item {
position: absolute;
width: 100%;
top: 0;
opacity: 0;
pointer-events: none;

View file

@ -52,7 +52,9 @@ body {
main {
position: relative;
width: 602px;
max-width: 100vw;
// take into account scrollbars;
// https://stackoverflow.com/a/34884924
max-width: 100%;
padding: 0;
box-sizing: border-box;
margin: 30px auto 15px;