You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2019/09/23 18:49:17 UTC
[royale-docs] branch master updated: make sidebar appears from
right on mobile devices
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git
The following commit(s) were added to refs/heads/master by this push:
new 3cc1012 make sidebar appears from right on mobile devices
3cc1012 is described below
commit 3cc1012e09f262bfc61fae5c20a0b4769bfe1b5a
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Sep 23 20:49:10 2019 +0200
make sidebar appears from right on mobile devices
---
_layouts/docpage.html | 33 ++++++++--
_sass/docsearch.sass | 2 +-
_sass/sidebar.sass | 174 ++++++++++++++++++--------------------------------
3 files changed, 93 insertions(+), 116 deletions(-)
diff --git a/_layouts/docpage.html b/_layouts/docpage.html
index d7f3dfa..e7ac50f 100644
--- a/_layouts/docpage.html
+++ b/_layouts/docpage.html
@@ -25,6 +25,8 @@ limitations under the License.
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+ <script src="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styles.css" />
<link rel="shortcut icon" href="">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
@@ -49,13 +51,13 @@ limitations under the License.
<a href="https://github.com/apache/royale-docs/edit/master/{{ page.path }}" target="_blank">Edit this page</a>
</div>
</article>
- <div class="toc">
- <div align="center">
- <input class="docsearch-input" type="search" placeholder="Search docs..." autocomplete="off" spellcheck="false"/>
- </div>
+ <div class="toc" id="toc">
+ <input class="docsearch-input" type="search" placeholder="Search docs..." autocomplete="off" spellcheck="false"/>
<div class="sidebar">
{% include toc.html %}
</div>
+ <div id="sbButton" onclick="showSideBar()" role="button" tabindex="0" class="sidebar-button titanic titanic-forward-arrow"/>
+ </div>
</div>
</div>
</div>
@@ -63,5 +65,28 @@ limitations under the License.
{% include footer.html %}
{% include docsearch.html %}
+ <script>
+ var titanic = new Titanic({
+ hover: false, // auto animated on hover (default true)
+ click: false // auto animated on click/tap (default false)
+ });
+
+ function showSideBar()
+ {
+ if(toc.classList.contains("open"))
+ {
+ titanic.items[0].off();
+ toc.classList.remove("open");
+
+ }
+ else
+ {
+ titanic.items[0].on();
+ toc.classList.add("open");
+ }
+ }
+ </script>
</body>
+
+
</html>
diff --git a/_sass/docsearch.sass b/_sass/docsearch.sass
index 21f4946..8eb665b 100644
--- a/_sass/docsearch.sass
+++ b/_sass/docsearch.sass
@@ -19,7 +19,7 @@
outline-style: none
display: inline-block
- width: 100%
+ width: 300px
appearance: none
background-color: white
border-radius: 6px
diff --git a/_sass/sidebar.sass b/_sass/sidebar.sass
index 5f99be4..25c65e6 100644
--- a/_sass/sidebar.sass
+++ b/_sass/sidebar.sass
@@ -12,10 +12,39 @@
* limitations under the License.
*/
+.sidebar-button
+ display: none
+ background-color: #20232a
+ top: 20px
+ color: #61dafb
+ cursor: pointer
+ position: fixed
+ left: -58px
+ // z-index: 30
+ // border-radius: 50%
+ // border: 1px solid rgba(255, 255, 255, 0.1)
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.4)
+ outline: none
+ width: 38px
+ height: 38px
+ transform: scaleX(-1)
+ padding: 4px
+
+.sidebar-button-inner
+ width: 20px
+ height: 20px
+ align-self: center
+ display: flex
+ flex-direction: column
+ color: #61dafb
+
+.titanic path
+ fill: #fff
+ stroke: #fff
+
.toc
display: flex
flex-direction: column
- // flex: 0 0 300px
margin-top: 80px
background-color: #f7f7f7
padding: 20px 20px
@@ -23,60 +52,53 @@
@media (min-width: 600px)
.toc
- // border-left: 1px solid #ececec
margin-left: 80px
@media (max-width: 979px) and (min-width: 600px)
.toc
margin-left: 40px
-// media (min-width: 1100px)
-// .toc
-// flex: 0 0 300px
-
-// media (max-width: 1339px) and (min-width: 600px)
-// .toc
-// flex: 0 0 200px
-// margin-left: 80px
-
-// media (min-width: 2000px)
-// .toc
-// position: fixed
-// right: 0
-// width: 300px
-// z-index: 2
-
-// .toc
-// display: inline-block
-// margin-top: 80px
-// margin-left: 15px
-// margin-left: 15px
-// margin-bottom: 20px
-// flex-shrink: 0
-// width: 350px
+@media (max-width: 599px)
+ .toc
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.4)
+ top: 0px
+ bottom: 0px
+ right: 0px
+ position: fixed
+ background-color: rgb(255, 255, 255)
+ // z-index: 20
+ height: 100vh
+ // overflow: visible
+ pointer-events: auto
+ padding: 30px
+ background-color: black
+ color: white
+ margin-top: 0px
+ border-radius: 0px
+ // transform: translate(0px, 0px)
+ // transition: transform 0.5s ease 0s
+ transform: translateX(100%)
+ transition: all 0.2s
+ .toc-link a, .toc-title-wrapper a
+ color: white
+ .toc-current
+ color: #4393c3 !important
+ .open
+ //right: 0px
+ transform: translateX(0%)
+
+
+@media (max-width: 599px)
+ .sidebar-button
+ display: inline-block
.sidebar
display: flex
flex-direction: column
- // flex-grow: 0
- // flex-shrink: 1
- // flex-basis: auto
justify-content: flex-start
align-items: stretch
width: 300px
-// width: 100%
-// padding-left: 20px
-// position: relative
-
-// media (min-width: 1100px)
-// .sidebar
-// padding-left: 40px
-
-// media (max-width: 599px)
-// .sidebar
-// padding-bottom: 100px
-
.menu_div2
margin-left: 15px
@@ -139,15 +161,6 @@
line-height: 1.4em
display: inline-block
user-select: none
- // color: rgb(0, 0, 0)
- // font-weight: 600
- // position: relative
- // margin-bottom: 0
- // line-height: 1.4em
- // display: inline-block
- // user-select: none
- // white-space: nowrap
- // text-transform: uppercase
.toc-arrow
// margin-left: 7px
@@ -211,64 +224,3 @@
// &:hover
// background-color: white
// color: black
-
-// .toggle-collapse
-// float: left
-// margin-left: -3.3em
-// margin-top: .5em
-// content: ""
-// outline: inherit
-// border: 0px
-// background: transparent
-
-// /* Toggle Icon */
-// .toggle-icon,
-// .toggle-icon::before,
-// .toggle-icon::after
-// content: ""
-// width: 30px
-// height: 3px
-// position: fixed
-// background-color: black
-// border-radius: 2em
-// border: 1px solid black
-// cursor: pointer
-// transition: .3s ease
-// margin-top: .8em
-
-// .toggle-icon::before
-// position: absolute
-// left: -1px
-// margin-top: -0.8em
-
-// .toggle-icon::after
-// position: absolute
-// left: -1px
-// margin-top: -.6em
-// width: 20px
-
-// .toggle-icon
-// width: 15px
-
-// .show
-// .toggle-icon::after
-// width: 30px
-// .show
-// .toggle-icon
-// width: 30px
-
-// .nav-item
-// > .site-name
-// text-decoration: none
-// padding: 1.3em
-// font:
-// size: 2em
-// color: white
-// &:last-child
-// > .nav-link
-// i
-// padding: .5em
-// &:hover:last-child
-// > .nav-link
-// background-color: black
-// color: white