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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
routes/_components/compose/ComposeAutosuggest.html
View File

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

10
routes/_components/compose/ComposeToolbar.html
View File

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