Issue #74: Implement scrollable mobile site view

daledavies · Mar 6, 2023 · b999d4e · b999d4e
1 parent c878d0f
commit b999d4e
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 81 deletions.
diff --git a/jumpapp/.jump-version b/jumpapp/.jump-version
@@ -1 +1 @@
-v1.3.0 (1677861634)
+v1.3.0 (1678104563)
diff --git a/jumpapp/assets/css/src/_sites.scss b/jumpapp/assets/css/src/_sites.scss
@@ -4,6 +4,91 @@ $offline-color: #ec2c2c;
 $error-color: #ddd900;
 $unknown-color: #ccc;
 
+
+@mixin sites-alternate {
+		width: 100%;
+		margin-top: 20px;
+
+		li {
+			float: left;
+			width: 50%;
+			text-align: left;
+			padding: 0 15px;
+			margin-bottom: 10px;
+
+			a {
+				background-color: rgba(255,255,255,0.8);
+				box-shadow: 0 1px 5px rgba(0,0,0,.3);
+				padding: 8px;
+				width: 100%;
+				transition: background-color .1s, box-shadow .1s;
+				position: relative;
+				overflow: hidden;
+
+				&:hover {
+					background-color: #fff;
+					box-shadow: 0 1px 5px rgba(0,0,0,.6);
+				}
+			}
+		}
+
+		.icon {
+			width: 35px;
+			height: 35px !important;
+			display: inline-block;
+			padding: 0;
+			border: none;
+			border-radius: 6px;
+			overflow: hidden;
+			box-shadow: none;
+			vertical-align: middle;
+			margin: 0 8px 0 0;
+		}
+
+		.name {
+			width: auto;
+			display: inline-block;
+			vertical-align: middle;
+			text-shadow: none;
+			color: #202124;
+			position: absolute;
+			top: 50%;
+			height: 14px;
+			line-height: 14px;
+			margin-top: -7px;
+		}
+	}
+
+	@mixin status-sites-alternate {
+		li {
+			a {
+			padding-left: 11px;
+			position: relative;
+
+				&::before {
+					content: '';
+					display: inline-block;
+					height: 100%;
+					width: 4px;
+					position: absolute;
+					left: 0;
+					top: 0;
+					background-color: $unknown-color;
+				}
+			}
+
+			&.online a::before {
+				background-color: $online-color;
+			}
+			&.offline a::before {
+				background-color: $offline-color;
+			}
+			&.error a::before {
+				background-color: $error-color;
+			}
+		}
+	}
+
 .sites {
 	padding: 0;
 	margin: 0;
@@ -97,94 +182,44 @@ $unknown-color: #ccc;
 	}
 
 	.sites.alternate {
-		li {
-			a {
-			padding-left: 11px;
-			position: relative;
-
-				&::before {
-					content: '';
-					display: inline-block;
-					height: 100%;
-					width: 4px;
-					position: absolute;
-					left: 0;
-					top: 0;
-					background-color: $unknown-color;
-				}
-			}
-
-			&.online a::before {
-				background-color: $online-color;
-			}
-			&.offline a::before {
-				background-color: $offline-color;
-			}
-			&.error a::before {
-				background-color: $error-color;
-			}
-		}
+		@include status-sites-alternate();
 	}
 }
 
+
 .sites.alternate {
-	width: 100%;
-	margin-top: 20px;
+	@include sites-alternate();
+}
 
-	li {
-		float: left;
-		width: 50%;
-		text-align: left;
-		padding: 0 5px;
-		margin-bottom: 10px;
+@media (max-width: 500px) {
 
-		a {
-			background-color: rgba(255,255,255,0.8);
-			box-shadow: 0 1px 5px rgba(0,0,0,.3);
-			padding: 8px;
-			width: 100%;
-			transition: background-color .1s, box-shadow .1s;
-			position: relative;
-			overflow: hidden;
+	.sites {
+		@include sites-alternate();
 
-			&:hover {
-				background-color: #fff;
-				box-shadow: 0 1px 5px rgba(0,0,0,.6);
-			}
-		}
-	}
+		overflow-y: scroll;
+		-ms-overflow-style: none;  /* IE and Edge */
+  		scrollbar-width: none;  /* Firefox */
+		height: calc(100% - 65px);
 
-	.icon {
-		width: 35px;
-		height: 35px;
-		display: inline-block;
-		padding: 0;
-		border: none;
-		border-radius: 6px;
-		overflow: hidden;
-		box-shadow: none;
-		vertical-align: middle;
-		margin: 0 8px 0 0;
+		li {
+			width: 100%;
+			margin-bottom: 5px;
+		}
 	}
 
-	.name {
-		width: auto;
-		display: inline-block;
-		vertical-align: middle;
-		text-shadow: none;
-		color: #202124;
-		position: absolute;
-		top: 50%;
-		height: 14px;
-		line-height: 14px;
-		margin-top: -7px;
+	.sites::-webkit-scrollbar {
+		display: none; /* Chrome, Safari, and Opera */
 	}
-}
 
-@media (max-width: 500px) {
-	.sites.alternate {
-		li {
-			width: 100%;
+	.status {
+		.sites {
+			@include status-sites-alternate();
+			.icon {
+				&::after {
+					display: none !important;
+				}
+			}
 		}
 	}
+
 }
diff --git a/jumpapp/assets/css/src/index.scss b/jumpapp/assets/css/src/index.scss
@@ -100,3 +100,11 @@ body {
     max-width: 650px;
     margin:-50px auto 0 auto;
 }
+
+@media (max-width: 500px) {
+    .content {
+        display: block;
+        margin-top: 80px;
+        height: calc(100% - 80px - 80px);
+    }
+}
diff --git a/...s/css/styles.00c4db10d75e0c01f6eb.min.css → ...s/css/styles.39eb2cb94aca9d614439.min.css b/...s/css/styles.00c4db10d75e0c01f6eb.min.css → ...s/css/styles.39eb2cb94aca9d614439.min.css
diff --git a/...sets/js/index.399219833641cce7fc8a.min.js → ...sets/js/index.083ccedbc04ef3ecb6bf.min.js b/...sets/js/index.399219833641cce7fc8a.min.js → ...sets/js/index.083ccedbc04ef3ecb6bf.min.js
diff --git a/jumpapp/templates/partials/cssbundle.mustache b/jumpapp/templates/partials/cssbundle.mustache
@@ -1 +1 @@
-<link rel="stylesheet" href="{{{wwwurl}}}/assets/css/styles.00c4db10d75e0c01f6eb.min.css">
+<link rel="stylesheet" href="{{{wwwurl}}}/assets/css/styles.39eb2cb94aca9d614439.min.css">
diff --git a/jumpapp/templates/partials/jsbundle.mustache b/jumpapp/templates/partials/jsbundle.mustache
@@ -1 +1 @@
-<script defer src="{{{wwwurl}}}/assets/js/index.399219833641cce7fc8a.min.js"></script>
+<script defer src="{{{wwwurl}}}/assets/js/index.083ccedbc04ef3ecb6bf.min.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<link rel="stylesheet" href="{{{wwwurl}}}/assets/css/styles.00c4db10d75e0c01f6eb.min.css">
		<link rel="stylesheet" href="{{{wwwurl}}}/assets/css/styles.39eb2cb94aca9d614439.min.css">
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<script defer src="{{{wwwurl}}}/assets/js/index.399219833641cce7fc8a.min.js"></script>
		<script defer src="{{{wwwurl}}}/assets/js/index.083ccedbc04ef3ecb6bf.min.js"></script>