Spythere/pragotron-td2
1
0
Fork 0
mirror of https://github.com/Spythere/pragotron-td2.git synced 2026-05-03 05:28:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dodano szkielet projektu

Browse Source
This commit is contained in:
Spythere
2021-12-08 23:48:38 +01:00
parent b58c9d9579
commit 8a3f6e5bb0
15 changed files with 30393 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Pragotron.vue
+109
View File
@@ -0,0 +1,109 @@
<template>
<div class="pragotron">
<div class="wrapper">
<div class="top-pane">
<span class="title">ODJAZDY</span>
<div class="headers">
<span>DO STACJI</span>
<span>PRZEZ</span>
<span>POCIĄG</span>
<span>PLAN. ODJ.</span>
<span>OPÓŹN.</span>
</div>
</div>
<div class="table">
<div class="row" v-for="i in new Array(8)" :key="i">
<div class="row-content">
<span class="destination">
<div class="station-slider-slot"></div>
</span>
<span class="via-station">
<div class="station-slider-slot"></div>
</span>
<span class="train-class">
<div class="train-slider-slot"></div>
</span>
<span class="departure-date">
<span class="hours-slot"></span>
<span class="minutes-slot"></span>
<span class="seconds-slot"></span>
</span>
<span class="delay">
<div class="delay-slider-slot"></div>
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
/* eslint-disable */
import { defineComponent } from 'vue';
export default defineComponent({
data: () => ({}),
});
</script>
<style lang="scss" scoped>
.pragotron {
width: 1200px;
height: 600px;
background: black;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.top-pane {
background: white;
height: 130px;
.title {
padding: 0;
font-size: 3.5em;
}
.headers {
display: grid;
grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
gap: 0 10px;
text-align: center;
font-size: 1.35em;
}
}
.table {
background: white;
flex-grow: 1;
display: grid;
grid-template-rows: repeat(7, 1fr);
gap: 5px 0;
}
.row {
&-content {
display: grid;
grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
height: 100%;
span {
background: #333;
}
}
}
</style>