投稿フォームが画面外にはみ出さないように (#5203)
* 上下はみ出したウィンドウは上基準で収めるように * 投稿フォームを画面より長くしないように
This commit is contained in:
parent
b2ed45ae38
commit
e695f54ef0
|
@ -10,7 +10,7 @@
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div class="mk-post-form-window--body">
|
<div class="mk-post-form-window--body" :style="{ maxHeight: `${maxHeight}px` }">
|
||||||
<mk-note-preview v-if="reply" class="notePreview" :note="reply"/>
|
<mk-note-preview v-if="reply" class="notePreview" :note="reply"/>
|
||||||
<x-post-form ref="form"
|
<x-post-form ref="form"
|
||||||
:reply="reply"
|
:reply="reply"
|
||||||
|
@ -61,6 +61,12 @@ export default Vue.extend({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
maxHeight() {
|
||||||
|
return window.innerHeight - 50;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
(this.$refs.form as any).focus();
|
(this.$refs.form as any).focus();
|
||||||
|
|
|
@ -260,14 +260,14 @@ export default Vue.extend({
|
||||||
let moveLeft = me.clientX - moveBaseX;
|
let moveLeft = me.clientX - moveBaseX;
|
||||||
let moveTop = me.clientY - moveBaseY;
|
let moveTop = me.clientY - moveBaseY;
|
||||||
|
|
||||||
// 上はみ出し
|
// 下はみ出し
|
||||||
if (moveTop < 0) moveTop = 0;
|
if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
|
||||||
|
|
||||||
// 左はみ出し
|
// 左はみ出し
|
||||||
if (moveLeft < 0) moveLeft = 0;
|
if (moveLeft < 0) moveLeft = 0;
|
||||||
|
|
||||||
// 下はみ出し
|
// 上はみ出し
|
||||||
if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
|
if (moveTop < 0) moveTop = 0;
|
||||||
|
|
||||||
// 右はみ出し
|
// 右はみ出し
|
||||||
if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
|
if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
|
||||||
|
@ -442,10 +442,10 @@ export default Vue.extend({
|
||||||
const browserHeight = window.innerHeight;
|
const browserHeight = window.innerHeight;
|
||||||
const windowWidth = main.offsetWidth;
|
const windowWidth = main.offsetWidth;
|
||||||
const windowHeight = main.offsetHeight;
|
const windowHeight = main.offsetHeight;
|
||||||
if (position.left < 0) main.style.left = 0;
|
if (position.left < 0) main.style.left = 0; // 左はみ出し
|
||||||
if (position.top < 0) main.style.top = 0;
|
if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px'; // 下はみ出し
|
||||||
if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px';
|
if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px'; // 右はみ出し
|
||||||
if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px';
|
if (position.top < 0) main.style.top = 0; // 上はみ出し
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue