diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2020-07-11 10:13:11 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-07-11 10:13:11 +0900 |
| commit | cf3fc97202588e835ade5d6ab1a3c087e46958ad (patch) | |
| tree | b3fe472b455bf913a47df4d41b1363c7122bf1d9 /src/client/components/ui/container.vue | |
| parent | タイムライン上でTwitterウィジットを展開できるようにな... (diff) | |
| download | misskey-cf3fc97202588e835ade5d6ab1a3c087e46958ad.tar.gz misskey-cf3fc97202588e835ade5d6ab1a3c087e46958ad.tar.bz2 misskey-cf3fc97202588e835ade5d6ab1a3c087e46958ad.zip | |
Deck (#6504)
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
Diffstat (limited to 'src/client/components/ui/container.vue')
| -rw-r--r-- | src/client/components/ui/container.vue | 38 |
1 files changed, 32 insertions, 6 deletions
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue index 3fed1f65c7..6a718439aa 100644 --- a/src/client/components/ui/container.vue +++ b/src/client/components/ui/container.vue @@ -1,5 +1,5 @@ <template> -<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader }"> +<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable }" v-size="[{ max: 500 }]"> <header v-if="showHeader"> <div class="title"><slot name="header"></slot></div> <slot name="func"></slot> @@ -47,6 +47,11 @@ export default Vue.extend({ required: false, default: true }, + scrollable: { + type: Boolean, + required: false, + default: false + }, }, data() { return { @@ -107,10 +112,19 @@ export default Vue.extend({ box-shadow: none !important; } + &.scrollable { + display: flex; + flex-direction: column; + + > div { + overflow: auto; + } + } + > header { position: relative; box-shadow: 0 1px 0 0 var(--panelHeaderDivider); - z-index: 1; + z-index: 2; background: var(--panelHeaderBg); color: var(--panelHeaderFg); @@ -118,10 +132,6 @@ export default Vue.extend({ margin: 0; padding: 12px 16px; - @media (max-width: 500px) { - padding: 8px 10px; - } - > [data-icon] { margin-right: 6px; } @@ -141,5 +151,21 @@ export default Vue.extend({ height: 100%; } } + + &.max-width_500px { + > header { + > .title { + padding: 8px 10px; + } + } + } +} + +._forceContainerFull_ .ukygtjoj { + > header { + > .title { + padding: 12px 16px !important; + } + } } </style> |