1
0
mirror of https://github.com/dkmstr/openuds.git synced 2024-12-22 13:34:04 +03:00

advancing & gui-element tables

This commit is contained in:
Adolfo Gómez García 2015-09-23 10:43:45 +02:00
parent 80bf6d77f1
commit 7e9a37e768
9 changed files with 282 additions and 202 deletions

View File

@ -158,14 +158,15 @@ class Services(DetailHandler): # pylint: disable=too-many-public-methods
try:
service = parent.services.get(uuid=processUuid(item))
if service.deployedServices.count() != 0:
raise RequestError('Item has associated deployed services')
if service.deployedServices.count() == 0:
service.delete()
return 'deleted'
service.delete()
except Exception:
logger.exception('Deleting service')
self.invalidItemException()
return 'deleted'
raise RequestError('Item has associated deployed services')
def getTitle(self, parent):
try:

File diff suppressed because one or more lines are too long

View File

@ -110,11 +110,9 @@ gui.providers.link = (event) ->
return
onCheck: (check, items) ->
if check is "delete"
for i of items
return false if items[i].deployed_services_count > 0
return true
true
if check is "delete" and items.length is 1
return false if items[0].deployed_services_count > 0
return true
buttons: [
"new"

View File

@ -196,11 +196,6 @@
# Responsive style for tables, using tables.css and this code generates the "titles" for vertical display on small sizes
$("#style-" + tableId).remove() # Remove existing style for table before adding new one, if it exist ofc
$(api.templates.evaluate("tmpl_comp_responsive_table",
tableId: tableId
columns: columns
)).appendTo "head"
self.rest.overview (data) -> # Gets "overview" data for table (table contents, but resume form)
tblParams.onData data if tblParams.onData
table = gui.table(title, tableId,
@ -260,31 +255,28 @@
onCheck = tblParams.onCheck or -> # Default oncheck always returns true
true
setBtnState = (btn, enable, cls) ->
if enable
$(btn).prop('disabled', false)
$(btn).addClass('disabled')
$(btn).removeClass("disabled").addClass cls
else
$(btn).prop('disabled', true)
$(btn).removeClass(cls).addClass "disabled"
return
activeOnOneSelected = (cls) ->
(btn, sel, dtable) ->
setBtnState btn, (if sel.length is 1 then onCheck("edit", sel) else false), cls
activeOnManySelected = (cls) ->
(btn, sel, dtable) ->
setBtnState btn, (if sel.length >= 1 then onCheck("delete", sel) else false), cls
# methods for buttons on row select
editSelected = (btn, sel, dtable) ->
enable = (if sel.length is 1 then onCheck("edit", sel) else false)
if enable
$(btn).removeClass("disabled").addClass "btn-success"
else
$(btn).removeClass("btn-success").addClass "disabled"
return
deleteSelected = (btn, sel, dtable) ->
enable = (if sel.length >= 1 then onCheck("delete", sel) else false)
if enable
$(btn).removeClass("disabled").addClass "btn-danger"
else
$(btn).removeClass("btn-danger").addClass "disabled"
return
permissionsSelected = (btn, sel, dtable) ->
enable = (if sel.length is 1 then onCheck("delete", sel) else false)
if enable
$(btn).removeClass("disabled").addClass "btn-success"
else
$(btn).removeClass("btn-success").addClass "disabled"
return
editSelected = activeOnOneSelected('btn-success')
deleteSelected = activeOnManySelected('btn-danger')
permissionsSelected = activeOnOneSelected('btn-success')
$.each tblParams.buttons, (index, value) -> # Iterate through button definition
btn = null
@ -476,6 +468,7 @@
selCallbackList.push
btnId: '#' + btnId
callback: btn.fnSelect
btn.fnSelect $btn, [], dTable
else
$div.append('<div style="float: left;">' + btn.content + '</div>')

View File

@ -153,8 +153,6 @@
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.language = "{{ LANGUAGE_CODE }}";
toggleNavbarMethod();
});
</script>
{% block js %}{% endblock %}

View File

