Code style changes
This commit is contained in:
Mikołaj Pich
parent
8df580895a
commit
b6a4a7101d
13 changed files with 429 additions and 433 deletions
10
.eslintrc.js
10
.eslintrc.js
|
|
@ -10,8 +10,18 @@ module.exports = {
|
|||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'vue/script-indent': ['error', 2, { baseIndent: 1 }],
|
||||
'max-len': 'off',
|
||||
},
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint',
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.vue'],
|
||||
rules: {
|
||||
indent: 'off',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
14
src/App.vue
14
src/App.vue
|
|
@ -5,14 +5,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import HomeView from './components/HomeView.vue';
|
||||
import HomeView from './components/HomeView.vue';
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
HomeView,
|
||||
},
|
||||
};
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
HomeView,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -12,28 +12,28 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import HomeDownloadBetaItem from './HomeDownloadBetaItem.vue';
|
||||
import Spinner from './Spinner.vue';
|
||||
import HomeDownloadBetaItem from './HomeDownloadBetaItem.vue';
|
||||
import Spinner from './Spinner.vue';
|
||||
|
||||
export default {
|
||||
name: 'home-download-beta',
|
||||
components: {
|
||||
HomeDownloadBetaItem,
|
||||
Spinner,
|
||||
},
|
||||
asyncComputed: {
|
||||
async versions() {
|
||||
const response = await this.$http.get('https://api.github.com/repos/wulkanowy/wulkanowy/releases');
|
||||
return response.body.map(release => ({
|
||||
code: release.tag_name,
|
||||
released: release.published_at,
|
||||
github: release.html_url,
|
||||
download: release.assets[0].browser_download_url,
|
||||
id: release.id,
|
||||
}));
|
||||
export default {
|
||||
name: 'home-download-beta',
|
||||
components: {
|
||||
HomeDownloadBetaItem,
|
||||
Spinner,
|
||||
},
|
||||
},
|
||||
};
|
||||
asyncComputed: {
|
||||
async versions() {
|
||||
const response = await this.$http.get('https://api.github.com/repos/wulkanowy/wulkanowy/releases');
|
||||
return response.body.map(release => ({
|
||||
code: release.tag_name,
|
||||
released: release.published_at,
|
||||
github: release.html_url,
|
||||
download: release.assets[0].browser_download_url,
|
||||
id: release.id,
|
||||
}));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
</a>
|
||||
<div class="buttons">
|
||||
<a
|
||||
class="github-button"
|
||||
:href="github"
|
||||
title="GitHub"
|
||||
@click="githubClick">
|
||||
class="github-button"
|
||||
:href="github"
|
||||
title="GitHub"
|
||||
@click="githubClick">
|
||||
<span class="mdi mdi-github-circle"></span>
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -28,82 +28,80 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import moment from 'moment';
|
||||
|
||||
moment.locale('pl');
|
||||
moment.locale('pl');
|
||||
|
||||
export default {
|
||||
name: 'home-download-beta-item',
|
||||
props: {
|
||||
code: {
|
||||
type: String,
|
||||
export default {
|
||||
name: 'home-download-beta-item',
|
||||
props: {
|
||||
code: {
|
||||
type: String,
|
||||
},
|
||||
released: {
|
||||
type: String,
|
||||
},
|
||||
github: {
|
||||
type: String,
|
||||
},
|
||||
download: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
released: {
|
||||
type: String,
|
||||
methods: {
|
||||
codeClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'beta-item',
|
||||
eventAction: 'code-click',
|
||||
eventLabel: this.code,
|
||||
});
|
||||
},
|
||||
releasedClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'beta-item',
|
||||
eventAction: 'released-click',
|
||||
eventLabel: this.code,
|
||||
});
|
||||
},
|
||||
githubClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'beta-item',
|
||||
eventAction: 'github-click',
|
||||
eventLabel: this.code,
|
||||
});
|
||||
},
|
||||
downloadClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'beta-item',
|
||||
eventAction: 'download-click',
|
||||
eventLabel: this.code,
|
||||
});
|
||||
},
|
||||
},
|
||||
github: {
|
||||
type: String,
|
||||
computed: {
|
||||
releasedString() {
|
||||
return moment(this.released).format('dddd, D MMM YYYY HH:mm:ss');
|
||||
},
|
||||
releasedRelativeString() {
|
||||
const string = moment(this.released).fromNow();
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
},
|
||||
download: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
codeClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'beta-item',
|
||||
eventAction: 'code-click',
|
||||
eventLabel: this.code,
|
||||
});
|
||||
},
|
||||
releasedClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'beta-item',
|
||||
eventAction: 'released-click',
|
||||
eventLabel: this.code,
|
||||
});
|
||||
},
|
||||
githubClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'beta-item',
|
||||
eventAction: 'github-click',
|
||||
eventLabel: this.code,
|
||||
});
|
||||
},
|
||||
downloadClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'beta-item',
|
||||
eventAction: 'download-click',
|
||||
eventLabel: this.code,
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
releasedString() {
|
||||
return moment(this.released).format('dddd, D MMM YYYY HH:mm:ss');
|
||||
},
|
||||
releasedRelativeString() {
|
||||
const string = moment(this.released).fromNow();
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.download-beta-item {
|
||||
height: 56px;
|
||||
padding: 8px;
|
||||
padding-left: 8px;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto auto 1fr;
|
||||
grid-template-columns: 1fr auto;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 16px;
|
||||
|
|
|
|||
|
|
@ -25,56 +25,56 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import HomeDownloadDevItem from './HomeDownloadDevItem.vue';
|
||||
import HomeDownloadDevMaster from './HomeDownloadDevMaster.vue';
|
||||
import Spinner from './Spinner.vue';
|
||||
import moment from 'moment';
|
||||
import HomeDownloadDevItem from './HomeDownloadDevItem.vue';
|
||||
import HomeDownloadDevMaster from './HomeDownloadDevMaster.vue';
|
||||
import Spinner from './Spinner.vue';
|
||||
|
||||
export default {
|
||||
name: 'home-download-dev',
|
||||
components: {
|
||||
HomeDownloadDevItem,
|
||||
HomeDownloadDevMaster,
|
||||
Spinner,
|
||||
},
|
||||
asyncComputed: {
|
||||
async master() {
|
||||
const redirectorUrl = 'https://bitrise-redirector.herokuapp.com/v0.1/apps/f841f20d8f8b1dc8/builds/master/artifacts/0/info';
|
||||
const build = await this.$http.get(redirectorUrl);
|
||||
return {
|
||||
released: build.body.finished_at,
|
||||
download: build.body.public_install_page_url,
|
||||
build: build.body.build_number,
|
||||
url: build.body.build_url,
|
||||
commitUrl: build.body.commit_view_url,
|
||||
};
|
||||
export default {
|
||||
name: 'home-download-dev',
|
||||
components: {
|
||||
HomeDownloadDevItem,
|
||||
HomeDownloadDevMaster,
|
||||
Spinner,
|
||||
},
|
||||
async versions() {
|
||||
const response = await this.$http.get('https://api.github.com/repos/wulkanowy/wulkanowy/pulls?state=open');
|
||||
return (await Promise.all(response.body.map(async (release) => {
|
||||
const redirectorUrl = `https://bitrise-redirector.herokuapp.com/v0.1/apps/f841f20d8f8b1dc8/builds/${release.head.ref}/artifacts/0/info`;
|
||||
asyncComputed: {
|
||||
async master() {
|
||||
const redirectorUrl = 'https://bitrise-redirector.herokuapp.com/v0.1/apps/f841f20d8f8b1dc8/builds/master/artifacts/0/info';
|
||||
const build = await this.$http.get(redirectorUrl);
|
||||
return {
|
||||
title: release.title,
|
||||
number: release.number,
|
||||
released: build.body.finished_at,
|
||||
github: release.html_url,
|
||||
download: build.body.public_install_page_url,
|
||||
url: build.body.build_url,
|
||||
build: build.body.build_number,
|
||||
avatar: release.user.avatar_url,
|
||||
user: release.user.login,
|
||||
commit: release.head.sha,
|
||||
id: release.id,
|
||||
url: build.body.build_url,
|
||||
commitUrl: build.body.commit_view_url,
|
||||
};
|
||||
}))).sort((a, b) => {
|
||||
if (moment(a.released).isBefore(b.released)) return 1;
|
||||
if (moment(a.released).isAfter(b.released)) return -1;
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
async versions() {
|
||||
const response = await this.$http.get('https://api.github.com/repos/wulkanowy/wulkanowy/pulls?state=open');
|
||||
return (await Promise.all(response.body.map(async (release) => {
|
||||
const redirectorUrl = `https://bitrise-redirector.herokuapp.com/v0.1/apps/f841f20d8f8b1dc8/builds/${release.head.ref}/artifacts/0/info`;
|
||||
const build = await this.$http.get(redirectorUrl);
|
||||
return {
|
||||
title: release.title,
|
||||
number: release.number,
|
||||
released: build.body.finished_at,
|
||||
github: release.html_url,
|
||||
download: build.body.public_install_page_url,
|
||||
url: build.body.build_url,
|
||||
build: build.body.build_number,
|
||||
avatar: release.user.avatar_url,
|
||||
user: release.user.login,
|
||||
commit: release.head.sha,
|
||||
id: release.id,
|
||||
};
|
||||
}))).sort((a, b) => {
|
||||
if (moment(a.released).isBefore(b.released)) return 1;
|
||||
if (moment(a.released).isAfter(b.released)) return -1;
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<a class="header" :href="github" @click="titleClick">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="number"> #{{ number }}</span>
|
||||
</a>
|
||||
</a>
|
||||
<div class="subheader">
|
||||
<a class="build-number" :href="url" @click="buildNumberClick">{{ build }}</a>
|
||||
<a
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
@click="releasedClick">
|
||||
{{ releasedRelativeString }}
|
||||
</a>
|
||||
<img class="avatar" :src="avatar" />
|
||||
<img class="avatar" :src="avatar" alt="" />
|
||||
<span class="user">{{ user }}</span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -36,107 +36,105 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import moment from 'moment';
|
||||
|
||||
moment.locale('pl');
|
||||
moment.locale('pl');
|
||||
|
||||
export default {
|
||||
name: 'home-download-dev-item',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
export default {
|
||||
name: 'home-download-dev-item',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
released: {
|
||||
type: String,
|
||||
},
|
||||
number: {
|
||||
type: Number,
|
||||
},
|
||||
build: {
|
||||
type: Number,
|
||||
},
|
||||
github: {
|
||||
type: String,
|
||||
},
|
||||
download: {
|
||||
type: String,
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
},
|
||||
user: {
|
||||
type: String,
|
||||
},
|
||||
commit: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
released: {
|
||||
type: String,
|
||||
methods: {
|
||||
titleClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-item',
|
||||
eventAction: 'title-click',
|
||||
eventLabel: this.number,
|
||||
});
|
||||
},
|
||||
buildNumberClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-item',
|
||||
eventAction: 'build-number-click',
|
||||
eventLabel: this.number,
|
||||
});
|
||||
},
|
||||
releasedClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-item',
|
||||
eventAction: 'released-click',
|
||||
eventLabel: this.number,
|
||||
});
|
||||
},
|
||||
githubClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-item',
|
||||
eventAction: 'github-click',
|
||||
eventLabel: this.number,
|
||||
});
|
||||
},
|
||||
downloadClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-item',
|
||||
eventAction: 'download-click',
|
||||
eventLabel: this.number,
|
||||
});
|
||||
},
|
||||
},
|
||||
number: {
|
||||
type: Number,
|
||||
computed: {
|
||||
releasedString() {
|
||||
return moment(this.released).format('dddd, D MMM YYYY HH:mm:ss');
|
||||
},
|
||||
releasedRelativeString() {
|
||||
const string = moment(this.released).fromNow();
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
},
|
||||
build: {
|
||||
type: Number,
|
||||
},
|
||||
github: {
|
||||
type: String,
|
||||
},
|
||||
download: {
|
||||
type: String,
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
},
|
||||
user: {
|
||||
type: String,
|
||||
},
|
||||
commit: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
titleClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-item',
|
||||
eventAction: 'title-click',
|
||||
eventLabel: this.number,
|
||||
});
|
||||
},
|
||||
buildNumberClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-item',
|
||||
eventAction: 'build-number-click',
|
||||
eventLabel: this.number,
|
||||
});
|
||||
},
|
||||
releasedClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-item',
|
||||
eventAction: 'released-click',
|
||||
eventLabel: this.number,
|
||||
});
|
||||
},
|
||||
githubClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-item',
|
||||
eventAction: 'github-click',
|
||||
eventLabel: this.number,
|
||||
});
|
||||
},
|
||||
downloadClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-item',
|
||||
eventAction: 'download-click',
|
||||
eventLabel: this.number,
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
releasedString() {
|
||||
return moment(this.released).format('dddd, D MMM YYYY HH:mm:ss');
|
||||
},
|
||||
releasedRelativeString() {
|
||||
const string = moment(this.released).fromNow();
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.download-dev-item {
|
||||
min-height: 56px;
|
||||
padding: 8px;
|
||||
padding-left: 16px;
|
||||
padding: 8px 8px 8px 16px;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto auto 1fr;
|
||||
grid-template-columns: 1fr auto;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
margin-top: 16px;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -206,10 +204,9 @@ export default {
|
|||
height: 16px;
|
||||
margin-left: 8px;
|
||||
border-radius: 2px;
|
||||
box-shadow:
|
||||
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.user {
|
||||
|
|
|
|||
|
|
@ -24,75 +24,73 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import moment from 'moment';
|
||||
|
||||
moment.locale('pl');
|
||||
moment.locale('pl');
|
||||
|
||||
export default {
|
||||
name: 'home-download-dev-master',
|
||||
props: {
|
||||
released: {
|
||||
type: String,
|
||||
export default {
|
||||
name: 'home-download-dev-master',
|
||||
props: {
|
||||
released: {
|
||||
type: String,
|
||||
},
|
||||
build: {
|
||||
type: Number,
|
||||
},
|
||||
download: {
|
||||
type: String,
|
||||
},
|
||||
commitUrl: {
|
||||
type: String,
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
build: {
|
||||
type: Number,
|
||||
methods: {
|
||||
buildNumberClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-master-item',
|
||||
eventAction: 'build-number-click',
|
||||
});
|
||||
},
|
||||
releasedClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-master-item',
|
||||
eventAction: 'released-click',
|
||||
});
|
||||
},
|
||||
downloadClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-master-item',
|
||||
eventAction: 'download-click',
|
||||
});
|
||||
},
|
||||
},
|
||||
download: {
|
||||
type: String,
|
||||
computed: {
|
||||
releasedString() {
|
||||
return moment(this.released).format('dddd, D MMM YYYY HH:mm:ss');
|
||||
},
|
||||
releasedRelativeString() {
|
||||
const string = moment(this.released).fromNow();
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
},
|
||||
commitUrl: {
|
||||
type: String,
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
buildNumberClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-master-item',
|
||||
eventAction: 'build-number-click',
|
||||
});
|
||||
},
|
||||
releasedClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-master-item',
|
||||
eventAction: 'released-click',
|
||||
});
|
||||
},
|
||||
downloadClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-master-item',
|
||||
eventAction: 'download-click',
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
releasedString() {
|
||||
return moment(this.released).format('dddd, D MMM YYYY HH:mm:ss');
|
||||
},
|
||||
releasedRelativeString() {
|
||||
const string = moment(this.released).fromNow();
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.download-dev-master {
|
||||
min-height: 56px;
|
||||
padding: 8px;
|
||||
padding-left: 16px;
|
||||
padding: 8px 8px 8px 16px;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto auto 1fr;
|
||||
grid-template-columns: 1fr auto;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -10,35 +10,35 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import HomeDownloadBeta from './HomeDownloadBeta.vue';
|
||||
import HomeDownloadDev from './HomeDownloadDev.vue';
|
||||
import HomeDownloadVersionSwitcher from './HomeDownloadVersionSwitcher.vue';
|
||||
import HomeDownloadBeta from './HomeDownloadBeta.vue';
|
||||
import HomeDownloadDev from './HomeDownloadDev.vue';
|
||||
import HomeDownloadVersionSwitcher from './HomeDownloadVersionSwitcher.vue';
|
||||
|
||||
export default {
|
||||
name: 'home-download-section',
|
||||
components: {
|
||||
HomeDownloadBeta,
|
||||
HomeDownloadDev,
|
||||
HomeDownloadVersionSwitcher,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeSection: {
|
||||
data: 'beta',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
active: {
|
||||
get() {
|
||||
return this.activeSection.data;
|
||||
},
|
||||
set(value) {
|
||||
this.activeSection.data = value;
|
||||
export default {
|
||||
name: 'home-download-section',
|
||||
components: {
|
||||
HomeDownloadBeta,
|
||||
HomeDownloadDev,
|
||||
HomeDownloadVersionSwitcher,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeSection: {
|
||||
data: 'beta',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
active: {
|
||||
get() {
|
||||
return this.activeSection.data;
|
||||
},
|
||||
set(value) {
|
||||
this.activeSection.data = value;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -2,42 +2,41 @@
|
|||
<div class="download-version-switcher">
|
||||
<span
|
||||
class="section-name section-name-beta"
|
||||
:class="{ active: active == 'beta' }"
|
||||
:class="{ active: active === 'beta' }"
|
||||
@click="active = 'beta'">BETA</span>
|
||||
<div class="devider" />
|
||||
<div class="devider"></div>
|
||||
<span
|
||||
class="section-name section-name-dev"
|
||||
:class="{ active: active == 'dev' }"
|
||||
:class="{ active: active === 'dev' }"
|
||||
@click="active = 'dev'">DEV</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'home-download-version-switcher',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
activeSection: Object,
|
||||
default: {},
|
||||
},
|
||||
computed: {
|
||||
active: {
|
||||
get() {
|
||||
return this.activeSection.data;
|
||||
},
|
||||
set(value) {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-section',
|
||||
eventAction: 'switch',
|
||||
eventLabel: value,
|
||||
eventValue: value === 'beta' ? 0 : 1,
|
||||
});
|
||||
this.activeSection.data = value;
|
||||
export default {
|
||||
name: 'home-download-version-switcher',
|
||||
components: {},
|
||||
props: {
|
||||
activeSection: Object,
|
||||
default: {},
|
||||
},
|
||||
computed: {
|
||||
active: {
|
||||
get() {
|
||||
return this.activeSection.data;
|
||||
},
|
||||
set(value) {
|
||||
this.$ga.event({
|
||||
eventCategory: 'dev-section',
|
||||
eventAction: 'switch',
|
||||
eventLabel: value,
|
||||
eventValue: value === 'beta' ? 0 : 1,
|
||||
});
|
||||
this.activeSection.data = value;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -34,58 +34,58 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'home-main-header',
|
||||
methods: {
|
||||
googlePlayClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'google-play-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
},
|
||||
otherOptionsClick(e) {
|
||||
this.$ga.event({
|
||||
eventCategory: 'other-download-options-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
|
||||
const element = document.getElementById('download');
|
||||
if (element.scrollIntoView) {
|
||||
e.preventDefault();
|
||||
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
export default {
|
||||
name: 'home-main-header',
|
||||
methods: {
|
||||
googlePlayClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'google-play-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
window.location.hash = 'download';
|
||||
element.focus();
|
||||
}
|
||||
},
|
||||
otherOptionsClick(e) {
|
||||
this.$ga.event({
|
||||
eventCategory: 'other-download-options-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
|
||||
const element = document.getElementById('download');
|
||||
if (element.scrollIntoView) {
|
||||
e.preventDefault();
|
||||
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
});
|
||||
window.location.hash = 'download';
|
||||
element.focus();
|
||||
}
|
||||
},
|
||||
discordClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'discord-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
},
|
||||
githubClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'github-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
},
|
||||
trelloClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'trello-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
},
|
||||
paypalClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'paypal-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
},
|
||||
},
|
||||
discordClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'discord-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
},
|
||||
githubClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'github-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
},
|
||||
trelloClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'trello-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
},
|
||||
paypalClick() {
|
||||
this.$ga.event({
|
||||
eventCategory: 'paypal-link',
|
||||
eventAction: 'click',
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -107,10 +107,7 @@ export default {
|
|||
width: 768px;
|
||||
max-width: 90vw;
|
||||
display: block;
|
||||
filter:
|
||||
drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2))
|
||||
drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.14))
|
||||
drop-shadow(0px 3px 14px rgba(0, 0, 0, 0.12));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2)) drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 14px rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -122,10 +119,9 @@ export default {
|
|||
font-weight: 300;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
text-shadow:
|
||||
0px 5px 5px rgba(0, 0, 0, 0.2),
|
||||
0px 8px 10px rgba(0, 0, 0, 0.14),
|
||||
0px 3px 14px rgba(0, 0, 0, 0.12);
|
||||
text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2),
|
||||
0 8px 10px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px rgba(0, 0, 0, 0.12);
|
||||
text-transform: uppercase;
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
|
|
@ -150,13 +146,12 @@ export default {
|
|||
display: block;
|
||||
|
||||
img {
|
||||
widows: 216px;
|
||||
width: 216px;
|
||||
height: 64px;
|
||||
box-shadow:
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
border-radius: 8px;
|
||||
transition: box-shadow 150ms;
|
||||
}
|
||||
|
||||
|
|
@ -165,10 +160,9 @@ export default {
|
|||
}
|
||||
|
||||
&:hover img, &:focus img {
|
||||
box-shadow:
|
||||
0px 11px 15px -7px rgba(0, 0, 0, 0.2),
|
||||
0px 24px 38px 3px rgba(0, 0, 0, 0.14),
|
||||
0px 9px 46px 8px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
|
||||
0 24px 38px 3px rgba(0, 0, 0, 0.14),
|
||||
0 9px 46px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -187,10 +181,9 @@ export default {
|
|||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
margin-left: 32px;
|
||||
box-shadow:
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
transition: box-shadow 150ms;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -198,10 +191,9 @@ export default {
|
|||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
box-shadow:
|
||||
0px 11px 15px -7px rgba(0, 0, 0, 0.2),
|
||||
0px 24px 38px 3px rgba(0, 0, 0, 0.14),
|
||||
0px 9px 46px 8px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
|
||||
0 24px 38px 3px rgba(0, 0, 0, 0.14),
|
||||
0 9px 46px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
|
|
@ -216,13 +208,11 @@ export default {
|
|||
|
||||
.github, .trello, .discord, .paypal {
|
||||
margin: 8px;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
filter:
|
||||
drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2))
|
||||
drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.14))
|
||||
drop-shadow(0px 3px 14px rgba(0, 0, 0, 0.12));
|
||||
filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .2)) drop-shadow(0 8px 10px rgba(0, 0, 0, .14)) drop-shadow(0 3px 14px rgba(0, 0, 0, .12));
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
width: 32px;
|
||||
|
|
|
|||
|
|
@ -5,25 +5,24 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import HomeMainHeader from './HomeMainHeader.vue';
|
||||
import HomeMainHeader from './HomeMainHeader.vue';
|
||||
|
||||
export default {
|
||||
name: 'home-main-section',
|
||||
components: {
|
||||
HomeMainHeader,
|
||||
},
|
||||
};
|
||||
export default {
|
||||
name: 'home-main-section',
|
||||
components: {
|
||||
HomeMainHeader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#main {
|
||||
height: 100vh;
|
||||
background:
|
||||
linear-gradient(
|
||||
background: linear-gradient(
|
||||
rgba(0, 0, 0, 0.3),
|
||||
rgba(0, 0, 0, 0.3)
|
||||
),
|
||||
url("../assets/wallpaper.jpg");
|
||||
),
|
||||
url("../assets/wallpaper.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import HomeMainSection from './HomeMainSection.vue';
|
||||
import HomeDownloadSection from './HomeDownloadSection.vue';
|
||||
import HomeMainSection from './HomeMainSection.vue';
|
||||
import HomeDownloadSection from './HomeDownloadSection.vue';
|
||||
|
||||
export default {
|
||||
name: 'home-view',
|
||||
components: {
|
||||
HomeMainSection,
|
||||
HomeDownloadSection,
|
||||
},
|
||||
};
|
||||
export default {
|
||||
name: 'home-view',
|
||||
components: {
|
||||
HomeMainSection,
|
||||
HomeDownloadSection,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -34,15 +34,20 @@
|
|||
}
|
||||
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% { -webkit-transform: scale(0) }
|
||||
40% { -webkit-transform: scale(1.0) }
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0)
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1.0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 40% {
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue