diff options
| author | tamaina <tamaina@hotmail.co.jp> | 2020-01-31 04:53:16 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-01-31 04:53:16 +0900 |
| commit | db24dddeffe6198814a1e92b480dc1393d868da3 (patch) | |
| tree | bf78ed0767c9a438abba579306cc950fc75abfcd /src | |
| parent | fix (diff) | |
| download | sharkey-db24dddeffe6198814a1e92b480dc1393d868da3.tar.gz sharkey-db24dddeffe6198814a1e92b480dc1393d868da3.tar.bz2 sharkey-db24dddeffe6198814a1e92b480dc1393d868da3.zip | |
Make notifications widget flexible (#5791)
* Make notifications widget flexible
* fix
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/app.vue | 2 | ||||
| -rw-r--r-- | src/client/widgets/notifications.vue | 56 | ||||
| -rw-r--r-- | src/client/widgets/timeline.vue | 4 |
3 files changed, 53 insertions, 9 deletions
diff --git a/src/client/app.vue b/src/client/app.vue index eef6daad20..458917d706 100644 --- a/src/client/app.vue +++ b/src/client/app.vue @@ -929,7 +929,7 @@ export default Vue.extend({ > div { position: sticky; top: calc(#{$header-height} + var(--margin)); - height: calc(100vh - #{$header-height} - var(--margin) * 2); + height: calc(100vh - #{$header-height} - var(--margin)); &.edit { overflow: auto; diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue index bc9b3a65a0..39a5880332 100644 --- a/src/client/widgets/notifications.vue +++ b/src/client/widgets/notifications.vue @@ -1,9 +1,9 @@ <template> -<div class="mkw-notifications"> - <mk-container :show-header="!props.compact"> +<div class="mkw-notifications" :style="`flex-basis: calc(${basis}% - var(--margin)); height: ${previewHeight}px;`"> + <mk-container :show-header="!props.compact" class="container"> <template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template> - <div style="height: 300px; overflow: auto; background: var(--bg);"> + <div class="tl"> <x-notifications/> </div> </mk-container> @@ -17,10 +17,14 @@ import XNotifications from '../components/notifications.vue'; import define from './define'; import i18n from '../i18n'; +const basisSteps = [25, 50, 75, 100] +const previewHeights = [200, 300, 400, 500] + export default define({ name: 'notifications', props: () => ({ - compact: false + compact: false, + basisStep: 0 }) }).extend({ i18n, @@ -36,11 +40,51 @@ export default define({ }; }, + computed: { + basis(): number { + return basisSteps[this.props.basisStep] || 25 + }, + + previewHeight(): number { + return previewHeights[this.props.basisStep] || 200 + } + }, + methods: { func() { - this.props.compact = !this.props.compact; + if (this.props.basisStep === basisSteps.length - 1) { + this.props.basisStep = 0 + this.props.compact = !this.props.compact; + } else { + this.props.basisStep += 1 + } + this.save(); - }, + } } }); </script> + +<style lang="scss"> +.mkw-notifications { + flex-grow: 1; + flex-shrink: 0; + min-height: 0; // https://www.gwtcenter.com/min-height-required-on-firefox-flexbox + + .container { + display: flex; + flex-direction: column; + height: 100%; + + > div { + overflow: auto; + flex-grow: 1; + } + } + + .tl { + height: 100%; + background: var(--bg); + } +} +</style> diff --git a/src/client/widgets/timeline.vue b/src/client/widgets/timeline.vue index 388f586135..28587bc881 100644 --- a/src/client/widgets/timeline.vue +++ b/src/client/widgets/timeline.vue @@ -1,5 +1,5 @@ <template> -<div class="mkw-timeline" :style="`flex-basis: ${basis}%; height: ${previewHeight}px;`"> +<div class="mkw-timeline" :style="`flex-basis: calc(${basis}% - var(--margin)); height: ${previewHeight}px;`"> <mk-container :show-header="!props.compact" class="container"> <template #header> <button @click="choose" class="_button"> @@ -61,7 +61,7 @@ export default define({ }, previewHeight(): number { - return previewHeights[this.props.basisStep] || 300 + return previewHeights[this.props.basisStep] || 200 } }, |