@ -26,10 +26,10 @@
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<div class="col-xs-3">
<img class="info-img" src="{% endverbatim %}{{ STATIC_URL }}{% verbatim %}/adm/img/icons/users.png"/>
</div>
<div class="col-xs-6 text-right">
<div class="col-xs-9 text-right">
<p class="announcement-heading">{{ users }}</p>
<p class="announcement-text">{% endverbatim %}{% trans 'Users' %}{% verbatim %}</p>
</div>
@ -38,10 +38,10 @@
<a class="lnk-authenticators" href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
<div class="col-xs-10">
{% endverbatim %}{% trans 'View Authenticators' %}{% verbatim %}
</div>
<div class="col-xs-6 text-right">
<div class="col-xs-2 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>
@ -53,10 +53,10 @@
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<div class="col-xs-3">
<img class="info-img" src="{% endverbatim %}{{ STATIC_URL }}{% verbatim %}/adm/img/icons/services.png"/>
</div>
<div class="col-xs-6 text-right">
<div class="col-xs-9 text-right">
<p class="announcement-heading">{{ services }}</p>
<p class="announcement-text">{% endverbatim %}{% trans 'Services' %}{% verbatim %}</p>
</div>
@ -65,10 +65,10 @@
<a class="lnk-service_providers" href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
<div class="col-xs-10">
{% endverbatim %}{% trans 'View services' %}{% verbatim %}
</div>
<div class="col-xs-6 text-right">
<div class="col-xs-2 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>
@ -80,10 +80,10 @@
<div class="panel panel-success">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<div class="col-xs-3">
<img class="info-img" src="{% endverbatim %}{{ STATIC_URL }}{% verbatim %}/adm/img/icons/assigned.png"/>
</div>
<div class="col-xs-6 text-right">
<div class="col-xs-9 text-right">
<p class="announcement-heading">{{ user_services }}</p>
<p class="announcement-text">{% endverbatim %}{% trans 'User services' %}{% verbatim %}</p>
</div>
@ -92,10 +92,10 @@
<a class="lnk-deployed_services" href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
<div class="col-xs-10">
{% endverbatim %}{% trans 'View services pools' %}{% verbatim %}
</div>
<div class="col-xs-6 text-right">
<div class="col-xs-2 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>
@ -107,10 +107,10 @@
<div class="panel panel-{{# if restrained_services_pools }}danger{{ else }}success{{/ if }}">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<div class="col-xs-3">
<i class="fa fa-heart fa-5x" style="color: #C03030;"></i>
</div>
<div class="col-xs-6 text-right">
<div class="col-xs-9 text-right">
<p class="announcement-heading">{{ restrained_services_pools }}</p>
<p class="announcement-text">{% endverbatim %}{% trans 'Restrained services pools' %}{% verbatim %}</p>
</div>
@ -119,10 +119,10 @@
<a class="lnk-deployed_services" href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
<div class="col-xs-10">
{% endverbatim %}{% trans 'View services pools' %}{% verbatim %}
</div>
<div class="col-xs-6 text-right">
<div class="col-xs-2 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>

View File

