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

fix: fix compose button toolbar style on small devices (#1254)

Browse source
This commit is contained in:
Nolan Lawson 2019-05-28 22:24:22 -07:00 committed by GitHub
parent 8672ade314
commit 44a87dcd9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/routes/_components/compose/ComposeToolbar.html
View file

@ -1,11 +1,13 @@
<div class="compose-box-toolbar"> <div class="compose-box-toolbar">
<div class="compose-box-toolbar-items"> <div class="compose-box-toolbar-items">
<IconButton <IconButton
className="compose-toolbar-button"
label="Insert emoji" label="Insert emoji"
href="#fa-smile" href="#fa-smile"
on:click="onEmojiClick()" on:click="onEmojiClick()"
/> />
<IconButton <IconButton
className="compose-toolbar-button"
svgClassName={$uploadingMedia ? 'spin' : ''} svgClassName={$uploadingMedia ? 'spin' : ''}
label="Add media" label="Add media"
href={$uploadingMedia ? '#fa-spinner' : '#fa-camera'} href={$uploadingMedia ? '#fa-spinner' : '#fa-camera'}
@ -13,6 +15,7 @@
disabled={$uploadingMedia || (media.length === 4)} disabled={$uploadingMedia || (media.length === 4)}
/> />
<IconButton <IconButton
className="compose-toolbar-button"
label="{poll && poll.options && poll.options.length ? 'Remove poll' : 'Add poll'}" label="{poll && poll.options && poll.options.length ? 'Remove poll' : 'Add poll'}"
href="#fa-bar-chart" href="#fa-bar-chart"
on:click="onPollClick()" on:click="onPollClick()"
@ -20,11 +23,13 @@
pressed={poll && poll.options && poll.options.length} pressed={poll && poll.options && poll.options.length}
/> />
<IconButton <IconButton
className="compose-toolbar-button"
label="Adjust privacy (currently {postPrivacy.label})" label="Adjust privacy (currently {postPrivacy.label})"
href={postPrivacy.icon} href={postPrivacy.icon}
on:click="onPostPrivacyClick()" on:click="onPostPrivacyClick()"
/> />
<IconButton <IconButton
className="compose-toolbar-button"
label={contentWarningShown ? 'Remove content warning' : 'Add content warning'} label={contentWarningShown ? 'Remove content warning' : 'Add content warning'}
href="#fa-exclamation-triangle" href="#fa-exclamation-triangle"
on:click="onContentWarningClick()" on:click="onContentWarningClick()"
@ -47,6 +52,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
@media (max-width: 320px) {
:global(button.icon-button.compose-toolbar-button) {
padding-left: 8px;
padding-right: 8px;
}
}
</style> </style>
<script> <script>
import IconButton from '../IconButton.html' import IconButton from '../IconButton.html'