Merge pull request #2 from project-alice-assistant/cssRework

reworked css

AliceSatellite.install

@@ -1,6 +1,6 @@
 {
 	"name": "AliceSatellite",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"icon": "fas fa-satellite",
 	"category": "alice",
 	"author": "ProjectAlice",

widgets/css/Satellites.css

@@ -1,32 +1,24 @@
-.Satellites_satelliteContainer {
-	width: 100%;
-	display: flex;
-	align-items: flex-start;
-	padding: 5px;
-}
-
-.Satellites_tile {
-	width: 150px;
-	height: 150px;
-	display: block;
-	margin-right: 15px;
-	margin-top: 15px;
-	background-color: #8d9191;
-	padding: 3px;
-	box-sizing: border-box;
-}
-
 .Satellites_tile_deviceName { font-family: var(--readable); }
 
 .Satellites_tile_muteUnmute {
 	width: 100%;
-	height: 80px;
+	height: 5em;
 	text-align: center;
-	margin-top: 15px;
+	margin-top: 1em;
 	display: block;
 }
 
 .Satellites_tile_heartbeat {
 	width: 100%;
 	text-align: right;
 }
+
+.Satellites_satelliteWidget .tile {
+	width: 9.5em;
+	height: 9.5em;
+	padding: .3em;
+	background-color: var(--secondary);
+	box-sizing: border-box;
+	box-shadow: none;
+	display: flex;
+}

widgets/css/common.css

@@ -1,9 +1,8 @@
 .Satellites_satelliteWidget {
 	width: 100%;
 	height: 100%;
-	color: #d1d1d1;
 	padding: 5px;
 	box-sizing: border-box;
 	overflow-y: hidden;
-	overflow-x: scroll;
+	overflow-x: auto;
 }

widgets/js/Satellites.js

@@ -19,7 +19,7 @@
 			let device = JSON.parse(devices[id]);
 
 			let color = device['connected'] ? '--text' : 'red';
-			let $tile = $('<div class="Satellites_tile" id="' + device['uid'] + '">' +
+			let $tile = $('<div class="tile" id="' + device['uid'] + '">' +
 					'<div class="Satellites_tile_deviceName ' + color + '">' + device['room'] + '</div>' +
 					'<div class="Satellites_tile_muteUnmute"><i class="fas fa-microphone-alt fa-4x" aria-hidden="true" id="Satellites_muteUnmute_' + device['uid'] + '"></i></div>');
 

widgets/templates/Satellites.html

@@ -2,5 +2,5 @@
 	<div class="widgetIcons">
 		<i class="fas fa-wifi" aria-hidden="true"></i>
 	</div>
-	<div class="Satellites_satelliteContainer" id="Satellites_satelliteContainer"></div>
+	<div class="tileContainer" id="Satellites_satelliteContainer"></div>
 </div>