Improved fullscreen button.

joshuaword2alt · Aug 15, 2021 · 012ecb0 · 012ecb0
1 parent ad69f9e
commit 012ecb0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/server/assets/img/fullscreen.svg b/server/assets/img/fullscreen.svg
@@ -0,0 +1 @@
+../../../static/img/fullscreen.svg
diff --git a/server/server.go b/server/server.go
@@ -167,6 +167,7 @@ func (s *Server) routes() {
 
 	s.echo.Static("/thumbs", filepath.Join(s.dataPath, pathThumbs))
 	s.echo.Static("/css", "./server/assets/css")
+	s.echo.Static("/img", "./server/assets/img")
 	s.echo.Static("/js", "./server/assets/js")
 	s.echo.File("/diff", "./server/assets/diff.html")
 

diff --git a/static/img/fullscreen.svg b/static/img/fullscreen.svg
diff --git a/static/index.html b/static/index.html
@@ -47,6 +47,22 @@
 				color: #000000;
 			}
 
+			img {
+				padding: 4px;
+				border: 0px;
+				border-radius: 5px;
+				margin-right: 5px;
+
+				background-color: #000000;
+				vertical-align: middle;
+
+				cursor: pointer;
+			}
+
+				img:hover {
+					background-color: #FFFFFF;
+				}
+
 			option {
 				color: #ffffff;
 				background-color: #000000;
@@ -179,8 +195,8 @@
 				panButton.title = "Pan: left-drag, Zoom: right-drag. Use 'hide code' for a large pan/zoom area.";
 				rightside.appendChild( panButton );
 
-				fullscreenButton = document.createElement( 'button' );
-				fullscreenButton.textContent = 'fullscreen';
+				fullscreenButton = document.createElement( 'img' );
+				fullscreenButton.src = 'img/fullscreen.svg';
 				fullscreenButton.title = 'Press F11 to enter or leave fullscreen mode';
 				fullscreenButton.addEventListener( 'click', function ( event ) {
 
@@ -197,6 +213,7 @@
 				rightside.appendChild( fullscreenButton );
 
 				var button = document.createElement( 'a' );
+				button.style.marginRight = '0px';
 				button.textContent = 'gallery';
 				button.href = '/';
 				rightside.appendChild( button );