flash: sticky buttons
* sticky save buttons * fix * add spacer * fix design
This commit is contained in:
parent
e790aa0548
commit
761b0a3ac2
|
@ -11,6 +11,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkInput v-model="title">
|
||||
<template #label>{{ i18n.ts._play.title }}</template>
|
||||
</MkInput>
|
||||
<MkSelect v-model="visibility">
|
||||
<template #label>{{ i18n.ts.visibility }}</template>
|
||||
<template #caption>{{ i18n.ts._play.visibilityDescription }}</template>
|
||||
<option :key="'public'" :value="'public'">{{ i18n.ts.public }}</option>
|
||||
<option :key="'private'" :value="'private'">{{ i18n.ts.private }}</option>
|
||||
</MkSelect>
|
||||
<MkTextarea v-model="summary" :mfmAutocomplete="true" :mfmPreview="true">
|
||||
<template #label>{{ i18n.ts._play.summary }}</template>
|
||||
</MkTextarea>
|
||||
|
@ -18,19 +24,19 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkCodeEditor v-model="script" lang="is">
|
||||
<template #label>{{ i18n.ts._play.script }}</template>
|
||||
</MkCodeEditor>
|
||||
<MkSelect v-model="visibility">
|
||||
<template #label>{{ i18n.ts.visibility }}</template>
|
||||
<template #caption>{{ i18n.ts._play.visibilityDescription }}</template>
|
||||
<option :key="'public'" :value="'public'">{{ i18n.ts.public }}</option>
|
||||
<option :key="'private'" :value="'private'">{{ i18n.ts.private }}</option>
|
||||
</MkSelect>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
<template #footer>
|
||||
<div :class="$style.footer">
|
||||
<MkSpacer>
|
||||
<div class="_buttons">
|
||||
<MkButton primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
|
||||
<MkButton @click="show"><i class="ti ti-eye"></i> {{ i18n.ts.show }}</MkButton>
|
||||
<MkButton v-if="flash" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</template>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
|
@ -459,3 +465,8 @@ definePageMetadata(() => ({
|
|||
title: flash.value ? `${i18n.ts._play.edit}: ${flash.value.title}` : i18n.ts._play.new,
|
||||
}));
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.footer {
|
||||
background: var(--panel);
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue