Changes to the "Latest builds" section in both the "All builds" and "Project builds" pages so that they display nicely with Bootstrap 3.
Signed-off-by: Belen Barros Pena <[email protected]> --- .../lib/toaster/toastergui/static/css/default.css | 15 +++ .../toaster/toastergui/templates/mrb_section.html | 111 ++++++++++----------- 2 files changed, 70 insertions(+), 56 deletions(-) diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css index 21eb1d4..5090dec 100644 --- a/bitbake/lib/toaster/toastergui/static/css/default.css +++ b/bitbake/lib/toaster/toastergui/static/css/default.css @@ -24,3 +24,18 @@ img.logo { height: 30px; vertical-align: bottom; } /* Increase bottom margin of definition lists inside popovers for the Toaster version information in the top navbar */ .popover-content dd { margin-bottom: 15px; } + +/* Style our build results */ +.build-result .progress { margin-bottom: 0; } +.alert-link.build-warnings, +.glyphicon-warning-sign.build-warnings { color: #8a6d3b; } +.build-result .project-name { margin-top: -10px; margin-bottom: 5px; } + +/* Styles for the help information */ +.get-help-green { color: #468847; } +.get-help-green:hover { color: #347132; cursor: pointer; } +.get-help-blue { color: #3A87AD; } +.get-help-blue:hover { color: #005580; cursor: pointer; } +.get-help-red { color: #B94A48; } +.get-help-red:hover { color: #943A38; cursor: pointer; } + diff --git a/bitbake/lib/toaster/toastergui/templates/mrb_section.html b/bitbake/lib/toaster/toastergui/templates/mrb_section.html index 4ec5885..4fb660b 100644 --- a/bitbake/lib/toaster/toastergui/templates/mrb_section.html +++ b/bitbake/lib/toaster/toastergui/templates/mrb_section.html @@ -21,13 +21,15 @@ {%if mru and mru.count > 0%} {%if mrb_type == 'project' %} - <h2 class="page-header"> - Latest project builds + <div class="page-header"> + <h2> + Latest project builds {% if project.is_default %} - <i class="icon-question-sign get-help heading-help" title="" data-original-title="Builds in this project cannot be started from Toaster: they are started from the command line"></i> + <span class="glyphicon glyphicon-question-sign get-help heading-help" title="" data-original-title="Builds in this project cannot be started from Toaster: they are started from the command line"></span> {% endif %} - </h2> + </h2> + </div> {% else %} <div class="page-header"> <h1> @@ -37,18 +39,20 @@ {% endif %} <div id="latest-builds"> {% for build in mru %} - <div data-latest-build-result="{{ build.id }}" class="alert build-result {%if build.outcome == build.SUCCEEDED%}alert-success{%elif build.outcome == build.FAILED%}alert-error{%else%}alert-info{%endif%}{% if mrb_type != 'project' %} project-name{% endif %}"> - {% if mrb_type != 'project' %} - <span class="label {%if build.outcome == build.SUCCEEDED%}label-success{%elif build.outcome == build.FAILED%}label-important{%else%}label-info{%endif%}"> - <a href={% project_url build.project %}> - {{build.project.name}} - </a> - </span> - {% endif %} + <div data-latest-build-result="{{ build.id }}" class="alert build-result {%if build.outcome == build.SUCCEEDED%}alert-success{%elif build.outcome == build.FAILED%}alert-danger{%else%}alert-info{%endif%}"> + {% if mrb_type != 'project' %} + <div class="row project-name"> + <div class="col-md-12"> + <small> + <a class="alert-link text-uppercase" href={% project_url build.project %}>{{build.project.name}}</a> + </small> + </div> + </div> + {% endif %} <div class="row"> - <div class="col-md-3 lead"> + <div class="col-md-3"> {%if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %} - <a href="{%url 'builddashboard' build.pk%}" class="{%if build.outcome == build.SUCCEEDED %}success{%else%}error{%endif%}"> + <a href="{%url 'builddashboard' build.pk%}" class="alert-link"> {% endif %} {% if build.target_set.all.count > 0 %} <span data-toggle="tooltip" @@ -79,7 +83,7 @@ {% endif %} </div> {% if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %} - <div class="col-md-2 lead"> + <div class="col-md-2"> {% if build.completed_on|format_build_date %} {{ build.completed_on|date:'d/m/y H:i' }} {% else %} @@ -88,22 +92,23 @@ </div> {% endif %} {%if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %} - <div class="col-md-2 lead"> + <div class="col-md-2"> {% if build.errors.count %} - <i class="icon-minus-sign red"></i> <a href="{%url 'builddashboard' build.pk%}#errors" class="error">{{build.errors.count}} error{{build.errors.count|pluralize}}</a> + <span class="glyphicon glyphicon-minus-sign"></span> + <a href="{%url 'builddashboard' build.pk%}#errors" class="alert-link">{{build.errors.count}} error{{build.errors.count|pluralize}}</a> {% endif %} </div> - <div class="col-md-2 lead"> + <div class="col-md-2"> {% if build.warnings.count %} - <i class="icon-warning-sign yellow"></i> <a href="{%url 'builddashboard' build.pk%}#warnings" class="warning">{{build.warnings.count}} warning{{build.warnings.count|pluralize}}</a> + <span class="glyphicon glyphicon-warning-sign build-warnings"></span> + <a href="{%url 'builddashboard' build.pk%}#warnings" class="alert-link build-warnings">{{build.warnings.count}} warning{{build.warnings.count|pluralize}}</a> {% endif %} </div> - <div class="lead "> - <span class="lead"> - Build time: <a href="{% url 'buildtime' build.pk %}">{{ build.timespent_seconds|sectohms }}</a> - </span> + <div class="col-md-3"> + Build time: <a class="alert-link" href="{% url 'buildtime' build.pk %}">{{ build.timespent_seconds|sectohms }} + </a> {% if build.project.is_default %} - <i class="pull-right icon-question-sign get-help + <span class="pull-right glyphicon glyphicon-question-sign get-help {% if build.outcome == build.SUCCEEDED %} get-help-green {% elif build.outcome == build.FAILED %} @@ -112,72 +117,66 @@ get-help-blue {% endif %} " title="Builds in this project cannot be started from Toaster: they are started from the command line"> - </i> + </span> {% else %} - <button class="run-again-btn btn + <a href="#" class="run-again-btn {% if build.outcome == build.SUCCEEDED %} - btn-success + success {% elif build.outcome == build.FAILED %} - btn-danger + danger {% else %} - btn-info + info {%endif%} pull-right" data-request-url="{% url 'xhr_buildrequest' build.project.pk %}" data-target='{{build.target_set.all|get_tasks|json}}'> - Rebuild - </button> + <span class="glyphicon glyphicon-repeat"></span> + Rebuild + </a> {% endif %} </div> {%endif%} + {%if build.outcome == build.IN_PROGRESS %} <div class="col-md-4" style="display:none" id="cancelling-msg-{{build.buildrequest.pk}}"> - <p class="lead">Cancelling the build ...</p> + Cancelling the build ... </div> <div class="col-md-4 col-md-offset-1 progress-info"> - <div class="progress" id="build-pc-done-title-{{build.pk}}" style="margin-top:5px;" data-toggle="tooltip" title="{{build.completeper}}% of tasks complete"> - <div id="build-pc-done-bar-{{build.pk}}" style="width: {{build.completeper}}%;" class="bar"></div> + <div class="progress" id="build-pc-done-title-{{build.pk}}"> + <div id="build-pc-done-bar-{{build.pk}}" style="width: {{build.completeper}}%;" class="progress-bar"></div> </div> </div> - <div class="lead col-md-3 progress-info"><span id="build-pc-done-{{build.pk}}">{{build.completeper}}</span>% of tasks complete</div> + <div class="col-md-4 progress-info"><span id="build-pc-done-{{build.pk}}">{{build.completeper}}</span>% of tasks complete {# No build cancel for command line builds project #} {% if build.project.is_default %} - <i class="icon-question-sign get-help get-help-blue pull-right" title="" data-original-title="Builds in this project cannot be cancelled from Toaster: they can only be cancelled from the command line"></i> + <span class="glyphicon glyphicon-question-sign get-help get-help-blue pull-right" title="Builds in this project cannot be cancelled from Toaster: they can only be cancelled from the command line"></span> {% else %} - <div class="lead pull-right progress-info"> - <button class="cancel-build-btn btn btn-info pull-right" + <a href="#" class="cancel-build-btn pull-right" data-buildrequest-id={{build.buildrequest.pk}} data-request-url="{% url 'xhr_buildrequest' build.project.pk %}" > + <span class="glyphicon glyphicon-remove-circle"></span> Cancel - </button> + </a> </div> {% endif %} - + </div> {%endif%} {# end if in progress #} {% if build.outcome == build.CANCELLED %} - <div class="col-md-4"> - <p class="lead">Build cancelled</p> + <div class="col-md-6"> + Build cancelled </div> - <button class="btn btn-info pull-right run-again-btn" + <div class="col-md-3"> + <a href="#" class="info pull-right run-again-btn" data-request-url="{% url 'xhr_buildrequest' build.project.pk %}" data-target='{{build.target_set.all|get_tasks|json}}'> - Rebuild - - {% if build.project.is_default %} - <i class="icon-question-sign get-help get-help-blue pull-right" title="" - data-original-title="Builds in this project cannot be rebuilt from Toaster: they can only be rebuilt from the command line"></i> - {% else %} - <button class="btn btn-info pull-right run-again-btn" - data-request-url="{% url 'xhr_buildrequest' build.project.pk %}" - data-target='{{build.target_set.all|get_tasks|json}}'> - Rebuild - </button> - {% endif %} + <span class="glyphicon glyphicon-repeat"></span> + Rebuild + </a> + </div> {% endif %} </div> </div> - {% endfor %} </div> -- 1.9.1 -- _______________________________________________ toaster mailing list [email protected] https://lists.yoctoproject.org/listinfo/toaster