@ -103,6 +103,7 @@
<div id="page-wrapper">
<div id="content">
<!-- start -->
<div class="row">
<div class="col-xs-12">
<h1>Services</h1>
@ -126,10 +127,10 @@
</div><!-- /HEAD PANEL -->
<div class="widget-body collapse in"> <!-- CONTENT PANEL -->
<div class="dataTables_wrapper form-inline no-footer" id="provi-table_wrapper"><div class="row"><div class="col-xs-8"><div class="DTTT btn-group-3d"><div aria-controls="provi-table" tabindex="0" id="ToolTables_provi-table_0" class=" DTTT_nonbutton"><div>
<div class="dataTables_wrapper form-inline no-footer" id="provi-table_wrapper"><div class="tb04150293379051817 btns-tables"><div style="float: left;">
<div class="dropdown">
<button class="btn btn-primary btn3d-tables dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-primary btn-tables dropdown-toggle" type="button" data-toggle="dropdown">
<span class="fa fa-pencil"></span> <span class="label-tbl-button">New</span>
<span class="caret"></span>
</button>
@ -145,8 +146,8 @@
<li role="presentation"><a data-original-title="XenServer platform service provider" role="menuitem" tabindex="-1" data-toggle="tooltip" title="" href="#" data-type="XenPlatform"><span class="provi-XenPlatform"></span> Xenserver Platform Provider</a></li>
</ul>
</div>
</div></div><a aria-controls="provi-table" tabindex="0" id="ToolTables_provi-table_1" class="btn btn-default btn3d-tables btn-success"><div><span class="fa fa-edit"></span> <span class="label-tbl-button">Edit</span></div></a><a aria-controls="provi-table" tabindex="0" id="ToolTables_provi-table_2" class="btn btn-default btn3d-tables btn3d-warning"><div>Exit Maintenance Mode</div></a><a aria-controls="provi-table" tabindex="0" id="ToolTables_provi-table_3" class="btn btn-default btn3d-tables btn-danger"><div><span class="fa fa-trash-o"></span> <span class="label-tbl-button">Delete</span></div></a><a aria-controls="provi-table" tabindex="0" id="ToolTables_provi-table_4" class=" btn btn-info btn3d-tables"><div><span class="fa fa-save"></span> <span class="label-tbl-button">Xls</span></div></a><a aria-controls="provi-table" tabindex="0" id="ToolTables_provi-table_5" class="btn btn-default btn3d-tables btn-success"><div><span class="fa fa-save"></span> <span class="label-tbl-button">Permissions</span></div></a></div></div><div class="col-xs-4"><div class="dataTables_filter" id="provi-table_filter"><label>Filter<input aria-controls="provi-table" placeholder="" class="form-control input-sm" type="search"></label></div></div></div><table style="width: 100%;" aria-describedby="provi-table_info" role="grid" class="table table-striped table-hover dataTable no-footer DTTT_selectable" id="provi-table" width="100%">
<thead><tr role="row"><th aria-label="Name: activate to sort column descending" aria-sort="ascending" style="width: 568px;" colspan="1" rowspan="1" aria-controls="provi-table" tabindex="0" class="sorting_asc">Name</th><th aria-label="Comments: activate to sort column ascending" style="width: 610px;" colspan="1" rowspan="1" aria-controls="provi-table" tabindex="0" class="sorting">Comments</th><th aria-label="Status: activate to sort column ascending" style="width: 318px;" colspan="1" rowspan="1" aria-controls="provi-table" tabindex="0" class="sorting">Status</th><th aria-label="Services: activate to sort column ascending" style="width: 70px;" colspan="1" rowspan="1" aria-controls="provi-table" tabindex="0" class="sorting">Services</th><th aria-label="User Services: activate to sort column ascending" style="width: 112px;" colspan="1" rowspan="1" aria-controls="provi-table" tabindex="0" class="sorting">User Services</th></tr></thead><tbody><tr role="row" class="row-maintenance-false odd"><td class="sorting_1"><span class="provi-PhysicalMachinesServiceProvider"></span> juanje</td><td>Prueba report málaga</td><td>Normal</td><td>1</td><td>0</td></tr><tr role="row" class="row-maintenance-false even"><td class="sorting_1"><span class="provi-PhysicalMachinesServiceProvider"></span> Maquinas Fisicas</td><td>Pruebas con maquinas fisicas</td><td>Normal</td><td>2</td><td>0</td></tr><tr role="row" class="row-maintenance-true odd active"><td class="sorting_1"><span class="provi-NutanixProvider"></span> Nutanix</td><td>Nutanix</td><td>In Maintenance</td><td>0</td><td>0</td></tr><tr role="row" class="row-maintenance-true even"><td class="sorting_1"><span class="provi-oVirtPlatform"></span> Ovirt</td><td>-</td><td>In Maintenance</td><td>1</td><td>0</td></tr><tr role="row" class="row-maintenance-false odd"><td class="sorting_1"><span class="provi-RDSProvider"></span> Remote Desktop Services</td><td>-</td><td>Normal</td><td>3</td><td>0</td></tr><tr role="row" class="row-maintenance-false even"><td class="sorting_1"><span class="provi-VmwareVCServiceProvider"></span> VC</td><td>-</td><td>Normal</td><td>1</td><td>1</td></tr><tr role="row" class="row-maintenance-false odd"><td class="sorting_1"><span class="provi-XenPlatform"></span> Xen</td><td>Plataforma Xen Server</td><td>Normal</td><td>1</td><td>0</td></tr></tbody></table><div class="row"><div class="col-xs-5"><div aria-live="polite" role="status" id="provi-table_info" class="dataTables_info">Records 1 to 7 of 7</div></div><div class="col-xs-7"><div id="provi-table_paginate" class="dataTables_paginate paging_bootstrap pagination"><ul class="pagination"><li class="first disabled"><a href="#"><span class="fa fa-fast-backward "></span> </a></li><li class="prev disabled"><a href="#"><span class="fa fa-backward"></span> </a></li><li class="active"><a href="#">1</a></li><li class="next disabled"><a href="#"><span class="fa fa-forward"></span> </a></li><li class="last disabled"><a href="#"><span class="fa fa-fast-forward"></span> </a></li></ul></div></div></div></div>
</div><button id="btn4894666662856193" class="btn btn-default btn-tables btn-success"><span class="fa fa-edit"></span> <span class="label-tbl-button">Edit</span></button><button id="btn3144350755347225" class="btn btn-default btn-tables btn-warning"><div>Exit Maintenance Mode</div></button><button id="btn2464097307776003" class="btn btn-default btn-tables btn-danger"><span class="fa fa-trash-o"></span> <span class="label-tbl-button">Delete</span></button><button id="btn8805267266017943" class="btn btn-info btn-tables"><span class="fa fa-save"></span> <span class="label-tbl-button">Xls</span></button><button id="btn7826621415146036" class="btn btn-default btn-tables btn-success"><span class="fa fa-save"></span> <span class="label-tbl-button">Permissions</span></button></div><div class="dataTables_filter" id="provi-table_filter"><label>Filter<input aria-controls="provi-table" placeholder="" class="form-control input-sm" type="search"></label></div><table style="width: 100%;" aria-describedby="provi-table_info" role="grid" class="table table-striped table-hover dt-responsive dataTable no-footer dtr-inline" id="provi-table" width="100%">
<thead><tr role="row"><th aria-label="" data-column-index="0" style="width: 23px;" colspan="1" rowspan="1" class="select-checkbox sorting_disabled"></th><th aria-label="Name: activate to sort column descending" aria-sort="ascending" data-column-index="1" style="width: 514px;" colspan="1" rowspan="1" aria-controls="provi-table" tabindex="0" class="sorting_asc">Name</th><th aria-label="Comments: activate to sort column ascending" data-column-index="2" style="width: 554px;" colspan="1" rowspan="1" aria-controls="provi-table" tabindex="0" class="sorting">Comments</th><th aria-label="Status: activate to sort column ascending" data-column-index="3" style="width: 278px;" colspan="1" rowspan="1" aria-controls="provi-table" tabindex="0" class="sorting">Status</th><th aria-label="Services: activate to sort column ascending" data-column-index="4" style="width: 70px;" colspan="1" rowspan="1" aria-controls="provi-table" tabindex="0" class="sorting">Services</th><th aria-label="User Services: activate to sort column ascending" data-column-index="5" style="width: 112px;" colspan="1" rowspan="1" aria-controls="provi-table" tabindex="0" class="sorting">User Services</th></tr></thead><tbody><tr role="row" class="row-maintenance-false odd"><td class=" select-checkbox"></td><td class="sorting_1"><span class="provi-PhysicalMachinesServiceProvider"></span> juanje</td><td>Prueba report málaga</td><td>Normal</td><td>1</td><td>0</td></tr><tr role="row" class="row-maintenance-false even"><td class=" select-checkbox"></td><td class="sorting_1"><span class="provi-PhysicalMachinesServiceProvider"></span> Maquinas Fisicas</td><td>Pruebas con maquinas fisicas</td><td>Normal</td><td>2</td><td>0</td></tr><tr role="row" class="row-maintenance-true odd selected"><td class=" select-checkbox"></td><td class="sorting_1"><span class="provi-NutanixProvider"></span> Nutanix</td><td>Nutanix</td><td>In Maintenance</td><td>0</td><td>0</td></tr><tr role="row" class="row-maintenance-true even"><td class=" select-checkbox"></td><td class="sorting_1"><span class="provi-oVirtPlatform"></span> Ovirt</td><td>-</td><td>In Maintenance</td><td>1</td><td>0</td></tr><tr role="row" class="row-maintenance-false odd"><td class=" select-checkbox"></td><td class="sorting_1"><span class="provi-RDSProvider"></span> Remote Desktop Services</td><td>-</td><td>Normal</td><td>3</td><td>0</td></tr><tr role="row" class="row-maintenance-false even"><td class=" select-checkbox"></td><td class="sorting_1"><span class="provi-TestProvider"></span> test</td><td>test</td><td>Normal</td><td>0</td><td>0</td></tr><tr role="row" class="row-maintenance-false odd"><td class=" select-checkbox"></td><td class="sorting_1"><span class="provi-VmwareVCServiceProvider"></span> VC</td><td>-</td><td>Normal</td><td>1</td><td>1</td></tr><tr role="row" class="row-maintenance-false even"><td class=" select-checkbox"></td><td class="sorting_1"><span class="provi-XenPlatform"></span> Xen</td><td>Plataforma Xen Server</td><td>Normal</td><td>1</td><td>0</td></tr></tbody></table><div aria-live="polite" role="status" id="provi-table_info" class="dataTables_info">Records 1 to 8 of 8<span class="select-info"><span class="select-item">Selected one row</span><span class="select-item"></span><span class="select-item"></span></span></div><div id="provi-table_paginate" class="dataTables_paginate paging_bootstrap pagination"><ul class="pagination"><li class="first disabled"><a href="#"><span class="fa fa-fast-backward "></span> </a></li><li class="prev disabled"><a href="#"><span class="fa fa-backward"></span> </a></li><li class="active"><a href="#">1</a></li><li class="next disabled"><a href="#"><span class="fa fa-forward"></span> </a></li><li class="last disabled"><a href="#"><span class="fa fa-fast-forward"></span> </a></li></ul></div></div>
</div><!-- /CONTENT PANEL -->
<div class="widget-footer"><!-- FOOTER PANEL-->
@ -205,10 +206,10 @@
</div><!-- /HEAD PANEL -->
<div class="widget-body collapse in"> <!-- CONTENT PANEL -->
<div class="dataTables_wrapper form-inline no-footer" id="services-NutanixProvider-table_wrapper"><div class="row"><div class="col-xs-8"><div class="DTTT btn-group-3d"><div aria-controls="services-NutanixProvider-table" tabindex="0" id="ToolTables_services-NutanixProvider-table_0" class=" DTTT_nonbutton"><div>
<div class="dataTables_wrapper form-inline no-footer" id="services-NutanixProvider-table_wrapper"><div class="tb5780644602707348 btns-tables"><div style="float: left;">
<div class="dropdown">
<button class="btn btn-primary btn3d-tables dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-primary btn-tables dropdown-toggle" type="button" data-toggle="dropdown">
<span class="fa fa-pencil"></span> <span class="label-tbl-button">New</span>
<span class="caret"></span>
</button>
@ -216,8 +217,8 @@
<li role="presentation"><a data-original-title="Nutanix KVM based service" role="menuitem" tabindex="-1" data-toggle="tooltip" title="" href="#" data-type="NutanixService"><span class="services-NutanixProvider-NutanixService"></span> Nutanix KVM (Experimental)</a></li>
</ul>
</div>
</div></div><a aria-controls="services-NutanixProvider-table" tabindex="0" id="ToolTables_services-NutanixProvider-table_1" class=" btn disabled btn-default btn3d-tables"><div><span class="fa fa-edit"></span> <span class="label-tbl-button">Edit</span></div></a><a aria-controls="services-NutanixProvider-table" tabindex="0" id="ToolTables_services-NutanixProvider-table_2" class=" btn disabled btn-default btn3d-tables"><div><span class="fa fa-trash-o"></span> <span class="label-tbl-button">Delete</span></div></a><a aria-controls="services-NutanixProvider-table" tabindex="0" id="ToolTables_services-NutanixProvider-table_3" class=" btn btn-info btn3d-tables"><div><span class="fa fa-save"></span> <span class="label-tbl-button">Xls</span></div></a></div></div><div class="col-xs-4"><div class="dataTables_filter" id="services-NutanixProvider-table_filter"><label>Filter<input aria-controls="services-NutanixProvider-table" placeholder="" class="form-control input-sm" type="search"></label></div></div></div><table style="width: 100%;" aria-describedby="services-NutanixProvider-table_info" role="grid" class="table table-striped table-hover dataTable no-footer DTTT_selectable" id="services-NutanixProvider-table" width="100%">
<thead><tr role="row"><th aria-label="Service name: activate to sort column descending" aria-sort="ascending" style="width: 698px;" colspan="1" rowspan="1" aria-controls="services-NutanixProvider-table" tabindex="0" class="sorting_asc">Service name</th><th aria-label="Comments: activate to sort column ascending" style="width: 494px;" colspan="1" rowspan="1" aria-controls="services-NutanixProvider-table" tabindex="0" class="sorting">Comments</th><th aria-label="Type: activate to sort column ascending" style="width: 290px;" colspan="1" rowspan="1" aria-controls="services-NutanixProvider-table" tabindex="0" class="sorting">Type</th><th aria-label="Deployed services: activate to sort column ascending" style="width: 98px;" colspan="1" rowspan="1" aria-controls="services-NutanixProvider-table" tabindex="0" class="sorting">Deployed services</th><th aria-label="User services: activate to sort column ascending" style="width: 98px;" colspan="1" rowspan="1" aria-controls="services-NutanixProvider-table" tabindex="0" class="sorting">User services</th></tr></thead><tbody><tr class="odd"><td class="dataTables_empty" colspan="5" valign="top">Empty</td></tr></tbody></table><div class="row"><div class="col-xs-5"><div aria-live="polite" role="status" id="services-NutanixProvider-table_info" class="dataTables_info">No records</div></div><div class="col-xs-7"><div id="services-NutanixProvider-table_paginate" class="dataTables_paginate paging_bootstrap pagination"><ul class="pagination"><li class="first disabled"><a href="#"><span class="fa fa-fast-backward "></span> </a></li><li class="prev disabled"><a href="#"><span class="fa fa-backward"></span> </a></li><li class="next disabled"><a href="#"><span class="fa fa-forward"></span> </a></li><li class="last disabled"><a href="#"><span class="fa fa-fast-forward"></span> </a></li></ul></div></div></div></div>
</div><button id="btn1908676482165773" class="btn disabled btn-default btn-tables"><span class="fa fa-edit"></span> <span class="label-tbl-button">Edit</span></button><button id="btn24958838548762874" class="btn disabled btn-default btn-tables"><span class="fa fa-trash-o"></span> <span class="label-tbl-button">Delete</span></button><button id="btn49633085964872303" class="btn btn-info btn-tables"><span class="fa fa-save"></span> <span class="label-tbl-button">Xls</span></button></div><div class="dataTables_filter" id="services-NutanixProvider-table_filter"><label>Filter<input aria-controls="services-NutanixProvider-table" placeholder="" class="form-control input-sm" type="search"></label></div><table style="width: 100%;" aria-describedby="services-NutanixProvider-table_info" role="grid" class="table table-striped table-hover dt-responsive dataTable no-footer dtr-inline" id="services-NutanixProvider-table" width="100%">
<thead><tr role="row"><th aria-label="" data-column-index="0" style="width: 58px;" colspan="1" rowspan="1" class="select-checkbox sorting_disabled"></th><th aria-label="Service name: activate to sort column descending" aria-sort="ascending" data-column-index="1" style="width: 580px;" colspan="1" rowspan="1" aria-controls="services-NutanixProvider-table" tabindex="0" class="sorting_asc">Service name</th><th aria-label="Comments: activate to sort column ascending" data-column-index="2" style="width: 432px;" colspan="1" rowspan="1" aria-controls="services-NutanixProvider-table" tabindex="0" class="sorting">Comments</th><th aria-label="Type: activate to sort column ascending" data-column-index="3" style="width: 285px;" colspan="1" rowspan="1" aria-controls="services-NutanixProvider-table" tabindex="0" class="sorting">Type</th><th aria-label="Deployed services: activate to sort column ascending" data-column-index="4" style="width: 98px;" colspan="1" rowspan="1" aria-controls="services-NutanixProvider-table" tabindex="0" class="sorting">Deployed services</th><th aria-label="User services: activate to sort column ascending" data-column-index="5" style="width: 98px;" colspan="1" rowspan="1" aria-controls="services-NutanixProvider-table" tabindex="0" class="sorting">User services</th></tr></thead><tbody><tr class="odd"><td class="dataTables_empty" colspan="6" valign="top">Empty</td></tr></tbody></table><div aria-live="polite" role="status" id="services-NutanixProvider-table_info" class="dataTables_info">No records</div><div id="services-NutanixProvider-table_paginate" class="dataTables_paginate paging_bootstrap pagination"><ul class="pagination"><li class="first disabled"><a href="#"><span class="fa fa-fast-backward "></span> </a></li><li class="prev disabled"><a href="#"><span class="fa fa-backward"></span> </a></li><li class="next disabled"><a href="#"><span class="fa fa-forward"></span> </a></li><li class="last disabled"><a href="#"><span class="fa fa-fast-forward"></span> </a></li></ul></div></div>
</div><!-- /CONTENT PANEL -->
<div class="widget-footer"><!-- FOOTER PANEL-->
@ -272,7 +273,7 @@
</div><!-- /HEAD PANEL -->
<div class="widget-body collapse in"> <!-- CONTENT PANEL -->
<div class="dataTables_wrapper form-inline no-footer" id="provi-table-log_wrapper"><div class="row"><div class="col-xs-8"><div class="DTTT btn-group-3d"></div></div><div class="col-xs-4"><div class="dataTables_filter" id="provi-table-log_filter"><label>Filter<input aria-controls="provi-table-log" placeholder="" class="form-control input-sm" type="search"></label></div></div></div><table style="width: 100%;" aria-describedby="provi-table-log_info" role="grid" class="table table-striped table-hover dataTable no-footer" id="provi-table-log" width="100%">
<div class="dataTables_wrapper form-inline no-footer" id="provi-table-log_wrapper"><div class="row"><div class="col-xs-8"></div><div class="col-xs-4"><div class="dataTables_filter" id="provi-table-log_filter"><label>Filter<input aria-controls="provi-table-log" placeholder="" class="form-control input-sm" type="search"></label></div></div></div><table style="width: 100%;" aria-describedby="provi-table-log_info" role="grid" class="table table-striped table-hover dt-responsive dataTable no-footer dtr-inline" id="provi-table-log" width="100%">
<thead><tr role="row"><th aria-label="Date: activate to sort column ascending" aria-sort="descending" colspan="1" rowspan="1" aria-controls="provi-table-log" tabindex="0" class="sorting_desc">Date</th><th aria-label="level: activate to sort column ascending" style="width: 70px;" colspan="1" rowspan="1" aria-controls="provi-table-log" tabindex="0" class="sorting">level</th><th aria-label="source: activate to sort column ascending" style="width: 70px;" colspan="1" rowspan="1" aria-controls="provi-table-log" tabindex="0" class="sorting">source</th><th aria-label="message: activate to sort column ascending" colspan="1" rowspan="1" aria-controls="provi-table-log" tabindex="0" class="sorting">message</th></tr></thead><tbody><tr class="odd"><td class="dataTables_empty" colspan="4" valign="top">Empty</td></tr></tbody></table><div class="row"><div class="col-xs-5"><div aria-live="polite" role="status" id="provi-table-log_info" class="dataTables_info">No records</div></div><div class="col-xs-7"><div id="provi-table-log_paginate" class="dataTables_paginate paging_bootstrap pagination"><ul class="pagination"><li class="first disabled"><a href="#"><span class="fa fa-fast-backward "></span> </a></li><li class="prev disabled"><a href="#"><span class="fa fa-backward"></span> </a></li><li class="next disabled"><a href="#"><span class="fa fa-forward"></span> </a></li><li class="last disabled"><a href="#"><span class="fa fa-fast-forward"></span> </a></li></ul></div></div></div></div>
</div><!-- /CONTENT PANEL -->
@ -313,124 +314,157 @@
</div>
</div>
</div>
</div><div style="padding-right: 17px; display: block;" id="modal-24207035703598578" class="modal fade in" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit services provider <b>Nutanix</b></h4>
</div>
<div class="row">
<div class="col-xs-12">
<h1>Overview</h1>
<ol class="breadcrumb">
<li><a id="lnk-dashboard" href="">Dashboard</a></li>
</ol>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-3">
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<img class="info-img" src="/static//adm/img/icons/users.png">
</div>
<div class="col-xs-6 text-right">
<p class="announcement-heading">236</p>
<p class="announcement-text">Users</p>
</div>
</div>
</div>
<a class="lnk-authenticators" href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
View Authenticators
</div>
<div class="modal-body">
<form novalidate="novalidate" class="form-horizontal" role="form"><input name="id" class="modal_field_data" value="6b52685a-90a2-513c-893d-8c04e824a3ab" type="hidden">
<div class="form-group">
<label title="" data-original-title="" for="name_field" class="col-sm-3 control-label" data-toggle="tooltip" data-title="Name of this element">Name</label>
<div class="col-sm-9">
<input aria-required="true" class="form-control modal_field_data" name="name" id="name_field" placeholder="Name of this element" value="Nutanix" required="" data-minval="987654321" data-maxval="" type="text">
</div>
</div>
<div class="form-group">
<label title="" data-original-title="" for="comments_field" class="col-sm-3 control-label" data-toggle="tooltip" data-title="Comments for this element">Comments</label>
<div class="col-sm-9">
<input class="form-control modal_field_data" name="comments" id="comments_field" placeholder="Comments for this element" value="Nutanix" data-minval="987654321" data-maxval="" type="text">
</div>
</div>
<div class="form-group">
<label title="" data-original-title="" for="host_field" class="col-sm-3 control-label" data-toggle="tooltip" data-title="Nutanix Acropolis Server IP or Hostname">Host</label>
<div class="col-sm-9">
<input aria-required="true" class="form-control modal_field_data" name="host" id="host_field" placeholder="Nutanix Acropolis Server IP or Hostname" value="192.168.1.130" required="" data-minval="" data-maxval="" type="text">
</div>
</div>
<div class="form-group">
<label title="" data-original-title="" for="port_field" class="col-sm-3 control-label" data-toggle="tooltip" data-title="Nutanix Acropolis server Port (default 9440)">Port</label>
<div class="col-sm-9">
<div class="input-group bootstrap-touchspin"><span style="display: none;" class="input-group-addon bootstrap-touchspin-prefix"></span><input aria-required="true" style="display: block;" class="form-control modal_field_data" name="port" id="port_field" placeholder="Nutanix Acropolis server Port (default 9440)" value="9440" required="" data-minval="987654321" data-maxval="987654321" type="text"><span style="display: none;" class="input-group-addon bootstrap-touchspin-postfix"></span><span class="input-group-btn-vertical"><button class="btn btn-default bootstrap-touchspin-up" type="button"><i class="glyphicon glyphicon-plus"></i></button><button class="btn btn-default bootstrap-touchspin-down" type="button"><i class="glyphicon glyphicon-minus"></i></button></span></div>
</div>
</div>
<div class="form-group">
<label title="" data-original-title="" for="username_field" class="col-sm-3 control-label" data-toggle="tooltip" data-title="User with valid privileges on Nutanix Acropolis">Username</label>
<div class="col-sm-9">
<input aria-required="true" class="form-control modal_field_data" name="username" id="username_field" placeholder="User with valid privileges on Nutanix Acropolis" value="admin" required="" data-minval="" data-maxval="" type="text">
</div>
</div>
<div class="form-group">
<label title="" data-original-title="" for="password_field" class="col-sm-3 control-label" data-toggle="tooltip" data-title="Password of the user of Nutanix Acropolis">Password</label>
<div class="col-sm-9">
<input aria-required="true" class="form-control modal_field_data" name="password" id="password_field" placeholder="Password of the user of Nutanix Acropolis" value="nutanix/4u" required="" data-minval="" data-maxval="" type="password">
</div>
</div>
<div class="form-group">
<label title="" data-original-title="" for="timeout_field" class="col-sm-3 control-label" data-toggle="tooltip" data-title="Timeout in seconds of connection to Nutanix">Timeout</label>
<div class="col-sm-9">
<div class="input-group bootstrap-touchspin"><span style="display: none;" class="input-group-addon bootstrap-touchspin-prefix"></span><input aria-required="true" style="display: block;" class="form-control modal_field_data" name="timeout" id="timeout_field" placeholder="Timeout in seconds of connection to Nutanix" value="10" required="" data-minval="987654321" data-maxval="987654321" type="text"><span style="display: none;" class="input-group-addon bootstrap-touchspin-postfix"></span><span class="input-group-btn-vertical"><button class="btn btn-default bootstrap-touchspin-up" type="button"><i class="glyphicon glyphicon-plus"></i></button><button class="btn btn-default bootstrap-touchspin-down" type="button"><i class="glyphicon glyphicon-minus"></i></button></span></div>
</div>
</div>
<div class="form-group">
<label title="" data-original-title="" for="macsRange_field" class="col-sm-3 control-label" data-toggle="tooltip" data-title="Range of valid macs for UDS managed machines">Macs range</label>
<div class="col-sm-9">
<input aria-required="true" class="form-control modal_field_data" name="macsRange" id="macsRange_field" placeholder="Range of valid macs for UDS managed machines" value="52:54:00:00:00:00-52:54:00:FF:FF:FF" readonly="" required="" data-minval="" data-maxval="" type="text">
</div>
</div></form>
<div class="col-xs-6 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
<div class="modal-footer">
<button id="modal-24207035703598578-footer-0" type="button" class="pull-left btn btn-info">Test</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary button-accept">Save</button>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<img class="info-img" src="/static//adm/img/icons/services.png">
</div>
<div class="col-xs-6 text-right">
<p class="announcement-heading">9</p>
<p class="announcement-text">Services</p>
</div>
</div>
</div>
<a class="lnk-service_providers" href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
View services
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="col-xs-6 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-success">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<img class="info-img" src="/static//adm/img/icons/assigned.png">
</div>
<div class="col-xs-6 text-right">
<p class="announcement-heading">1</p>
<p class="announcement-text">User services</p>
</div>
</div>
</div>
<a class="lnk-deployed_services" href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
View services pools
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-success">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<i class="fa fa-heart fa-5x" style="color: #C03030;"></i>
</div>
<div class="col-xs-6 text-right">
<p class="announcement-heading">0</p>
<p class="announcement-text">Restrained services pools</p>
</div>
</div>
</div>
<a class="lnk-deployed_services" href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
View services pools
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</a>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Assigned services graph</h3>
</div>
<div class="panel-body">
<div class="chart-medium">
<div style="padding: 0px; position: relative;" id="placeholder-assigned-chart" class="chart-content"><canvas height="250" width="848" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 848px; height: 250px;" class="flot-base"></canvas><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);" class="flot-text"><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;" class="flot-x-axis flot-x1-axis xAxis x1Axis"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 13px; text-align: center;">10/01/2014</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 84px; text-align: center;">11/01/2014</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 153px; text-align: center;">12/01/2014</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 224px; text-align: center;">01/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 296px; text-align: center;">02/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 360px; text-align: center;">03/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 431px; text-align: center;">04/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 500px; text-align: center;">05/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 571px; text-align: center;">06/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 640px; text-align: center;">07/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 712px; text-align: center;">08/01/2015</div></div><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;" class="flot-y-axis flot-y1-axis yAxis y1Axis"><div class="flot-tick-label tickLabel" style="position: absolute; top: 219px; left: 8px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 175px; left: 8px; text-align: right;">2</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 131px; left: 8px; text-align: right;">4</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 88px; left: 8px; text-align: right;">6</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 44px; left: 8px; text-align: right;">8</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 0px; left: 2px; text-align: right;">10</div></div></div><canvas height="250" width="848" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 848px; height: 250px;" class="flot-overlay"></canvas></div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Used services graph</h3>
</div>
<div class="panel-body">
<div class="chart-medium">
<div style="padding: 0px; position: relative;" id="placeholder-inuse-chart" class="chart-content"><canvas height="250" width="848" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 848px; height: 250px;" class="flot-base"></canvas><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);" class="flot-text"><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;" class="flot-x-axis flot-x1-axis xAxis x1Axis"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 13px; text-align: center;">10/01/2014</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 84px; text-align: center;">11/01/2014</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 153px; text-align: center;">12/01/2014</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 224px; text-align: center;">01/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 296px; text-align: center;">02/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 360px; text-align: center;">03/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 431px; text-align: center;">04/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 500px; text-align: center;">05/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 571px; text-align: center;">06/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 640px; text-align: center;">07/01/2015</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 65px; top: 232px; left: 712px; text-align: center;">08/01/2015</div></div><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;" class="flot-y-axis flot-y1-axis yAxis y1Axis"><div class="flot-tick-label tickLabel" style="position: absolute; top: 219px; left: 2px; text-align: right;">0.0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 188px; left: 2px; text-align: right;">0.5</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 156px; left: 2px; text-align: right;">1.0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 125px; left: 2px; text-align: right;">1.5</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 94px; left: 2px; text-align: right;">2.0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 63px; left: 2px; text-align: right;">2.5</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 31px; left: 2px; text-align: right;">3.0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 0px; left: 2px; text-align: right;">3.5</div></div></div><canvas height="250" width="848" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 848px; height: 250px;" class="flot-overlay"></canvas></div>
</div>
</div>
</div>
</div>
</div>
<!-- end -->
</div>
</div>

