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/30 20:20:30 UTC
[royale-docs] branch master updated: fix header width and make main
menu show on a vertical dropdown when over
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 3283f5a fix header width and make main menu show on a vertical dropdown when over
3283f5a is described below
commit 3283f5a52f9f5ddb27bf967bd999db15c742f0f8
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Sep 30 22:20:22 2019 +0200
fix header width and make main menu show on a vertical dropdown when over
---
_includes/header.html | 41 ++++++---------
_includes/main-menu-options.html | 18 +++++++
_layouts/docpage.html | 2 +-
_sass/docsearch.sass | 4 +-
_sass/royale-theme.sass | 106 ++++++++++++++++++++++++++++-----------
_sass/sidebar.sass | 10 ++--
6 files changed, 122 insertions(+), 59 deletions(-)
diff --git a/_includes/header.html b/_includes/header.html
index b0bb048..dd20fa2 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -3,35 +3,26 @@
<div class="topbar-left">
<div>
<a href="https://royale.apache.org/">
- <img src="https://royale.apache.org/wp-content/uploads/2018/01/apache-royale-tm-logo-light.svg" style="margin-top:15px; margin-bottom: 5px; width: 190px; height: 40px;"/>
+ <img src="https://royale.apache.org/wp-content/uploads/2018/01/apache-royale-tm-logo-light.svg"/>
</a>
</div>
</div>
+ <div class="topbar-center">
+ <!-- <div class="dropdown-wrapper"> -->
+ <button class="topMenu-dropbtn">GET STARTED</button>
+ <ul class="topMenu">
+ {% include main-menu-options.html %}
+ </ul>
+ <!-- </div> -->
+ </div>
+
<div class="topbar-right">
-
- <ul class="topMenu">
- <li class="topMenu_li fa">
- <a class="topMenu_li_a" href="https://royale.apache.org/features/">FEATURES</a>
- </li>
- <li class="topMenu_li fa">
- <a class="topMenu_li_a" href="{{ site.baseurl }}/get-started">GET STARTED</a>
- </li>
- <li class="topMenu_li fa">
- <a class="topMenu_li_a" href="https://royale.apache.org/download/">DOWNLOAD</a>
- </li>
- <li class="topMenu_li fa">
- <a class="topMenu_li_a" href="https://royale.apache.org/docs/">DOCS</a>
- </li>
- <li class="topMenu_li fa">
- <a class="topMenu_li_a" href="https://royale.apache.org/blog/">BLOG</a>
- </li>
- <li class="topMenu_li">
- <a class="topMenu_li_a" href="https://github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><span class="grve-item"><i class="grve-menu-icon fa fa-github"></i>GITHUB</span></a>
- </li>
- </ul>
-
- <ul class="social">
+ <div class="search-bar">
+ <input class="docsearch-input" type="search" placeholder="Search docs..." autocomplete="off" spellcheck="false"/>
+ </div>
+
+ <!-- <ul class="social">
<li class="social_li fa fa-search">
<a href="#grve-search-modal"></a>
</li>
@@ -41,7 +32,7 @@
<li class="social_li fa fa-th">
<a href="#grve-toggle-menu"></a>
</li>
- </ul>
+ </ul> -->
</div>
</div>
diff --git a/_includes/main-menu-options.html b/_includes/main-menu-options.html
new file mode 100644
index 0000000..683e0cc
--- /dev/null
+++ b/_includes/main-menu-options.html
@@ -0,0 +1,18 @@
+<li class="topMenu_li fa">
+ <a class="topMenu_li_a" href="https://royale.apache.org/features/">FEATURES</a>
+</li>
+<li class="topMenu_li fa">
+ <a class="topMenu_li_a" href="{{ site.baseurl }}/get-started">GET STARTED</a>
+</li>
+<li class="topMenu_li fa">
+ <a class="topMenu_li_a" href="https://royale.apache.org/download/">DOWNLOAD</a>
+</li>
+<li class="topMenu_li fa">
+ <a class="topMenu_li_a" href="https://royale.apache.org/docs/">DOCS</a>
+</li>
+<li class="topMenu_li fa">
+ <a class="topMenu_li_a" href="https://royale.apache.org/blog/">BLOG</a>
+</li>
+<li class="topMenu_li">
+ <a class="topMenu_li_a" href="https://github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><span class="grve-item"><i class="grve-menu-icon fa fa-github"></i>GITHUB</span></a>
+</li>
\ No newline at end of file
diff --git a/_layouts/docpage.html b/_layouts/docpage.html
index daaae7f..3734761 100644
--- a/_layouts/docpage.html
+++ b/_layouts/docpage.html
@@ -57,7 +57,7 @@ limitations under the License.
<img src="https://royale.apache.org/wp-content/uploads/2018/01/apache-royale-tm-logo-light.svg"/>
</a>
</div>
- <input class="docsearch-input" type="search" placeholder="Search docs..." autocomplete="off" spellcheck="false"/>
+
<div class="sidebar">
{% include toc.html %}
</div>
diff --git a/_sass/docsearch.sass b/_sass/docsearch.sass
index 28039e4..0edc807 100644
--- a/_sass/docsearch.sass
+++ b/_sass/docsearch.sass
@@ -14,7 +14,7 @@
.docsearch-input
font-size: 1em
- height: 48px
+ height: 38px
line-height: 1em
outline-style: none
@@ -26,7 +26,7 @@
border-style: solid
border-width: 0px
position: relative
- padding: 0px 36px
+ padding: 0px 12px 0px 36px
background-image: url(/royale-docs/assets/svg/search.svg)
background-size: 16px 16px
background-repeat: no-repeat
diff --git a/_sass/royale-theme.sass b/_sass/royale-theme.sass
index a7a793a..2098a12 100644
--- a/_sass/royale-theme.sass
+++ b/_sass/royale-theme.sass
@@ -25,8 +25,6 @@
background-position: center top
.social
- /* hidden until these get hooked up */
- display: none /* inline */
margin-top: 0px
height: 40px
@@ -39,30 +37,54 @@
.docs_header
height: 70px
-.topbar
+.topbar
+ display: inline-flex
+ margin-top: 5px
width: 100%
- top: 0
- max-width: 1170px
- margin-right: auto
- margin-left: auto
- position: relative
- display: flex
- align-items: flex-start
+
+.topbar-left
+ display: inline-flex
+ justify-content: flex-start
+
+ div
+ margin-top: 15px
+ margin-bottom: 5px
+ width: 180px
+ height: 40px
+
+@media (max-width: 599px)
+ .topbar-left
+ div
+ width: 140px
+
+
+
+.topbar-center
+ display: inline-flex
+ flex: 1 1 auto
justify-content: center
- flex-wrap: wrap
+ padding: 0px 20px
-.topbar-left
- margin-left: 15px
- margin-right: 15px
- display: inline-block
- flex-grow: 1
- max-width: 760px
- min-width: 0
+.topbar-right
+ display: inline-flex
+ // flex: 1 1 auto
+ justify-content: flex-end
-.topbar-right
- display: inline-block
- flex-shrink: 0
+.dropdown-wrapper
+ display: flex
+.topMenu-dropbtn
+ display: none
+ height: 38px
+ background: transparent
+ border: transparent
+ color: rgba(255,255,255,0.7)
+ font-size: 14px
+ font-weight: 600
+ line-height: 40px
+ white-space: nowrap
+ outline: 0
+
.topMenu
display: inline-block
vertical-align: top
@@ -70,10 +92,37 @@
margin-bottom: 0px
height: 40px
-@media screen and (max-width: 660px)
+@media screen and (max-width: 1160px)
+ .topbar-center
+ align-items: center
+
+ .topMenu-dropbtn
+ display: flex
+ z-index: 100
+
.topMenu
display: none
-
+ flex-direction: column
+ position: absolute
+ z-index: 1
+
+ .topMenu_li
+ background-color: #f7f7f7
+ padding: 6px 18px
+ margin: 0px
+ box-shadow: 0px 18px 16px 0px rgba(0,0,0,0.2)
+ line-height: 1em
+
+ .topMenu_li_a
+ font-family: "Source Sans Pro"
+ color: #4393c3 !important
+ font-size: 16px
+ line-height: 28px
+ letter-spacing: 0px
+
+ .topbar-center:hover .topMenu
+ display: flex
+
.topMenu_li
font-family: 'Signika'
display: inline
@@ -190,20 +239,21 @@
padding-bottom: 14px
padding-right: 14px
-.toc_and_doc
- margin-top: 50px
-
+.docs_header, .toc_and_doc
padding-left: 20px
padding-right: 20px
margin-left: auto
margin-right: auto
+.toc_and_doc
+ margin-top: 50px
+
@media (min-width: 1340px)
- .toc_and_doc
+ .docs_header, .toc_and_doc
max-width: 1260px
@media (min-width: 780px)
- .toc_and_doc
+ .docs_header, .toc_and_doc
width: 90%
.page-content
diff --git a/_sass/sidebar.sass b/_sass/sidebar.sass
index c74385f..4aa0ffd 100644
--- a/_sass/sidebar.sass
+++ b/_sass/sidebar.sass
@@ -15,7 +15,7 @@
.sidebar-button
display: none
background-color: #20232a
- top: 30px
+ top: 80px
color: #61dafb
cursor: pointer
position: fixed
@@ -49,6 +49,7 @@
padding: 30px
border-radius: 10px
text-transform: uppercase
+ z-index: 200
.sidebar
display: flex
@@ -57,11 +58,14 @@
align-items: stretch
width: 280px
overflow-y: auto
- margin-top: 20px
.sidebar-logo
display: none
+.search-bar
+ display: flex
+ align-items: center
+
@media (min-width: 600px)
.toc
margin-left: 80px
@@ -122,7 +126,7 @@
flex-direction: column
align-self: center
width: 170px
- margin: 0px 10px 30px 10px
+ margin: 0px 10px 0px 10px
a
background-color: transparent