GuerillaStudio/souvenir
GuerillaStudio/souvenir
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/souvenir.git synced 2024-11-08 11:11:53 +00:00
Code Issues Releases Activity Actions

refactor(layout): Allow different layout

Browse source
This commit is contained in:
Tixie 2019-04-30 19:50:40 +02:00
parent 313da56d92
commit 777f66380b
9 changed files with 74 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.vue
View file

@ -1,5 +1,5 @@
<template lang="html">
<div class="layout">
<div class="souvenir">
<router-view></router-view>
<refresh-banner></refresh-banner>
</div>

8
src/assets/css/3-base/_03-layout.css
View file

@ -2,6 +2,14 @@
/* == layout */
/* ----------------------------------------------------------- */
.souvenir {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
width: 100%;
}
.layout {
display: flex;
flex-direction: column;

2
src/assets/css/7-rwd/_rwd-small.css
View file

@ -3,7 +3,7 @@
/* ----------------------------------------------------------- */
@media (min-width: 768px) {
.layout {
.souvenir {
flex-grow: inherit;
}

3
src/main.js
View file

@ -5,6 +5,9 @@ import store from '/store'
import registerServiceWorker from '/register-service-worker.js'
import LayoutDefault from '/views/layout/default'
Vue.component('layout-default', LayoutDefault)
Vue.config.productionTip = false
new Vue({

5
src/views/layout/default.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div class="layout">
<slot></slot>
</div>
</template>

39
src/views/screens/capture.vue
View file

@ -1,26 +1,27 @@
<template lang="html">
<div class="capture">
<div v-if="capturing" class="capture-progress">
<capture-progress :value="capturingProgress"></capture-progress>
</div>
<capture-options v-else></capture-options>
<layout-default>
<div class="capture">
<div v-if="capturing" class="capture-progress">
<capture-progress :value="capturingProgress"></capture-progress>
</div>
<capture-options v-else></capture-options>
<div class="preview">
<video ref="preview" class="preview-visual" :class="{ 'preview--flip': shouldFlip }" preload="yes" autoplay muted playsinline webkit-playsinline></video>
<capture-timer v-if="timerActive" :time="timerProgress"></capture-timer>
</div>
<div class="preview">
<video ref="preview" class="preview-visual" :class="{ 'preview--flip': shouldFlip }" preload="yes" autoplay muted playsinline webkit-playsinline></video>
<capture-timer v-if="timerActive" :time="timerProgress"></capture-timer>
</div>
<div class="capture-actions">
<template v-if="!timerActive">
<button class="capture-btn" :class="{ 'capture-btn--capturing': capturing }" :disabled="!camera" @click.prevent="startCapturing">Capture</button>
<button class="capture-switch" title="Switch camera" @click="switchCamera"><icon-switch></icon-switch></button>
</template>
<template v-else>
<button class="btn btn--danger w100" @click="cancelCountdown">Cancel countdown</button>
</template>
<div class="capture-actions">
<template v-if="!timerActive">
<button class="capture-btn" :class="{ 'capture-btn--capturing': capturing }" :disabled="!camera" @click.prevent="startCapturing">Capture</button>
<button class="capture-switch" title="Switch camera" @click="switchCamera"><icon-switch></icon-switch></button>
</template>
<template v-else>
<button class="btn btn--danger w100" @click="cancelCountdown">Cancel countdown</button>
</template>
</div>
</div>
</div>
</layout-default>
</template>
<script>

22
src/views/screens/download.vue
View file

@ -1,16 +1,18 @@
<template lang="html">
<div class="download">
<div class="options">
<span></span>
<button class="options__btn" @click="back">← back</button>
</div>
<layout-default>
<div class="download">
<div class="options">
<span></span>
<button class="options__btn" @click="back">← back</button>
</div>
<div class="preview preview--novideo">
<img class="preview-visualImg" :src="objectUrl" alt="">
</div>
<div class="preview preview--novideo">
<img class="preview-visualImg" :src="objectUrl" alt="">
</div>
<a class="download-btn btn btn--primary w100" :href="objectUrl" :download="`souvenir${timestamp}.gif`">Download GIF</a>
</div>
<a class="download-btn btn btn--primary w100" :href="objectUrl" :download="`souvenir${timestamp}.gif`">Download GIF</a>
</div>
</layout-default>
</template>
<script>

20
src/views/screens/preview.vue
View file

@ -1,15 +1,17 @@
<template lang="html">
<div class="download">
<capture-options :disabled-time="true" :disabled-timer="true" :back-btn="back"></capture-options>
<layout-default>
<div class="download">
<capture-options :disabled-time="true" :disabled-timer="true" :back-btn="back"></capture-options>
<div class="preview">
<preview-canvas v-if="capture" class="preview-visual"></preview-canvas>
<div class="preview">
<preview-canvas v-if="capture" class="preview-visual"></preview-canvas>
</div>
<button class="download-btn btn btn--primary w100" :class="{ 'btn--loading': encoding }" :disabled="encoding" @click="startEncoding">Generate GIF</button>
<encoding-overlay v-if="encoding" :value="encodingProgress"></encoding-overlay>
</div>
<button class="download-btn btn btn--primary w100" :class="{ 'btn--loading': encoding }" :disabled="encoding" @click="startEncoding">Generate GIF</button>
<encoding-overlay v-if="encoding" :value="encodingProgress"></encoding-overlay>
</div>
</layout-default>
</template>
<script>

24
src/views/screens/welcome.vue
View file

@ -1,16 +1,18 @@
<template lang="html">
<div class="welcome">
<div class="welcome-about">
<h1 class="welcome-title">Capture few seconds as a gif for souvenir</h1>
<illu-welcome></illu-welcome>
<ol class="welcome-steps">
<li class="welcome-steps__item">Enable Camera</li>
<li class="welcome-steps__item">Capture</li>
<li class="welcome-steps__item">Save as a GIF</li>
</ol>
<layout-default>
<div class="welcome">
<div class="welcome-about">
<h1 class="welcome-title">Capture few seconds as a gif for souvenir</h1>
<illu-welcome></illu-welcome>
<ol class="welcome-steps">
<li class="welcome-steps__item">Enable Camera</li>
<li class="welcome-steps__item">Capture</li>
<li class="welcome-steps__item">Save as a GIF</li>
</ol>
</div>
<button class="btn btn--primary" @click="startCapture">Let's make a souvenir!</button>
</div>
<button class="btn btn--primary" @click="startCapture">Let's make a souvenir!</button>
</div>
</layout-default>
</template>
<script>