2016-04-12 14:56:43 +00:00
/* New Toaster custom css file for Bootstrap 3 */
/* Set required top body padding for the fixed top navbard */
body { padding-top : 50 px ; }
2014-02-03 11:27:02 +00:00
/* Style the Yocto Project logo */
2016-04-12 14:56:43 +00:00
img . logo { height : 30 px ; vertical-align : bottom ; }
/* Style the Yocto Project logo and the Toaster name in the top navbar */
. toaster-navbar-brand { float : left ; margin : 7 px 25 px 0 0 ; }
. toaster-navbar-brand a . brand { color : #777 ; height : 50 px ; padding : 15 px 5 px 15 px 15 px ; font-size : 20 px ; line-height : 25 px ; 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 : 16 px ; }
. glyphicon-info-sign : hover { color : #999 ; cursor : pointer ; }
2014-02-03 11:27:02 +00:00
2016-04-12 14:56:43 +00:00
/* Override the negative right margin for the navbar-right class */
# new-project-button { margin-right : 0 ; }
2015-02-06 15:32:18 +00:00
2016-04-12 14:56:43 +00:00
/* Increase popovers width to fit commit SHAs */
. popover { max-width : 350 px ; }
2016-06-02 13:26:16 +00:00
/* Set a limit to popover height to handle long dependency lists */
. popover-content { max-height : 350 px ; overflow : scroll ; }
/* Set a limit to modal dialogs height to handle long variable history */
[ id ^ = "variable-" ] . modal-content { max-height : 550 px ; overflow-y : scroll ; }
/ * Make sure long values in variable history do not make the modal dialogs
* scroll horizontally * /
[ id ^ = "variable-" ] . modal-content p { word-break : break-all ; }
2016-04-12 14:56:43 +00:00
/* Increase bottom margin of definition lists inside popovers for the Toaster version information in the top navbar, and also inside the right hand columns of our details pages */
. popover-content dd ,
2016-06-02 13:26:16 +00:00
. item-info dd { margin-bottom : 15 px ; }
2016-04-12 14:56:43 +00:00
2016-06-02 13:26:16 +00:00
/* Style the horizontal definition lists */
2016-04-12 14:56:43 +00:00
. dl-horizontal dt { width : 200 px ; line-height : 25 px ; }
. dl-horizontal dd { margin-left : 220 px ; line-height : 25 px ; }
/* 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 : -10 px ; margin-bottom : 5 px ; }
bitbake: toaster: move most recent builds templating to client
The most recent builds area of the all builds and project builds
table needs to update as a build progresses. It also needs
additional functionality to show other states (e.g. recipe parsing,
queued) which again needs to update on the client side.
Rather than add to the existing mix of server-side templating
with client-side DOM updating, translate all of the server-side
templates to client-side ones (jsrender), and add logic which
updates the most recent builds area as the state of a build changes.
Add a JSON API for mostrecentbuilds, which returns the state of
all "recent" builds. Fetch this via Ajax from the build dashboard
(rather than fetching the ad hoc API as in the previous version).
Then, as new states for builds are fetched via Ajax, determine
whether the build state has changed completely, or whether the progress
has just updated. If the state completely changed, re-render the
template on the client side for that build. If only the progress
changed, just update the progress bar. (NB this fixes the
task progress bar so it works for the project builds and all builds
pages.)
In cases where the builds table needs to update as the result of
a build finishing, reload the whole page.
This work highlighted a variety of other issues, such as
build requests not being able to change state as necessary. This
was one part of the cause of the "cancelling build..." state
being fragile and disappearing entirely when the page refreshed.
The cancelling state now persists between page reloads, as the
logic for determining whether a build is cancelling is now on
the Build object itself.
Note that jsrender is redistributed as part of Toaster, so
a note was added to LICENSE to that effect.
[YOCTO #9631]
(Bitbake rev: c868ea036aa34b387a72ec5116a66b2cd863995b)
Signed-off-by: Elliot Smith <elliot.smith@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
2016-06-29 14:41:56 +00:00
. rebuild-btn , . cancel-build-btn { cursor : pointer ; }
2014-02-03 11:27:02 +00:00
/* Styles for the help information */
. get-help { color : #CCCCCC ; }
2016-04-12 14:56:43 +00:00
. get-help : hover { color : #999999 ; cursor : pointer ; }
. get-help-green { color : #3c763d ; }
. get-help-green : hover { color : #2b542c ; cursor : pointer ; }
2014-02-03 11:27:02 +00:00
. get-help-blue { color : #3A87AD ; }
. get-help-blue : hover { color : #005580 ; cursor : pointer ; }
2016-04-12 14:56:43 +00:00
. get-help-red { color : #a94442 ; }
. get-help-red : hover { color : #843534 ; cursor : pointer ; }
/* Styles for our table controls */
. form-control [ id ^ = "search-input-" ] ,
2016-06-02 13:26:16 +00:00
. form-control [ id ^ = "new-search-input-" ] ,
# search { width : 30 em ; }
2016-04-12 14:56:43 +00:00
# search-input-selectpackagestable ,
# search-input-packagestable ,
2016-06-02 13:26:16 +00:00
. form-control [ id ^ = "no-results-search-input-" ] { width : 20 em ; }
2016-04-12 14:56:43 +00:00
# edit-columns-button { margin-right : 30 px ; }
2016-06-02 13:26:16 +00:00
. navbar-default [ id ^ = "table-chrome-" ] ,
# variables . navbar-default { background-color : transparent ; }
2016-04-12 14:56:43 +00:00
[ id ^ = "table-chrome-collapse-" ] . navbar-form { margin-left : -15 px ; }
2016-06-02 13:26:16 +00:00
. dropdown-menu . editcol { padding-left : 10 px ; min-width : 200 px ; }
2016-04-12 14:56:43 +00:00
span [ class ^ = "remove-search-btn-" ] { position : absolute ; right : 5 px ; top : 0 ; bottom : 0 ; height : 14 px ; margin : auto ; font-size : 14 px ; cursor : pointer ; color : #777 ; }
span [ class ^ = "remove-search-btn-" ] : hover { color : #333 ; }
# no-results-special-selectpackagestable . form-inline { margin-top : 20 px ; }
[ id ^ = "pagination-" ] . pagination ,
[ id ^ = "pagination-" ] . navbar-form { margin-top : 0 ; }
[ id ^ = "table-chrome-" ] . navbar-form { margin-left : -15 px ; margin-right : -15 px ; }
2016-06-02 13:26:16 +00:00
[ id ^ = "table-chrome-" ] . detail-page-contols ,
# packages-built . detail-page-controls { padding-left : 0 ; padding-right : 0 ; }
2016-04-12 14:56:43 +00:00
/* Override the default font-weight for labels: it's a bit too much */
label { font-weight : normal ; }
/* Firefox workaround for awkward fieldset styling. See http://getbootstrap.com/css/#tables-responsive */
@ -moz-document url-prefix ( ) { fieldset { display : table-cell ; } }
/* Table heading sortable / not sortable states */
thead > tr > th > a { font-weight : normal ; }
thead > tr > th > a . sorted { font-weight : bold ; color : #333 ; }
/* Give some extra space to the 'clear filter' buttons */
. tooltip . btn { margin : 5 px ; }
/* In table headings, separate the help bubble from the column heading */
thead > tr > th > . glyphicon-question-sign { margin-right : 5 px ; }
/* Style build outcome in tables, download, remove and change icons */
tbody > tr > td > . glyphicon-ok-circle ,
dd > . glyphicon-ok-circle { color : #3c763d ; }
tbody > tr > td > . glyphicon-minus-sign { color : #a94442 ; }
. glyphicon-download-alt ,
. glyphicon-edit { color : #337ab7 ; }
2016-06-02 13:26:16 +00:00
. failed_tasks . glyphicon-download-alt { margin-left : 5 px ; }
2016-04-12 14:56:43 +00:00
. glyphicon-download-alt : hover ,
. glyphicon-edit : hover { color : #23527c ; cursor : pointer ; text-decoration : none ; }
. glyphicon-trash { color : #a94442 ; }
. btn-danger > . glyphicon-trash ,
. btn-danger > . glyphicon-trash : hover { color : #fff ; }
. glyphicon-trash : hover { color : #843534 ; cursor : pointer ; }
/* Set the font size for icons inside headings, lead paragraphs and definition lists */
h1 > . glyphicon-edit ,
p . lead . glyphicon { font-size : 16 px ; }
h2 > . glyphicon-question-sign ,
2016-06-02 13:26:16 +00:00
h3 > . glyphicon-question-sign ,
. heading-help { font-size : 14 px ; }
2016-04-12 14:56:43 +00:00
/* Create a class for wells without background colour */
2014-09-09 10:47:13 +00:00
. well-transparent { background-color : transparent ; }
2016-04-12 14:56:43 +00:00
/* Create a class for the left navigation headers */
. nav-header { display : block ; font-size : 12 px ; font-weight : bold ; line-height : 20 px ; color : #999 ; text-transform : uppercase ; margin-top : 20 px !important ; margin-bottom : 15 px ; padding-left : 15 px ; }
/* Increase the tabs padding and margin in the project pages to fit the build form and the main content */
# project-topbar . nav-tabs > li > a { padding : 15 px ; }
# project-topbar { margin-bottom : 20 px ; }
/* Style the project name change form in the project pages */
# project-name-change-input { width : 20 em ; }
/* Style the build form in the project pages */
# project-topbar . input-lg { width : 18 em ; }
# project-topbar form . glyphicon { top : 15 px ; right : 4 px ; }
# build-button { padding : 10 px 30 px ; }
/* Style the form links in the project page (all machines, all layers, etc) */
. form-link { margin-top : 10 px ; }
/* Style the most built recipes list in the project page */
# freq-build-list . checkbox input [ type = "checkbox" ] { position : relative ; margin : 0 10 px 0 0 ; vertical-align : middle ; }
# freq-build-list . lead > li { line-height : 25 px ; }
# freq-build-list { margin-top : 20 px ; }
# freq-build-list label { padding-left : 0 ; }
# freq-build-btn { margin-top : 10 px ; }
# no-most-built { margin-top : 20 px ; }
/* Style the layers section in the project page and the layer dependencies in the import layer form */
# layer-container . form-inline { margin-top : 20 px ; }
# layer-add-input { width : 17 em ; }
ul . lead { margin-top : 20 px ; }
ul . lead > li { line-height : 38 px ; }
ul . lead . glyphicon-trash ,
ul . lead . glyphicon-trash { font-size : 16 px ; margin-left : 7 px ; }
# layers-in-project-list . tooltip-inner { max-width : 600 px ; }
# no-layers-in-project { margin-top : 20 px ; }
# no-layers-in-project ul { margin-top : 10 px ; }
/* Style the layer information icons in the layer details pages */
dd . glyphicon-trash ,
dd . glyphicon-edit { margin-left : 5 px ; }
/* Style the forms and definition lists in the layer details pages */
# change-repo-form . form-control { width : 17 em ; }
2016-09-05 14:29:24 +00:00
# information { margin-bottom : 5 em ; }
2016-04-12 14:56:43 +00:00
# information dd > form { margin-bottom : 5 px ; margin-top : 5 px ; }
2016-09-05 14:29:24 +00:00
# edit-layer-source-form fieldset { margin-top : 20 px ; }
# directory-info ,
# git-repo-info { margin-top : 20 px ; }
# layer-dir-path-in-details { width : 55 % ; }
. add-deps . form-control { width : 15 em ; }
2016-04-12 14:56:43 +00:00
/* Style the forms and definition lists in the BitBake variables page */
. variable-list { margin-bottom : 20 px ; }
dd . variable-list form { margin-top : 10 px ; }
# new-dl_dir ,
# filter-image_fstypes ,
# new-image_install ,
# new-sstate_dir ,
# new-imagefs_types { width : 20 em ; }
# package_classes-select { width : 10 em ; }
. scrolling { border : 1 px solid #dddddd ; height : 154 px ; overflow : auto ; padding : 0 10 px ; width : 27.5 % ; margin-bottom : 10 px ; margin-top : 10 px ; }
. scrolling . has-error { border-color : #a94442 ; }
. help-block . text-danger { color : #a94442 ; }
. tooltip-inner code { color : #fff ; }
2016-09-05 14:29:27 +00:00
. text-danger > code { color : #a94442 ; }
2016-04-12 14:56:43 +00:00
dd . variable-list . glyphicon-question-sign { font-size : 14 px ; }
dd . variable-list . glyphicon-edit { font-size : 16 px ; }
dt . glyphicon-trash { margin-left : 5 px ; font-size : 16 px ; }
# change-package_classes-form . checkbox { margin-top : 5 px ; }
# variable-form h5 { margin-top : 0 ; }
# variable-form . col-md-5 { padding-left : 45 px ; }
/* Create a class for additional top margin that we can use in headings */
. top-air { margin-top : 40 px ; }
/* Add some bottom margin to our h2's */
h2 { margin-bottom : 25 px ; }
/* Style the typeahead */
. tt-menu { min-width : 400 px ; padding-bottom : 10 px ; }
. tt-suggestion { padding : 5 px 10 px ; }
. tt-suggestion : hover ,
. tt-suggestion : active { background-color : #f5f5f5 ; cursor : pointer ; }
/* Style the import layer form controls*/
2016-09-05 14:29:24 +00:00
legend { border : none ; }
2016-09-05 14:29:25 +00:00
fieldset . fields-apart-from-layer-name { margin-top : 20 px ; }
2016-07-26 08:08:42 +00:00
. radioLegend { margin-bottom : 0 ; }
2016-04-12 14:56:43 +00:00
# layer-name-ctrl { margin-top : 20 px ; }
# import-layer-name ,
# layer-subdir { width : 20 % ; }
# layer-git-repo-url { width : 40 % ; }
2016-07-26 08:08:42 +00:00
# local-dir-path { width : 45 % ; }
2016-04-12 14:56:43 +00:00
# layer-dependency { width : 16 em ; }
2016-07-26 08:08:42 +00:00
# layer-deps-list { margin-top : 0 ; }
2016-04-12 14:56:43 +00:00
# form-actions { margin-bottom : 30 px ; }
# duplicate-layer-info dl { margin-top : 10 px ; }
# duplicate-layer-info dd { margin-bottom : 10 px ; }
. help-inline { color : #737373 ; margin-left : 10 px ; }
2016-07-26 08:08:42 +00:00
. radio-help { width : 50 % ; margin-left : 20 px ; }
# repo-select div : nth-of-type ( 2 ) { margin-top : 15 px ; }
2016-04-12 14:56:43 +00:00
/* Give some padding to the in-cell tooltips we use for notifications in tables */
td > . tooltip-inner ,
. inline-notification { padding : 10 px ; }
/* Set sane widths for table columns */
# newcustomimagestable . get_description_or_summary ,
# imagerecipestable . get_description_or_summary ,
# softwarerecipestable . get_description_or_summary ,
# layerstable . layer__summary { width : 30 % ; }
# recipestable . get_description_or_summary { width : 40 % ; }
# machinestable . name { white-space : nowrap ; }
# machinestable . description { width : 45 % ; }
2016-06-02 13:26:16 +00:00
# otable . variable_value ,
# otable . file { word-break : break-all ; width : 25 % ; }
[ id ^ = "variable-" ] . file { word-break : break-all ; }
/ * For the tables still not ported to ToasterTables , style the table headings
* that are not sortable * /
th > span . text-muted { font-weight : normal ; }
2016-04-12 14:56:43 +00:00
/* Override the rather ugly default code styles */
code { color : #333 ; background-color : transparent ; }
/* Style our breadcrumbs */
. breadcrumb > li + li :: before { content : none ; }
. breadcrumb { background-color : transparent ; padding-left : 0 ; padding-top : 15 px ; }
. breadcrumb . divider { color : #777 ; margin : 0 5 px ; }
/* Reduce top margin for the page-header class */
. page-header { margin-top : 30 px ; }
/* Set some space around the layer button in the layer details pages */
. tab-content { margin-top : 20 px ; }
. tab-pane { margin-top : 20 px ; }
/* Style the new window icons */
. glyphicon-new-window : hover { text-decoration : none ; }
. dl-horizontal > dd > . glyphicon-new-window { margin-left : 5 px ; }
/* Style the special no results message in the custom image details page */
[ id ^ = "no-results-special-" ] > . alert-warning > ol { margin-top : 10 px ; }
2016-07-15 14:20:36 +00:00
/* style the loading spinner in the new custom image dialog */
# create-new-custom-image-btn [ data-role = "loading-state" ] {
padding-left : 16px ;
}
/* icon has to be absolutely positioned, otherwise the spin animation doesn't work */
# create-new-custom-image-btn [ data-role = "loading-state" ] . icon-spinner {
position : absolute ;
left : 26px ;
bottom : 26px ;
}
2016-04-12 14:56:43 +00:00
/* Style the content of modal dialogs */
. modal-footer { text-align : left ; }
. date-filter-controls { margin-top : 10 px ; }
. date-filter-controls span { margin : 0 10 px ; }
/* Style the fixed positioned notifications */
2016-06-02 13:26:16 +00:00
# loading-notification { position : fixed ; z-index : 1101 ; top : 3 % ; left : 40 % ; right : 40 % ; -webkit- box-shadow : 0 0 10 px #c09853 ; -moz- box-shadow : 0 0 10 px #c09853 ; box-shadow : 0 0 10 px #c09853 ; }
2016-04-12 14:56:43 +00:00
. change-notification { position : fixed ; z-index : 1101 ; top : 4 % ; left : 30 % ; right : 30 % ; -webkit- box-shadow : 0 0 10 px #3a87ad ; -moz- box-shadow : 0 0 10 px #3a87ad ; box-shadow : 0 0 10 px #3a87ad ; }
. alert-success . change-notification { -webkit- box-shadow : 0 0 10 px #3c763d ; -moz- box-shadow : 0 0 10 px #3c763d ; box-shadow : 0 0 10 px #3c763d ; }
/* Style the new project form */
# new-project-name { width : 33 % ; }
# projectversion { width : 20 % ; margin-bottom : 10 px ; }
/* Style the Toaster screenshot in the landing page */
. img-thumbnail { padding : 0 ; }
2016-06-02 13:26:16 +00:00
/* Set the layout for the build information pages */
# nav { margin-top : 10 px ; }
. page-header . build-data { margin-top : 0 px ; }
. build-data > h1 { margin-top : 8 px ; }
/* Style the build outcome information in the build dashboard */
. log { margin-left : 30 px ; }
. show-warnings { font-weight : 700 ; color : #8a6d3b ; }
. show-warnings : hover { color : #66512c ; }
/* Style the errors and warnings information in the build dashboard */
# errors . panel-heading { background-color : transparent ; color : #843534 ; }
# warnings . panel-heading { background-color : transparent ; color : #8a6d3b ; }
# warnings . panel-heading a : hover { color : #66512c ; }
h2 . panel-title { font-size : 30 px ; }
. alert-danger pre ,
. alert-warning pre { background-color : transparent ; border : none ; }
. alert-danger pre { color : #a94442 ; }
# error-info pre ,
# warning-info pre { white-space : pre-wrap ; }
. alert-warning pre { color : #8a6d3b ; }
/* Style the wells in the build dashboard */
. dashboard-section h3 { margin-top : 10 px ; margin-bottom : 20 px ; }
. col-md-4 . dashboard-section dd { margin-bottom : 10 px ; }
/* Make the help in tables insivisble until you hover over the right cell */
. hover-help { visibility : hidden ; }
2016-08-22 15:42:31 +00:00
# add-remove-layer-btn { margin-bottom : 20 px ; }
2016-06-02 13:26:16 +00:00
/* Blue hightlight animation for tasks and directory structure tables */
. highlight { -webkit- animation : target-fade 15 s 1 ; -moz- animation : target-fade 15 s 1 ; animation : target-fade 15 s 1 ; }
@ -webkit-keyframes target-fade { 0 % { background-color : #D9EDF7 ; } 25 % { background-color : #D9EDF7 ; } 100 % { background-color : white ; } }
@ -moz-keyframes target-fade { 0 % { background-color : #D9EDF7 ; } 25 % { background-color : #D9EDF7 ; } 100 % { background-color : white ; } }
@ keyframes target-fade { 0 % { background-color : #D9EDF7 ; } 25 % { background-color : #D9EDF7 ; } 100 % { background-color : white ; } }
/* Copied in from newer version of Font-Awesome 4.3.0 */
. fa-spin {
-webkit-animation : fa-spin 2s infinite linear ;
animation : fa-spin 2s infinite linear ;
display : inline-block ;
}
. fa-pulse {
-webkit-animation : fa-spin 1s infinite steps ( 8 ) ;
animation : fa-spin 1s infinite steps ( 8 ) ;
display : inline-block ;
}
@ -webkit-keyframes fa-spin {
0 % {
-webkit-transform : rotate ( 0deg ) ;
transform : rotate ( 0deg ) ;
}
100 % {
-webkit-transform : rotate ( 359deg ) ;
transform : rotate ( 359deg ) ;
}
}
@ keyframes fa-spin {
0 % {
-webkit-transform : rotate ( 0deg ) ;
-moz-transform : rotate ( 0deg ) ;
transform : rotate ( 0deg ) ;
}
100 % {
-webkit-transform : rotate ( 359deg ) ;
-moz-transform : rotate ( 359deg ) ;
transform : rotate ( 359deg ) ;
}
}
/* End copied in from newer version of Font-Awesome 4.3.0 */
