wulkanowy/wulkanowy.github.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add beta download

Browse source
This commit is contained in:
Dominik Korsa 2019-02-23 15:50:28 +01:00
parent 9bcc79e1e8
commit 49462e1897
9 changed files with 282 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
package-lock.json generated
View file

@ -904,6 +904,11 @@
"postcss": "^7.0.0"
}
},
"@mdi/font": {
"version": "3.4.93",
"resolved": "https://registry.npmjs.org/@mdi/font/-/font-3.4.93.tgz",
"integrity": "sha512-iXNInmV6Xlmq8SA1zvYxp4uUA7/Z3cNgiK+Ps8UmHZNn1FLD6KDgeg0XE5RCraK+9qPWl8jsiBMpmbs+RFxI4Q=="
},
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -8837,6 +8842,11 @@
}
}
},
"moment": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@ -12979,6 +12989,11 @@
"vue-style-loader": "^4.1.0"
}
},
"vue-material-design-icons": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-3.0.0.tgz",
"integrity": "sha512-Y9dLUDuU0X3BjdeYjaHaWQ1UX4LMKT1kPIGApVhJmIs+HKY6xf57JLuba82YK+8iRlkJ/QYXbSV9oLrugn6M3w=="
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

5
package.json
View file

@ -8,7 +8,10 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.6"
"@mdi/font": "^3.4.93",
"moment": "^2.24.0",
"vue": "^2.6.6",
"vue-material-design-icons": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.1.1",

97
src/components/HomeDownloadBeta.vue Normal file
View file

@ -0,0 +1,97 @@
<template>
<div class="download-beta">
<home-download-beta-item
v-for="version in versions"
:key="version.code"
:code="version.code"
:released="version.released" />
</div>
</template>
<script>
import HomeDownloadBetaItem from './HomeDownloadBetaItem.vue';
export default {
name: 'home-download-beta',
components: {
HomeDownloadBetaItem,
},
computed: {
versions() {
// return [
// {
// code: '0.7.0',
// released: '2019-02-22T21:14:07Z',
// },
// {
// code: '0.6.9',
// released: '2019-02-15T21:14:07Z',
// },
// {
// code: '0.6.8',
// released: '2019-01-08T21:14:07Z',
// },
// {
// code: '0.7.0',
// released: '2019-02-22T21:14:07Z',
// },
// {
// code: '0.6.9',
// released: '2019-02-15T21:14:07Z',
// },
// {
// code: '0.6.8',
// released: '2019-01-08T21:14:07Z',
// },
// {
// code: '0.7.0',
// released: '2019-02-22T21:14:07Z',
// },
// {
// code: '0.6.9',
// released: '2019-02-15T21:14:07Z',
// },
// {
// code: '0.6.8',
// released: '2019-01-08T21:14:07Z',
// },
// {
// code: '0.7.0',
// released: '2019-02-22T21:14:07Z',
// },
// {
// code: '0.6.9',
// released: '2019-02-15T21:14:07Z',
// },
// {
// code: '0.6.8',
// released: '2019-01-08T21:14:07Z',
// },
// ];
return null;
},
},
};
</script>
<style lang="scss" scoped>
.download-beta {
overflow: auto;
padding-right: 8px;
&::-webkit-scrollbar-track {
border-radius: 4px;
background-color: transparent;
}
&::-webkit-scrollbar {
width: 8px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #aaa;
}
}
</style>

92
src/components/HomeDownloadBetaItem.vue Normal file
View file

