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

View file

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

View file

@ -1,7 +1,15 @@
<template> <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-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"> <v-card-title class="justify-center">
<h2>Search Torrent</h2> <h2>Search Torrent</h2>
</v-card-title> </v-card-title>
@ -110,11 +118,11 @@
</template> </template>
<script> <script>
import Modal from '@/mixins/Modal' import { Modal, FullScreenModal } from '@/mixins'
import qbit from '@/services/qbit' import qbit from '@/services/qbit'
export default { export default {
name: 'SearchModal', name: 'SearchModal',
mixins: [Modal], mixins: [Modal, FullScreenModal],
data() { data() {
return { return {
searchTerm: null, searchTerm: null,
@ -166,11 +174,6 @@ export default {
close() { close() {
this.$store.commit('DELETE_MODAL', this.guid) this.$store.commit('DELETE_MODAL', this.guid)
} }
},
computed: {
phoneLayout() {
return this.$vuetify.breakpoint.xsOnly
}
} }
} }
</script> </script>

View file

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

View file

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