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

Add feature table section

Browse source
This commit is contained in:
Dominik Korsa 2019-10-01 19:47:49 +02:00
parent 6c67d7a3db
commit 9ae916fb4c
8 changed files with 254 additions and 8 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"

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"
}
]

2
src/components/HomeDownloadSection.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="download">
<div id="download" class="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>

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

@ -0,0 +1,66 @@
<template>
<td v-if="value === 'y'" class="yes" :class="wulkanowy ? 'wulkanowy' : ''" title="Dostępne">
<check-icon
title="Dostępne"
:size="wulkanowy ? 36 : 28"
fillColor="#4caf50"
/>
</td>
<td v-else-if="value === 'n'" class="no" :class="wulkanowy ? 'wulkanowy' : ''" title="Niedostępne">
<close-icon
title="Niedostępne"
:size="28"
fillColor="#e53935"
/>
</td>
<td v-else-if="value === 'w'" class="work-in-progress" :class="wulkanowy ? 'wulkanowy' : ''" title="W trakcie">
<clock-icon
title="W trakcie"
:size="wulkanowy ? 36 : 28"
fillColor="#009688"
/>
</td>
<td v-else class="other" :class="wulkanowy ? 'wulkanowy' : ''">
{{ value }}
</td>
</template>
<style lang="scss" scoped>
td {
text-align: center;
&.wulkanowy {
// background-color: #ffebee;
background-color: #fff !important;
}
&.other {
// background-color: #e3f2fd;
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>

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

@ -0,0 +1,99 @@
<template>
<div id="features-table" class="home-section">
<h2 class="title">Porównanie funkcji</h2>
<table>
<thead>
<tr>
<th>Funkcja</th>
<th>Strona UONET+</th>
<th>Aplikacja Dzienniczek+</th>
<th class="wulkanowy">Aplikacja Wulkanowy</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in table" :key="i">
<td class="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>
</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 {
min-height: 100vh;
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 16px 16px;
}
@media screen and (max-width: 450px) {
padding: 0 8px 16px;
}
.title {
font-size: 32px;
text-align: center;
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: 400;
grid-row: 1;
grid-column: 1;
}
table {
border-spacing: 5px;
grid-row: 3;
th {
padding: 8px;
&.wulkanowy {
color: #f44336;
background-color: #fff;
font-size: 18px;
}
}
.feature-name {
font-weight: 500;
}
th, td {
text-align: center;
padding: 4px 8px;
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);
}
}
}
</style>

2
src/components/HomeMainSection.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="main">
<div id="main" class="home-section">
<home-main-header />
</div>
</template>

8
src/views/Home.vue
View file

@ -1,18 +1,21 @@
<template>
<div id="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>