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

Add features table section (#24)

Browse source
This commit is contained in:
Mikołaj Pich 2019-10-15 20:36:45 +02:00 committed by GitHub
commit fffa29f115
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 274 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
package-lock.json generated
View file

@ -3393,8 +3393,7 @@
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
"integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
"dev": true,
"optional": true
"dev": true
},
"coa": {
"version": "2.0.2",
@ -13238,9 +13237,9 @@
}
},
"vue-material-design-icons": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-3.3.1.tgz",
"integrity": "sha512-ugIhVp1A/n+u4+hd4oXPSwpKmd1PemwhquQ/NwUt0/SRFGvA4gCC47e20ZZq/06Jp37mQ88p15tjBE20I+uAkw=="
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-3.4.0.tgz",
"integrity": "sha512-2wpc2KjVC/PCwuRnATRJzdUDdgOfXE9DoaAwf8bU2TQB7mEO/2pyqaSVF1MBYuLhwIzy3a2qMZm+iLhgN3VWew=="
},
"vue-mq": {
"version": "1.0.1",

2
package.json
View file

@ -13,7 +13,7 @@
"vue": "^2.6.10",
"vue-analytics": "^5.17.0",
"vue-async-computed": "^3.7.0",
"vue-material-design-icons": "^3.3.1",
"vue-material-design-icons": "^3.4.0",
"vue-mq": "^1.0.1",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.3"

2
src/App.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="app">
<div>
<router-view/>
</div>
</template>

74
src/assets/features-table.json Normal file
View file

@ -0,0 +1,74 @@
[
{
"feature": "Średnia ocen",
"uonet": "Zależy od ustawień szkoły",
"dzienniczek": "Zależy od ustawień szkoły",
"wulkanowy": "y"
},
{
"feature": "Frekwencja (widok dni)",
"uonet": "y",
"dzienniczek": "y",
"wulkanowy": "y"
},
{
"feature": "Frekwencja (podsumowanie)",
"uonet": "y",
"dzienniczek": "n",
"wulkanowy": "y"
},
{
"feature": "Uwagi",
"uonet": "y",
"dzienniczek": "y",
"wulkanowy": "y"
},
{
"feature": "Uczeń na tle klasy",
"uonet": "y",
"dzienniczek": "n",
"wulkanowy": "y"
},
{
"feature": "Dane ucznia",
"uonet": "y",
"dzienniczek": "n",
"wulkanowy": "n"
},
{
"feature": "Dane szkoły",
"uonet": "y",
"dzienniczek": "n",
"wulkanowy": "n"
},
{
"feature": "Nauczyciele",
"uonet": "y",
"dzienniczek": "y",
"wulkanowy": "y"
},
{
"feature": "Lekcje zrealizowane",
"uonet": "y",
"dzienniczek": "n",
"wulkanowy": "y"
},
{
"feature": "Wiadomości",
"uonet": "y",
"dzienniczek": "y",
"wulkanowy": "y"
},
{
"feature": "Usprawiedliwienia",
"uonet": "y",
"dzienniczek": "n",
"wulkanowy": "w"
},
{
"feature": "Szczęśliwy numerek",
"uonet": "y",
"dzienniczek": "n",
"wulkanowy": "y"
}
]

3
src/components/HomeDownloadBetaItem.vue
View file

@ -99,6 +99,7 @@
grid-template-columns: 1fr auto;
background-color: #fff;
border-radius: 4px;
font-family: 'Roboto', sans-serif;
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);
@ -115,7 +116,6 @@
.code {
grid-column: 1;
grid-row: 2;
font-family: 'Roboto', sans-serif;
font-size: 24px;
margin-bottom: 2px;
color: #D32F2F;
@ -131,7 +131,6 @@
grid-column: 1;
grid-row: 3;
color: #0009;
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
justify-self: start;

3
src/components/HomeDownloadDevItem.vue
View file

@ -132,6 +132,7 @@
grid-template-columns: 1fr auto;
background-color: #fff;
border-radius: 4px;
font-family: 'Roboto', sans-serif;
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);
@ -145,7 +146,6 @@
.header {
grid-column: 1;
grid-row: 2;
font-family: 'Roboto', sans-serif;
font-size: 20px;
margin-bottom: 8px;
line-height: 24px;
@ -173,7 +173,6 @@
.subheader {
grid-column: 1;
grid-row: 3;
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 16px;
display: flex;

3
src/components/HomeDownloadDevMaster.vue
View file

@ -88,6 +88,7 @@
grid-template-columns: 1fr auto;
background-color: #fff;
border-radius: 4px;
font-family: 'Roboto', sans-serif;
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);
@ -97,7 +98,6 @@
grid-column: 1;
grid-row: 2;
color: #D32F2F;
font-family: 'Roboto', sans-serif;
font-size: 20px;
margin-bottom: 8px;
line-height: 24px;
@ -115,7 +115,6 @@
.subheader {
grid-column: 1;
grid-row: 3;
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 16px;
display: flex;

4
src/components/HomeDownloadSection.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="download">
<div class="download home-section">
<h2 class="title">Pobieranie</h2>
<home-download-version-switcher v-if="$mq === 'md'" :activeSection="activeSection" />
<h3 class="section-name section-name-beta" v-if="$mq === 'lg'">BETA</h3>
@ -42,7 +42,7 @@
</script>
<style lang="scss" scoped>
#download {
.download {
height: 100vh;
box-sizing: border-box;
padding: 0 32px 32px;

64
src/components/HomeFeaturesTableCell.vue Normal file
View file

@ -0,0 +1,64 @@
<template>
<td v-if="value === 'y'" class="features-table__cell features-table__cell--yes" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''" title="Dostępne">
<check-icon
title="Dostępne"
:size="wulkanowy ? 36 : 28"
fillColor="#4caf50"
/>
</td>
<td v-else-if="value === 'n'" class="features-table__cell features-table__cell--no" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''" title="Niedostępne">
<close-icon
title="Niedostępne"
:size="28"
fillColor="#e53935"
/>
</td>
<td v-else-if="value === 'w'" class="features-table__cell features-table__cell--work-in-progress" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''" title="W trakcie">
<clock-icon
title="W trakcie"
:size="wulkanowy ? 36 : 28"
fillColor="#009688"
/>
</td>
<td v-else class="features-table__cell features-table__cell--other" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''">
{{ value }}
</td>
</template>
<style lang="scss">
.features-table__cell {
min-width: 95px;
&--wulkanowy {
background-color: #fff;
}
&--other {
color: #1e88e5;
}
}
</style>
<script>
import CheckIcon from 'vue-material-design-icons/Check.vue';
import CloseIcon from 'vue-material-design-icons/Close.vue';
import ClockIcon from 'vue-material-design-icons/ClockOutline.vue';
export default {
components: {
CheckIcon,
CloseIcon,
ClockIcon,
},
props: {
value: {
type: String,
required: true,
},
wulkanowy: {
type: Boolean,
default: false,
},
},
};
</script>

111
src/components/HomeFeaturesTableSection.vue Normal file
View file

@ -0,0 +1,111 @@
<template>
<div class="features-table-section home-section">
<h2 class="features-table-section__title">Porównanie funkcji</h2>
<div class="features-table">
<table class="features-table__table">
<thead>
<tr>
<th class="features-table__th">Funkcja</th>
<th class="features-table__th">Strona UONET+</th>
<th class="features-table__th">Aplikacja Dzienniczek+</th>
<th class="features-table__th features-table__th--wulkanowy">Aplikacja Wulkanowy</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in table" :key="i">
<td class="features-table__cell features-table__cell--feature-name" v-html="row.feature"></td>
<table-cell :value="row.uonet" />
<table-cell :value="row.dzienniczek" />
<table-cell :value="row.wulkanowy" wulkanowy />
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import table from '@/assets/features-table.json';
import HomeFeaturesTableCell from './HomeFeaturesTableCell.vue';
export default {
name: 'home-features-table-section',
components: {
TableCell: HomeFeaturesTableCell,
},
data: () => ({
table,
}),
};
</script>
<style lang="scss">
.features-table-section {
min-height: 100vh;
overflow: hidden;
box-sizing: border-box;
padding: 0 32px 32px;
background-color: #d32f2f;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto 1fr;
font-family: 'Roboto', sans-serif;
@media screen and (max-width: 875px) {
padding: 0 0 16px;
}
}
.features-table-section__title {
font-size: 32px;
text-align: center;
color: #fff;
font-weight: 400;
grid-row: 1;
grid-column: 1;
}
.features-table {
grid-row: 3;
width: fit-content;
max-width: 100vw;
box-sizing: border-box;
overflow-x: auto;
justify-self: center;
&__table {
border-spacing: 5px;
width: fit-content;
min-width: 75vw;
padding: 0 16px;
}
&__th, &__cell {
text-align: center;
background-color: #ffffffcc;
border-radius: 3px;
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);
}
&__cell {
padding: 8px;
&--feature-name {
font-weight: 500;
}
}
&__th {
padding: 4px 8px;
&--wulkanowy {
color: #f44336;
background-color: #fff;
font-size: 18px;
}
}
}
</style>

8
src/components/HomeMainHeader.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="main-header">
<div class="home-main-header">
<h1 class="logo"><img src="../assets/wulkanowy-full-flat.svg" alt="Wulkanowy" /></h1>
<p class="text">
Aplikacja ucznia i rodzica<br />
@ -90,7 +90,7 @@
<style lang="scss" scoped>
#main-header {
.home-main-header {
padding-bottom: 48px;
height: 100vh;
box-sizing: border-box;
@ -98,6 +98,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
}
.logo {
@ -115,7 +116,6 @@
text-align: center;
margin-top: 0;
margin-bottom: 48px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #fff;
font-size: 32px;
@ -177,7 +177,6 @@
color: rgba(0, 0, 0, 0.87);
line-height: 64px;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
border-radius: 4px;
margin-left: 32px;
@ -228,7 +227,6 @@
margin-top: 35px;
&__link {
font-family: 'Roboto', sans-serif;
color: #fff;
}
}

4
src/components/HomeMainSection.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="main">
<div class="main home-section">
<home-main-header />
</div>
</template>
@ -16,7 +16,7 @@
</script>
<style lang="scss" scoped>
#main {
.main {
height: 100vh;
background: linear-gradient(
rgba(0, 0, 0, 0.3),

10
src/views/Home.vue
View file

@ -1,18 +1,21 @@
<template>
<div id="home">
<div class="home">
<home-main-section />
<home-features-table-section />
<home-download-section />
</div>
</template>
<script>
import HomeMainSection from '../components/HomeMainSection.vue';
import HomeFeaturesTableSection from '../components/HomeFeaturesTableSection.vue';
import HomeDownloadSection from '../components/HomeDownloadSection.vue';
export default {
name: 'home-view',
components: {
HomeMainSection,
HomeFeaturesTableSection,
HomeDownloadSection,
},
};
@ -24,5 +27,10 @@
body {
margin: 0;
scroll-behavior: smooth;
scroll-snap-type: y proximity;
}
.home .home-section {
scroll-snap-align: start;
}
</style>