diff --git a/src/assets/css/4-modules/preview.css b/src/assets/css/4-modules/preview.css index e6e2adc..e83324a 100644 --- a/src/assets/css/4-modules/preview.css +++ b/src/assets/css/4-modules/preview.css @@ -37,10 +37,26 @@ } } +.preview::before { + display: block; + padding-top: 100%; + width: 100%; + content: ""; +} + +.preview--novideo::before, +.preview--novideo::after { + content: none; +} + .preview-visual { position: absolute; - display: block; - max-width: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + + object-fit: cover; } .preview-visualImg { diff --git a/src/assets/css/7-rwd/_rwd-landscape.css b/src/assets/css/7-rwd/_rwd-landscape.css index b37fb2f..1e6a52f 100644 --- a/src/assets/css/7-rwd/_rwd-landscape.css +++ b/src/assets/css/7-rwd/_rwd-landscape.css @@ -25,6 +25,14 @@ align-items: center; } + .welcome-title { + margin-bottom: 4rem; + } + + .welcome-about { + margin-bottom: 2rem; + } + /* Capture screen -------------------------------------------------------------- */ diff --git a/src/views/screens/capture.vue b/src/views/screens/capture.vue index 44f119e..8794502 100644 --- a/src/views/screens/capture.vue +++ b/src/views/screens/capture.vue @@ -5,8 +5,8 @@ -
- +
+
@@ -24,12 +24,6 @@ import { mapState } from 'vuex' export default { name: 'capture', - data () { - return { - loadListener: null, - resizeListener: null - } - }, components: { captureOptions, captureProgress, @@ -46,64 +40,7 @@ export default { methods: { startCapture () { this.$store.dispatch('capture') - }, - getpreviewcontainerSquare () { - this.$refs.previewcontainer.style.height = this.$refs.previewcontainer.getBoundingClientRect().width + 'px' - }, - applyScaling () { - const containerRect = this.$refs.previewcontainer.getBoundingClientRect() - const { left, top, width, height } = this.calcImageDimens( - containerRect.width, - containerRect.height, - this.$refs.preview.videoWidth, - this.$refs.preview.videoHeight - ) - - this.$refs.preview.style.left = `${left}px` - this.$refs.preview.style.top = `${top}px` - this.$refs.preview.style.width = `${width}px` - this.$refs.preview.style.height = `${height}px` - }, - calcImageDimens (targetWidth, targetHeight, sourceWidth, sourceHeight) { - let left = 0 - let top = 0 - let width = targetWidth - let height = targetHeight - - const targetAspect = width / height - const actualAspect = sourceWidth / sourceHeight - - if (targetAspect > actualAspect) { - // cut off the top/bottom - height = Math.round(width / actualAspect) - } else { - // cut off the left/right - width = Math.round(height * actualAspect) - } - - left = -Math.floor((width - targetWidth) / 2) - top = -Math.floor((height - targetHeight) / 2) - - return { left, top, width, height } } - - }, - mounted: function () { - this.getpreviewcontainerSquare() - - // On load - this.loadListener = this.$refs.preview.addEventListener('resize', () => { - this.applyScaling() - }, false) - // On window resize - this.resizeListener = window.addEventListener('resize', () => { - this.getpreviewcontainerSquare() - this.applyScaling() - }, false) - }, - destroyed: function () { - this.loadListener = null - this.resizeListener = null } } diff --git a/src/views/screens/download.vue b/src/views/screens/download.vue index 4a89a60..9e3be7b 100644 --- a/src/views/screens/download.vue +++ b/src/views/screens/download.vue @@ -5,7 +5,7 @@
-
+