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

Fix compose button covering content (#95) 

Fixes #43 for browsers that support fit-content
This commit is contained in:
Nolan Lawson 2018-04-12 20:23:38 -07:00 committed by GitHub
parent 7853285eea
commit 2c6576e09d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
routes/_components/compose/ComposeBox.html
View File

@ -60,7 +60,20 @@
} }
.compose-box-button-wrapper { .compose-box-button-wrapper {
width: 100%; /*
* We want pointer-events only for the sticky button, so use fit-content so that
* the element doesn't take up the full width, and then set its left margin to
* auto so that it sticks to the right. fit-content doesn't work in Edge, but
* that just means that content that is level with the button is not clickable.
*
* Before this, I tried a wrapper element with pointer-events:none and then
* pointer-events:auto on the button itself, but in Chrome that made it so
* that occasionally hit detection failed and a click on the button would fall
* through and click something underneath, which is a worse bug.
*/
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }

2
routes/_components/compose/ComposeButton.html
View File

@ -1,4 +1,4 @@
<div class="compose-box-button-halo frosted-glass"> <div class="compose-box-button-halo">
<button class="primary compose-box-button" <button class="primary compose-box-button"
:disabled :disabled
aria-label="{{sticky ? 'Compose' : 'Toot!'}}" aria-label="{{sticky ? 'Compose' : 'Toot!'}}"