add an animation for content warnings

This commit is contained in:
Nolan Lawson 2018-03-03 16:25:22 -08:00
parent 9149887fec
commit 73b3895b23
2 changed files with 12 additions and 2 deletions

View file

@ -1,7 +1,10 @@
<div class="compose-box {{overLimit ? 'over-char-limit' : ''}}"> <div class="compose-box {{overLimit ? 'over-char-limit' : ''}}">
<ComposeAuthor /> <ComposeAuthor />
{{#if contentWarningShown}} {{#if contentWarningShown}}
<ComposeContentWarning :realm :contentWarning /> <div class="compose-content-warning-wrapper"
transition:slide="{duration: 333}">
<ComposeContentWarning :realm :contentWarning />
</div>
{{/if}} {{/if}}
<ComposeInput :realm :text /> <ComposeInput :realm :text />
<ComposeLengthGauge :length :overLimit /> <ComposeLengthGauge :length :overLimit />
@ -30,6 +33,10 @@
max-width: calc(100vw - 40px); max-width: calc(100vw - 40px);
} }
.compose-content-warning-wrapper {
grid-area: cw;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.compose-box { .compose-box {
padding: 10px 10px; padding: 10px 10px;
@ -50,6 +57,7 @@
import { measureText } from '../../_utils/measureText' import { measureText } from '../../_utils/measureText'
import { CHAR_LIMIT, POST_PRIVACY_OPTIONS } from '../../_static/statuses' import { CHAR_LIMIT, POST_PRIVACY_OPTIONS } from '../../_static/statuses'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { slide } from 'svelte-transitions'
export default { export default {
components: { components: {
@ -78,6 +86,9 @@
overLimit: (length) => length > CHAR_LIMIT, overLimit: (length) => length > CHAR_LIMIT,
contentWarningShown: (composeData) => composeData.contentWarningShown, contentWarningShown: (composeData) => composeData.contentWarningShown,
contentWarning: (composeData) => composeData.contentWarning || '' contentWarning: (composeData) => composeData.contentWarning || ''
},
transitions: {
slide
} }
} }
</script> </script>

View file

@ -6,7 +6,6 @@
/> />
<style> <style>
.content-warning-input { .content-warning-input {
grid-area: cw;
font-size: 1.2em; font-size: 1.2em;
margin: 10px 0 0 5px; margin: 10px 0 0 5px;
padding: 10px; padding: 10px;