more elegant fix for autosuggestion covering toolbar

This commit is contained in:
Nolan Lawson 2018-04-05 21:35:22 -07:00
parent f5943c3c24
commit fe8ad175f2
2 changed files with 13 additions and 13 deletions

View File

@ -1,4 +1,4 @@
<div class="compose-autosuggest {{shown ? 'shown' : ''}}"
<div class="compose-autosuggest {{shown ? 'shown' : ''}} {{realm === 'dialog' ? 'is-dialog' : ''}}"
aria-hidden="true" >
<ComposeAutosuggestionList
items="{{searchResults}}"
@ -9,21 +9,29 @@
</div>
<style>
.compose-autosuggest {
opacity: 0;
position: absolute;
left: 5px;
top: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.1s linear;
min-width: 400px;
max-width: calc(100vw - 20px);
z-index: 7000;
}
.compose-autosuggest.is-dialog {
z-index: 11000;
}
.compose-autosuggest.shown {
pointer-events: auto;
opacity: 1
opacity: 1;
}
@media (max-width: 479px) {
.compose-autosuggest {
/* hack: move this over to the left on mobile so it's easier to see */
transform: translateX(-58px); /* avatar size 48px + 10px padding */
min-width: 0;
width: calc(100vw - 20px);
}
}

View File

@ -30,10 +30,8 @@
style="display: none;"
type="file"
accept=".jpg,.jpeg,.png,.gif,.webm,.mp4,.m4v,image/jpeg,image/png,image/gif,video/webm,video/mp4">
<div class="compose-autosuggest-wrapper">
<ComposeAutosuggest :realm :text />
</div>
</div>
<style>
.compose-box-toolbar {
grid-area: toolbar;
@ -44,12 +42,6 @@
display: flex;
align-items: center;
}
.compose-autosuggest-wrapper {
position: absolute;
left: 5px;
top: 0;
z-index: 7000;
}
</style>
<script>
import IconButton from '../IconButton.html'