From b91670a8c3e8ce7139527c6090abb1d1f24766e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pontus=20=C3=96stlund?= <ponost@roxen.com>
Date: Thu, 8 Dec 2016 21:49:01 +0100
Subject: [PATCH] Changed the "hamburger" in mobile mode.
Added the image copying stuff in module_modref in the Makefile since that most likely will fail since the image dir in this case i empty. This should be fixed properly, but I know too little about the confusing syntax in the makefile.
---
refdoc/Makefile | 4 +--
refdoc/structure/modref.css | 48 +++++++++++++++++++++++++++++++-----
refdoc/structure/modref.html | 7 +++++-
3 files changed, 50 insertions(+), 9 deletions(-)
diff --git a/refdoc/Makefile b/refdoc/Makefile
index 4a453e5c51..8322b3e66f 100644
--- a/refdoc/Makefile
+++ b/refdoc/Makefile
@@ -32,12 +32,12 @@ low_module_modref:
@cp structure/modref.js $(DESTDIR)modref/site.js
@$(PIKE) presentation/tree-split-autodoc.pike \
$(BUILDDIR)/module_modref.xml structure/modref.html $(DESTDIR)modref predef
- @mkdir $(DESTDIR)modref/images
- -cp $(BUILDDIR)/doc_build/images/* $(DESTDIR)modref/images
+ @test -d $(DESTDIR)modref/images || mkdir $(DESTDIR)modref/images
@for file in pike-logo.svg pike-logo.png next.gif prev.gif unit.gif \
pike_line_left.gif pike_line_middle.gif pike_line_right.gif \
eye-slash.svg; do \
cp src_images/$$file $(DESTDIR)modref/images/ ; done
+ -cp $(BUILDDIR)/doc_build/images/* $(DESTDIR)modref/images/
low_modref:
-rm -rf $(DESTDIR)modref
diff --git a/refdoc/structure/modref.css b/refdoc/structure/modref.css
index 0b8efa76d5..e6e1962b9e 100644
--- a/refdoc/structure/modref.css
+++ b/refdoc/structure/modref.css
@@ -533,7 +533,24 @@ pre code .nested:hover { opacity: 1; }
#burger {
display: none;
color: white;
+ border: none;
+ background: transparent;
+ margin: 0;
+ transform-style: preserve-3d;
}
+ #burger:focus {
+ outline: 1px dashed #777;
+ }
+ #burger .bar {
+ display: block;
+ margin-top: 3px;
+ height: 2px;
+ width: 25px;
+ background: #fff;
+ }
+ #burger .bar:first-child {
+ margin-top: 0;
+ }
@media screen and (max-width: 1024px) {
ul.multicol {
@@ -578,9 +595,9 @@ pre code .nested:hover { opacity: 1; }
display: block;
float: right;
color: white;
- padding: 10px 15px;
- margin-right: -15px;
- margin-top: -2px;
+ padding: 9px 7px;
+ margin-right: -6px;
+ margin-top: 0px;
cursor: pointer;
border-radius: 2px;
opacity: .6;
@@ -603,7 +620,7 @@ pre code .nested:hover { opacity: 1; }
header h1 {
display: inline-block;
- margin-top: 7px;
+ margin-top: 5px;
}
header a {
@@ -633,8 +650,27 @@ pre code .nested:hover { opacity: 1; }
display: block;
}
- .menu-open #burger {
- transform: rotate(90deg);
+ #burger .bar {
+ transform-style: preserve-3d;
+ transition: all .3s ease-out;
+ }
+
+ .menu-open #burger .bar {
+ // transform: rotate(90deg);
+
+
+ }
+ .menu-open #burger .bar:nth-child(1) {
+ transform: rotate(45deg)
+ translate(5px, 6px);
+ }
+ .menu-open #burger .bar:nth-child(2),
+ .menu-open #burger .bar:nth-child(3) {
+ opacity: 0;
+ }
+ .menu-open #burger .bar:nth-child(4) {
+ transform: rotate(-45deg)
+ translate(5px, -6px);
}
.navbar {
diff --git a/refdoc/structure/modref.html b/refdoc/structure/modref.html
index 5b633d1c4a..79bb1f91a9 100644
--- a/refdoc/structure/modref.html
+++ b/refdoc/structure/modref.html
@@ -15,7 +15,12 @@
<header>
<div class="header">
<div id="version"><strong data-id="version">$version$</strong></div>
- <div id="burger">☰</div><!-- Hamburger icon -->
+ <button id="burger">
+ <span class="bar"></span>
+ <span class="bar"></span>
+ <span class="bar"></span>
+ <span class="bar"></span>
+ </button><!-- Hamburger icon -->
<h1>
<a href="http://pike.lysator.liu.se/" class="logo">
<span>Pike programming language</span>
--
GitLab