Mercurial > hg > mgallery

changeset 120:d1ed6213f6d2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Various improvements/changes to CSS and usability on mobile devices.
author Matti Hamalainen <ccr@tnsp.org>
date Wed, 10 May 2017 12:02:47 +0300
parents cf295af9754d
children 928852711534
files basic.css mgallery.php
diffstat 2 files changed, 112 insertions(+), 56 deletions(-) [+]
line wrap: on
line diff
--- a/basic.css	Wed May 10 11:37:23 2017 +0300
+++ b/basic.css	Wed May 10 12:02:47 2017 +0300
@@ -1,8 +1,10 @@
 body {
-	color: #ded;
+	color: white;
 	background: #121;
 	font-family: Verdana, Arial, helvetica, sans-serif;
-	font-size: 65%;
+	font-size: 12px;
+	margin: 0;
+	padding: 0;
 }
 
 a {
@@ -17,40 +19,45 @@
 
 
 #contents {
-	background: #565;
-	border-radius: 0.5em;
 	padding: 0.5em;
+	margin: 0em;
 }
 
 h1 {
 	font-size: 2em;
 	font-family: helvetica;
-	margin-top: 0;
-	margin-bottom: 0.1em;
-	background: #343;
-	padding: 5pt;
+	margin: 0;
+	padding: 0.25em;
 	color: white;
 	text-shadow: 2px 2px 2px #000;
-
-	border-radius: 8px;
-}
+	background: #787;
 
-h2,h3 {
-	padding: 5pt;
-	border-radius: 8px;
-	background: #343;
-	color: white;
-	text-shadow: 2px 2px 2px #000;
+	border-top-left-radius: 0.25em;
+	border-top-right-radius: 0.25em;
 }
 
 
+#pageInfoHeader {
+	background: #565;
+	margin: 0;
+	padding: 0.25em;
+
+	border-top-left-radius: 0.5em;
+	border-top-right-radius: 0.5em;
+	box-shadow: 0px -4px 4px black;
+}
+
 #pageInfoFooter {
-	margin-top: 0.5em;
+	background: #565;
+	margin: 0;
 	padding: 0.25em;
 	text-align: right;
 	font-size: 0.75em;
 	text-shadow: 1px 1px 1px black;
-	color: white;
+
+	border-bottom-left-radius: 0.5em;
+	border-bottom-right-radius: 0.5em;
+	box-shadow: 0px 5px 4px black;
 }
 
 
@@ -67,22 +74,23 @@
 	flex-wrap: wrap;
 	align-items: center;
 	width: 100%;
+	background: #454;
 }
 
