cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

fix overflow inside of modals (#432) 

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

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

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

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

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