Fix the base.html template to look proper with Bootstrap 3. The patch makes a few changes and improvements in the process:
* Renames the 'Manual' link to 'Documentation' and displays it together with the other navigation items. * Implements the responsive layout for navbars, which collapses the navigation into a menu to better fit narrow viewports. Signed-off-by: Belen Barros Pena <[email protected]> --- .../lib/toaster/toastergui/static/css/default.css | 18 +++++- .../lib/toaster/toastergui/static/js/libtoaster.js | 2 +- bitbake/lib/toaster/toastergui/templates/base.html | 71 +++++++++++----------- 3 files changed, 53 insertions(+), 38 deletions(-) diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css index 3765be6..151fd1b 100644 --- a/bitbake/lib/toaster/toastergui/static/css/default.css +++ b/bitbake/lib/toaster/toastergui/static/css/default.css @@ -3,9 +3,21 @@ /* Style the Yocto Project logo */ img.logo { height: 30px; vertical-align: bottom; } -/* Style the Toaster name in the top navbar */ -.navbar-brand { float: initial; } +/* Style the Yocto Project logo and the Toaster name in the top navbar */ +.toaster-navbar-brand { float: left; margin: 7px 25px 0 0; } +.toaster-navbar-brand a.brand { color: #777; height: 50px; padding: 15px 5px 15px 15px; font-size: 20px; line-height: 25px; display: inline; } +.toaster-navbar-brand > a { text-decoration: none; } +.toaster-navbar-brand > a.brand:hover { color: #5e5e5e; } /* Style the debugging information in the top navbar */ -.glyphicon-info-sign { color: #777; font-size: 16px; margin-top: 18px; margin-left: -5px; } +.glyphicon-info-sign { color: #777; font-size: 16px; } .glyphicon-info-sign:hover { color: #999; cursor: pointer; } + +/* Override the negative right margin for the navbar-right class */ +#new-project-button { margin-right: 0; } + +/* Increase popovers width to fit commit SHAs */ +.popover { min-width: 350px; } + +/* Increase bottom margin of definition lists inside popovers for the Toaster version information in the top navbar */ +.popover-content dd { margin-bottom: 15px; } diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js index d48c7f7..fad1429 100644 --- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js +++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js @@ -564,7 +564,7 @@ $(document).ready(function() { $(".icon-download-alt").tooltip({ container: 'body', html: true, delay: { show: 200 } }); // initialise popover for debug information - $(".icon-info-sign").popover( { placement: 'bottom', html: true, container: 'body' }); + $(".glyphicon-info-sign").popover( { placement: 'bottom', html: true, container: 'body' }); // linking directly to tabs $(function(){ diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html index 0e92f6d..63a920e 100644 --- a/bitbake/lib/toaster/toastergui/templates/base.html +++ b/bitbake/lib/toaster/toastergui/templates/base.html @@ -8,11 +8,9 @@ {% block title %} Toaster {% endblock %} </title> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css"/> - <!--link rel="stylesheet" href="{% static 'css/bootstrap-toaster-theme.min.css' %}" type='text/css'/--> + <!--link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}" type="text/css"/--> <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" type='text/css'/> - <!--link rel="stylesheet" href="{% static 'css/prettify.css' %}" type='text/css'/--> - <!--link rel="stylesheet" href="{% static 'css/default.css' %}" type='text/css'/--> - <!--link rel="stylesheet" href="{% static 'css/bootstrap3-transition.css' %}" type='text/css' /--> + <link rel="stylesheet" href="{% static 'css/default.css' %}" type='text/css'/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> @@ -73,51 +71,56 @@ <span id="change-notification-msg"></span> </div> - <div class="navbar navbar-fixed-top"> - <div class="navbar-inner"> - <div class="container-fluid"> - <a class="brand logo" href="#"><img src="{% static 'img/logo.png' %}" class="" alt="Yocto logo project"/></a> - <span class="brand"> - <a href="/">Toaster</a> + <nav class="navbar navbar-default navbar-fixed-top"> + <div class="container-fluid"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#global-nav" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <div class="toaster-navbar-brand"> + <a href="/"> + <img class="logo" src="{% static 'img/logo.png' %}" class="" alt="Yocto logo project"/> + </a> + <a class="brand" href="/">Toaster</a> {% if DEBUG %} - <i class="icon-info-sign" title="<strong>Toaster version information</strong>" data-content="<dl><dt>Git branch</dt><dd>{{TOASTER_BRANCH}}</dd><dt>Git revision</dt><dd>{{TOASTER_REVISION}}</dd></dl>"></i> + <span class="glyphicon glyphicon-info-sign" title="<strong>Toaster version information</strong>" data-content="<dl><dt>Git branch</dt><dd>{{TOASTER_BRANCH}}</dd><dt>Git revision</dt><dd>{{TOASTER_REVISION}}</dd></dl>"></i> {% endif %} - </span> - {% if request.resolver_match.url_name != 'landing' and request.resolver_match.url_name != 'newproject' %} - <ul class="nav"> - <li {% if request.resolver_match.url_name == 'all-builds' %} - class="active" - {% endif %}> + </div> + </div> + <div class="collapse navbar-collapse" id="global-nav"> + <ul class="nav navbar-nav"> + {% if request.resolver_match.url_name != 'landing' and request.resolver_match.url_name != 'newproject' %} + <li {% if request.resolver_match.url_name == 'all-builds' %} + class="active" + {% endif %}> <a href="{% url 'all-builds' %}"> <i class="glyphicon glyphicon-tasks"></i> All builds </a> - </li> - <li {% if request.resolver_match.url_name == 'all-projects' %} - class="active" - {% endif %}> + </li> + <li {% if request.resolver_match.url_name == 'all-projects' %} + class="active" + {% endif %}> <a href="{% url 'all-projects' %}"> <i class="icon-folder-open"></i> All projects </a> - </li> - </ul> - {% endif %} - <ul class="nav pull-right"> - <li> + </li> + {% endif %} + <li> <a target="_blank" href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html";> <i class="glyphicon glyphicon-book"></i> - Manual + Documentation </a> - </li> - </ul> - <span class="pull-right divider-vertical"></span> - <div class="btn-group pull-right"> - <a class="btn" id="new-project-button" href="{% url 'newproject' %}">New project</a> + </li> + </ul> + <a class="btn btn-default navbar-btn navbar-right" id="new-project-button" href="{% url 'newproject' %}">New project</a> </div> - </div> </div> - </div> + </nav> <div class="container-fluid top-padded"> {% block pagecontent %} -- 1.9.1 -- _______________________________________________ toaster mailing list [email protected] https://lists.yoctoproject.org/listinfo/toaster
