zyro / hyde-x

Enhanced port of the Jekyll "Hyde" theme to Hugo
MIT License
263 stars 101 forks source link

portrait mode, showing page content after navigating from sidebar menu #39

Closed JazzTp closed 7 years ago

JazzTp commented 9 years ago

Hi,

First of all: thanks to you and to all the ones who contributed to this port of such a beautiful theme.

I have implemented a quick and dirty solution to this minor issue: when in portrait mode (typical when navigating with a smartphone), after tapping/clicking into one of the sidebar menu links, the sidebar is still visible with no apparent changes, it's not evident that loading has finished and manual scroll down is necessary.

I modified a few files to add an anchor named pagetop, the old style (I'm putting my web dev knowledge a bit up to date during this process, but I really have to postpone any deeper learning ATM, so admittedly I don't know if it should be "sanitized", and I suspect it might be deprecated or banned in html5).

(You'll notice that my header in partials is split in two, I need to add code for jQuery lightgallery inside the header only in a certain type of single rendering.)

If you want to check how this quick fix works, this is my website http://www.nicolabernardelli.com/

In landscape mode there should be no visible difference, apart the less pretty URLs.

I'm not submitting a pull request because I'm sure you would prefer a more elegant solution not making URLs less pretty, like a java powered animation showing a very fast scroll down after loading finishes. (Besides, I'm not even sure that a solution is not already there and I'm just missing it, also considering that I cloned the repo a couple of weeks ago and changes have been merged since.)

However, just to clarify, here are separate diff files for the theme folder and the resulting public folder content (NO CHANGES to the content folder and nothing at all in the main layouts folder, all layouts are inside the theme tree):

THEME

diff -ur SOURCE__before_pagetop_anchor/themes/hyde-x-custom/layouts/index.html SOURCE__with_pagetop_anchor/themes/hyde-x-custom/layouts/index.html
--- SOURCE__before_pagetop_anchor/themes/hyde-x-custom/layouts/index.html   2015-08-15 18:30:17.092667700 -0300
+++ SOURCE__with_pagetop_anchor/themes/hyde-x-custom/layouts/index.html 2015-08-17 01:19:24.663380500 -0300
@@ -24,10 +24,10 @@
       {{ .Content }}
       {{ else if .Description }}
       <p>{{ .Description }}</p>
-      <a href="{{ .Permalink }}">Read On &rarr;</a>
+      <a href="{{ .Permalink }}#pagetop">Read On &rarr;</a>
       {{ else }}
       {{ .Summary }}
-      {{ if .Truncated }}<a href="{{ .Permalink }}">Read On &rarr;</a>{{ end }}
+      {{ if .Truncated }}<a href="{{ .Permalink }}#pagetop">Read On &rarr;</a>{{ end }}
       {{ end }}
     </div>
     {{ end }}
diff -ur SOURCE__before_pagetop_anchor/themes/hyde-x-custom/layouts/partials/head-end.html SOURCE__with_pagetop_anchor/themes/hyde-x-custom/layouts/partials/head-end.html
--- SOURCE__before_pagetop_anchor/themes/hyde-x-custom/layouts/partials/head-end.html   2015-08-15 18:20:52.718882600 -0300
+++ SOURCE__with_pagetop_anchor/themes/hyde-x-custom/layouts/partials/head-end.html 2015-08-17 01:06:42.686090700 -0300
@@ -1,3 +1,4 @@
 </head>
 <body{{ with .Site.Params.theme }} class="{{ . }}"{{ end }}>
 {{ partial "sidebar.html" . }}
+<a name="pagetop"></a>
diff -ur SOURCE__before_pagetop_anchor/themes/hyde-x-custom/layouts/partials/sidebar.html SOURCE__with_pagetop_anchor/themes/hyde-x-custom/layouts/partials/sidebar.html
--- SOURCE__before_pagetop_anchor/themes/hyde-x-custom/layouts/partials/sidebar.html    2015-08-16 02:27:07.926916000 -0300
+++ SOURCE__with_pagetop_anchor/themes/hyde-x-custom/layouts/partials/sidebar.html  2015-08-17 01:10:09.920865000 -0300
@@ -9,9 +9,9 @@
     </div>

     <ul class="sidebar-nav">
-      <li class="sidebar-nav-item"><a href="{{ "/" | absURL }}">{{ if isset .Site.Params "home"}}{{ .Site.Params.home }}{{ else }}Blog{{ end }}</a></li>
+      <li class="sidebar-nav-item"><a href="{{ "/" | absURL }}#pagetop">{{ if isset .Site.Params "home"}}{{ .Site.Params.home }}{{ else }}Blog{{ end }}</a></li>
       {{ range .Site.Menus.main }}
-      <li class="sidebar-nav-item"><a href="{{ .URL | absURL }}">{{ .Name }}</a></li>
+      <li class="sidebar-nav-item"><a href="{{ .URL | absURL }}#pagetop">{{ .Name }}</a></li>
       {{end}}
     </ul>

Resulting public/ folder

$ diff -ur SOURCE__before_pagetop_anchor/public/ SOURCE__with_pagetop_anchor/public/
diff -ur SOURCE__before_pagetop_anchor/public/404.html SOURCE__with_pagetop_anchor/public/404.html
--- SOURCE__before_pagetop_anchor/public/404.html   2015-08-16 17:47:20.546437800 -0300
+++ SOURCE__with_pagetop_anchor/public/404.html 2015-08-17 10:55:24.999869300 -0300
@@ -45,11 +45,11 @@
     </div>

     <ul class="sidebar-nav">
-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/">Home &amp; Blog</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/#pagetop">Home &amp; Blog</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/">About</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/#pagetop">About</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/">Gallery</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/#pagetop">Gallery</a></li>

     </ul>

@@ -75,6 +75,7 @@
   </div>
 </div>

+<a name="pagetop"></a>

 <div class="content container">
diff -ur SOURCE__before_pagetop_anchor/public/About/index.html SOURCE__with_pagetop_anchor/public/About/index.html
--- SOURCE__before_pagetop_anchor/public/About/index.html   2015-08-16 17:47:20.518431200 -0300
+++ SOURCE__with_pagetop_anchor/public/About/index.html 2015-08-17 10:55:24.974868400 -0300
@@ -46,11 +46,11 @@
     </div>

     <ul class="sidebar-nav">
-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/">Home &amp; Blog</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/#pagetop">Home &amp; Blog</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/">About</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/#pagetop">About</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/">Gallery</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/#pagetop">Gallery</a></li>

     </ul>

@@ -76,6 +76,7 @@
   </div>
 </div>

+<a name="pagetop"></a>

    <div class="content container">
diff -ur SOURCE__before_pagetop_anchor/public/blog/2015/08/13/heart-attack/index.html SOURCE__with_pagetop_anchor/public/blog/2015/08/13/heart-attack/index.html
--- SOURCE__before_pagetop_anchor/public/blog/2015/08/13/heart-attack/index.html    2015-08-16 17:47:20.522431000 -0300
+++ SOURCE__with_pagetop_anchor/public/blog/2015/08/13/heart-attack/index.html  2015-08-17 10:55:24.981868900 -0300
@@ -45,11 +45,11 @@
     </div>

     <ul class="sidebar-nav">
-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/">Home &amp; Blog</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/#pagetop">Home &amp; Blog</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/">About</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/#pagetop">About</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/">Gallery</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/#pagetop">Gallery</a></li>

     </ul>

@@ -75,6 +75,7 @@
   </div>
 </div>

+<a name="pagetop"></a>

 <div class="content container">
   <div class="post">
diff -ur "SOURCE__before_pagetop_anchor/public/blog/2015/08/16/caj\303\263n-unplugged/index.html" "SOURCE__with_pagetop_anchor/public/blog/2015/08/16/caj\303\263n-unplugged/index.html"
--- "SOURCE__before_pagetop_anchor/public/blog/2015/08/16/caj\303\263n-unplugged/index.html"    2015-08-16 17:47:20.523432400 -0300
+++ "SOURCE__with_pagetop_anchor/public/blog/2015/08/16/caj\303\263n-unplugged/index.html"  2015-08-17 10:55:24.980868400 -0300
@@ -45,11 +45,11 @@
     </div>

     <ul class="sidebar-nav">
-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/">Home &amp; Blog</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/#pagetop">Home &amp; Blog</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/">About</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/#pagetop">About</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/">Gallery</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/#pagetop">Gallery</a></li>

     </ul>

@@ -75,6 +75,7 @@
   </div>
 </div>

+<a name="pagetop"></a>

 <div class="content container">
   <div class="post">
diff -ur SOURCE__before_pagetop_anchor/public/Gallery/index.html SOURCE__with_pagetop_anchor/public/Gallery/index.html
--- SOURCE__before_pagetop_anchor/public/Gallery/index.html 2015-08-16 17:47:20.513432500 -0300
+++ SOURCE__with_pagetop_anchor/public/Gallery/index.html   2015-08-17 10:55:24.976868600 -0300
@@ -51,11 +51,11 @@
     </div>

     <ul class="sidebar-nav">
-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/">Home &amp; Blog</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/#pagetop">Home &amp; Blog</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/">About</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/#pagetop">About</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/">Gallery</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/#pagetop">Gallery</a></li>

     </ul>

@@ -81,6 +81,7 @@
   </div>
 </div>

+<a name="pagetop"></a>

    <div class="content container">
diff -ur SOURCE__before_pagetop_anchor/public/index.html SOURCE__with_pagetop_anchor/public/index.html
--- SOURCE__before_pagetop_anchor/public/index.html 2015-08-16 17:47:20.531432100 -0300
+++ SOURCE__with_pagetop_anchor/public/index.html   2015-08-17 10:55:24.991869200 -0300
@@ -45,11 +45,11 @@
     </div>

     <ul class="sidebar-nav">
-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/">Home &amp; Blog</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/#pagetop">Home &amp; Blog</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/">About</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/#pagetop">About</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/">Gallery</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/#pagetop">Gallery</a></li>

     </ul>

@@ -75,6 +75,7 @@
   </div>
 </div>

+<a name="pagetop"></a>

 <div class="content container">

@@ -98,7 +99,7 @@
       </span>

       I have just arrived from the hospital and I can confirm that Nestor mood is quite fine. He unplugged himself from the monitoring system, grabbed a wood box very similar to a &ldquo;cajón&rdquo; (Wikipedia article) and started playing sitting on it. The nurse, who had been focusing on another patient, soon realized and came to stop the show. Alas, I can not publish any pictures, she told us that it is forbidden to shoot any in there, and I don&rsquo;t want to risk causing her any trouble.
-      <a href="http://www.nicolabernardelli.com/blog/2015/08/16/caj%C3%B3n-unplugged/">Read On &rarr;</a>
+      <a href="http://www.nicolabernardelli.com/blog/2015/08/16/caj%C3%B3n-unplugged/#pagetop">Read On &rarr;</a>

     </div>

@@ -113,7 +114,7 @@
       </span>

       This Blog starts with a heart attack. Nestor Astarita, drummer and leader of the Tribute to Miles Davis and Astor Piazzolla project, has just suffered one. Why not &ldquo;sadly&rdquo;? Because, even under this circumstance, &ldquo;he&rsquo;s as up, arriba, as he always is&rdquo;. Carola Faverio, his life mate, transmits news to us, we are not allowed to visit him. He&rsquo;s facing an urgent intervention today or tomorrow, which of course implies serious risks.
-      <a href="http://www.nicolabernardelli.com/blog/2015/08/13/heart-attack/">Read On &rarr;</a>
+      <a href="http://www.nicolabernardelli.com/blog/2015/08/13/heart-attack/#pagetop">Read On &rarr;</a>

     </div>

diff -ur SOURCE__before_pagetop_anchor/public/post/index.html SOURCE__with_pagetop_anchor/public/post/index.html
--- SOURCE__before_pagetop_anchor/public/post/index.html    2015-08-16 17:47:20.499430700 -0300
+++ SOURCE__with_pagetop_anchor/public/post/index.html  2015-08-17 10:55:24.961867900 -0300
@@ -45,11 +45,11 @@
     </div>

     <ul class="sidebar-nav">
-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/">Home &amp; Blog</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/#pagetop">Home &amp; Blog</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/">About</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/About/#pagetop">About</a></li>

-      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/">Gallery</a></li>
+      <li class="sidebar-nav-item"><a href="http://www.nicolabernardelli.com/Gallery/#pagetop">Gallery</a></li>

     </ul>

@@ -75,6 +75,7 @@
   </div>
 </div>

+<a name="pagetop"></a>

 <div class="content container">
   <ul class="posts">

Cheers! JazzTp

agallant commented 9 years ago

Just taking a look here at this issue you mentioned in the other thread - your approach actually looks reasonable to me, and preferable to anything fancier that requires JavaScript or such (the point of a static webpage is to be simple and responsive on even basic clients). It may be good to rename the anchor #content for clarity.

It would still be nice to figure out a way to only use these sorts of links when actually necessary (i.e. when in the compressed mobile layout), but that would probably require heavier scripting. I believe that right now the dynamic layout is purely CSS based (e.g. https://github.com/zyro/hyde-x/blob/master/static/css/poole.css), but I don't know of a way to address this issue with just CSS. Then again, it may be possible (CSS is scarily featureful these days).

JazzTp commented 9 years ago

@soycode we ended up talking in the other thread, agreed anchor name "content" instead of "pagetop".

Let me add here:

It would still be nice to figure out a way to only use these sorts of links when actually necessary (i.e. when in the compressed mobile layout), but that would probably require heavier scripting.

Yes, probably, while the simple fix max-height in css + anchor in html even acts "on the fly" when resizing the browser window.

JazzTp commented 9 years ago

agreed anchor name "content" instead of "pagetop"

@soycode, I'm changing the anchor name to "content" but I'm leaving remarks with the word "pagetop", I checked before replacing and noticed that when wanting to locate occurrences the word "content" appears in a lot of places... well if one includes any kind of resouces when scanning... Not so if one simply takes into account that it's only html files we are interested in, when searching. Actually, I have one special partial which places the anchor, a few other partials calling that one, and only two partials actually referring to the #anchorname.