テクニカル諏訪子
1年前
コミット
e61ba26d1c
130個のファイルの変更、148行の追加、80624行の削除
|
変更前 幅: | 高さ: | サイズ: 46 KiB 変更後 幅: | 高さ: | サイズ: 220 KiB |
長すぎる行があるためファイル差分は表示されません
@ -1 +0,0 @@ |
||||
require('./bootstrap'); |
||||
@ -1,42 +0,0 @@ |
||||
window._ = require('lodash'); |
||||
|
||||
/** |
||||
* We'll load the axios HTTP library which allows us to easily issue requests |
||||
* to our Laravel back-end. This library automatically handles sending the |
||||
* CSRF token as a header based on the value of the "XSRF" token cookie. |
||||
*/ |
||||
|
||||
window.Vue = require('vue'); |
||||
window.axios = require('axios'); |
||||
|
||||
try { |
||||
window.$ = window.jQuery = require('jquery'); |
||||
|
||||
require('bootstrap'); |
||||
} catch (e) {} |
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; |
||||
|
||||
Vue.component('content-type', require('./components/contenttype.vue').default); |
||||
Vue.component('delete-content', require('./components/deletecontent.vue').default); |
||||
Vue.component('delete-video', require('./components/deletevideo.vue').default); |
||||
Vue.component('delete-game', require('./components/deletegame.vue').default); |
||||
|
||||
const app = new Vue({ el: '#app' }); |
||||
|
||||
/** |
||||
* Echo exposes an expressive API for subscribing to channels and listening |
||||
* for events that are broadcast by Laravel. Echo and event broadcasting |
||||
* allows your team to easily build robust real-time web applications. |
||||
*/ |
||||
|
||||
// import Echo from 'laravel-echo';
|
||||
|
||||
// window.Pusher = require('pusher-js');
|
||||
|
||||
// window.Echo = new Echo({
|
||||
// broadcaster: 'pusher',
|
||||
// key: process.env.MIX_PUSHER_APP_KEY,
|
||||
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
|
||||
// forceTLS: true
|
||||
// });
|
||||
@ -1,150 +0,0 @@ |
||||
<template> |
||||
<div id="comments" class="comments-area clearfix"> |
||||
<h3 class="comments-count section-heading uppercase"><span>{{ comment.total }} 件のコメント</span></h3> |
||||
<div style="margin: 12px 0;"> |
||||
<span v-if="isvideo !== 'n'"> |
||||
<hr /> |
||||
<div v-if="err" class="alert alert-danger">{{ err }}</div> |
||||
<span v-if="Object.keys(user).length === 0"> |
||||
<div class="form-group row"> |
||||
<div class="col-md-4 col-lg-3">名前</div> |
||||
<div class="input-group col-md col-lg"> |
||||
<input type="text" id="new-name" class="form-control" v-model="newComment.name" placeholder="ご入力しない場合、名前は「名無しのテクニシャン」になります。" /> |
||||
</div> |
||||
</div> |
||||
<div class="form-group row"> |
||||
<div class="col-md-4 col-lg-3">メールアドレス</div> |
||||
<div class="input-group col-md col-lg"> |
||||
<input type="text" id="new-mail" class="form-control" v-model="newComment.mail" placeholder="返信される場合、メールに通知を送ります。" /> |
||||
</div> |
||||
</div> |
||||
</span> |
||||
<span v-else> |
||||
<div class="form-group row"> |
||||
<div class="col-md-4 col-lg-3">名前</div> |
||||
<div class="input-group col-md col-lg"> |
||||
<a :href="`/profile/${user.user_id}`" :style="user.showcol"><img style="width: 24px; height: 24px;" :src="user.avatar" :alt="`${user.showname}さんのアイコン`"> {{ user.showname }}</a> |
||||
</div> |
||||
</div> |
||||
</span> |
||||
<div class="row"> |
||||
<div class="col-md-4 col-lg-3">本文 <span class="badge badge-danger">必須</span></div> |
||||
<div class="col-md col-lg"> |
||||
<textarea class="form-control" id="new-message" rows="4" v-on:keyup.ctrl.13="send" v-model="newComment.text"></textarea> |
||||
</div> |
||||
</div> |
||||
<div class="row" style="margin-top: 16px;"> |
||||
<div class="col"> |
||||
<button type="button" class="btn btn-block btn-primary" @click="send">送信</button> |
||||
</div> |
||||
</div> |
||||
</span> |
||||
</div> |
||||
<div v-if="comment.total === 0">コメントがありません。</div> |
||||
<span v-else> |
||||
<ul class="commentlist" v-for="(c, i) in comment.come" :key="`comment-${i}`"> |
||||
<li class="comment even thread-even depth-1" :id="`li-comment-${c.id}`"> |
||||
<div class="commentnumber">{{ Number(i)+1 }}({{ c.src }})</div> |
||||
<div :id="`comment-${c.id}`" :ref="`comment-${c.id}`"> |
||||
<div> |
||||
<cite class="fn"> |
||||
<span v-if="c.isvideo === 'n'"> |
||||
<img style="height: 24px;" :src="c.icon" :alt="`${c.name}さんのアイコン`"> |
||||
<a :href="c.channel" style="overflow-wrap: break-word;">{{ (c.name || '名無しのテクニシャン') }}</a> |
||||
</span> |
||||
<span v-else> |
||||
<span v-if="c.user_id"><a :href="`/profile/${c.user_id}`" :style="c.showcol"><img style="width: 24px; height: 24px;" :src="c.avatar" :alt="`${c.showname}さんのアイコン`"> {{ c.showname }}</a></span> |
||||
<span v-else>{{ (c.name || '名無しのテクニシャン') }}</span> |
||||
</span> |
||||
</cite> <span class="says">より:</span> |
||||
<span class="comment-meta commentmetadata" :id="`#comment-${c.id}`"> <a :href="`#comment-${c.id}`">{{ c.created }}</a></span> |
||||
</div> |
||||
<p style="white-space: pre-wrap; word-wrap: break-word; width: 500px;" v-html="c.message"></p> |
||||
<div class="reply">返信（{{ c.replyCount }}）</div> |
||||
</div> |
||||
</li> |
||||
<span v-if="c.replies"> |
||||
<ul class="commentlist" v-for="(r, j) in c.replies" :key="`comment-${i}-reply-${j}`"> |
||||
<li class="comment even thread-even depth-2" :id="`li-comment-${r.id}`"> |
||||
<div class="commentnumber">{{ i+1 }}/{{ j+1 }}({{ c.src }})</div> |
||||
<div :id="`comment-${r.id}`"> |
||||
<div> |
||||
<cite class="fn"> |
||||
<span v-if="c.isvideo !== 'f'"> |
||||
<img style="height: 24px;" :src="r.icon" :alt="`${r.name}さんのアイコン`"> |
||||
<a :href="r.channel">{{ (r.name || '名無しのテクニシャン') }}</a> |
||||
</span> |
||||
<span v-else> |
||||
<span v-if="r.user_id"><a :href="`/profile/${r.user_id}`" :style="r.showcol"><img style="width: 24px; height: 24px;" :src="r.avatar" :alt="`${r.showname}さんのアイコン`"> {{ r.showname }}</a></span> |
||||
<span v-else>{{ (r.name || '名無しのテクニシャン') }}</span> |
||||
</span> |
||||
</cite> <span class="says">より:</span> |
||||
<span class="comment-meta commentmetadata" :id="`#comment-${r.id}`"> <a :href="`#comment-${r.id}`">{{ r.created }}</a></span> |
||||
</div> |
||||
<p style="white-space: pre-wrap; word-wrap: break-word; width: 500px;" v-html="r.message"></p> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</span> |
||||
</ul> |
||||
</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { user: Object, slug: '', isvideo: '', comments: Object }, |
||||
data: function () { return { comment: this.comments, newComment: {}, err: '', loading: true, sending: false } }, |
||||
created: function () { this.reset(); }, |
||||
methods: { |
||||
reset () { |
||||
this.loading = false; |
||||
this.newComment.name = ''; |
||||
this.newComment.mail = ''; |
||||
this.newComment.text = ''; |
||||
}, |
||||
send () { |
||||
this.err = ''; |
||||
this.sending = true; |
||||
|
||||
axios.post('/api/comment/new', { |
||||
user_id: this.user.user_id, |
||||
comment: this.newComment, |
||||
isvideo: this.isvideo, |
||||
slug: this.slug |
||||
}).then(res => { |
||||
this.sending = false; |
||||
if (res.data.status === '010100') { this.comment.come.unshift(res.data.result); this.comment.total++; this.reset(); } |
||||
else this.err = 'エラーコード【' + res.data.status + '】' + res.data.message; |
||||
}).catch(err => { |
||||
this.sending = false; |
||||
this.err = 'サーバーエラーコード【' + err.response.status + '】' + err.response.data.message; |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.fn { |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
color: #20ec77; |
||||
} |
||||
.comment-meta a { |
||||
color: #bdc3c7; |
||||
} |
||||
.commentlist p { |
||||
margin: 0 0 10px; |
||||
padding: 10px 0 40px 0; |
||||
font-size: 20px; |
||||
} |
||||
.commentnumber { |
||||
float: left; |
||||
margin-right: 5px; |
||||
font-size: 16px; |
||||
} |
||||
ul { |
||||
list-style: none; |
||||
} |
||||
</style> |
||||
@ -1,76 +0,0 @@ |
||||
<template> |
||||
<span> |
||||
<div class="row body"> |
||||
<div class="col-md-3"><b>種類</b></div> |
||||
<div class="col"> |
||||
<div class="form-check"> |
||||
<input class="form-check-input" name="isPost" type="radio" id="type-post" :value="1" v-model="choice"> |
||||
<label class="form-check-label" for="type-post">ポスト</label> |
||||
</div> |
||||
<div class="form-check"> |
||||
<input class="form-check-input" name="isPost" type="radio" id="type-page" :value="0" v-model="choice"> |
||||
<label class="form-check-label" for="type-page">ページ</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div v-if="choice === 1"> |
||||
<div class="row body"> |
||||
<div class="col-md-3"><b>公開設定</b></div> |
||||
<div class="col"> |
||||
<select id="public_status" name="public_status" class="form-control" v-model="pub"> |
||||
<option :value="0">公開</option> |
||||
<option :value="1">スケジュールを設定</option> |
||||
<option :value="2">限定公開</option> |
||||
<option :value="3">非公開</option> |
||||
<option :value="4">下書き</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
<div class="row body" v-if="pub === 1"> |
||||
<div class="col-md-3"><b>公開日時</b></div> |
||||
<div class="col"> |
||||
<date-picker name="publish_date" v-model="pubdate" :config="options" id="publish_date" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="row body" v-else> |
||||
<div class="col-md-3"><b>メニュー</b></div> |
||||
<div class="col"> |
||||
<div class="form-group form-check"> |
||||
<input type="checkbox" name="isMenu" class="form-check-input" id="menu" v-model="menu"> |
||||
<label class="form-check-label" for="menu">メニューに表示する</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</span> |
||||
</template> |
||||
|
||||
<script> |
||||
import datePicker from 'vue-bootstrap-datetimepicker'; |
||||
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css'; |
||||
|
||||
export default { |
||||
components: { datePicker }, |
||||
props: { c: String, p: String, m: null, d: null }, |
||||
data: function () { |
||||
return { |
||||
options: { format: 'YYYY年MM月DD日 HH:mm:ss', locale: 'ja', useCurrent: true, showClear: true, showClose: true }, |
||||
choice: Number(this.c), |
||||
pub: Number(this.p), |
||||
menu: this.m, |
||||
pubdate: this.d |
||||
} |
||||
}, |
||||
watch: { |
||||
choice: function (v) { |
||||
this.choice = Number(this.choice); |
||||
if (this.choice === 0) this.pub = 0; |
||||
else this.menu = false; |
||||
}, |
||||
pub: function (v) { |
||||
this.pub = Number(this.pub); |
||||
if (this.pub !== 1) this.pubdate = null; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,230 +0,0 @@ |
||||
<template> |
||||
<div class="col"> |
||||
<button @click="show = true" class="btn btn-block btn-danger">投稿の削除</button> |
||||
<span v-if="show"> |
||||
<vue-draggable-resizable style="border: 0px solid #232629;" :drag-handle="'.drag-handle'" class-name-handle="resize-handle" class="disco" :x="-500" :y="10" :z="99999999"> |
||||
<div style="width: 100%; position: relative;"> |
||||
<div class="drag-handle-left"></div> |
||||
<div class="drag-handle">投稿の削除</div> |
||||
<div class="drag-handle-right" @click="show = false"></div> |
||||
</div> |
||||
<div class="konsole_left"></div> |
||||
<div style="text-align: center; font-size: 18px; padding-top: 10px;">本当に現在の投稿を削除しますか？</div> |
||||
<div style="text-align:right; line-height: 15; padding: 10px;"> |
||||
<button type="button" class="btn btn2 btn-popup" @click="show = false">キャンセル</button> |
||||
<button type="button" class="btn btn2 btn-popup" @click="del">削除</button> |
||||
</div> |
||||
<div class="konsole_right"></div> |
||||
<div class="konsole_bottom_left"></div> |
||||
<div class="konsole_bottom"></div> |
||||
<div class="konsole_bottom_right"></div> |
||||
</vue-draggable-resizable> |
||||
</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import VueDraggableResizable from 'vue-draggable-resizable'; |
||||
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'; |
||||
|
||||
Vue.component('vue-draggable-resizable', VueDraggableResizable); |
||||
|
||||
export default { |
||||
props: { slug: '' }, |
||||
data: function () { |
||||
return { |
||||
show: false, |
||||
width: 0, |
||||
height: 0, |
||||
x: 0, |
||||
y: 0 |
||||
} |
||||
}, |
||||
watch: { text (x) { localStorage.shotanote = x; } }, |
||||
methods: { |
||||
del () { axios.post('/api/content/del', { slug: this.slug }).then(() => { window.location.href = '/'; }); }, |
||||
onResize: function (x, y, width, height) { |
||||
this.x = x |
||||
this.y = y |
||||
this.width = width |
||||
this.height = height |
||||
}, |
||||
onDrag: function (x, y) { |
||||
this.x = x |
||||
this.y = y |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.konsole { |
||||
width: 600px; |
||||
height: 358px; |
||||
margin: auto; |
||||
color: #fcfcfc; |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb:hover { |
||||
background: #452886; |
||||
} |
||||
|
||||
.drag-handle-left { |
||||
height: 30px; |
||||
width: 30px; |
||||
background: url('/img/bash/discord_top_left.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
.drag-handle { |
||||
cursor: default; |
||||
height: 30px; |
||||
background: url('/img/bash/top_bg.png') repeat-x; |
||||
width: auto; |
||||
margin-left: 30px; |
||||
margin-right: 28px; |
||||
padding-top: 7px; |
||||
padding-right: 0px; |
||||
text-align: center; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.drag-handle-right { |
||||
height: 30px; |
||||
width: 28px; |
||||
background: url('/img/bash/top_right.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
} |
||||
|
||||
.drag-handle-right:hover { |
||||
background: url('/img/bash/top_right_hover.png') no-repeat; |
||||
cursor: default; |
||||
} |
||||
|
||||
.drag-handle-max { |
||||
height: 30px; |
||||
width: 23px; |
||||
background: url('/img/bash/top_max.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 28px; |
||||
} |
||||
|
||||
.drag-handle-max:hover { |
||||
background: url('/img/bash/top_max_hover.png') no-repeat; |
||||
cursor: default; |
||||
} |
||||
|
||||
.drag-handle-min { |
||||
height: 30px; |
||||
width: 23px; |
||||
background: url('/img/bash/top_min.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 51px; |
||||
} |
||||
|
||||
.drag-handle-min:hover { |
||||
background: url('/img/bash/top_min_hover.png') no-repeat; |
||||
cursor: default; |
||||
} |
||||
|
||||
.konsole_left { |
||||
width: 2px; |
||||
background: url('/img/bash/left_bg.png') repeat-y; |
||||
position: absolute; |
||||
top: 30px; |
||||
left: 0; |
||||
height: 167px; |
||||
} |
||||
|
||||
.konsole_right { |
||||
width: 2px; |
||||
background: url('/img/bash/right_bg.png') repeat-y; |
||||
position: absolute; |
||||
height: 167px; |
||||
top: 30px; |
||||
right: 0; |
||||
} |
||||
|
||||
.disco { background-color: #252a35; } |
||||
|
||||
.noter, .noter:active, .noter:focus { |
||||
background: transparent; |
||||
border: 0; |
||||
min-height: 360px; |
||||
width: 290px; |
||||
resize: none; |
||||
} |
||||
|
||||
.btn2 { |
||||
width: 120px; |
||||
border: 1px solid #4d4d4d; |
||||
} |
||||
|
||||
.btn2:hover { |
||||
cursor: default; |
||||
border: 1px solid #3daee9; |
||||
} |
||||
|
||||
.btn-popup { |
||||
color: #fcfcfc; |
||||
background-color: #252a35; |
||||
} |
||||
|
||||
.vdr { |
||||
background-size: cover; |
||||
backdrop-filter: blur(17px); |
||||
font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed; |
||||
font-size: 12px; |
||||
/* white-space: pre; */ |
||||
color: #fcfcfc; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: 30px; |
||||
left: 2px; |
||||
height: 200px !important; |
||||
width: 500px !important; |
||||
padding: 0; |
||||
} |
||||
|
||||
.resize-handle-mr { |
||||
width: 2px; |
||||
background: url('/img/bash/right_bg.png') repeat-y; |
||||
position: absolute; |
||||
height: 325px; |
||||
top: 30px; |
||||
right: 0; |
||||
} |
||||
|
||||
.konsole_bottom_left { |
||||
width: 3px; |
||||
height: 3px; |
||||
background: url('/img/bash/bottom_left.png') no-repeat; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
.konsole_bottom { |
||||
height: 2px; |
||||
background: url('/img/bash/bottom_bg.png') repeat-x; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 2px; |
||||
width: 495px; |
||||
} |
||||
|
||||
.konsole_bottom_right { |
||||
height: 3px; |
||||
width: 3px; |
||||
background: url('/img/bash/bottom_right.png') no-repeat; |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
} |
||||
</style> |
||||
@ -1,230 +0,0 @@ |
||||
<template> |
||||
<div class="col"> |
||||
<button @click="show = true" class="btn btn-block btn-danger">削除</button> |
||||
<span v-if="show"> |
||||
<vue-draggable-resizable style="border: 0px solid #232629;" :drag-handle="'.drag-handle'" class-name-handle="resize-handle" class="disco" :x="-500" :y="10" :z="99999999"> |
||||
<div style="width: 100%; position: relative;"> |
||||
<div class="drag-handle-left"></div> |
||||
<div class="drag-handle">ゲームの削除</div> |
||||
<div class="drag-handle-right" @click="show = false"></div> |
||||
</div> |
||||
<div class="konsole_left"></div> |
||||
<div style="text-align: center; font-size: 18px; padding-top: 10px;">本当に現在のゲームを削除しますか？</div> |
||||
<div style="text-align:right; line-height: 15; padding: 10px;"> |
||||
<button type="button" class="btn btn2 btn-popup" @click="show = false">キャンセル</button> |
||||
<button type="button" class="btn btn2 btn-popup" @click="del">削除</button> |
||||
</div> |
||||
<div class="konsole_right"></div> |
||||
<div class="konsole_bottom_left"></div> |
||||
<div class="konsole_bottom"></div> |
||||
<div class="konsole_bottom_right"></div> |
||||
</vue-draggable-resizable> |
||||
</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import VueDraggableResizable from 'vue-draggable-resizable'; |
||||
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'; |
||||
|
||||
Vue.component('vue-draggable-resizable', VueDraggableResizable); |
||||
|
||||
export default { |
||||
props: { slug: '' }, |
||||
data: function () { |
||||
return { |
||||
show: false, |
||||
width: 0, |
||||
height: 0, |
||||
x: 0, |
||||
y: 0 |
||||
} |
||||
}, |
||||
watch: { text (x) { localStorage.shotanote = x; } }, |
||||
methods: { |
||||
del () { axios.post('/api/game/del', { slug: this.slug }).then(() => { window.location.href = '/video'; }); }, |
||||
onResize: function (x, y, width, height) { |
||||
this.x = x |
||||
this.y = y |
||||
this.width = width |
||||
this.height = height |
||||
}, |
||||
onDrag: function (x, y) { |
||||
this.x = x |
||||
this.y = y |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.konsole { |
||||
width: 600px; |
||||
height: 358px; |
||||
margin: auto; |
||||
color: #fcfcfc; |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb:hover { |
||||
background: #452886; |
||||
} |
||||
|
||||
.drag-handle-left { |
||||
height: 30px; |
||||
width: 30px; |
||||
background: url('/img/bash/discord_top_left.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
.drag-handle { |
||||
cursor: default; |
||||
height: 30px; |
||||
background: url('/img/bash/top_bg.png') repeat-x; |
||||
width: auto; |
||||
margin-left: 30px; |
||||
margin-right: 28px; |
||||
padding-top: 7px; |
||||
padding-right: 0px; |
||||
text-align: center; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.drag-handle-right { |
||||
height: 30px; |
||||
width: 28px; |
||||
background: url('/img/bash/top_right.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
} |
||||
|
||||
.drag-handle-right:hover { |
||||
background: url('/img/bash/top_right_hover.png') no-repeat; |
||||
cursor: default; |
||||
} |
||||
|
||||
.drag-handle-max { |
||||
height: 30px; |
||||
width: 23px; |
||||
background: url('/img/bash/top_max.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 28px; |
||||
} |
||||
|
||||
.drag-handle-max:hover { |
||||
background: url('/img/bash/top_max_hover.png') no-repeat; |
||||
cursor: default; |
||||
} |
||||
|
||||
.drag-handle-min { |
||||
height: 30px; |
||||
width: 23px; |
||||
background: url('/img/bash/top_min.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 51px; |
||||
} |
||||
|
||||
.drag-handle-min:hover { |
||||
background: url('/img/bash/top_min_hover.png') no-repeat; |
||||
cursor: default; |
||||
} |
||||
|
||||
.konsole_left { |
||||
width: 2px; |
||||
background: url('/img/bash/left_bg.png') repeat-y; |
||||
position: absolute; |
||||
top: 30px; |
||||
left: 0; |
||||
height: 167px; |
||||
} |
||||
|
||||
.konsole_right { |
||||
width: 2px; |
||||
background: url('/img/bash/right_bg.png') repeat-y; |
||||
position: absolute; |
||||
height: 167px; |
||||
top: 30px; |
||||
right: 0; |
||||
} |
||||
|
||||
.disco { background-color: #252a35; } |
||||
|
||||
.noter, .noter:active, .noter:focus { |
||||
background: transparent; |
||||
border: 0; |
||||
min-height: 360px; |
||||
width: 290px; |
||||
resize: none; |
||||
} |
||||
|
||||
.btn2 { |
||||
width: 120px; |
||||
border: 1px solid #4d4d4d; |
||||
} |
||||
|
||||
.btn2:hover { |
||||
cursor: default; |
||||
border: 1px solid #3daee9; |
||||
} |
||||
|
||||
.btn-popup { |
||||
color: #fcfcfc; |
||||
background-color: #252a35; |
||||
} |
||||
|
||||
.vdr { |
||||
background-size: cover; |
||||
backdrop-filter: blur(17px); |
||||
font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed; |
||||
font-size: 12px; |
||||
/* white-space: pre; */ |
||||
color: #fcfcfc; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: 30px; |
||||
left: 2px; |
||||
height: 200px !important; |
||||
width: 500px !important; |
||||
padding: 0; |
||||
} |
||||
|
||||
.resize-handle-mr { |
||||
width: 2px; |
||||
background: url('/img/bash/right_bg.png') repeat-y; |
||||
position: absolute; |
||||
height: 325px; |
||||
top: 30px; |
||||
right: 0; |
||||
} |
||||
|
||||
.konsole_bottom_left { |
||||
width: 3px; |
||||
height: 3px; |
||||
background: url('/img/bash/bottom_left.png') no-repeat; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
.konsole_bottom { |
||||
height: 2px; |
||||
background: url('/img/bash/bottom_bg.png') repeat-x; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 2px; |
||||
width: 495px; |
||||
} |
||||
|
||||
.konsole_bottom_right { |
||||
height: 3px; |
||||
width: 3px; |
||||
background: url('/img/bash/bottom_right.png') no-repeat; |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
} |
||||
</style> |
||||
@ -1,230 +0,0 @@ |
||||
<template> |
||||
<div class="col"> |
||||
<button @click="show = true" class="btn btn-block btn-danger">動画の削除</button> |
||||
<span v-if="show"> |
||||
<vue-draggable-resizable style="border: 0px solid #232629;" :drag-handle="'.drag-handle'" class-name-handle="resize-handle" class="disco" :x="-500" :y="10" :z="99999999"> |
||||
<div style="width: 100%; position: relative;"> |
||||
<div class="drag-handle-left"></div> |
||||
<div class="drag-handle">動画の削除</div> |
||||
<div class="drag-handle-right" @click="show = false"></div> |
||||
</div> |
||||
<div class="konsole_left"></div> |
||||
<div style="text-align: center; font-size: 18px; padding-top: 10px;">本当に現在の動画を削除しますか？</div> |
||||
<div style="text-align:right; line-height: 15; padding: 10px;"> |
||||
<button type="button" class="btn btn2 btn-popup" @click="show = false">キャンセル</button> |
||||
<button type="button" class="btn btn2 btn-popup" @click="del">削除</button> |
||||
</div> |
||||
<div class="konsole_right"></div> |
||||
<div class="konsole_bottom_left"></div> |
||||
<div class="konsole_bottom"></div> |
||||
<div class="konsole_bottom_right"></div> |
||||
</vue-draggable-resizable> |
||||
</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import VueDraggableResizable from 'vue-draggable-resizable'; |
||||
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'; |
||||
|
||||
Vue.component('vue-draggable-resizable', VueDraggableResizable); |
||||
|
||||
export default { |
||||
props: { slug: '' }, |
||||
data: function () { |
||||
return { |
||||
show: false, |
||||
width: 0, |
||||
height: 0, |
||||
x: 0, |
||||
y: 0 |
||||
} |
||||
}, |
||||
watch: { text (x) { localStorage.shotanote = x; } }, |
||||
methods: { |
||||
del () { axios.post('/api/video/del', { slug: this.slug }).then(res => { window.location.href = '/video/' + res.data; }); }, |
||||
onResize: function (x, y, width, height) { |
||||
this.x = x |
||||
this.y = y |
||||
this.width = width |
||||
this.height = height |
||||
}, |
||||
onDrag: function (x, y) { |
||||
this.x = x |
||||
this.y = y |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.konsole { |
||||
width: 600px; |
||||
height: 358px; |
||||
margin: auto; |
||||
color: #fcfcfc; |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb:hover { |
||||
background: #452886; |
||||
} |
||||
|
||||
.drag-handle-left { |
||||
height: 30px; |
||||
width: 30px; |
||||
background: url('/img/bash/discord_top_left.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
.drag-handle { |
||||
cursor: default; |
||||
height: 30px; |
||||
background: url('/img/bash/top_bg.png') repeat-x; |
||||
width: auto; |
||||
margin-left: 30px; |
||||
margin-right: 28px; |
||||
padding-top: 7px; |
||||
padding-right: 0px; |
||||
text-align: center; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.drag-handle-right { |
||||
height: 30px; |
||||
width: 28px; |
||||
background: url('/img/bash/top_right.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
} |
||||
|
||||
.drag-handle-right:hover { |
||||
background: url('/img/bash/top_right_hover.png') no-repeat; |
||||
cursor: default; |
||||
} |
||||
|
||||
.drag-handle-max { |
||||
height: 30px; |
||||
width: 23px; |
||||
background: url('/img/bash/top_max.png') no-repeat; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 28px; |
||||
} |
||||
|
||||
.drag-handle-max:hover { |
||||
background: url('/img/bash/top_max_hover.png') no-repeat; |
||||
cursor: default; |
||||
} |
||||
|
||||
.drag-handle-min { |
||||