davemds pushed a commit to branch master.
http://git.enlightenment.org/bindings/python/python-efl.git/commit/?id=f70d7c949fea7beeaa2c5f5a24a62bc11846903b
commit f70d7c949fea7beeaa2c5f5a24a62bc11846903b
Author: Dave Andreoli <d...@gurumeditation.it>
Date: Tue Nov 30 09:19:48 2021 +0100
Docs: a better flax layout, also with sticky sidebar
---
doc/themes/efldoc/layout.html | 47 ++++++-------------------------
doc/themes/efldoc/static/efl.css | 60 ++++++++++++++++++++++------------------
2 files changed, 41 insertions(+), 66 deletions(-)
diff --git a/doc/themes/efldoc/layout.html b/doc/themes/efldoc/layout.html
index d667c0a..38dd49a 100644
--- a/doc/themes/efldoc/layout.html
+++ b/doc/themes/efldoc/layout.html
@@ -24,34 +24,6 @@
.related { display: none; }
{% endif %}
</style>
- <script>
- // intelligent scrolling of the sidebar content
- // $(window).scroll(function() {
- // var sb = $('.sphinxsidebarwrapper');
- // var win = $(window);
- // var sbh = sb.height();
- // var offset = $('.sphinxsidebar').position()['top'];
- // var wintop = win.scrollTop();
- // var winbot = wintop + win.innerHeight();
- // var curtop = sb.position()['top'];
- // var curbot = curtop + sbh;
- // // does sidebar fit in window?
- // if (sbh < win.innerHeight()) {
- // // yes: easy case -- always keep at the top
- // sb.css('top', $u.min([$u.max([0, wintop - offset - 10]),
- // $(document).height() - sbh - 200]));
- // } else {
- // // no: only scroll if top/bottom edge of sidebar is at
- // // top/bottom edge of window
- // if (curtop > wintop && curbot > winbot) {
- // sb.css('top', $u.max([wintop - offset - 10, 0]));
- // } else if (curtop < wintop && curbot < winbot) {
- // sb.css('top', $u.min([winbot - sbh - offset - 20,
- // $(document).height() - sbh - 200]));
- // }
- // }
- // });
- </script>
{%- endif %}
{% endblock %}
@@ -77,20 +49,17 @@
{%- block content %}
<div class="document">
{%- block document %}
- {{ sidebar() }}
- <div class="documentwrapper">
- {%- if render_sidebar %}
- <div class="bodywrapper">
- {%- endif %}
- <div class="body">
- {% block body %} {% endblock %}
- </div>
- {%- if render_sidebar %}
+ <div id="layout">
+ <div id="content">
+ <div class="body">
+ {% block body %} {% endblock %}
</div>
- {%- endif %}
</div>
+ {%- if render_sidebar %}
+ <div id="sidebar">{{ sidebar() }}</div>
+ {%- endif %}
+ </div>
{%- endblock %}
- <div class="clearer"></div>
</div>
{%- endblock %}
diff --git a/doc/themes/efldoc/static/efl.css b/doc/themes/efldoc/static/efl.css
index 2bf38a3..3f4d409 100644
--- a/doc/themes/efldoc/static/efl.css
+++ b/doc/themes/efldoc/static/efl.css
@@ -13,6 +13,20 @@
@import url("basic.css");
+/* -- main flex layout ----------------------------------------------------- */
+
+#layout {
+ display: flex;
+}
+#content {
+ flex-grow: 1;
+}
+#sidebar {
+ flex-grow: 0;
+ width: 230px;
+ border-left: 1px solid rgb(111,111,111);
+}
+
/* -- page layout -----------------------------------------------------------
*/
body {
@@ -20,7 +34,6 @@ body {
'Verdana', sans-serif;
font-size: 14px;
text-align: center;
- /* background-image: url(bodybg.png); */
background-color: rgb(64,64,64);
color: white;
padding: 0;
@@ -42,7 +55,6 @@ body {
height: 63px;
padding-right: 18px;
background: url("header_menu_background_last.png") no-repeat scroll right
center transparent;
-
}
.pageheader li {
@@ -86,7 +98,6 @@ body {
}
div.document {
- /* background-color: white; */
text-align: left;
border: 1px solid rgb(111,111,111);
width: 90%;
@@ -95,11 +106,6 @@ div.document {
max-width: 1080px;
}
-div.bodywrapper {
- margin-right: 240px;
- border-right: 1px solid rgb(111,111,111);
-}
-
div.body {
padding: 0.5em 20px 20px 20px;
}
@@ -144,29 +150,27 @@ div.related ul li a:hover {
color: white;
}
-div.sphinxsidebarwrapper {
-/* Avoid the buggy moving sidebar
- position: relative;
- top: 0px;
-*/
- padding: 0;
-}
+
+/* -- sidebar ------------------------------------------------------------- */
div.sphinxsidebar {
margin: 0;
- padding: 0 15px 15px 0;
- width: 210px;
- float: right;
+ padding: 0;
+ float: none;
font-size: 1em;
text-align: left;
- max-height: 0px;
+ position: sticky;
+ top: 0;
+}
+
+div.sphinxsidebarwrapper {
+ margin: 0;
+ padding: 15px 10px;
}
div.sphinxsidebar .logo {
- font-size: 1.8em;
- color: rgb(10,80,122);
- font-weight: 300;
text-align: center;
+ margin: 0;
}
div.sphinxsidebar .logo img {
@@ -224,11 +228,9 @@ div.sphinxsidebar h4 {
margin-bottom: 0;
}
-div.sphinxsidebar h3, div.sphinxsidebar h4 {
- margin-right: -15px;
- margin-left: -15px;
- padding-right: 14px;
- padding-left: 14px;
+div.sphinxsidebar h3,
+div.sphinxsidebar h4
+{
color: rgb(51, 153, 255);
font-weight: 300;
}
@@ -254,6 +256,9 @@ div.sphinxsidebar ul ul {
list-style-image: url(listitem.png);
}
+
+/* -- footer ----------------------------------------------------------- */
+
div.footer {
background-image: url(footer_background.png);
color: rgb(204,204,204);
@@ -271,6 +276,7 @@ div.footer a {
color: rgb(204,204,204);
}
+
/* -- body styles -----------------------------------------------------------
*/
p {
--
