servel 0.21.0 → 0.22.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2fa8d88495eaaf272edc23d6f8ee35358cdbf85e11339fc46f786cbead036ff9
-  data.tar.gz: dc9d48be2ce10ec35ebe1918f96985cef584bb2871ffaffebbb61ef2ea80a659
+  metadata.gz: 9e28a7c714a85189159aa8fb3369d97064f9d5d7d5656f030ac5b0b80c29f3ab
+  data.tar.gz: 8bef1a2df47d1e98793d819b4223ac19f6b36c76e6356e8a740fb1d0434e2d7d
 SHA512:
-  metadata.gz: c06b97acc7830e90bda35051313097cf3c414f1f3f4b15e6c2ec1af4be0cc6e665ce9480ace68a20827ad8d140396f9b34630061daa929f289d0c4027f3d2997
-  data.tar.gz: 8d0d2d034cf124464ceb421c110e01750341b9e5aa2bd009963e0bb1ec6262fe8bd24edc97b7bcb4bafaf6b0466879f65caadade8feee8b7a9663f400cb01352
+  metadata.gz: 212a9be1c883ea891007b9221e54acb8b339ec54f30e08ae103713115156e80ddb984d25e3e87734b9790e9c2160da65d5847b753201055e79479670456bbe3c
+  data.tar.gz: af195cacc8ccd4bd1fdc9f241a9a43f187fad59dd5527d4580fedc117cf6dfcbac1cc83b85eda214f8652b2578e0a82657b5fc8c4ef6c43a8b3e4926c6300f0c

data/app/_gallery.haml

@@ -1,13 +1,14 @@
-%img#image
-%video#video{autoplay: true, controls: true}
-%audio#audio{autoplay: true, controls: true}
-#text
-  %a#text-anchor{href: '#'}
-  #text-content
 #controls
   #page-back.paginator ◀
-  #page-next.paginator ▶
   #page-back-10.paginator ◀◀
+  #page-max-item.paginator ⤡
+  #page-jump-listing.paginator 🔗 Listing
   #page-next-10.paginator ▶▶
-  #page-jump-listing.paginator ▼
-  #page-max-item.paginator ⤡
+  #page-next.paginator ▶
+#content
+  %img#image
+  %video#video{autoplay: true, controls: true}
+  %audio#audio{autoplay: true, controls: true}
+  #text
+    %a#text-anchor{href: '#'}
+    #text-content

data/app/_listing.haml

@@ -1,4 +1,7 @@
-%h1 Listing of #{url_root}#{url_path}
+#header
+  %h1#title Listing of #{url_root}#{url_path}
+  %h1#jump-gallery-wrapper
+    %a#jump-gallery{href: "#"} 🔗 Gallery
 #search-wrapper
   %input#search{type: 'search'}
 .table-wrapper

data/app/css/gallery.css

@@ -1,8 +1,19 @@
 #gallery {
   background: #333;
   display: none;
+  flex-direction: column;
+}
+
+body.has-gallery.gallery #gallery {
+  display: flex;
+}
+
+#content {
+  display: flex;
   align-items: center;
   justify-content: center;
+  flex-grow: 1;
+  padding-top: 75px;
 }
 
 #image, #video, #audio, #text {
@@ -24,10 +35,6 @@
   background-color: #ffffff;
 }
 
-#gallery.video, #gallery.audio, #gallery.text {
-  padding: 0 100px;
-}
-
 #gallery.video #video {
   display: block;
 }
@@ -46,154 +53,56 @@
 
 #controls {
   position: fixed;
-  top: 0;
-  right: 0;
   left: 0;
-  pointer-events: none;
+  right: 0;
+  display: flex;
 }
 
 .paginator {
-  position: absolute;
-  width: 100px;
-  opacity: 0;
-  font-size: 20px;
-  font-weight: bold;
-  text-align: center;
-  color: #ffffff;
-
   display: flex;
   align-items: center;
   justify-content: center;
-  pointer-events: auto;
-}
+  width: 100px;
+  height: 75px;
 
