Fix "Context menu cut off at the bottom of the screen" [#30]

This commit is contained in:
Daan 2020-09-13 15:01:57 +02:00
parent 75438d0e14
commit 73c8e10cf3
5 changed files with 72 additions and 79 deletions

14
package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "vuetorrent",
"version": "0.2.0",
"version": "0.3.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -1998,9 +1998,9 @@
}
},
"apexcharts": {
"version": "3.20.1",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.20.1.tgz",
"integrity": "sha512-86WedRPcIs45gdcVC+na0SDGIYcH378Z+TmOAyXYs4vwqjvbYyzA9VGFN2UorLgXHIV4RJm4kFJXdIBYh3aDiA==",
"version": "3.20.2",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.20.2.tgz",
"integrity": "sha512-Wc3viU4BmkcGMKArkWr87Flr1+2YJWV0CDZheTaK4S7kNgg8Aw7a05u5gczRDyA68RsmdQ/ltLjpBBr1CKBUPA==",
"requires": {
"svg.draggable.js": "^2.2.2",
"svg.easing.js": "^2.0.0",
@ -11903,9 +11903,9 @@
"dev": true
},
"vue-toastification": {
"version": "1.7.6",
"resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.6.tgz",
"integrity": "sha512-+Nezz/mXglufIaZ+0EAUDYm4Qc4sRPKu7bOX1WMoc0PrYAOVGzEafN7xW7KlVERijk7wUbMtAP9dP1tSMWV4Yw=="
"version": "1.7.7",
"resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.7.tgz",
"integrity": "sha512-SWYy6ycw6D91nBWPoaJfwIAsmUsk0pZMZ3JjCgOdozEW/QyaVbX+XL0Z2iskNDCOqwA/znIhhBN/H10eURpxkQ=="
},
"vue2-perfect-scrollbar": {
"version": "1.5.0",

View file

@ -10,7 +10,7 @@
},
"dependencies": {
"@babel/polyfill": "^7.11.5",
"apexcharts": "^3.20.1",
"apexcharts": "^3.20.2",
"axios": "^0.19.2",
"core-js": "^3.6.4",
"dayjs": "^1.8.35",
@ -23,7 +23,7 @@
"vue-context": "^5.2.0",
"vue-observe-visibility": "^0.4.6",
"vue-router": "^3.3.4",
"vue-toastification": "^1.7.6",
"vue-toastification": "^1.7.7",
"vue2-perfect-scrollbar": "^1.5.0",
"vuetify": "^2.3.4",
"vuex": "^3.5.1",

View file

@ -1,7 +1,15 @@
<template>
<v-dialog max-width="500px" v-model="dialog">
<v-dialog
v-model="dialog"
scrollable
:width="dialogWidth"
:fullscreen="phoneLayout"
>
<v-card min-height="400px">
<v-container style="min-height: 400px" :class="`pa-0 project done`">
<v-container
:style="{ height: phoneLayout ? '100vh' : '' }"
:class="`pa-0 project done`"
>
<v-card-title class="justify-center">
<h2>Search Torrent</h2>
</v-card-title>
@ -110,11 +118,11 @@
</template>
<script>
import Modal from '@/mixins/Modal'
import { Modal, FullScreenModal } from '@/mixins'
import qbit from '@/services/qbit'
export default {
name: 'SearchModal',
mixins: [Modal],
mixins: [Modal, FullScreenModal],
data() {
return {
searchTerm: null,
@ -166,11 +174,6 @@ export default {
close() {
this.$store.commit('DELETE_MODAL', this.guid)
}
},
computed: {
phoneLayout() {
return this.$vuetify.breakpoint.xsOnly
}
}
}
</script>

View file

@ -136,6 +136,7 @@
<script>
import { VueContext } from 'vue-context'
import 'vue-context/src/sass/vue-context.scss'
import TorrentRightClickMenu from '@/components/Torrent/TorrentRightClickMenu.vue'
import { General } from '@/mixins'
@ -244,4 +245,12 @@ export default {
}
</script>
<style></style>
<style scoped lang="scss">
.v-context {
&,
& ul {
border-radius: 0.3rem;
padding: 0;
}
}
</style>

View file

@ -1,62 +1,45 @@
<template>
<v-card
elevation="20"
width="200"
style="
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
overflow: show;
"
:dark="dark"
>
<v-list dense rounded>
<v-list-item @click="showInfo" link>
<v-icon>info</v-icon>
<v-list-item-title class="ml-2" style="font-size: 15px"
>Show Info</v-list-item-title
>
</v-list-item>
<v-divider />
<v-list-item @click="resume" link>
<v-icon>play_arrow</v-icon>
<v-list-item-title class="ml-2" style="font-size: 15px"
>Resume</v-list-item-title
>
</v-list-item>
<v-list-item @click="pause" link>
<v-icon>pause</v-icon>
<v-list-item-title class="ml-2" style="font-size: 15px"
>Pause</v-list-item-title
>
</v-list-item>
<v-divider />
<v-list-item @click="reannounce" link>
<v-icon>record_voice_over</v-icon>
<v-list-item-title class="ml-2" style="font-size: 15px"
>reannounce</v-list-item-title
>
</v-list-item>
<v-divider />
<v-list-item @click="deleteWithoutFiles" link>
<v-icon color="red">delete</v-icon>
<v-list-item-title
class="ml-2"
style="font-size: 15px; color: red"
>Delete</v-list-item-title
>
</v-list-item>
<v-list-item @click="deleteWithFiles" link>
<v-icon color="red">delete</v-icon>
<v-list-item-title
class="ml-2"
style="font-size: 15px; color: red"
>Delete with files</v-list-item-title
>
</v-list-item>
</v-list>
</v-card>
<v-list dense rounded>
<v-list-item @click="showInfo" link>
<v-icon>info</v-icon>
<v-list-item-title class="ml-2" style="font-size: 15px"
>Show Info</v-list-item-title
>
</v-list-item>
<v-divider />
<v-list-item @click="resume" link>
<v-icon>play_arrow</v-icon>
<v-list-item-title class="ml-2" style="font-size: 15px"
>Resume</v-list-item-title
>
</v-list-item>
<v-list-item @click="pause" link>
<v-icon>pause</v-icon>
<v-list-item-title class="ml-2" style="font-size: 15px"
>Pause</v-list-item-title
>
</v-list-item>
<v-divider />
<v-list-item @click="reannounce" link>
<v-icon>record_voice_over</v-icon>
<v-list-item-title class="ml-2" style="font-size: 15px"
>reannounce</v-list-item-title
>
</v-list-item>
<v-divider />
<v-list-item @click="deleteWithoutFiles" link>
<v-icon color="red">delete</v-icon>
<v-list-item-title class="ml-2" style="font-size: 15px; color: red"
>Delete</v-list-item-title
>
</v-list-item>
<v-list-item @click="deleteWithFiles" link>
<v-icon color="red">delete</v-icon>
<v-list-item-title class="ml-2" style="font-size: 15px; color: red"
>Delete with files</v-list-item-title
>
</v-list-item>
</v-list>
</template>
<script>
@ -95,5 +78,3 @@ export default {
}
}
</script>
<style></style>