Vue Migration - fixes #80

.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	extends: [
+		'@nextcloud'
+	],
+}

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+
+/js/weather-main.js*

babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	plugins: ['@babel/plugin-syntax-dynamic-import'],
+	presets: [
+		[
+			'@babel/preset-env',
+			{
+				modules: false
+			}
+		]
+	]
+}

css/style.css

@@ -1,226 +1,177 @@
-#city-list-left {
-	display: flex;
-	flex-direction: column;
-	width: 250px;
-	height: 100%;
-	float: left;
-	-moz-box-sizing: border-box; box-sizing: border-box;
-	background-color: #fff;
-	border-left: 1px solid #ddd;
-	border-right: 1px solid #ddd;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-#city-list-left > ul {
-	position: relative;
-	height: 100%;
-	overflow: auto;
-	-moz-box-sizing: border-box; box-sizing: border-box;
-}
-#city-list-left li {
-	position: relative;
-	width: 100%;
-	-moz-box-sizing: border-box; box-sizing: border-box;
-}
-
-#city-list-left li:hover > a,
-#city-list-left li:hover,
-#city-list-left .selected,
-#city-list-left .selected a {
-	background-color: #ccc;
-}
-
-#city-list-left li > a {
-	line-height: 44px;
-	padding: 0 12px;
-	display: block;
-	overflow: hidden;
-	-moz-box-sizing: border-box; box-sizing: border-box;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	color: #333;
-}
-
-#city-list-left li .icon-delete {
-	width: 30px;
-	height: 18px;
-	top: 0;
-	right: 0;
-	position: absolute;
-	cursor: pointer;
-	height: 100%;
-	display: none;
-}
-
-#city-list-left li:hover .icon-delete {
-	display: inline;
-}
-
-#city-right {
+.mainContentContainer { /* #city-right */
 	padding: 15px;
 	height: calc(100vh - 50px); /* substract header */
 	overflow: auto;
 	top: 0;
 	bottom: 0;
 	right: 0;
 	left: 250px;
-	background: black no-repeat center center fixed;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-attachment: fixed;
 	background-size: cover;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	color: #EEE;
-	display: grid;
-}
 
-#city-right .city-name {
-	font-size: 5em;
-	line-height: 1em;
-	margin-bottom: 5px;
+	font-size: 1em;
 }
 
-#city-right .city-current-pressure, #city-right .city-current-wind,
-#city-right .city-current-humidity, #city-right .city-current-weather,
-#city-right .city-current-sunrise, #city-right .city-current-sunset,
-#city-right .city-current-temp_feelslike, #city-right .city-current-temp_min,
-#city-right .city-current-temp_max, .city-current-temp {
-	font-size: 2em;
-	line-height: 1em;
+.contentPanel { /* current weather and forecast containers */
+	color: #ddd;
+	border-radius: 3px;
+	padding: 20px;
+	background-color: rgba(50, 50, 50, 0.5);
+	display: block;
+	margin-bottom: 10px;
+
+	backdrop-filter: blur(3px);
+	-webkit-backdrop-filter: blur(3px);
 }
 
-#city-right tr:hover {
-	background-color: rgba(100, 100, 100, 0.5);
+.errorContainer {
+	color: #FF3333;
+	text-align: center;
+	font-size: 1.5em;
 }
 