-.paginator:active {
+  font-size: 2em;
+  font-weight: bold;
+  text-align: center;
   background-color: #000000;
-  opacity: 0.7;
-}
-
-#page-back {
-  top: 0;
-  bottom: 100px;
-  left: 0;
-}
+  color: #ffffff;
 
-#page-next {
-  top: 0;
-  bottom: 100px;
-  right: 0;
-}
-
-#page-back-10 {
-  bottom: 0;
-  left: 0;
-  height: 100px;
-}
-
-#page-next-10 {
-  bottom: 0;
-  right: 0;
-  height: 100px;
+  opacity: 0.4;
+  cursor: pointer;
 }
 
 #page-jump-listing {
-  right: 100px;
-  bottom: 0;
-  left: 100px;
-  height: 100px;
+  flex-grow: 1;
   width: auto;
 }
 
-#page-max-item {
-  top: 0;
-  left: 100px;
-  height: 100px;
-}
-
 @media screen and (max-width: 767px) {
   #gallery.video, #gallery.audio, #gallery.text {
     padding: 0;
   }
 
-  #page-back-10 {
-    top: 0;
-    bottom: auto;
-    left: 120px;
-    height: 75px;
-    width: 100px;
-  }
-
-  #page-next-10 {
-    top: 0;
-    right: 120px;
-    bottom: auto;
-    height: 75px;
-    width: 100px;
-  }
-
-  #page-back {
-    bottom: auto;
-    height: 75px;
-    width: 100px;
-  }
-
-  #page-next {
-    bottom: auto;
-    height: 75px;
-    width: 100px;
-  }
-
-  #page-jump-listing {
-    top: 0;
-    right: 220px;
-    bottom: auto;
-    left: 220px;
-    height: 75px;
-  }
-
-  #page-max-item {
-    top: 75px;
-    left: 0;
-    height: 75px;
+  .paginator {
+    width: 75px;
+    font-size: 20px;
   }
 }
 
 @media screen and (max-width: 479px) {
   #page-back-10 {
-    left: 80px;
-    width: 75px;
+    display: none;
   }
 
   #page-next-10 {
-    right: 80px;
-    width: 75px;
-  }
-
-  #page-back {
-    width: 75px;
-  }
-
-  #page-next {
-    width: 75px;
-  }
-
-  #page-jump-listing {
-    top: auto;
-    right: auto;
-    bottom: 0;
-    left: 0;
-    width: 75px;
-  }
-
-  #page-max-item {
-    width: 75px;
+    display: none;
   }
 }
 
 @media screen and (min-width: 768px) {
   .paginator:hover {
-    background-color: #000000;
-    opacity: 0.4;
-    cursor: pointer;
+    opacity: 0.7;
   }
 }

data/app/css/listing.css

@@ -1,12 +1,33 @@
 #listing {
+  display: none;
   padding: 10px;
-  position: relative;
-  z-index: 1;
   background-color: #fff;
 }
 
+body.listing #listing {
+  display: block;
+}
+
+#header {
+  display: flex;
+}
+
 #listing h1 {
   margin-top: 0;
+  margin-bottom: 20px;
+}
+
+#title {
+  flex-grow: 1;
+}
+
+#jump-gallery-wrapper {
+  display: none;
+  padding-left: 20px;
+}
+
+body.has-gallery #jump-gallery-wrapper {
+  display: block;
 }
 
 #search-wrapper {
@@ -96,3 +117,9 @@ span.icon {
 a.default.home, a.default.top, a.default.parent {
   font-style: oblique;
 }
+
+@media screen and (max-width: 767px) {
+  #listing h1 {
+    font-size: 20px;
+  }
+}

data/app/index.haml

@@ -23,6 +23,7 @@
       #{include('js/listing.js')}
       #{include('js/ume.js')}
       #{include('js/gallery.js')}
+      #{include('js/index.js')}
   %body
     #gallery!= partial('gallery')
     #listing!= partial('listing', { url_root: url_root, url_path: url_path })

data/app/js/gallery.js

