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 e73c83f TOC: style WIP
e73c83f is described below
commit e73c83ff0be4429dfaa6ae4068195bcf85363541
Author: Carlos Rovira <[email protected]>
AuthorDate: Fri May 17 15:04:55 2019 +0200
TOC: style WIP
---
_layouts/docpage.html | 56 +++++++++++++++++++--------------
royalesite.css | 87 +++++++++++++++++++++++++++++++++++++++++++++++++--
2 files changed, 117 insertions(+), 26 deletions(-)
diff --git a/_layouts/docpage.html b/_layouts/docpage.html
index 709912b..b1fe64f 100644
--- a/_layouts/docpage.html
+++ b/_layouts/docpage.html
@@ -69,6 +69,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 %)
@@ -85,18 +86,20 @@ limitations under the License.
{% for entry in site.data.toc.toc %}
{% for p in site.pages %}
{% if p.path == entry.path %}
- <div class="toc_entry">
- {% if p.path == page.path %}
- <span class="toc_current">{{ p.title }}</span>
- <div class="menu_div">
+ <li>
+ <div class="toc_title_wrapper">
+ {% if p.path == page.path %}
+
+ <h3 class="toc_current">{{ p.title }}</h3>
+ <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 %}
- <span class="toc_current">{{ q.title }}</span>
+ <h3 class="toc_current">{{ q.title }}</h3>
{% else %}
- <a class="toc_link" href="{{ q.url | remove_first: '/'}}">{{
q.title }}</a>
+ <h4 class="toc_link"><a href="{{ q.url | remove_first:
'/'}}">{{ q.title }}</a></h4>
{% endif %}
</div>
{% endif %}
@@ -110,9 +113,9 @@ limitations under the License.
{% if p3.path == r.path %}
<div class="toc_entry">
{% if r.path == page.path %}
- <span class="toc_current">{{ r.title }}</span>
+ <h3 class="toc_current">{{ r.title }}</h3>
{% else %}
- <a class="toc_link" href="{{ r.url | remove_first:
'/'}}">{{ r.title }}</a>
+ <h4 class="toc_link"><a href="{{ r.url | remove_first:
'/'}}">{{ r.title }}</a></h4>
{% endif %}
</div>
{% endif %}
@@ -122,38 +125,42 @@ limitations under the License.
{% endif %}
{% endif %}
{% endfor %}
- </div>
- {% else %}
- <a class="toc_link" href="{{ p.url | remove_first: '/'}}">{{ p.title
}}</a>
- {% endif %}
- </div>
- {% if entry.children %}
- {% assign entrypathparts = entry.children[0].path | split: "/" %}
- {% if folder1 == entrypathparts[0] %}
+ </div>
+ {% else %}
+ <h3 class="toc_link"><a href="{{ p.url | remove_first: '/'}}">{{
p.title }}</a></h3>
+ {% endif %}
+ </div>
+
+ {% if entry.children %}
+ {% assign entrypathparts = entry.children[0].path | split: "/" %}
+ {% if folder1 == entrypathparts[0] %}
+ <div class="accordion_content">
<div class="menu_div">
{% for p2 in entry.children %}
{% for q in site.pages %}
{% if p2.path == q.path %}
<div class="toc_entry">
{% if q.path == page.path %}
- <span class="toc_current">{{ q.title }}</span>
+ <h3 class="toc_current">{{ q.title }}</h3>
+
<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 %}
- <span class="toc_current">{{ r.title }}</span>
+ <h3 class="toc_current">{{ r.title }}</h3>
{% else %}
- <a class="toc_link" href="{{ r.url | remove_first:
'/'}}">{{ r.title }}</a>
+ <h4 class="toc_link"><a href="{{ r.url |
remove_first: '/'}}">{{ r.title }}</a></h4>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endfor %}
- </div>
+ </div>
+
{% else %}
- <a class="toc_link" href="{{ q.url | remove_first: '/'}}">{{
q.title }}</a>
+ <h3 class="toc_link"><a href="{{ q.url | remove_first:
'/'}}">{{ q.title }}</a></h3>
{% endif %}
</div>
{% endif %}
@@ -167,9 +174,9 @@ limitations under the License.
{% if p3.path == r.path %}
<div class="toc_entry">
{% if r.path == page.path %}
- <span class="toc_current">{{ r.title }}</span>
+ <h4 class="toc_current">{{ r.title }}</h4>
{% else %}
- <a class="toc_link" href="{{ r.url | remove_first:
'/'}}">{{ r.title }}</a>
+ <h4 class="toc_link"><a href="{{ r.url | remove_first:
'/'}}">{{ r.title }}</a></h4>
{% endif %}
</div>
{% endif %}
@@ -180,11 +187,14 @@ limitations under the License.
{% endif %}
{% endfor %}
</div>
+ </div>
{% endif %}
{% endif %}
+ </li>
{% endif %}
{% endfor %}
{% endfor %}
+ </ul>
</div>
</div>
<div class="footer">
diff --git a/royalesite.css b/royalesite.css
index 4da9ab1..190af4d 100644
--- a/royalesite.css
+++ b/royalesite.css
@@ -664,15 +664,96 @@ pre {
margin-left: 30px;
}
-.toc_entry {
+.accordion {
+ list-style: none;
+ margin: 0;
+ line-height: 30px;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+.accordion > li {
+ line-height: 1.4em;
+ position: relative;
+ margin-bottom: 8px;
+ display: list-item;
+ text-align: -webkit-match-parent;
+}
+
+.accordion_content {
+ margin-left: 15px;
+}
+
+.toc_title_wrapper {
+ padding: 0px 20px;
+ line-height: 1.4em;
+ position: relative;
+ cursor: pointer;
+ display: block;
+}
+
+.toc_accordion_arrow {
+ right: 0;
+ transform: rotate(180deg);
+ transform-origin: 50% 50%;
+ opacity: 0.7;
+ position: absolute;
+ top: 50%;
+ height: 20px;
+ margin-top: -10px;
+ z-index: 2;
+ color: inherit;
+ opacity: 0.4;
+ float: right;
+}
+.toc_accordion_arrow .fa {
+ 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;
+ font-size: 18px;
+ line-height: 24px;
+ letter-spacing: 0px;
}
.toc_link {
text-decoration: none;
color: rgb(67, 147, 195);
+ position: relative;
+ margin-bottom: 0;
+ line-height: 1.4em;
+ display: inline-block;
+ user-select: none;
}
.toc_current {
- color: rgb(0, 0, 0);
- font-weight: 600;
+ color: rgb(0, 0, 0);
+ font-weight: 600;
+ position: relative;
+ margin-bottom: 0;
+ line-height: 1.4em;
+ display: inline-block;
+ user-select: none;
}
