Merge pull request #9403 from pivanov/bug-798696

Bug 798696 - When viewing single image in Gallery, extremely hard to find button to go back to thumbnail view

apps/gallery/index.html

@@ -45,16 +45,17 @@ <h1 id="thumbnails-number-selected"></h1>
       </footer>
     </section>
 
-    <section role="region" id="fullscreen-view" class="hidden">
+    <section role="region" id="fullscreen-view" class="hidden skin-organic">
+
       <div id="frames">
         <!-- the current photo plus next and previous waiting in the wings -->
         <div id="frame1" class="frame"></div>
         <div id="frame2" class="frame"></div>
         <div id="frame3" class="frame"></div>
       </div>
 
+      <button id="fullscreen-back-button" type="reset"></button>
       <footer id="fullscreen-toolbar">
-        <a id="fullscreen-back-button" class="button"></a>
         <a id="fullscreen-camera-button" class="button"></a>
         <a id="fullscreen-edit-button" class="button"></a>
         <a id="fullscreen-share-button" class="button"></a>

apps/gallery/style/gallery.css

@@ -18,7 +18,6 @@ body {
   height: 100%;
   width: 100%;
   overflow: hidden;
-  padding-bottom: 5rem;
 }
 
 section {
@@ -236,9 +235,25 @@ section {
   }
 }
 
-/* since fullscreen-view is fullscreen, it needs its own background color */
-#fullscreen-view {
-  background-color: #444;
+
+#fullscreen-back-button {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  width: 4.5rem;
+  height: 4.5rem;
+  font-size: 0;
+  border-radius: 50%;
+  border: none;
+  color: #605c59;
+  box-shadow: 0 0.1rem 0 inset;
+  background: rgba(114, 111, 106, 0.8) url(images/back.png) no-repeat 50% 50%;
+  transition: opacity 0.2s linear;
+}
+
+#fullscreen-back-button:active {
+  color: #107788;
+  background-color: #00b0d5;
 }
 
 #frames {
@@ -411,50 +426,37 @@ footer {
   bottom: 0;
   left: 0;
   right: 0;
-  transition: transform 100ms linear;
+  font-size: 0;
+  transition: transform 0.2s linear;
+}
+
+#fullscreen-toolbar > a {
+  display: inline-block;
+  width: 25%;
+  height: 100%;
 }
 
 #fullscreen-view.toolbarhidden #fullscreen-toolbar {
   transform: translate(0, 4rem);
 }
 
-#fullscreen-back-button {
-  position: absolute;
-  width: 20%;
-  height: 100%;
-  left: 0;
-  background-image: url('images/iconaction_camera_gridview_30x30.png');
+#fullscreen-view.toolbarhidden #fullscreen-back-button {
+  opacity: 0;
 }
 
 #fullscreen-camera-button {
-  position: absolute;
-  width: 20%;
-  height: 100%;
-  left: 20%;
   background-image: url('images/iconaction_camera_30x30.png');
 }
 
 #fullscreen-edit-button {
-  position: absolute;
-  width: 20%;
-  height: 100%;
-  left: 40%;
   background-image: url('images/iconaction_camera_editphoto_30x30.png');
 }
 
 #fullscreen-share-button {
-  position: absolute;
-  width: 20%;
-  height: 100%;
-  left: 60%;
   background-image: url('images/iconaction_share_30x30.png');
 }
 
 #fullscreen-delete-button {
-  position: absolute;
-  width: 20%;
-  height: 100%;
-  left: 80%;
   background-image: url('images/iconaction_delete_30x30.png');
 }