cupcakearmy/dvb
1
0
Fork 0
mirror of https://github.com/cupcakearmy/dvb.git synced 2024-06-25 05:44:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Mobile

Browse Source
This commit is contained in:
nicco 2017-12-25 16:41:21 +01:00
parent e0a05ffd13
commit 951e5d8276
6 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/index.html
View File

@ -2,6 +2,7 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="res/fonts/Army/import.css" rel="stylesheet" type="text/css">
<link href="res/css/main.css" rel="stylesheet" type="text/css">
<link href="res/css/layout.css" rel="stylesheet" type="text/css">
@ -56,7 +57,7 @@
<script type="text/x-template" id="tmpl-dvb-line">
<div class="fill line">
<div class="head">
<div class="title">
<div class="title ellipsis">
<span>{{stopName}}</span>
</div>
<br>
@ -64,7 +65,7 @@
</div>
<div class="body">
<template v-for="(direction, name) in directions">
<div class="title">
<div class="title ellipsis">
<span>{{ name }}</span>
</div>
<div v-for="data in direction" v-if="data.RealTime" class="departure">

12
app/res/css/layout.css
View File

@ -2,13 +2,19 @@
.container {
display: grid;
grid-template-columns: 1fr calc(100vh / 4);
grid-template-rows: auto 1fr;
grid-template-areas: "top side" "body side";
grid-template: calc(100vw / 4) 5em 1fr / 100%;
grid-template-areas: "side" "top" "body";
background: var(--clr-light);
color: var(--clr-dark);
}
@media only screen and (min-width: 70em) {
.container {
grid-template: auto 1fr / 1fr calc(100vh / 4);
grid-template-areas: "top side" "body side";
}
}
.container>div {
overflow: hidden;
}

18
app/res/css/main.css
View File

@ -17,6 +17,18 @@
padding: 0;
}
@media only screen and (max-width: 70em) {
* {
--font-xxxl: 4em;
--font-xxl: 2.5em;
--font-xl: 1.5em;
--font-lg: 1.2em;
--font-md: 1em;
--font-sm: .8em;
--font-xs: .6em;
}
}
body {
margin: 0;
padding: 0;
@ -31,4 +43,10 @@ body {
.fill {
height: 100%;
width: 100%;
}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

3
app/res/css/screen.css
View File

@ -26,9 +26,6 @@
#screen .head .title {
font-size: var(--font-xl);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: var(--mrg-text) 0em;
}

9
app/res/css/weather.css
View File

@ -2,12 +2,17 @@
.weather-container {
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: 100%;
grid-template: 100% / repeat(4, 1fr);
grid-gap: 1em;
padding: 1em;
}
@media only screen and (min-width: 70em) {
.weather-container {
grid-template: repeat(4, 1fr) / 100%;
}
}
.weather-container .weather-item {
background-repeat: no-repeat;
background-position: center;

2
app/res/fonts/Army/import.css vendored
View File

@ -2,5 +2,5 @@
font-family: 'Army';
font-weight: normal;
font-style: normal;
src: local('Army'), url('Army.tff');
src: local('Army'), url('Army.ttf');
}