View File

@ -2,7 +2,28 @@
This states displays as default
*/
tr {
.row-maintenance-true {
color: $brand-danger;
}
.log-WARN {
color: $brand-warning;
}
.log-DEBUG {
color: $brand-success;
}
.log-INFO, .log-OTHER {
color: $brand-info;
}
.log-ERROR, &.log-FATAL {
color: $brand-danger;
}
/*tr {
&.row-state-B:nth-child(2n) > td, &.row-state-C:nth-child(2n) > td, &.row-state-E:nth-child(2n) > td, &.row-state-Y:nth-child(2n) > td, &.row-state-B:nth-child(2n+1) > td, &.row-state-C:nth-child(2n+1) > td, &.row-state-E:nth-child(2n+1) > td, &.row-state-Y:nth-child(2n+1) > td {
color: #FF6600 !important;
}
@ -34,7 +55,7 @@ tr {
&.log-ERROR, &.log-FATAL {
color: red;
}
}
}*/
// To position correctly things
@ -61,25 +82,19 @@ tr {
font-family: 'Andale Mono', 'Courier New'
}
.table tbody tr.active {
td, th {
background-color: $uds-background-color;
color: $uds-foreground-color;
}
}
.table tbody tr.selected {
td, th {
background-color: $uds-color-blue !important;
color: $uds-foreground-color !important;
}
background-color: $uds-color-blue;
color: $brand-warning;
&:hover {
background-color: $uds-color-blue-dark;
}
}
.table-striped > tbody > tr {
/*.table-striped > tbody > tr {
td.sorting_1 {
color: $uds-color-blue;
}
}
}*/
.dataTables_wrapper {
overflow-x: hidden;

View File

@ -9,34 +9,64 @@ $uds-background-color-lighter: #444444;
$uds-foreground-color: #ffffff;
$uds-color-blue: #1CA8DD;
$uds-color-blue-dark: #165B75;
$uds-panel-min-height: 500px;
// Bootstrap
$icon-font-path: "../fonts/";
// Brand colors
// $brand-primary:
$brand-success: #1BC98E;
$brand-info: #9F86FF;
$brand-warning: #E4D836;
$brand-danger: #E64759;
// Main page colors
$text-color: $uds-foreground-color;
$body-bg: $uds-background-color;
$headings-color: $uds-foreground-color;
// Headings colors
$headings-color: $brand-info;
// Border radious
$border-radius-base: 0px !default;
$border-radius-large: 0px !default;
$border-radius-small: 0px !default;
// Navbar colors
$navbar-inverse-bg: $uds-background-color;
$navbar-inverse-border: $uds-background-color;
$navbar-inverse-link-hover-bg: $uds-background-color-light;
$navbar-inverse-link-active-bg: $uds-background-color-light;
// Modal color
$modal-content-bg: $uds-background-color-light;
// State colors
$state-success-bg: $brand-success;
$state-success-text: $brand-success;
$state-info-bg: $brand-info;
$state-info-text: $brand-info;
$state-warning-bg: $brand-warning;
$state-warning-text: $brand-warning;
$state-danger-bg: $brand-danger;
$state-danger-text: $brand-danger;
// panel colors
$panel-bg: $uds-background-color-light;
$panel-footer-bg: $uds-background-color-light;
// Btn colors
$btn-default-color: $uds-foreground-color;
$btn-default-bg: $uds-background-color;
$btn-default-border: $uds-background-color-light;
// Pagination colors
$pagination-color: $uds-color-blue;
$pagination-hover-color: $uds-foreground-color;
$pagination-disabled-color: $uds-foreground-color;
@ -51,17 +81,28 @@ $pagination-hover-border: $uds-color-blue;
$pagination-diabled-border: $uds-color-blue;
// Breadcrums
$breadcrumb-separator: ' -> ';
$breadcrumb-bg: $uds-background-color;
// Input colors
$input-color: $uds-foreground-color;
$input-bg: $uds-background-color;
$table-bg-hover: $uds-color-blue;
// Table colors
$table-bg-hover: $uds-color-blue-dark;
$table-bg-accent: $uds-background-color-light;
// badges
$badge-color: $uds-foreground-color;
// pannels
$panel-primary-text: $uds-foreground-color;
$panel-success-text: $uds-foreground-color;
$panel-info-text: $uds-foreground-color;
$panel-warning-text: $uds-foreground-color;
$panel-danger-text: $uds-foreground-color;
// bower:scss
@import "bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower
@ -233,7 +274,7 @@ body {
> li > a {
color: #999999;
padding: 15px 15px 15px 25px;
padding: 15px 15px 15px 15px;
&:hover, &.active, &:focus {
color: #fff;