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 { --