diff options
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/modal-page-window.vue | 46 |
1 files changed, 35 insertions, 11 deletions
diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue index f57516360d..31931a89b7 100644 --- a/src/client/components/modal-page-window.vue +++ b/src/client/components/modal-page-window.vue @@ -2,12 +2,16 @@ <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')"> <div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }"> <div class="header" @contextmenu="onContextmenu"> - <span class="title"> - + <button v-if="history.length > 0" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button> + <span v-else style="display: inline-block; width: 20px"></span> + <span v-if="pageInfo" class="title"> + <i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon"></i> + <span>{{ pageInfo.title }}</span> </span> + <button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button> </div> <div class="body _flat_"> - <XHeader :info="pageInfo"/> + <XHeader v-if="!pageInfo?.hide" :info="pageInfo"/> <keep-alive> <component :is="component" v-bind="props" :ref="changePage"/> </keep-alive> @@ -173,19 +177,39 @@ export default defineComponent({ $height-narrow: 42px; display: flex; flex-shrink: 0; + height: $height; + line-height: $height; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; box-shadow: 0px 1px var(--divider); - > .title { - flex: 1; + > button { height: $height; - font-weight: bold; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + width: $height; + + &:hover { + color: var(--fgHighlighted); + } + } + + @media (max-width: 500px) { + height: $height-narrow; + line-height: $height-narrow; + padding-left: 16px; - @media (max-width: 500px) { + > button { height: $height-narrow; - padding-left: 16px; + width: $height-narrow; + } + } + + > .title { + flex: 1; + + > .icon { + margin-right: 0.5em; } } } |