diff options
3 files changed, 16 insertions, 50 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js index 375954cb6..e6a689575 100644 --- a/app/javascript/flavours/glitch/features/drawer/index.js +++ b/app/javascript/flavours/glitch/features/drawer/index.js @@ -73,14 +73,11 @@ class Drawer extends React.Component { searchValue, submitted, } = this.props; - - let innerDrawerAttrs = { - className: classNames('drawer--inner', 'mbstobon-' + elefriend), - }; + const computedClass = classNames('drawer', `mbstobon-${elefriend}`); // The result. return ( - <div className='drawer'> + <div className={computedClass}> {multiColumn ? ( <DrawerHeader columns={columns} @@ -99,10 +96,8 @@ class Drawer extends React.Component { /> <div className='contents'> <DrawerAccount account={account} /> - <div {...innerDrawerAttrs}> - <Composer /> - {multiColumn && <button className='mastodon' onClick={onClickElefriend} />} - </div> + <Composer /> + {multiColumn && <button className='mastodon' onClick={onClickElefriend} />} <DrawerResults results={results} visible={submitted && !searchHidden} diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 9f8205c9b..11ac0a37f 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -40,7 +40,9 @@ .react-swipeable-view-container & { height: 100% } & > .contents { + display: flex; position: relative; + flex-direction: column; padding: 0; width: 100%; height: 100%; @@ -48,22 +50,8 @@ overflow-x: hidden; overflow-y: auto; contain: strict; - } - - .drawer--inner { - position: absolute; - top: 0; - left: 0; - box-sizing: border-box; - padding: 0; - display: flex; - flex-direction: column; - overflow: hidden; - overflow-y: auto; - width: 100%; - height: 100%; - .mastodon { + & > .mastodon { flex: 1; border: none; cursor: inherit; @@ -71,14 +59,14 @@ } @for $i from 0 through 3 { - .drawer--inner.mbstobon-#{$i} { + &.mbstobon-#{$i} > .contents { @if $i == 3 { - background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto; + background: url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%); } @else { - background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto; + background: url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%); } - .mastodon { + & > .mastodon { background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain; @if $i != 3 { diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 4f19042c8..9d52e8b08 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -12,21 +12,12 @@ word-wrap: break-word; font-weight: 400; overflow: visible; - white-space: pre-wrap; padding-top: 5px; &:focus { outline: 0; } - &.status__content--with-spoiler { - white-space: normal; - - .status__content__text { - white-space: pre-wrap; - } - } - .emojione { width: 20px; height: 20px; @@ -35,6 +26,7 @@ p { margin-bottom: 20px; + white-space: pre-wrap; &:last-child { margin-bottom: 0; @@ -69,11 +61,10 @@ } .status__content__spoiler { - background: lighten($ui-base-color, 30%); - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; + display: none; + + &.status__content__spoiler--visible { + display: block; } } @@ -85,14 +76,6 @@ text-decoration: none; } } - - .status__content__text { - display: none; - - &.status__content__spoiler--visible { - display: block; - } - } } .status__content__spoiler-link { |