Mercurial > hg > mgallery

changeset 152:606b05c31d5e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Improve mobile experience and also desktop image display, maybe.
author Matti Hamalainen <ccr@tnsp.org>
date Wed, 06 Sep 2017 17:49:50 +0300
parents 4e25150aa868
children fd84c6a8c4c9
files basic.css mgallery.js mgallery.php
diffstat 3 files changed, 98 insertions(+), 18 deletions(-) [+]
line wrap: on
line diff
--- a/basic.css	Wed Sep 06 17:34:36 2017 +0300
+++ b/basic.css	Wed Sep 06 17:49:50 2017 +0300
@@ -19,8 +19,8 @@
 
 
 #pageContents {
-	padding: 0em;
-	margin: 0em;
+	padding: 0;
+	margin: 0;
 }
 
 
@@ -49,6 +49,11 @@
 }
 
 #pageInfoFooter {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+
 	background: #565;
 	margin: 0;
 	padding: 0.25em;
@@ -56,11 +61,40 @@
 	font-size: 0.75em;
 	text-shadow: 1px 1px 1px black;
 
-	border-bottom-left-radius: 0.5em;
-	border-bottom-right-radius: 0.5em;
-	box-shadow: 0px 5px 4px black;
+	z-index: 12;
+}
+
+
+div.imagePageHeader {
+	position: fixed;
+
+	z-index: 12;
+
+	top: 0;
+	left: 0;
+	right: 0;
 }
 
+#pageInfoButton {
+	position: fixed;
+	top: 0.25em;
+	left: 0.25em;
+	z-index: 30;
+
+	font-size: 1.25em;
+
+	background: black;
+	color: white;
+
+	border: 0.2em solid white;
+	border-radius: 0.3em;
+	padding: 1em;
+}
+
+#pageInfoButton:hover {
+	background: white;
+	color: black;
+}
 
 /*
  * Albums
@@ -149,7 +183,11 @@
 }
 
 #imageCBox {
-	position: relative;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
 
 div.imageCtrl {
@@ -227,26 +265,27 @@
 }
 
 #imageCBox div.imageCaption {
-	background: #050;
+	background: #350;
+	z-index: 12;
 }
 
 div.infoBox {
-	position: absolute;
+	position: fixed;
 	bottom: 0;
-	left: 1em;
-	right: 1em;
+	left: 0.1em;
+	right: 0.1em;
 	height: auto;
 	min-height: 5em;
 	background: rgba(0,0,0, 0.5);
 
 	text-align: center;
 	margin: 0;
-	padding: 0.5em;
+	padding: 1em;
 	border: 0.2em solid white;
 	border-radius: 0.5em;
 
 	opacity: 0;
-	z-index: 12;
+	z-index: 15;
 }
 
 div.infoBox:hover {
@@ -264,6 +303,7 @@
 	text-shadow: none;
 	text-decoration: none;
 	font-size: 1.25em;
+	padding: 0.5em;
 }
 
 
@@ -310,7 +350,6 @@
 	background: black;
 	border-radius: 0.35em;
 	padding: 0.5em;
-	z-index: 50;
 }
 
 #languages a {
@@ -320,6 +359,7 @@
 	background: white;
 	color: black;
 	border-radius: 0.35em;
+	text-align: center;
 }
 
 
@@ -335,12 +375,15 @@
 
 	#languages {
 		position: relative;
+		top: 0;
+		right: 0;
+		left: 0;
+		text-align: right;
 	}
 
 	#languages a {
 		width: 5em;
 		padding: 1em;
-		text-align: center;
 	}
 
 	#naviBreadCrumbs {
@@ -350,6 +393,15 @@
 	h1 {
 		font-size: 1.25em;
 	}
+
+	#pageInfoFooter {
+		display: none;
+	}
+
+	#pageInfoButton {
+		opacity: 0.5;
+		font-size: 1.5em;
+	}
 }
 
 
@@ -357,10 +409,6 @@
 	body {
 		font-size: 18px;
 	}
-
-	#pageInfoFooter {
-		display: none;
-	}
 }
 
 
@@ -372,4 +420,13 @@
 	div.galleryEntry {
 		width: 40%;
 	}
+
+	#pageInfoButton {
+		top: auto;
+		left: auto;
+		bottom: 0.5em;
+		right: 0.5em;
+
+		font-size: 2em;
+	}
 }
--- a/mgallery.js	Wed Sep 06 17:34:36 2017 +0300
+++ b/mgallery.js	Wed Sep 06 17:49:50 2017 +0300
@@ -128,3 +128,23 @@
 }
 
 
+function mgalDisplayInfo(mvstate)
+{
+  var mvbut = document.getElementById("pageInfoButton");
+  var mvelem = document.getElementById("pageInfoHeader");
+  mvelem.style.display = mvstate ? "block" : "none";
+  mvbut.style.display = !mvstate ? "block" : "none";
+  mvInfoOpen = mvstate;
+}
+
+
+function mgalOpenInfo()
+{
+  mgalDisplayInfo(true);
+}
+
+
+function mgalCloseInfo()
+{
+  mgalDisplayInfo(false);
+}
--- a/mgallery.php	Wed Sep 06 17:34:36 2017 +0300
+++ b/mgallery.php	Wed Sep 06 17:49:50 2017 +0300
@@ -611,6 +611,9 @@
       "var mgalUpURL = \"".mgGetURL($galData["path"], FALSE)."\";\n".
       "\n";
 ?>
+mgalDisplayInfo(false);
+mgalAddEvent(document.getElementById("pageInfoButton"), "click", mgalOpenInfo);
+mgalAddEvent(document.getElementById("imageCBox"), "click", mgalCloseInfo);
 
 mgalAddEvent(document.getElementById("imageImage"), "load", mgalAdjustImageDo);
 mgalAddEvent(window, "resize", mgalAdjustImage);