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 @@
-