@@ -94,11 +94,7 @@ var Gallery = (function() {
     document.body.addEventListener("click", function(e) {
       if(!e.target) return;
 
-      if(e.target.matches("a.media:not(.new-tab)")) {
-        e.preventDefault();
-        jump(e.target.dataset.url);
-      }
-      else if(e.target.matches("#page-back")) {
+      if(e.target.matches("#page-back")) {
         e.stopPropagation();
         prev();
       }
@@ -115,8 +111,8 @@ var Gallery = (function() {
         fastForward();
       }
       else if(e.target.matches("#page-jump-listing")) {
-        e.stopPropagation();
-        $("#listing").scrollIntoView();
+        e.preventDefault();
+        Index.jumpListing();
       }
       else if(e.target.closest("#page-max-item")) {
         e.stopPropagation();
@@ -140,11 +136,11 @@ var Gallery = (function() {
   }
 
   function layout() {
-    var viewportHeight = document.documentElement.clientHeight + "px";
-    $gallery.style.minHeight = viewportHeight;
-    $("#controls").style.height = viewportHeight;
+    var viewportHeight = document.documentElement.clientHeight;
+    $gallery.style.minHeight = viewportHeight + "px";
 
-    var maxHeight = layoutItemMax ? "none" : viewportHeight;
+    var controlsHeight = $("#controls").scrollHeight;
+    var maxHeight = layoutItemMax ? "none" : (viewportHeight - controlsHeight) + "px";
     $("#image").style.maxHeight = maxHeight;
     $("#video").style.maxHeight = maxHeight;
     $("#audio").style.maxHeight = maxHeight;
@@ -152,7 +148,7 @@ var Gallery = (function() {
 
   function initLayout() {
     window.addEventListener("resize", layout);
-    layout();
+    setTimeout(layout, 0);
   }
 
   function onEntriesUpdate() {
@@ -167,7 +163,7 @@ var Gallery = (function() {
     onEntriesUpdate();
 
     if(Entries.hasMedia()) {
-      $gallery.style.display = "flex";
+      document.body.classList.add("has-gallery");
 
       initEvents();
       initLayout();

data/app/js/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var Index = (function() {
+  function jumpListing() {
+    document.body.classList.remove("gallery");
+    document.body.classList.add("listing");
+  }
+
+  function jumpGallery() {
+    document.body.classList.remove("listing");
+    document.body.classList.add("gallery");
+  }
+
+  function init() {
+    if(document.body.classList.contains("has-gallery")) jumpGallery();
+    else jumpListing();
+  }
+
+  return {
+    init: init,
+    jumpListing: jumpListing,
+    jumpGallery: jumpGallery
+  };
+})();
+
+window.addEventListener("DOMContentLoaded", Index.init);

data/app/js/listing.js

@@ -99,10 +99,19 @@ var Listing = (function() {
     document.body.addEventListener("click", function(e) {
       if(!e.target) return;
 
-      if(e.target.closest("th.sortable")) {
+      if(e.target.matches("#jump-gallery")) {
+        e.preventDefault();
+        Index.jumpGallery();
+      }
+      else if(e.target.closest("th.sortable")) {
         e.preventDefault();
         applySort(e.target.closest("th.sortable"));
       }
+      else if(e.target.matches("a.media:not(.new-tab)")) {
+        e.preventDefault();
+        Gallery.jump(e.target.dataset.url);
+        Index.jumpGallery();
+      }
     });
 
     $("#search").addEventListener("keyup", function(e) {

data/lib/servel/version.rb

@@ -1,3 +1,3 @@
 module Servel
-  VERSION = "0.21.0"
+  VERSION = "0.22.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: servel
 version: !ruby/object:Gem::Version
-  version: 0.21.0
+  version: 0.22.0
 platform: ruby
 authors:
 - Brenton "B-Train" Fletcher
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-09-02 00:00:00.000000000 Z
+date: 2018-09-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -133,6 +133,7 @@ files:
 - app/index.haml
 - app/js/entries.js
 - app/js/gallery.js
+- app/js/index.js
 - app/js/listing.js
 - app/js/natural-orderby.min.js
 - app/js/ume.js