-.city-list hr {
-	border: 0;
-	height: 1px;
-	background: #BBB;
-	background-image: linear-gradient(to right, #CCC, #BBB, #CCC);
+.errorContainer a {
+	color: #FF3333;
+	text-align: center;
 }
 
-#create-city {
-        padding: 10px;
-        background-color: #EEE;
-        border: 1px solid #DDD;
+.cityWeatherPanel {
+	display: flex;
+	flex-direction: column;
+}
+.cityWeatherPanel .currentValueRow {
+	display: flex;
 }
 
-#create-city h1 {
-        color: #444;
+.cityWeatherPanel .cityName {
+	font-size: 120%;
+	line-height: 1.5;
+	font-weight: bold;
 }
 
-#create-city h1 {
-        text-align: center;
-        font-weight: bold;
+.currentValueRow .label {
+	min-width: 25ex; /* longest English string is 21 characters long */
+}
+.currentValueRow .value {
+	padding-left: 2em;
 }
 
-#create-city h2, #city-forecast-panel th {
-        font-weight: bold;
+.cityForecastPanel tbody tr:hover {
+	background-color: rgba(0, 0, 0, 0.5);
 }
 
-.city-form-error {
-	color: red;
+.cityForecastPanel td, .cityForecastPanel th {
+	padding: 5px;
 }
 
-.city-load-error {
-	color: #FF3333;
-	position: absolute;
-        text-align: center;
-        top: 40%;
-        width: 100%;
-        padding: 20px;
-	font-size: 1.5em;
+.cityForecastPanel td.numeric {
+	text-align: right;
 }
 
-.city-load-error a {
-	color: #FF3333;
-        text-align: center;
+.cityForecastPanel th {
+	font-weight: bold;
 }
 
-#city-weather-panel, #city-forecast-panel {
-	border-radius: 3px;
-	padding: 20px;
-	background-color: rgba(50, 50, 50, 0.5);
-	display: block;
+/* Responsive */
+
+/* hide table columns */
+@media (max-width: 520px) {
+	.cityForecastPanel .wind {
+		display: none;
+	}
 }
 
-#city-forecast-panel {
-	font-size: 1.3em;
-	margin-top: 10px;
+@media (max-width: 600px) {
+	.cityForecastPanel .humidity {
+		display: none;
+	}
 }
 
-#city-forecast-panel td, #city-forecast-panel th {
-	padding: 10px;
+@media (max-width: 670px) {
+	.cityForecastPanel .pressure {
+		display: none;
+	}
 }
 
-.home-icon:hover {
-	cursor: pointer;
+@media (max-width: 820px) {
+	.cityForecastPanel .tempMin {
+		display: none;
+	}
 }
 
-/* Responsive */
-@media (max-width: 1700px) {
-#city-right .city-name {
-	font-size: 5em;
-	margin-bottom: 5px;
+@media (max-width: 980px) {
+	.cityForecastPanel .tempMax {
+		display: none;
+	}
 }
 
-#city-right .city-current-pressure, #city-right .city-current-wind,
-#city-right .city-current-weather, #city-right .city-current-humidity,
-#city-right .city-current-sunrise, #city-right .city-current-sunset,
-#city-right .city-current-temp_feelslike, #city-right .city-current-temp_min,
-#city-right .city-current-temp_max, .city-current-temp {
-	font-size: 2em;
+@media (max-width: 1024px) {
+	.cityForecastPanel .tempPerception {
+		display: none;
+	}
 }
-#city-forecast-panel {
-	font-size: 1.2em;
+
+@media (min-width: 1025px) and (max-width: 1150px) {
+	.cityForecastPanel .humidity, .cityForecastPanel .pressure {
+		display: none;
+	}
 }
+@media (min-width: 1025px) and (max-width: 1300px) {
+	.cityForecastPanel .tempPerception, .cityForecastPanel .tempMax {
+		display: none;
+	}
 }
 
-@media (max-width: 1560px) {
-#city-right .city-name {
-	font-size: 4em;
-	margin-bottom: 5px;
+/* BEGIN:   Background images */
+
+.Clear {
+	background-image: url('../img/sun.jpg');
 }
 
-#city-right .city-current-pressure, #city-right .city-current-wind,
-#city-right .city-current-weather, #city-right .city-current-humidity,
-#city-right .city-current-sunrise, #city-right .city-current-sunset,
-#city-right .city-current-temp_feelslike, #city-right .city-current-temp_min,
-#city-right .city-current-temp_max .city-current-temp {
-	font-size: 1.5em;
+.Clouds {
+	background-image: url('../img/clouds.png');
 }
-#city-forecast-panel {
-	font-size: 1.2em;
+
+.Drizzle {
+	background-image: url('../img/drizzle.jpg');
 }
+
+.Sand {
+	background-image: url('../img/sand.jpg');
 }
 
-@media (max-width: 1400px) {
-#city-forecast-panel {
-	font-size: 1em;
+.Tornado {
+	background-image: url('../img/tornado.jpg');
 }
+
+.Haze, .Mist {
+	background-image: url('../img/mist.jpg');
 }
-@media (max-width: 1350px) {
-#city-right .city-name {
-	font-size: 3em;
-	margin-bottom: 5px;
+
+.Rain {
+	background-image: url('../img/rain.jpg');
 }
 
-#city-right .city-current-pressure, #city-right .city-current-wind,
-#city-right .city-current-weather, #city-right .city-current-humidity,
-#city-right .city-current-sunrise, #city-right .city-current-sunset,
-#city-right .city-current-temp_feelslike, #city-right .city-current-temp_min,
-#city-right .city-current-temp_max .city-current-temp {
-	font-size: 1.6em;
+.Snow {
+	background-image: url('../img/snow.png');
 }
+
+.Thunderstorm {
+	background-image: url('../img/thunderstorm.jpg');
 }
 
-#app {
-	width: 100%;
+.Fog {
+	background-image: url('../img/fog.jpg');
 }
 
-#app-settings-content h2 {
-	font-weight: bold;
+.Ash, .Squall, .Dust, .Smoke {
+	background-image: url('../img/todo.png');
 }
+
+/* END:     Background images */