From 951e5d8276fed113d83b0523b239fd91b3f8f238 Mon Sep 17 00:00:00 2001
From: nicco <nicco.borgioli@gmail.com>
Date: Mon, 25 Dec 2017 16:41:21 +0100
Subject: [PATCH] Mobile

---
 app/index.html                |  5 +++--
 app/res/css/layout.css        | 12 +++++++++---
 app/res/css/main.css          | 18 ++++++++++++++++++
 app/res/css/screen.css        |  3 ---
 app/res/css/weather.css       |  9 +++++++--
 app/res/fonts/Army/import.css |  2 +-
 6 files changed, 38 insertions(+), 11 deletions(-)
diff --git a/app/index.html b/app/index.html
index 52def5a..e8d630e 100644
--- a/app/index.html
+++ b/app/index.html
@@ -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">
diff --git a/app/res/css/layout.css b/app/res/css/layout.css
index c620ab1..6f325b8 100644
--- a/app/res/css/layout.css
+++ b/app/res/css/layout.css
@@ -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;
 }
diff --git a/app/res/css/main.css b/app/res/css/main.css
index f3e84cc..2052d43 100644
--- a/app/res/css/main.css
+++ b/app/res/css/main.css
@@ -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;
 }
\ No newline at end of file
diff --git a/app/res/css/screen.css b/app/res/css/screen.css
index f15d1f4..19ea8d6 100644
--- a/app/res/css/screen.css
+++ b/app/res/css/screen.css
@@ -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;
 }
 
diff --git a/app/res/css/weather.css b/app/res/css/weather.css
index 1dcf13d..4cc4c8f 100644
--- a/app/res/css/weather.css
+++ b/app/res/css/weather.css
@@ -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;
diff --git a/app/res/fonts/Army/import.css b/app/res/fonts/Army/import.css
index c7b138d..1573c17 100644
--- a/app/res/fonts/Army/import.css
+++ b/app/res/fonts/Army/import.css
@@ -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');
 }
\ No newline at end of file
