ZierleTraining/frontend-web
1
0
Fork 0
mirror of https://github.com/MarcZierle/photo-log-frontend.git synced 2025-04-07 21:14:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix camera canvas size

Browse Source
This commit is contained in:
MarcZierle 2022-01-21 13:32:02 +01:00
parent e01c961dc3
commit 29c6777a03
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/CameraCapture.vue
View File

@ -142,7 +142,7 @@ export default {
}, },
computed: { computed: {
selected_group_label() { selected_group_label() {
if (this.selected_group !== null) { if (this.selected_group !== null && this.groups.length > 0) {
return this.groups.filter(group => group.value === this.selected_group)[0].label return this.groups.filter(group => group.value === this.selected_group)[0].label
} }
return '' return ''
@ -201,9 +201,10 @@ export default {
this.stream.height = stream_settings.height this.stream.height = stream_settings.height
this.photo.width = document.getElementById('camera_preview').offsetWidth this.photo.width = document.getElementById('camera_preview').offsetWidth
this.$refs.camera.width = this.photo.width
this.photo.height = document.getElementById('camera_preview').offsetHeight this.photo.height = document.getElementById('camera_preview').offsetHeight
this.$refs.camera.width = this.photo.width
this.$refs.camera.height = this.photo.height
}).catch(error => { }).catch(error => {
this.message.error('Cannot load device camera! '+error) this.message.error('Cannot load device camera! '+error)
}) })
@ -259,6 +260,12 @@ export default {
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden;
height: 100vh;
}
* {
overflow: hidden;
} }
#all { #all {
@ -268,19 +275,26 @@ html, body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between;
overflow: hidden; overflow: hidden;
color: white; color: white;
margin: 0;
padding: 0;
}
#camera_preview {
height: 75vh;
} }
#group_select { #group_select {
display: flex; display: flex;
height: 7.5vh;
} }
#prompt_select { #prompt_select {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
margin-top: 30%;
} }
#prompt_select .n-icon { #prompt_select .n-icon {
@ -288,10 +302,13 @@ html, body {
} }
#take_photo { #take_photo {
height: 15%; height: 15vh;
background-color: #222; background-color: #222;
display: flex; display: flex;
justify-content: center; justify-content: center;
bottom: 0;
position: absolute;
width: 100%;
} }
#take_photo .n-button { #take_photo .n-button {