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

fix overflow inside of modals (#432)

Browse source 
fixes #431
This commit is contained in:
Nolan Lawson 2018-08-17 22:26:08 -07:00 committed by GitHub
parent 092d9e98a5
commit 1be5fd3672
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
routes/_components/dialog/components/AccountProfileOptionsDialog.html
View file

@ -4,7 +4,7 @@
{title} {title}
background="var(--main-bg)" background="var(--main-bg)"
> >
<GenericDialogList {items} on:click="onClick(event)"/> <GenericDialogList selectable={false} {items} on:click="onClick(event)"/>
</ModalDialog> </ModalDialog>
<script> <script>
import ModalDialog from './ModalDialog.html' import ModalDialog from './ModalDialog.html'

36
routes/_components/dialog/components/GenericDialogList.html
View file

@ -5,12 +5,14 @@
<svg class="generic-dialog-list-item-svg"> <svg class="generic-dialog-list-item-svg">
<use xlink:href={item.icon} /> <use xlink:href={item.icon} />
</svg> </svg>
<span> <span class="generic-dialog-list-button-span">
{item.label} {item.label}
</span> </span>
<svg class="generic-dialog-list-item-svg {item.selected ? '' : 'hidden'}" aria-hidden={!item.selected}> {#if selectable}
<use xlink:href="#fa-check" /> <svg class="generic-dialog-list-item-svg {item.selected ? '' : 'hidden'}" aria-hidden={!item.selected}>
</svg> <use xlink:href="#fa-check" />
</svg>
{/if}
</button> </button>
</li> </li>
{/each} {/each}
@ -21,7 +23,7 @@
width: 100%; width: 100%;
border: 1px solid var(--settings-list-item-border); border: 1px solid var(--settings-list-item-border);
box-sizing: border-box; box-sizing: border-box;
min-width: 300px; min-width: 350px;
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
} }
.generic-dialog-list-item { .generic-dialog-list-item {
@ -43,10 +45,14 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.generic-dialog-list-button span { .generic-dialog-list-button-span {
flex: 1; flex: 1;
text-align: left;
margin-left: 20px; margin-left: 20px;
text-align: left;
width: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
.generic-dialog-list-button:hover { .generic-dialog-list-button:hover {
background: var(--settings-list-item-bg-hover); background: var(--settings-list-item-bg-hover);
@ -54,4 +60,16 @@
.generic-dialog-list-button:active { .generic-dialog-list-button:active {
background: var(--settings-list-item-bg-active); background: var(--settings-list-item-bg-active);
} }
@media (max-width: 767px) {
.generic-dialog-list {
min-width: calc(100vw - 20px);
}
.generic-dialog-list-button {
padding: 20px 10px;
}
.generic-dialog-list-button-span {
margin-left: 10px;
}
}
</style> </style>

2
routes/_components/dialog/components/PostPrivacyDialog.html
View file

@ -4,7 +4,7 @@
{title} {title}
background="var(--main-bg)" background="var(--main-bg)"
> >
<GenericDialogList {items} on:click="onClick(event)" /> <GenericDialogList selectable={true} {items} on:click="onClick(event)" />
</ModalDialog> </ModalDialog>
<script> <script>
import ModalDialog from './ModalDialog.html' import ModalDialog from './ModalDialog.html'

2
routes/_components/dialog/components/StatusOptionsDialog.html
View file

@ -4,7 +4,7 @@
{title} {title}
background="var(--main-bg)" background="var(--main-bg)"
> >
<GenericDialogList {items} on:click="onClick(event)"/> <GenericDialogList selectable={false} {items} on:click="onClick(event)"/>
</ModalDialog> </ModalDialog>
<script> <script>
import ModalDialog from './ModalDialog.html' import ModalDialog from './ModalDialog.html'