-.galleryEntry {
+div.galleryEntry {
 	min-width: 145px;
-	width: 10%;
-	padding: 0.5em;
+	width: 15em;
+	padding: 1em;
 	text-align: center;
 }
 
+div.galleryEntry img {
+	min-width: 145px;
+	width: 100%;
+}
+
 .albumTable {
-	background: #454;
-	border-radius: 0.5em;
-	border-top: 1px solid #343;
-	border-left: 1px solid #343;
-	border-bottom: 1px solid #787;
-	border-right: 1px solid #787;
+	border-bottom: 1px solid black;
 }
 
 .galleryTable a, .galleryTable a:visited  {
@@ -106,7 +114,7 @@
 /*
  *
  */
-div.imageBox, div.imageFilename {
+div.imageBox {
 	text-align: center;
 }
 
@@ -121,7 +129,7 @@
 }
 
 .galleryEntry div.imageBox img {
-	box-shadow: 4px 4px 4px black;
+	box-shadow: 2px 2px 4px -2px black;
 }
 
 img.albumIcon {
@@ -139,12 +147,12 @@
 }
 
 div.imageCtrl {
+	position: absolute;
 	min-width: 150px;
 	width: 14%;
-	position: absolute;
 	top: 0;
-	bottom: 2em;
-	background: rgba(0,0,0,0.35);
+	bottom: 0;
+	background: rgba(0,0,0, 0.35);
 }
 
 div.imageCtrl.next, div.imageCtrl.nextBtm {
@@ -202,24 +210,20 @@
 
 
 
-div.imageCaption {
+div.albumTitle, div.imageCaption {
 	text-align: center;
-	font-size: 1.5em;
 	text-shadow: 1px 1px 2px black;
 	padding: 0.5em;
 }
 
 .galleryEntry div.imageCaption {
-	text-align: center;
-	font-size: 1em;
-	text-shadow: 1px 1px 2px black;
-	padding: 0.5em;
+	font-size: 1.25em;
 }
 
 
 div.infoBox {
 	position: absolute;
-	bottom: 2em;
+	bottom: 0;
 	left: 1em;
 	right: 1em;
 	height: auto;
@@ -227,13 +231,12 @@
 	background: rgba(0,0,0, 0.5);
 
 	text-align: center;
-	margin: 0.5em;
+	margin: 0;
 	padding: 0.5em;
 	border: 0.2em solid white;
 	border-radius: 0.5em;
 
 	opacity: 0;
-	transition: opacity 0.15s linear;
 	z-index: 12;
 }
 
@@ -284,28 +287,82 @@
 	text-shadow: 1px 1px 1px black;
 	padding: 0.5em;
 	padding-top: 0;
-	border-radius: 0.3em;
-	font-size: 1.2em;
+	font-size: 1.25em;
 
-	background: #454;
-	border-top: 1px solid #343;
-	border-left: 1px solid #343;
-	border-bottom: 1px solid #787;
-	border-right: 1px solid #787;
+	background: #676;
+	box-shadow: 0px 2px 4px -4px black;
 }
 
 
 #languages {
 	position: absolute;
-	right: 1.5em;
-	top: 2em;
+	right: 0em;
+	top: 0em;
 	background: black;
-	border: 2px solid rgba(255,255,255,0.2);
 	border-radius: 0.35em;
-	padding: 0.5em;
+	padding: 1em;
 	z-index: 50;
 }
 
 #languages a {
+	display: inline-block;
 	padding: 0.5em;
+	margin: 0.1em;
+	background: white;
+	color: black;
+	border-radius: 0.35em;
 }
+
+
+@media screen and (min-resolution: 150dpi) {
+	div.albumTitle, div.imageCaption {
+		font-size: 1.5em;
+	}
+
+	#contents {
+		padding: 0;
+		margin: 0;
+	}
+
+	#languages {
+		position: relative;
+	}
+
+	#languages a {
+		width: 5em;
+		padding: 1em;
+		text-align: center;
+	}
+
+	#naviBreadCrumbs {
+		font-size: 1.6em;
+		background: green;
+	}
+
+	#pageInfoHeader h1 {
+		font-size: 1.25em;
+	}
+}
+
+
+@media screen and (min-resolution: 150dpi) and (orientation: landscape) {
+	body {
+		font-size: 18px;
+	}
+
+	#pageInfoFooter {
+		display: none;
+	}
+}
+
+
+@media screen and (min-resolution: 150dpi) and (orientation: portrait) {
+	body {
+		font-size: 25px;
+	}
+
+	div.galleryEntry {
+		width: 40%;
+	}
+
+}
--- a/mgallery.php	Wed May 10 11:37:23 2017 +0300
+++ b/mgallery.php	Wed May 10 12:02:47 2017 +0300
@@ -583,7 +583,6 @@
   mgPrintPageHeader($pageTitle);
   echo
     mgGetPageInfoHeaderStart().
-    mgGetLanguageSelector().
     "<h1>".chentities($pageTitle)."</h1>\n";
 
   if ($ctrlFlags & MGF_BREADCRUMBS)
@@ -710,7 +709,7 @@
 {
   var eimg = document.getElementById("imageImage");
   var win = mgalGetWindowSize();
-  var madj = 0.81;
+  var madj = 0.85;
   if (eimg)
   {
     if (eimg.width > eimg.height)
@@ -765,7 +764,6 @@
   mgPrintPageHeader($pageTitle);
   echo
     mgGetPageInfoHeaderStart().
-    mgGetLanguageSelector().
     "<h1>".$pageTitle."</h1>\n";
 
   $ctrlFlags = mgGetSetting("album_flags");
@@ -800,5 +798,6 @@
   mgPrintTable("imageTable", $galEntries, $galImagesIndex, 0, FALSE);
 }
 
+echo mgGetLanguageSelector();
 mgPrintPageFooter();
 ?>
\ No newline at end of file