Skip to content

Commit c6b8d18

Browse files
author
Kristan Kenney
committed
Update sort options toolbar and menu
1 parent c5ae181 commit c6b8d18

27 files changed

+180
-159
lines changed

‎web/css/styles.min.css‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1300,7 +1300,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
13001300
}
13011301
.context-menu.sort-order span.name {
13021302
display: inline-block;
1303-
padding: 12px 28px 12px 12px;
1303+
padding: 12px;
13041304
width: 117px;
13051305
font-weight: 500;
13061306
}
@@ -1310,18 +1310,34 @@ div.l-content > div.l-separator:nth-of-type(4) {
13101310
width: 16px;
13111311
}
13121312
.context-menu.sort-order span.active {
1313-
background-color: #4f8bbc;
1314-
color: #fff;
1313+
background-color: #4f8bbc !important;
1314+
color: #4686b8;
1315+
font-size: 0.8rem;
1316+
background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.75) 50%,rgba(255,255,255,0.95) 95%);
1317+
text-shadow: 0px 1px rgba(255,255,255,0.8);
13151318
}
13161319
.context-menu.sort-order span:hover {
1317-
background-color: #777;
1318-
color: #fff;
1320+
color: #3b9de8;
1321+
text-shadow: 1px 1px rgba(255,255,255,0.5);
1322+
background: linear-gradient(to bottom, rgba(241,248,253,1) 0%,rgba(218,236,250,1) 50%,rgba(190,221,246,1) 51%,rgba(227,240,251,1) 100%);
1323+
box-shadow: inset 0px 0px 1px #fff,
1324+
inset 0px 0px 6px rgba(255,255,255,0.6);
1325+
transition: 0.2s;
13191326
}
1320-
.context-menu.sort-order span:active {
1321-
background-color: #4f8bbc;
1327+
.context-menu.sort-order span:active,.context-menu.sort-order span:focus {
1328+
background: linear-gradient(to bottom, rgba(210,232,250,1) 0%,rgba(187,220,247,1) 50%,rgba(162,207,244,1) 51%,rgba(194,224,248,1) 100%);
1329+
color: #046c98;
1330+
text-shadow: 0px -1px 1px rgba(255,255,255,0.5);
1331+
box-shadow: inset 0px 0px 1px #fff,
1332+
inset -1px -1px 4px rgba(220,220,220,0.4);
1333+
}
1334+
.context-menu.sort-order span.name i.fas.fa-sort-amount-down {
1335+
float: right;
1336+
margin-top: 2px;
1337+
}
1338+
.context-menu.sort-order li:last-child {
1339+
border-bottom: none;
13221340
}
1323-
1324-
13251341
.l-sort-toolbar {
13261342
float: right;
13271343
padding: 7px 0 7px 0;
@@ -1473,6 +1489,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
14731489
padding-right: 4px;
14741490
}
14751491

1492+
14761493
.subtitle {
14771494
color: #cc3366;
14781495
font-size: 0.8rem;
@@ -1558,13 +1575,17 @@ div.l-content > div.l-separator:nth-of-type(4) {
15581575
background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(255,255,255,1) 100%) !important;
15591576
border-left: 1px solid #ddd !important;
15601577
border-right: 1px solid #ddd !important;
1578+
border-bottom: 1px solid #ddd !important;
15611579
text-shadow: 0px 1px rgba(255,255,255,0.95);
1562-
box-shadow: inset 0px 0px 1px rgba(255,255,255,1), inset 0px 0px 4px rgba(255,255,255,0.8), 0px 4px 6px rgba(190,190,190,0.25) !important;
1580+
box-shadow: inset 0px 0px 1px rgba(255,255,255,1), inset 0px 0px 4px rgba(255,255,255,0.8), 0px 4px 6px rgba(190,190,190,0.3) !important;
15631581
border-top-left-radius: 0px;
15641582
border-top-right-radius: 0px;
15651583
border-bottom-left-radius: 5px;
15661584
border-bottom-right-radius: 5px;
15671585
min-height: 28px;
1586+
color: #707070;
1587+
padding: 0 0 0 14px;
1588+
overflow: hidden;
15681589
}
15691590

15701591
.table-header:hover {

‎web/js/init.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ $(document).ready(function(){
2727
$(window).scroll(function(){hover_menu()});
2828

2929
$('.l-sort-toolbar .sort-by').click(function(){
30-
$('.context-menu.sort-order').toggle().css({left: $(this).position().left - 10});
30+
$('.context-menu.sort-order').toggle().css({left: $(this).position().left - 0});
3131
});
3232

3333

@@ -109,11 +109,11 @@ $(document).ready(function(){
109109
$(this).addClass('active');
110110
VE.tmp.sort_par = $(this).parent('li').attr('entity');
111111
VE.tmp.sort_as_int = $(this).parent('li').attr('sort_as_int');
112-
VE.tmp.sort_direction = $(this).hasClass('up')*1 || -1;
112+
VE.tmp.sort_direction = $(this).hasClass('up')*1 || -1;
113113

114114
$('.l-sort .sort-by span b').html($(this).parent('li').find('.name').html());
115-
$('.l-sort .sort-by i').removeClass('l-icon-up-arrow l-icon-down-arrow');
116-
$(this).hasClass('up') ? $('.l-sort .sort-by i').addClass('l-icon-up-arrow') : $('.l-sort .sort-by i').addClass('l-icon-down-arrow');
115+
$('.l-sort .sort-by i').removeClass('fa-sort-amount-up fa-sort-amount-down');
116+
$(this).hasClass('up') ? $('.l-sort .sort-by i').addClass('fa-sort-amount-up') : $('.l-sort .sort-by i').addClass('fa-sort-amount-down');
117117
$('.units .l-unit').sort(function (a, b) {
118118
if(VE.tmp.sort_as_int)
119119
return parseInt($(a).attr(VE.tmp.sort_par)) >= parseInt($(b).attr(VE.tmp.sort_par)) ? VE.tmp.sort_direction : VE.tmp.sort_direction * -1;

‎web/templates/admin/list_backup.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<!-- /.l-separator -->
3737

3838
<div class="l-center units animated fadeIn">
39-
<div class="l-unit header table-header">
39+
<div class="header table-header">
4040
<div class="l-unit__col l-unit__col--right step-top">
4141
<div>
4242
<div class="clearfix l-unit__stat-col--left super-compact">

‎web/templates/admin/list_cron.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@
1010
}
1111
?>
1212
</div>
13-
<ul class="context-menu sort-order animated bounceIn" style="display:none;">
14-
<li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
15-
<li entity="sort-name"><span class="name"><?=__('Command')?></span><span class="up">&nbsp;</span></li>
16-
<li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
13+
<ul class="context-menu sort-order animated fadeIn" style="display:none;">
14+
<li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
15+
<li entity="sort-name"><span class="name"><?=__('Command')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
16+
<li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
1717
</ul>
1818
<div class="l-sort-toolbar clearfix">
1919
<table>
2020
<tr>
2121
<td class="sort-by">
22-
<i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
22+
<?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
2323
</td>
2424
<td class="l-sort-toolbar__search-box">
2525
<form action="/search/" method="get">
@@ -54,7 +54,7 @@
5454
<!-- /.l-separator -->
5555

5656
<div class="l-center units animated fadeIn">
57-
<div class="l-unit header table-header">
57+
<div class="header table-header">
5858
<div class="l-unit__col l-unit__col--right step-top">
5959
<div class="clearfix l-unit__stat-col--left super-compact">
6060
<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" onChange="checkedAll('objects');">

‎web/templates/admin/list_db.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,19 @@
3232
}
3333
?>
3434
</div>
35-
<ul class="context-menu sort-order animated bounceIn" style="display:none;">
36-
<li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
37-
<li entity="sort-name"><span class="name"><?=__('Database')?></span><span class="up">&nbsp;</span></li>
38-
<li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
39-
<li entity="sort-user"><span class="name"><?=__('User')?></span><span class="up">&nbsp;</span></li>
40-
<li entity="sort-server"><span class="name"><?=__('Host')?></span><span class="up">&nbsp;</span></li>
41-
<li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
35+
<ul class="context-menu sort-order animated fadeIn" style="display:none;">
36+
<li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
37+
<li entity="sort-name"><span class="name"><?=__('Database')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
38+
<li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
39+
<li entity="sort-user"><span class="name"><?=__('User')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
40+
<li entity="sort-server"><span class="name"><?=__('Host')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
41+
<li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
4242
</ul>
4343
<div class="l-sort-toolbar clearfix">
4444
<table>
4545
<tr>
4646
<td class="sort-by">
47-
<i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
47+
<?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
4848
</td>
4949
<td class="l-sort-toolbar__search-box">
5050
<form action="/search/" method="get">
@@ -77,7 +77,7 @@
7777
<div class="l-separator"></div>
7878
<!-- /.l-separator -->
7979
<div class="l-center units animated fadeIn">
80-
<div class="l-unit header table-header">
80+
<div class="header table-header">
8181
<div class="l-unit__col l-unit__col--right step-top">
8282
<div class="clearfix l-unit__stat-col--left super-compact">
8383
<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" onChange="checkedAll('objects');">

‎web/templates/admin/list_dns.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@
33
<div class="l-unit-toolbar__buttonstrip">
44
<a href="/add/dns/" class="ui-button cancel" title="<?=__('Add DNS Domain')?>"><i class="fas fa-plus-circle status-icon-green"></i> <?=__('Add DNS Domain')?></a>
55
</div>
6-
<ul class="context-menu sort-order animated bounceIn" style="display:none;">
7-
<li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
8-
<li entity="sort-expire" sort_as_int="1"><span class="name"><?=__('Expire')?></span><span class="up">&nbsp;</span></li>
9-
<li entity="sort-name"><span class="name"><?=__('Domain')?></span><span class="up">&nbsp;</span></li>
10-
<li entity="sort-ip"><span class="name"><?=__('IP address')?></span><span class="up">&nbsp;</span></li>
11-
<li entity="sort-records"><span class="name"><?=__('Records')?></span><span class="up">&nbsp;</span></li>
12-
<li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
6+
<ul class="context-menu sort-order animated fadeIn" style="display:none;">
7+
<li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
8+
<li entity="sort-expire" sort_as_int="1"><span class="name"><?=__('Expire')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
9+
<li entity="sort-name"><span class="name"><?=__('Domain')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
10+
<li entity="sort-ip"><span class="name"><?=__('IP address')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
11+
<li entity="sort-records"><span class="name"><?=__('Records')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
12+
<li entity="sort-star" sort_as_int="1"><span class="name"> <i class="fas fa-sort-amount-down"></i><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
1313
</ul>
1414
<div class="l-sort-toolbar clearfix">
1515
<table>
1616
<tr>
1717
<td class="sort-by">
18-
<i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
18+
<?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
1919
</td>
2020
<td class="l-sort-toolbar__search-box">
2121
<form action="/search/" method="get">
@@ -49,7 +49,7 @@
4949

5050

5151
<div class="l-center units animated fadeIn">
52-
<div class="l-unit header table-header">
52+
<div class="header table-header">
5353
<div class="l-unit__col l-unit__col--right step-top">
5454
<div class="clearfix l-unit__stat-col--left super-compact">
5555
<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" onChange="checkedAll('objects');">

‎web/templates/admin/list_dns_rec.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444

4545
<div class="l-center units animated fadeIn">
4646

47-
<div class="l-unit header table-header">
47+
<div class="header table-header">
4848
<div class="l-unit__col l-unit__col--left clearfix">
4949
<div class="text-center jump-small-top"></div>
5050
</div>

‎web/templates/admin/list_firewall.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@
77
echo '<a class="ui-button cancel" href="/list/firewall/banlist/"><i class="fas fa-eye status-icon-red"></i> '.__('list fail2ban').'</a>';
88
} ?>
99
</div>
10-
<ul class="context-menu sort-order animated bounceIn" style="display:none;">
11-
<li entity="sort-action"><span class="name active"><?=__('Action')?></span><span class="up">&nbsp;</span></li>
12-
<li entity="sort-protocol"><span class="name"><?=__('Protocol')?></span><span class="up">&nbsp;</span></li>
13-
<li entity="sort-port"><span class="name"><?=__('Port')?></span><span class="up">&nbsp;</span></li>
14-
<li entity="sort-ip" sort_as_int="1"><span class="name"><?=__('IP address')?></span><span class="up">&nbsp;</span></li>
15-
<li entity="sort-comment"><span class="name"><?=__('Comment')?></span><span class="up">&nbsp;</span></li>
16-
<li entity="sort-star"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
10+
<ul class="context-menu sort-order animated fadeIn" style="display:none;">
11+
<li entity="sort-action"><span class="name active"><?=__('Action')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
12+
<li entity="sort-protocol"><span class="name"><?=__('Protocol')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
13+
<li entity="sort-port"><span class="name"><?=__('Port')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
14+
<li entity="sort-ip" sort_as_int="1"><span class="name"><?=__('IP address')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
15+
<li entity="sort-comment"><span class="name"><?=__('Comment')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
16+
<li entity="sort-star"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
1717
</ul>
1818
<div class="l-sort-toolbar clearfix">
1919
<table>
2020
<tr>
2121
<td class="sort-by">
22-
<?=__('sort by');?>: <span><b><?=__('Action')?></b></span> <i class="l-icon-down-arrow media-top"></i>
22+
<?=__('sort by');?>: <span><b><?=__('Action')?> <i class="fas fa-sort-amount-down"></i></b></span>
2323
</td>
2424
<td>
2525
<form action="/bulk/firewall/" method="post" id="objects">
@@ -43,7 +43,7 @@
4343
<!-- /.l-separator -->
4444

4545
<div class="l-center units compact animated fadeIn">
46-
<div class="l-unit header table-header">
46+
<div class="header table-header">
4747
<div class="l-unit__col l-unit__col--right step-top">
4848
<div>
4949
<div class="clearfix l-unit__stat-col--left super-compact">

‎web/templates/admin/list_firewall_banlist.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<!-- /.l-separator -->
3030

3131
<div class="l-center units animated fadeIn">
32-
<div class="l-unit header table-header">
32+
<div class="header table-header">
3333
<div class="l-unit__col l-unit__col--right step-top">
3434
<div class="clearfix l-unit__stat-col--left super-compact">
3535
<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" onChange="checkedAll('objects');">

0 commit comments

Comments
 (0)