@ -0,0 +1,92 @@
<template>
<div class="download-beta-item">
<div class="code">{{ code }}</div>
<div class="released" :title="releasedString">{{ releasedRelativeString }}</div>
<div class="buttons">
<a class="github-button" href="https://google.com/" target="_blank" title="GitHub">
<span class="mdi mdi-github-circle"></span>
</a>
<a class="download-button" href="https://google.com/" target="_blank" title="Download">
<span class="mdi mdi-download"></span>
</a>
</div>
</div>
</template>
<script>
import moment from 'moment';
moment.locale('pl');
export default {
name: 'home-download-beta-item',
props: {
code: {
type: String,
},
released: {
type: String,
},
},
computed: {
releasedString() {
return moment(this.released).format('dddd, D MMM YYYY HH:mm:ss');
},
releasedRelativeString() {
return moment(this.released).fromNow();
},
},
};
</script>
<style lang="scss" scoped>
.download-beta-item {
height: 52px;
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);
&:not(:first-child) {
margin-top: 16px;
}
}
.code {
grid-column: 1;
grid-row: 2;
color: #D32F2F;
font-family: 'Roboto', sans-serif;
font-size: 24px;
}
.released {
grid-column: 1;
grid-row: 3;
color: #0009;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.buttons {
display: flex;
flex-direction: row;
grid-column: 2;
grid-row: 1/5;
.github-button, .download-button {
font-size: 32px;
color: #000;
padding: 4px;
margin: 6px 4px;
display: block;
}
}
</style>

65
src/components/HomeDownloadSection.vue Normal file
View file

@ -0,0 +1,65 @@
<template>
<div id="download">
<h2 class="title">Pobieranie</h2>
<h3 class="section-name section-name-beta">Beta</h3>
<h3 class="section-name section-name-dev">Dev</h3>
<home-download-beta />
</div>
</template>
<script>
import HomeDownloadBeta from './HomeDownloadBeta.vue';
export default {
name: 'home-download-section',
components: {
HomeDownloadBeta,
},
};
</script>
<style lang="scss" scoped>
#download {
height: 100vh;
padding: 0 32px;
overflow: hidden;
background-color: #F6F6F6;
display: grid;
grid-template-columns: 1fr 32px 1fr;
grid-template-rows: auto auto 1fr 64px;
}
.title {
font-size: 32px;
text-align: center;
color: #D32F2F;
font-family: 'Roboto', sans-serif;
font-weight: 400;
grid-column: 1/4;
grid-row: 1;
}
.section-name {
font-size: 28px;
text-align: center;
color: #D32F2F;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: 0;
grid-row: 2;
}
.section-name-beta {
grid-column: 1;
}
.section-name-dev {
grid-column: 3;
}
.download-beta {
grid-row: 3;
grid-column: 1;
margin-top: 8px;
}
</style>

6
src/components/HomeMainHeader.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="home-main-header">
<div id="main-header">
<img class="logo" src="../assets/wulkanowy-full-flat.svg" alt="Wulkanowy" />
<h3 class="text">
APLIKACJA UCZNIA I RODZICA<br />
@ -12,7 +12,7 @@
target="_blank">
<img src="../assets/google-play-badge.svg" alt="Pobierz z Google Play" />
</a>
<a class="other-options" href="#home-download-section">
<a class="other-options" href="#download">
INNE OPCJE
</a>
</div>
@ -27,7 +27,7 @@ export default {
<style lang="scss" scoped>
#home-main-header {
#main-header {
padding-bottom: 48px;
height: 100vh;
box-sizing: border-box;

5
src/components/HomeMainSection.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="home-main-section">
<div id="main">
<home-main-header />
</div>
</template>
@ -16,8 +16,7 @@ export default {
</script>
<style lang="scss" scoped>
#home-main-section {
width: 100vw;
#main {
height: 100vh;
background:
linear-gradient(

3
src/components/HomeView.vue
View file

@ -1,16 +1,19 @@
<template>
<div id="home">
<home-main-section />
<home-download-section />
</div>
</template>
<script>
import HomeMainSection from './HomeMainSection.vue';
import HomeDownloadSection from './HomeDownloadSection.vue';
export default {
name: 'home-view',
components: {
HomeMainSection,
HomeDownloadSection,
},
};
</script>

1
src/main.js
View file

@ -1,3 +1,4 @@
import '@mdi/font/css/materialdesignicons.min.css';
import Vue from 'vue';
import App from './App.vue';