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/05/18 16:24:09 UTC
[royale-docs] branch master updated: TOC: improve arrows and styles
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 ba0e313 TOC: improve arrows and styles
ba0e313 is described below
commit ba0e313f040ef53821ebb8d25ccaf370b53f9664
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat May 18 18:24:01 2019 +0200
TOC: improve arrows and styles
---
_layouts/docpage.html | 126 ++++++++++++++++++++++++++++++++++++++++++--------
royalesite.css | 66 ++++++++++++++++----------
2 files changed, 148 insertions(+), 44 deletions(-)
diff --git a/_layouts/docpage.html b/_layouts/docpage.html
index f989754..f135067 100644
--- a/_layouts/docpage.html
+++ b/_layouts/docpage.html
@@ -80,7 +80,7 @@ limitations under the License.
{{content}}
</div>
<div class="toc" id="toc">
- <ul class="accordion">
+
{% assign pagepathparts = page.path | split: "/" %}
{% assign numparts = pagepathparts | size %}
{% case numparts %)
@@ -97,22 +97,53 @@ limitations under the License.
{% for entry in site.data.toc.toc %}
{% for p in site.pages %}
{% if p.path == entry.path %}
- <li>
+
<div class="toc_title_wrapper">
{% if p.path == page.path %}
- <!-- <div class="toc_accordion_arrow">
- <i class="fa fa-chevron-down"></i>
- </div> -->
+
<h3 class="toc_current">{{ p.title }}</h3>
+ <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="8" height="8" class="toc_arrow_rot">
+ <g transform="translate(904.92214,-879.1482)"><path d="
+ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
+ -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,
+ 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,
+ -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,
+ -174.68583 0.6895,0 26.281,25.03215 56.8701,
+ 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864
+ -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,
+ -104.0616 -231.873,-231.248 z
+ " fill="currentColor"></path></g></svg>
<div class="accordion_content">
{% for p2 in entry.children %}
{% for q in site.pages %}
{% if p2.path == q.path %}
<div class="toc_entry">
{% if q.path == page.path %}
- <h3 class="toc_current">{{ q.title }}</h3>
+ <h4 class="toc_current">{{ q.title }}</h4>
+ <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="7" height="7" class="toc_arrow_rot">
+ <g transform="translate(904.92214,-879.1482)"><path d="
+ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
+ -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,
+ 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,
+ -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,
+ -174.68583 0.6895,0 26.281,25.03215 56.8701,
+ 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864
+ -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,
+ -104.0616 -231.873,-231.248 z
+ " fill="currentColor"></path></g></svg>
{% else %}
<h4 class="toc_link"><a href="{{ q.url | remove_first: '/'}}">{{ q.title }}</a></h4>
+ <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="7" height="7" class="toc_arrow">
+ <g transform="translate(904.92214,-879.1482)"><path d="
+ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
+ -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,
+ 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,
+ -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,
+ -174.68583 0.6895,0 26.281,25.03215 56.8701,
+ 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864
+ -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,
+ -104.0616 -231.873,-231.248 z
+ " fill="currentColor"></path></g></svg>
{% endif %}
</div>
{% endif %}
@@ -126,9 +157,31 @@ limitations under the License.
{% if p3.path == r.path %}
<div class="toc_entry">
{% if r.path == page.path %}
- <h3 class="toc_current">{{ r.title }}</h3>
+ <h5 class="toc_current">{{ r.title }}</h5>
+ <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="7" height="7" class="toc_arrow_rot">
+ <g transform="translate(904.92214,-879.1482)"><path d="
+ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
+ -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,
+ 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,
+ -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,
+ -174.68583 0.6895,0 26.281,25.03215 56.8701,
+ 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864
+ -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,
+ -104.0616 -231.873,-231.248 z
+ " fill="currentColor"></path></g></svg>
{% else %}
- <h4 class="toc_link"><a href="{{ r.url | remove_first: '/'}}">{{ r.title }}</a></h4>
+ <h5 class="toc_link"><a href="{{ r.url | remove_first: '/'}}">{{ r.title }}</a></h5>
+ <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="7" height="7" class="toc_arrow">
+ <g transform="translate(904.92214,-879.1482)"><path d="
+ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
+ -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,
+ 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,
+ -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,
+ -174.68583 0.6895,0 26.281,25.03215 56.8701,
+ 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864
+ -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,
+ -104.0616 -231.873,-231.248 z
+ " fill="currentColor"></path></g></svg>
{% endif %}
</div>
{% endif %}
@@ -141,30 +194,52 @@ limitations under the License.
</div>
{% else %}
<h3 class="toc_link"><a href="{{ p.url | remove_first: '/'}}">{{ p.title }}</a></h3>
+ <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="8" height="8" class="toc_arrow">
+ <g transform="translate(904.92214,-879.1482)"><path d="
+ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
+ -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,
+ 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,
+ -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,
+ -174.68583 0.6895,0 26.281,25.03215 56.8701,
+ 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864
+ -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,
+ -104.0616 -231.873,-231.248 z
+ " fill="currentColor"></path></g></svg>
{% endif %}
</div>
{% if entry.children %}
{% assign entrypathparts = entry.children[0].path | split: "/" %}
{% if folder1 == entrypathparts[0] %}
- <div class="accordion_content">
- <div class="menu_div">
+ <div class="toc_title_wrapper">
+ <div class="accordion_content">
+
{% for p2 in entry.children %}
{% for q in site.pages %}
{% if p2.path == q.path %}
<div class="toc_entry">
{% if q.path == page.path %}
- <h3 class="toc_current">{{ q.title }}</h3>
-
+ <h4 class="toc_current">{{ q.title }}</h4>
+ <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="7" height="7" class="toc_arrow_rot">
+ <g transform="translate(904.92214,-879.1482)"><path d="
+ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
+ -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,
+ 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,
+ -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,
+ -174.68583 0.6895,0 26.281,25.03215 56.8701,
+ 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864
+ -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,
+ -104.0616 -231.873,-231.248 z
+ " fill="currentColor"></path></g></svg>
<div class="menu_div2">
{% for p3 in p2.children %}
{% for r in site.pages %}
{% if p3.path == r.path %}
<div class="toc_entry">
{% if r.path == page.path %}
- <h3 class="toc_current">{{ r.title }}</h3>
+ <h5 class="toc_current">{{ r.title }}</h5>
{% else %}
- <h4 class="toc_link"><a href="{{ r.url | remove_first: '/'}}">{{ r.title }}</a></h4>
+ <h5 class="toc_link"><a href="{{ r.url | remove_first: '/'}}">{{ r.title }}</a></h5>
{% endif %}
</div>
{% endif %}
@@ -173,7 +248,18 @@ limitations under the License.
</div>
{% else %}
- <h3 class="toc_link"><a href="{{ q.url | remove_first: '/'}}">{{ q.title }}</a></h3>
+ <h4 class="toc_link"><a href="{{ q.url | remove_first: '/'}}">{{ q.title }}</a></h4>
+ <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="7" height="7" class="toc_arrow">
+ <g transform="translate(904.92214,-879.1482)"><path d="
+ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
+ -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,
+ 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,
+ -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,
+ -174.68583 0.6895,0 26.281,25.03215 56.8701,
+ 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864
+ -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,
+ -104.0616 -231.873,-231.248 z
+ " fill="currentColor"></path></g></svg>
{% endif %}
</div>
{% endif %}
@@ -187,9 +273,9 @@ limitations under the License.
{% if p3.path == r.path %}
<div class="toc_entry">
{% if r.path == page.path %}
- <h4 class="toc_current">{{ r.title }}</h4>
+ <h5 class="toc_current">{{ r.title }}</h4>
{% else %}
- <h4 class="toc_link"><a href="{{ r.url | remove_first: '/'}}">{{ r.title }}</a></h4>
+ <h5 class="toc_link"><a href="{{ r.url | remove_first: '/'}}">{{ r.title }}</a></h5>
{% endif %}
</div>
{% endif %}
@@ -199,15 +285,15 @@ limitations under the License.
{% endif %}
{% endif %}
{% endfor %}
- </div>
+ </div>
</div>
{% endif %}
{% endif %}
- </li>
+
{% endif %}
{% endfor %}
{% endfor %}
- </ul>
+
</div>
</div>
diff --git a/royalesite.css b/royalesite.css
index 46f4d5e..cf5f423 100644
--- a/royalesite.css
+++ b/royalesite.css
@@ -299,7 +299,7 @@ p {
}
a:hover {
- color: #67011f;
+ color: #2166ac;
}
a:hover, a:focus, a:visited {
@@ -658,9 +658,25 @@ pre {
.toc {
display: inline-block;
margin-top: 80px;
- margin-left: 20px;
+ margin-left: 15px;
+ margin-left: 15px;
margin-bottom: 20px;
flex-shrink: 0;
+ width: 350px;
+}
+
+.toc_arrow{
+ margin-left: 7px;
+ width: 26px;
+ opacity: .4;
+ margin-bottom: 2px;
+}
+
+.toc_arrow_rot{
+ width: 26px;
+ margin-left: 7px;
+ transform: rotateX(180deg);
+ margin-bottom: 2px;
}
.content {
@@ -670,6 +686,7 @@ pre {
flex-grow: 1;
max-width: 760px;
min-width: 0;
+ width: 760px;
}
.content h1 + p {
@@ -678,12 +695,8 @@ pre {
font-size: 20px;
}
-.menu_div {
- margin-left: 20px;
-}
-
-.menu_div2 {
- margin-left: 30px;
+.menu_div, .menu_div2 {
+ margin-left: 15px;
}
.accordion {
@@ -706,17 +719,25 @@ pre {
.accordion_content {
margin-left: 15px;
+ font-family: Signika;
+ font-weight: 600;
+ font-style: normal;
+ text-transform: none;
}
.toc_title_wrapper {
padding: 0px 20px;
- line-height: 1.4em;
+ line-height: 1em;
position: relative;
cursor: pointer;
display: block;
+ font-family: Signika;
+ font-weight: 600;
+ font-style: normal;
+ text-transform: none;
}
-.toc_accordion_arrow {
+/* .toc_accordion_arrow {
right: 0;
transform: rotate(180deg);
transform-origin: 50% 50%;
@@ -734,32 +755,29 @@ pre {
display: block;
text-align: center;
line-height: 20px;
-}
+} */
.toc_title_wrapper h3 {
- font-family: Signika;
- font-weight: 600;
- font-style: normal;
- text-transform: none;
+
font-size: 20px;
line-height: 28px;
letter-spacing: 0px;
- position: relative;
- margin-bottom: 0;
- line-height: 1.4em;
- display: inline-block;
}
-.toc_title_wrapper h4 {
- font-family: Signika;
- font-weight: 600;
- font-style: normal;
- text-transform: none;
+.accordion_content h4 {
+
font-size: 18px;
line-height: 24px;
letter-spacing: 0px;
}
+.accordion_content h5 {
+
+ font-size: 17px;
+ line-height: 20px;
+ letter-spacing: 0px;
+}
+
.toc_link {
text-decoration: none;
color: rgb(67, 147, 195);