Skip to content

Commit 008f64a

Browse files
author
Kristan Kenney
committed
Enable table view throughout user interface
This reduces the amount of wasted space throughout the interface and presents information in a cleaner fashion.
1 parent 5c027f5 commit 008f64a

24 files changed

+759
-920
lines changed

‎web/css/styles.min.css‎

Lines changed: 97 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -750,7 +750,6 @@ body {
750750
.body-login, .body-reset {
751751
height: auto;
752752
padding-top: 10%;
753-
/*background: url(/images/edit_bg.png);*/
754753
background-color: #eee;
755754
}
756755

@@ -781,6 +780,10 @@ a {
781780
text-align: center;
782781
}
783782

783+
.text-small {
784+
font-size: 0.85em;
785+
}
786+
784787
.check-label {
785788
display: inline-block;
786789
cursor: pointer;
@@ -854,7 +857,7 @@ input[type="checkbox"] {
854857
}
855858

856859
.l-menu__item.l-menu__item--active a {
857-
color: #ff6701;
860+
color: #2b72b9;
858861
font-size: 12px;
859862
background-color: #fff;
860863
text-shadow: none;
@@ -883,9 +886,11 @@ input[type="checkbox"] {
883886
transition: 0.3s;
884887
}
885888
.l-menu__item a:active {
889+
background-color: #336699;
890+
background: linear-gradient(to bottom, rgba(19,135,223,1) 0%,rgba(19,122,207,1) 50%,rgba(14,108,196,1) 51%,rgba(21,82,167,1) 99%,rgba(21,82,167,1) 99%,rgba(13,33,111,1) 100%);
886891
color: #fff;
887-
text-shadow: 0px 1px rgba(0,0,0,0.35);
888-
background-color: #ff6701;
892+
text-shadow: 0px -1px rgba(0,0,0,0.35);
893+
transition: 0.3s;
889894
}
890895

891896
.l-menu.active .l-menu__item.focus a {
@@ -929,16 +934,16 @@ input[type="checkbox"] {
929934
}
930935
.l-profile__username {
931936
float: left;
932-
color: #d2f0ff;
937+
color: #8ed8fd;
933938
padding: 10px 0 0 10px;
934939
margin-right: 2px;
935940
font-weight: 600;
936941
}
937942
.l-profile__username:hover {
938-
color: #ffd62e;
943+
color: #d2f0ff;
939944
}
940945
.l-profile__username:active {
941-
color: #f79b44;
946+
color: #56a9d2;
942947
}
943948

944949
.l-profile__logout {
@@ -948,10 +953,10 @@ input[type="checkbox"] {
948953
font-weight: 600;
949954
}
950955
.l-profile__logout:hover {
951-
color: #ffd62e;
956+
color: #f5ffc3 !important;
952957
}
953958
.l-profile__logout:active {
954-
color: #f79b44;
959+
color: #d0e859;
955960
}
956961
.lang-cn .l-profile__logout {
957962
padding: 8px 5px;
@@ -1430,7 +1435,13 @@ div.l-content > div.l-separator:nth-of-type(4) {
14301435
/*color: #92af0b;*/
14311436
}
14321437

1433-
1438+
.subtitle {
1439+
color: #ff6701;
1440+
font-size: 13px;
1441+
font-weight: 600;
1442+
margin: 20px 0 18px 129px;
1443+
text-transform: uppercase;
1444+
}
14341445

14351446
.l-select {
14361447
width: 178px;
@@ -1485,13 +1496,17 @@ div.l-content > div.l-separator:nth-of-type(4) {
14851496

14861497
.l-unit {
14871498
color: #707070;
1488-
padding: 0 0 0 15px;
1499+
padding: 0 0 0 24px;
14891500
overflow: hidden;
14901501
font-size: 13px;
14911502
}
1503+
1504+
.table-header {
1505+
font-size: 1.05em;
1506+
}
1507+
14921508
.units .l-unit {
14931509
border-bottom: 1px solid #ddd;
1494-
border-left: 2px solid #fff;
14951510
}
14961511
.units .l-unit.l-unit--starred {
14971512
border-left: 2px solid #ff6701;
@@ -1613,9 +1628,10 @@ div.l-content > div.l-separator:nth-of-type(4) {
16131628
vertical-align: top;
16141629
}
16151630
.l-unit__col--left {
1616-
width: 124px;
1631+
width: 100px;
16171632
padding-right: 10px;
16181633
}
1634+
16191635
.units.compact .l-unit__col--left {
16201636
vertical-align: top;
16211637
}
@@ -1640,9 +1656,10 @@ div.l-content > div.l-separator:nth-of-type(4) {
16401656
}
16411657

16421658
.l-unit__date {
1643-
font-size: 13px;
1659+
font-size: 11px;
16441660
margin-top: 10px;
16451661
padding-bottom: 30px;
1662+
text-transform: uppercase;
16461663
}
16471664

16481665
.l-unit__suspended {
@@ -1734,6 +1751,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
17341751
.l-unit__stats {
17351752
margin-bottom: 50px;
17361753
}
1754+
17371755
.l-unit__stats table {
17381756
width: 100%;
17391757
table-layout: fixed;
@@ -1745,13 +1763,16 @@ div.l-content > div.l-separator:nth-of-type(4) {
17451763
}
17461764
.l-unit__stat-col--left {
17471765
float: left;
1748-
width: 124px;
1766+
width: 110px;
17491767
}
17501768
.l-unit__stat-col--left.compact {
17511769
width: 70px;
17521770
}
17531771
.l-unit__stat-col--left.compact-2 {
1754-
width: 95px;
1772+
width: 80px;
1773+
}
1774+
.l-unit__stat-col--left.compact-3 {
1775+
width: 90px;
17551776
}
17561777
.l-unit__stat-col--left.wide {
17571778
width: 190px;
@@ -1766,6 +1787,9 @@ div.l-content > div.l-separator:nth-of-type(4) {
17661787
width: 550px;
17671788
}
17681789

1790+
.l-unit__stat-col--left.wide-5 {
1791+
width: 330px;
1792+
}
17691793

17701794
.l-unit__stat-col--left.small-2 {
17711795
line-height: 11px;
@@ -2283,6 +2307,9 @@ body.mobile .l-unit-toolbar__col--right {
22832307
background-position: -78px -482px;
22842308
}
22852309

2310+
.icon-pad-right {
2311+
margin-right: 5px;
2312+
}
22862313

22872314
.l-icon-up-arrow, .l-icon-down-arrow, .l-icon-star, .l-icon-to-top, .l-icon-shortcuts, .l-icon-star-orange, .l-icon-star-blue {
22882315
display: inline-block;
@@ -3099,13 +3126,24 @@ a.button.cancel {
30993126

31003127
.login {
31013128
background-color: #fff;
3102-
box-shadow: 0 2px 8px rgba(100, 100, 100, 0.3);
3129+
box-shadow: 0px 9px 35px rgba(70, 70, 70, 0.7);
31033130
font-family: 'Exo 2', Arial, Helvetica,sans-serif;
31043131
margin: 0;
31053132
padding: 0;
31063133
text-align: left;
31073134
vertical-align: top;
31083135
width: 500px;
3136+
border-radius: 5px;
3137+
}
3138+
3139+
.qr-code {
3140+
border: 1px solid #cfcfcf;
3141+
border-radius: 4px;
3142+
box-shadow: 0px 1px 4px rgba(0,0,0,0.15);
3143+
}
3144+
3145+
.password-option {
3146+
margin-top: 15px;
31093147
}
31103148

31113149
.login a.error {
@@ -3241,11 +3279,20 @@ form#vstobjects.suspended {
32413279
background-color: #3BF0E6 !important;
32423280
}
32433281

3282+
.l-sort__create-btn:active #tooltip {
3283+
background-color: #54a6e5;
3284+
}
32443285

3286+
.status-icon-red {
3287+
color: #ff3333;
3288+
}
32453289

3290+
.status-icon-green {
3291+
color: #53ba55;
3292+
}
32463293

3247-
.l-sort__create-btn:active #tooltip {
3248-
background-color: #54a6e5;
3294+
.status-icon-orange {
3295+
color: #faab00;
32493296
}
32503297

32513298
.noselect {
@@ -3318,29 +3365,36 @@ form#vstobjects.suspended {
33183365
}
33193366

33203367
.shortcuts {
3321-
background: rgba(50, 50, 50, 0.9);
3368+
background: rgba(20, 20, 20, 0.92);
33223369
display: inline-block;
33233370
position: fixed;
33243371
left: 50%;
33253372
bottom: 0;
33263373
color: #eee;
33273374
width: 800px;
3328-
border: 1px solid #333;
3329-
font-size: 13px;
3375+
border: 1px solid rgba(255,255,255,0.7);
3376+
border-bottom: 0px;
3377+
font-size: 12px;
33303378
z-index: 120;
33313379
transform: translate(-50%, 0);
3380+
border-top-left-radius: 6px;
3381+
border-top-right-radius: 6px;
3382+
box-shadow: 0px 3px 40px rgba(0,0,0,0.6);
33323383
}
33333384
.shortcuts .header {
33343385
border-bottom: 1px solid #333;
33353386
height: 43px;
33363387
}
3388+
33373389
.shortcuts .title {
33383390
text-transform: uppercase;
33393391
color: #ffcc00;
33403392
padding: 7px 0 7px 14px;
33413393
display: inline-block;
33423394
float: left;
3343-
font-size: 12px;
3395+
font-size: 14px;
3396+
letter-spacing: -0.01em;
3397+
33443398
}
33453399
.shortcuts .close {
33463400
background: url("/images/sprite.png?1446554103") repeat scroll -408px -469px;
@@ -3468,10 +3522,30 @@ form#vstobjects.suspended {
34683522
font-size: 13px;
34693523
}
34703524

3525+
.ui-dialog {
3526+
font-family: 'Exo 2', Arial, Helvetica, sans-serif !important;
3527+
font-weight: 500 !important;
3528+
background-color: rgba(245,245,245,0.87) !important;
3529+
box-shadow: 0 8px 50px 0 rgba(0, 0, 0, 0.55) !important;
3530+
border-radius: 6px !important;
3531+
border: 1px solid rgba(255,255,255,0.9) !important;
3532+
text-align: center !important;
3533+
}
3534+
34713535
.ui-dialog .ui-dialog-content {
3536+
color: #121212 !important;
34723537
padding: 10px 26px 30px !important;
34733538
}
34743539

3540+
.ui-dialog-buttonpane {
3541+
border-color: #aaaaaa !important;
3542+
}
3543+
3544+
.ui-widget-overlay {
3545+
opacity: 0.8 !important;
3546+
background: rgba(10,10,10,0.9) !important;
3547+
}
3548+
34753549
.helper-container {
34763550
float: right;
34773551
height: 293px;

‎web/templates/admin/edit_mail.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,27 +58,27 @@
5858
</tr>
5959
<tr>
6060
<td class="vst-text input-label">
61-
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_antispam" <?php if ($v_antispam == 'yes') echo "checked=yes"; ?>> <?php print __('AntiSpam Support');?></label>
61+
<?php print __('Catchall email');?>
6262
</td>
6363
</tr>
6464
<tr>
65-
<td class="vst-text input-label">
66-
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_antivirus" <?php if ($v_antivirus == 'yes') echo "checked=yes"; ?>> <?php print __('AntiVirus Support');?></label>
65+
<td>
66+
<input type="text" size="20" class="vst-input" name="v_catchall" value="<?=htmlentities(trim($v_catchall, "'"))?>" > <?php /*'*/ ?>
6767
</td>
6868
</tr>
6969
<tr>
7070
<td class="vst-text input-label">
71-
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_dkim" <?php if ($v_dkim == 'yes') echo "checked=yes"; ?>> <?php print __('DKIM Support');?></label>
71+
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_antispam" <?php if ($v_antispam == 'yes') echo "checked=yes"; ?>> <?php print __('AntiSpam Support');?></label>
7272
</td>
7373
</tr>
7474
<tr>
7575
<td class="vst-text input-label">
76-
<?php print __('Catchall email');?>
76+
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_antivirus" <?php if ($v_antivirus == 'yes') echo "checked=yes"; ?>> <?php print __('AntiVirus Support');?></label>
7777
</td>
7878
</tr>
7979
<tr>
80-
<td>
81-
<input type="text" size="20" class="vst-input" name="v_catchall" value="<?=htmlentities(trim($v_catchall, "'"))?>" >
80+
<td class="vst-text input-label">
81+
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_dkim" <?php if ($v_dkim == 'yes') echo "checked=yes"; ?>> <?php print __('DKIM Support');?></label>
8282
</td>
8383
</tr>
8484
</table>

‎web/templates/admin/edit_mail_acc.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -204,10 +204,10 @@
204204
<td><div><?=__('Normal password')?></div></td>
205205
</tr>
206206
<?
207-
list($http_host, $port) = explode(':', $_SERVER["HTTP_HOST"].":");
208-
$webmail = "http://".$http_host."/webmail/";
209-
if (!empty($_SESSION['MAIL_URL'])) $webmail = $_SESSION['MAIL_URL'];
210-
?>
207+
list($http_host, $port) = explode(':', $_SERVER["HTTP_HOST"].":");
208+
$webmail = "http://".$http_host."/webmail/";
209+
if (!empty($_SESSION['MAIL_URL'])) $webmail = $_SESSION['MAIL_URL'];
210+
?>
211211
<tr>
212212
<td><?=__('Webmail URL')?>:</td>
213213
<td><div><a class="vst" href="<?=$webmail?>" target="_blank"><?=$webmail?> <i></i></a></div></td>

‎web/templates/admin/edit_user.html‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,17 +67,13 @@
6767
<input type="text" size="20" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>">
6868
</td>
6969
</tr>
70-
<tr>
71-
<td class="vst-text input-label">
72-
<?php print __('2 Factor Authentication');?>
73-
</td>
74-
</tr>
7570
<tr>
7671
<td>
77-
<label><input type="checkbox" class="vst-checkbox" name="v_twofa" <?php if(!empty($v_twofa)) echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_twofa(this)"> <?php print __('Enable 2FA');?></label>
72+
<label><input type="checkbox" class="vst-checkbox password-option" name="v_twofa" <?php if(!empty($v_twofa)) echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_twofa(this)"> <?php print __('Enable 2FA');?></label>
7873
<?php if (!empty($v_twofa)) { ?>
74+
<p><?php echo __('2FA Reset Code:').' '.$v_twofa; ?></br></p>
7975
<p><?php echo __('Please scan the code below in your 2FA application:'); ?></p>
80-
<img src="<?php echo $v_qrcode; ?>">
76+
<div><img class="qr-code" src="<?php echo $v_qrcode; ?>"></div>
8177
<?php } ?>
8278
</td>
8379
</tr>
@@ -265,4 +261,4 @@
265261
</tr>
266262
</table>
267263
</form>
268-
</div>
264+
</div>

0 commit comments

Comments
 (0)