Mercurial > pub > site.implab
changeset 12:d9551c7e7101
improved dox library
author | sergey |
---|---|
date | Fri, 16 May 2014 16:47:50 +0400 |
parents | 573272ec604b |
children | a9ce584a7f3b |
files | public_html/static/css/display-float.css public_html/static/css/global.css public_html/static/css/index.css public_html/static/css/library.css public_html/static/js/implab/sticky.js shared_view/includes/menu.tt shared_view/includes/menu/menubar.tt shared_view/includes/templates/User.tt view/layout/default/base.tt view/layout/default/index.tt view/layout/default/library.tt |
diffstat | 11 files changed, 201 insertions(+), 83 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/public_html/static/css/display-float.css Fri May 16 16:47:50 2014 +0400 @@ -0,0 +1,16 @@ +.float.object-data { + padding: 3px; +} + +.float .field { + float: left; + margin: 3px; + padding: 3px; +} + +.field-value { + /* display: inline-block; */ + font-weight: bold; + border-bottom: 2px solid #d0d0d0; + padding-bottom: 2px; +} \ No newline at end of file
--- a/public_html/static/css/global.css Thu May 15 18:24:02 2014 +0400 +++ b/public_html/static/css/global.css Fri May 16 16:47:50 2014 +0400 @@ -4,6 +4,7 @@ height: 100%; margin: 0; padding: 0; + background: #ffffff; } a { @@ -43,15 +44,17 @@ .menu-bar .menu-item { padding: 5px; + display: block; text-decoration: none; - padding-bottom: 8px; + border-bottom: 3px solid #ffffff; } -.menu-bar a { - padding: 5px; - display: block; - text-decoration: none; - border-bottom: 3px solid; +.menu-bar .menu-item-icon { + display:none; +} + +.menu-bar .active .menu-item { + border-bottom: 3px solid; } /********************************* TABLES *************************************/ @@ -91,8 +94,48 @@ /*************************** LAYOUT *******************************************/ +#page-content { + padding: 0px 30px; +} + +#page-menu { + border-bottom: 1px solid #c0c0c0; + padding: 0px 50px; +} + +#page-menu a.menu-item:hover { + color: green; +} + +#page-menu .active { + color: green; +} + #header { padding: 0px 30px; border-bottom: 1px solid #c0c0c0; box-shadow: 0 7px 15px -10px rgba(0, 0, 0, 0.6); -} \ No newline at end of file +} + +#header a.menu-item:hover { + background: black; + color: #ffffff; + border-bottom: 3px solid black; +} + +#main-menu .active .menu-item { + border-color: #ffffff; +} + +#main-menu .active .menu-item-icon { + border-color: red; +} + +#main-menu .menu-item-icon { + display: inline-block; + border-left: 5px solid; + width: 0px; + margin-right: 5px; +} + +
--- a/public_html/static/css/index.css Thu May 15 18:24:02 2014 +0400 +++ b/public_html/static/css/index.css Fri May 16 16:47:50 2014 +0400 @@ -112,19 +112,14 @@ #top-menu { position: absolute; top: 0px; - right: 20px; + right: 0px; padding: 0px 30px; border-bottom: 1px solid #c0c0c0; box-shadow: 0 7px 15px -10px rgba(0, 0, 0, 0.6); } -#top-menu .menu-bar a, -#top-menu .menu-bar .menu-item { - border: none; - padding: 5px; -} - -#top-menu .menu-bar a:hover { +#top-menu a.menu-item:hover { background: black; + border-bottom: 3px solid black; color: white; } \ No newline at end of file
--- a/public_html/static/css/library.css Thu May 15 18:24:02 2014 +0400 +++ b/public_html/static/css/library.css Fri May 16 16:47:50 2014 +0400 @@ -7,6 +7,10 @@ } +.library #page-content { + padding: 0; +} + #toc { float: left; width: 20%; @@ -152,23 +156,24 @@ .nav-pane { position: relative; text-align: left; - width: 270px; + width: 290px; margin: 0; + padding: 0; } .nav-pane.left { - padding: 0 0 0 20px; float: left; } .nav-pane.right { float: right; - padding: 0 20px 0 0; } .content-pane { margin: 0 290px; padding: 10px; + border-left: 1px dashed #c0c0c0; + border-right: 1px dashed #c0c0c0; } @@ -178,6 +183,7 @@ .nav-pane ul { padding: 0; + margin: 0; } .dox-nav-menu li, @@ -190,19 +196,20 @@ background: #c0c0c0; } -.left .members li{ - /* padding-right: 5px; */ - border-right: 3px solid #c0c0c0; +.members li.active { + background-color: #ffe0e0; } -.right .members li { - /* padding-left: 5px; */ - border-left: 3px solid #c0c0c0; +.left .members { + padding-left: 5px; } -.members li.active { - border-color: red; - background-color: #ffe0e0; +.left .members li.active { + border-right: 3px solid red; +} + +.right .members li.active { + border-left: 3px solid red; } .members a { @@ -211,7 +218,7 @@ .nav-pane a { display: block; - padding-left: 5px; + padding: 0 5px; } .nav-pane a:hover {
--- a/public_html/static/js/implab/sticky.js Thu May 15 18:24:02 2014 +0400 +++ b/public_html/static/js/implab/sticky.js Fri May 16 16:47:50 2014 +0400 @@ -1,49 +1,88 @@ define([ 'dojo/on', 'dojo/dom-geometry', 'dojo/dom-style' ], function(on, g, css) { + /** + * @param [Dom|string] + * stiker element to become a sticker + */ return function(sticker, options) { var dh, pos; - var pos = g.position(sticker,true); + var pos = g.position(sticker, true); + var clientWidth = g.position(document.body).w; + var stickRight = options ? options.stick == 'right' : false; - var origLeft = css.get(sticker,'left'); - var left = pos.x + 'px'; + var origPos = css.get(sticker, stickRight ? 'right' : 'left'); + + var fixPos = (stickRight ? clientWidth - pos.w - pos.x : pos.x) + 'px'; - if (options && options.along) { - var along = g.position(options.along,true); - dh = along.y + along.h - pos.h - pos.y; - } else { - dh = window.scrollMaxY - pos.h - pos.y; - } + var dhcalc = function() { + if (options && options.along) { + var along = g.position(options.along, true); + dh = along.y + along.h - pos.h - pos.y; + if (options.alongContent) + // respect bottom padding and border + dh -= g.getPadExtents(options.along).t + + g.getBorderExtents(options.along).t; + } else { + dh = window.scrollMaxY - pos.h - pos.y; + } + }; var fixed = false; - + var stfn = function() { - if(!options || !options.along) + if (!options || !options.along) dh = window.scrollMaxY - pos.h - pos.y; if (window.scrollY >= pos.y && window.scrollY <= pos.y + dh) { if (!fixed) { - css.set(sticker, { top : 0, left: left, position : 'fixed' }); + if (stickRight) + css.set(sticker, { + top : 0, + right : fixPos, + position : 'fixed' + }); + else + css.set(sticker, { + top : 0, + left : fixPos, + position : 'fixed' + }); fixed = true; } } else { if (fixed) { fixed = false; - - css.set(sticker, { position : 'relative', left: origLeft }); + + if (stickRight) + css.set(sticker, { + position : 'relative', + right : origPos + }); + else + css.set(sticker, { + position : 'relative', + left : origPos + }); if (window.scrollY < pos.y) { - css.set(sticker, { top : 'auto' }); + css.set(sticker, { + top : 'auto' + }); } else { - css.set(sticker, { top : dh + 'px' }); + css.set(sticker, { + top : dh + 'px' + }); } } } }; - + + dhcalc(); stfn(); - on(window, 'scroll', stfn ); + on(window, 'scroll', stfn); + on(window, 'resize', dhcalc); }; }); \ No newline at end of file
--- a/shared_view/includes/menu.tt Thu May 15 18:24:02 2014 +0400 +++ b/shared_view/includes/menu.tt Fri May 16 16:47:50 2014 +0400 @@ -1,12 +1,12 @@ [% META class='IMPL::Web::View::TTMenuControl' %] -[% MACRO link(href,title) BLOCK %] -<a href="$href">$title</a> +[% MACRO link(href,title) BLOCK -%] +<a href="$href" class="menu-item"><span class="menu-item-icon"> </span>$title</a> [%- END %] -[% MACRO span(title) BLOCK %] -<span class="menu-item">$title</span> +[% MACRO span(title) BLOCK -%] +<span class="menu-item"><span class="menu-item-icon"> </span>$title</span> [%- END %] <ul class="$class" id="$id"> -[% FOREACH item IN items %] +[% FOREACH item IN items ~%] <li [% IF item.active %]class="active"[% END %]>[% item.href ? link(item.href,item.title) : span(item.title) %]</li> -[% END %] +[%~ END %] </ul> \ No newline at end of file
--- a/shared_view/includes/menu/menubar.tt Thu May 15 18:24:02 2014 +0400 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,9 +0,0 @@ -<ul class="menu-bar $class"> - [% FOREACH item IN model -%] - <li> - [% IF item.href %] - <a href="$item.href"> - [% END %] - </li> - [%- END %] -</ul> \ No newline at end of file
--- a/shared_view/includes/templates/User.tt Thu May 15 18:24:02 2014 +0400 +++ b/shared_view/includes/templates/User.tt Fri May 16 16:47:50 2014 +0400 @@ -1,6 +1,6 @@ [% BLOCK INIT; - document.css.push( app.location.css.Child('display-float.css') ); + document.css.push( css.Child('display-float') ); END; labels({ fullNameLabel = 'Full name',
--- a/view/layout/default/base.tt Thu May 15 18:24:02 2014 +0400 +++ b/view/layout/default/base.tt Fri May 16 16:47:50 2014 +0400 @@ -2,9 +2,6 @@ document.css.push(css.global); document.css.push(css.forms); %] -[% IF document.menu.page.size; - render('menu', items = document.menu.page, class='menu-bar', id='page-menu'); -END %] <div id="header"> [% render( @@ -36,4 +33,10 @@ %] <div style="clear: both"></div> </div> -$content \ No newline at end of file + +[% IF document.menu.page.size; + render('menu', items = document.menu.page, class='menu-bar', id='page-menu'); +END %] +<div id="page-content"> + $content +</div> \ No newline at end of file
--- a/view/layout/default/index.tt Thu May 15 18:24:02 2014 +0400 +++ b/view/layout/default/index.tt Fri May 16 16:47:50 2014 +0400 @@ -10,14 +10,18 @@ </div> </div> <div id="top-menu"> - <ul class="menu-bar float-right"> - [% IF user.isNobody %] - <li><a href="$app.location.user.login?ref=$location">Login</a></li> - [% ELSE %] - <!-- no space - --><li class="menu-item">$user.name</li><!-- no space - --><li class=""><a href="$app.location.user">Settings</a><!-- - --><li class=""><a href="$app.location.user.logout">Logout</a></li> - [% END %] - </ul> + [% + IF user.isNobody; + usermenu = [ + { title = 'Login', href= app.location.user.login(ref = location) } + ]; + ELSE; + usermenu = [ + { title = user.name }, + { title = 'Settings', href = app.location.user }, + { title = 'Logout', href = app.location.user.logout } + ]; + END; + render('menu', items = usermenu, class = 'menu-bar float-right', id = 'user-menu'); + %] </div> \ No newline at end of file
--- a/view/layout/default/library.tt Thu May 15 18:24:02 2014 +0400 +++ b/view/layout/default/library.tt Fri May 16 16:47:50 2014 +0400 @@ -3,7 +3,7 @@ CollectionTitle = "Home (%name%)" ); document.dojo.enable = 1; - + document.class.push('library'); document.css.push(css.library); CollectionClass = 'Benzin::Doxygen::Model::Collection'; @@ -37,7 +37,7 @@ END; %] [% MACRO IconKind(model) BLOCK %]<span class="icon">[% Icons.item(model.kind) || NullIcon %]</span>[% END %] -[% MACRO Link(model,label,title) BLOCK %]<a class="$model.kind $model.protection" [% IF title %]title="$title" [% END %]href="[% GetLocationFor(model) %]">[% IconKind(model) %] $label</a>[% END %] +[% MACRO Link(model,label,title) BLOCK %]<a class="$model.kind $model.protection" [% IF title %]title="$title" [% END %]href="[% GetLocationFor(model) %]">[% IconKind(model) %] [% label | html %]</a>[% END %] [% MACRO CompoundSiblings(model) BLOCK %] [% compound = model.isa(MemberClass) ? model.compound : model %] <ul class="members"> @@ -58,6 +58,7 @@ render('base', content = content); END %] [% WRAPPER LAYOUT %] +<div id="content-expando" style="float: right; height: 10px; width: 0px;overflow: hidden;"> </div> <div class="library-pane"> <div id="toc-nav" class="nav-pane left"> @@ -75,10 +76,12 @@ <ul class="dox-nav-menu"> <li [% IF !parents.size %]class="last"[% END %]><a href="$coll.location" title="$coll.model.description">[% CollectionTitle( name = coll.model.name) %]</a></li> [% FOREACH parent IN parents %] - <li [% IF loop.last %]class="last"[% END %]>[% Link(parent, parent.shortName, parent.canonicalName) %]</li> + <li [% IF loop.last %]class="last"[% END %]> + [% Link(parent, parent.shortName, parent.canonicalName) %] + </li> [% END %] - [% Members(model) %] </ul> + [%- Members(model) %] [% END %] </div> <div id="siblings-nav" class="nav-pane right"> @@ -86,11 +89,28 @@ </div> <div id="content-pane" class="content-pane"> $content + <div style="clear:both;"></div> </div> + <script type="text/javascript"> - require(['implab/sticky'],function(sticky) { - sticky('toc-nav',{ along: 'content-pane' }); - sticky('siblings-nav', { along: 'content-pane' }); + require(['implab/sticky','dojo/on', 'dojo/dom-geometry', 'dojo/dom-style'],function(sticky,on,g,css) { + sticky('toc-nav',{ along: 'content-pane', alongContent: true }); + sticky('siblings-nav', { along: 'content-pane', stick: 'right', alongContent: true }); + + var sfn = function() { + var h = window.innerHeight; + + var header = g.position('header'); + + var expand = h - header.h - 10; // windowHeight - headerHeight - contentBottomPadding + + if (expand < 0) + expand = 0; + + css.set('content-expando', 'height', expand + 'px'); + }; + sfn(); + on(window,'resize',sfn); }); </script> </div>