Further UI tidy (hestiacp#2941)

* Tidy .vst-text usage

* Refactor .step-top and .input-label to utility classes

* Remove unused .step-right

* Tidy .data class

* Migrate .step-left to .u-pl50

* Tidy clearfix

Author: AlecRust

web/css/src/themes/dark.css

@@ -854,8 +854,6 @@ a.vst-text:active b {
 
 .additional-control.remove-ns {}
 
-.data .step-left {}
-
 .hide-password {}
 
 .toggle-psw-visibility-icon {}
@@ -1383,10 +1381,6 @@ form#vstobjects.suspended {
 
 }
 
-.shortcuts ul li.step-top {
-
-}
-
 .shortcuts ul li span {
 
 }

web/css/src/themes/default.css

@@ -198,16 +198,6 @@ a {
   color: #7c7c7c;
 }
 
-.clearfix::before,
-.clearfix::after {
-  content: "";
-  display: table;
-}
-
-.clearfix::after {
-  clear: both;
-}
-
 .text-right {
   text-align: right;
 }
@@ -1011,18 +1001,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   padding-left: 96px;
 }
 
-.l-sort-toolbar td.step-right:first-of-type {
-  padding-right: 20px;
-}
-
-.l-sort-toolbar td:nth-of-type(2) {
-  /* padding-right: 60px; */
-}
-
-.l-sort-toolbar td:last-of-type {
-  /* padding-left: 40px; */
-}
-
 .l-sort-toolbar__filter-apply {
   float: left;
   width: 32px;
@@ -1442,10 +1420,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   vertical-align: top;
 }
 
-.l-unit__col--left.step-left {
-  padding-left: 30px;
-}
-
 .l-unit__col--right.total {
   padding-left: 16px;
 }
@@ -1454,14 +1428,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   padding-left: 78px;
 }
 
-.l-sort-toolbar .step-left {
-  padding-left: 40px;
-}
-
-.step-right {
-  padding-right: 40px;
-}
-
 .l-unit__date {
   font-size: 11px;
   margin-top: 10px;
@@ -2257,23 +2223,11 @@ body.mobile .l-icon-shortcuts {
   font-weight: 600;
 }
 
-.input-label {
-  padding-top: 6px;
-}
-
 .data input[type="checkbox"] {
   display: inline;
   cursor: pointer;
 }
 
-.step-top {
-  padding-top: 18px;
-}
-
-.step-top-small {
-  padding-top: 14px;
-}
-
 .jump-top {
   margin-top: -60px;
 }
@@ -2380,10 +2334,6 @@ label:hover {
   background-color: #fff;
 }
 
-.vst-text {
-  cursor: default;
-}
-
 a.vst-text,
 a.vst-text b {
   color: #326b9b;
@@ -2604,10 +2554,6 @@ a.vst-text:active b {
   display: none;
 }
 
-.data .step-left {
-  padding-left: 50px;
-}
-
 .hide-password {
   color: #aaa;
   margin-left: -36px;
@@ -3546,10 +3492,6 @@ form#vstobjects.suspended {
   padding: 5px 20px;
 }
 
-.shortcuts ul li.step-top {
-  padding-top: 30px;
-}
-
 .shortcuts ul li span {
   color: #ff3478;
   display: inline-block;
@@ -3935,6 +3877,16 @@ meter[value="4"]::-moz-meter-bar { background: green; }
 /* Global utilities
    ========================================================================== */
 
+.clearfix::before,
+.clearfix::after {
+  content: " ";
+  display: table;
+}
+
+.clearfix::after {
+  clear: both;
+}
+
 .hidden {
   display: none;
 }
@@ -3947,6 +3899,22 @@ meter[value="4"]::-moz-meter-bar { background: green; }
   margin-bottom: 20px !important;
 }
 
+.u-pt6 {
+  padding-top: 6px !important;
+}
+
+.u-pt18 {
+  padding-top: 18px !important;
+}
+
+.u-pt30 {
+  padding-top: 30px !important;
+}
+
+.u-pl50 {
+  padding-left: 50px !important;
+}
+
 .u-inputWidth {
   width: 380px !important;
 }

web/css/src/themes/vestia.css

@@ -577,7 +577,7 @@ meter {
   margin-right: 15px;
 }
 
-td.vst-text.input-label.step-top.advanced-options .fas {
+td.advanced-options .fas {
   display: none !important;
 }
 

web/css/themes/default.min.css

@@ -56,7 +56,7 @@ App.Listeners.WEB.keypress_ftp_username = function() {
         if (current_val.trim() != '') {
             App.Actions.WEB.update_ftp_username_hint(ref, current_val);
         }
-        
+
         ref.bind('keypress input', function(evt) {
             clearTimeout(window.frp_usr_tmt);
             window.frp_usr_tmt = setTimeout(function() {
@@ -78,7 +78,7 @@ App.Actions.WEB.update_ftp_path_hint = function(elm, hint) {
     if (hint[0] != '/') {
         hint = '/' + hint;
     }
-    
+
     hint = hint.replace(/\/(\/+)/g, '/');
 
     $(elm).parent().find('.v-ftp-path-hint').text(hint);
@@ -92,7 +92,7 @@ App.Listeners.WEB.keypress_ftp_path = function() {
         if (current_val.trim() != '') {
             App.Actions.WEB.update_ftp_path_hint(ref, current_val);
         }
-        
+
         ref.bind('keypress input', function(evt) {
             clearTimeout(window.frp_usr_tmt);
             window.frp_usr_tmt = setTimeout(function() {
@@ -108,16 +108,16 @@ App.Listeners.WEB.keypress_ftp_path = function() {
 App.Actions.WEB.add_ftp_user_form = function() {
     var ref = $('#templates').find('.ftptable-nrm').clone(true);
     var index = $('.data-col2 .ftptable').length + 1;
-    
+
     ref.find('input').each(function(i, elm) {
         var attr_value = $(elm).prop('name').replace('%INDEX%', index);
         $(elm).prop('name', attr_value);
     });
-    
+
     ref.find('.ftp-user-number').text(index);
-    
+
     $('#ftp_users').append(ref);
-    
+
     var index = 1;
     $('.data-col2 .ftp-user-number:visible').each(function(i, o) {
         $(o).text(index);
@@ -134,13 +134,13 @@ App.Actions.WEB.remove_ftp_user = function(elm) {
     }
     ref.removeClass('ftptable-nrm');
     ref.hide();
-    
+
     var index = 1;
     $('.data-col2 .ftp-user-number:visible').each(function(i, o) {
         $(o).text(index);
         index += 1;
     });
-    
+
     if ($('.ftptable-nrm:visible').length == 0) {
         $('.add-new-ftp-user-button').hide();
         $('input[name="v_ftp"]').prop('checked', false);
@@ -193,22 +193,22 @@ App.Actions.WEB.toggle_letsencrypt = function(elm) {
     }
 }
 
-App.Actions.WEB.randomPasswordGenerated = function(elm) { 
+App.Actions.WEB.randomPasswordGenerated = function(elm) {
     return App.Actions.WEB.passwordChanged(elm);
 }
 
-App.Actions.WEB.passwordChanged = function(elm) { 
+App.Actions.WEB.passwordChanged = function(elm) {
     var ref = $(elm).parents('.ftptable');
     if (ref.find('.vst-email-alert-on-psw').length == 0) {
         var inp_name = ref.find('.v-ftp-user-is-new').prop('name');
         inp_name = inp_name.replace('is_new', 'v_ftp_email');
         ref.find('tr:last').after('<tr>\
-                                        <td class="vst-text step-left input-label">\
+                                        <td class="u-pl50 u-pt6">\
                                              Send FTP credentials to email\
                                         </td>\
                                     </tr>\
                                     <tr>\
-                                        <td class="step-left">\
+                                        <td class="u-pl50">\
                                             <input type="text" value="" name="' + inp_name + '" class="vst-input vst-email-alert-on-psw">\
                                         </td>\
                                     </tr>');
@@ -237,19 +237,19 @@ $(function() {
             $('.stats-auth').show();
         }
     });
-    
+
     $('select[name="v_nginx_cache"]').change(function(evt){
         var select = $(evt.target);
-    
+
         if(select.val() != 'yes'){
             $('#v-clear-cache').hide();
             $('#v_nginx_cache_length').hide();
         } else {
             $('#v-clear-cache').show();
             $('#v_nginx_cache_length').show();
         }
-    });  
-    
+    });
+
     $('select[name="v_proxy_template"]').change(function(evt){
         var select = $(evt.target);
 
@@ -263,7 +263,7 @@ $(function() {
         } else {
             $('#v-clear-cache').show();
         }
-    });  
+    });
 
     $('#vstobjects').on('submit', function(evt) {
         $('input[disabled]').each(function(i, elm) {
@@ -292,7 +292,7 @@ function elementHideShow(element){
 }
 
 $('.v-redirect-custom-value').change( function(){
-    
+
     if(this.value == "custom"){
         $('#custom_redirect').show();
     }else{

web/css/themes/vestia.min.css

@@ -10,7 +10,7 @@
         <div style="margin-top: 4px;"></div><a href="javascript:elementHideShow('banner');">Hide</a></div>
       </div>
 <?php
-    } 
+    }
   }
 ?>
   <div title="<?=_('Confirmation');?>" class="confirmation-text-redirect hidden">
@@ -29,7 +29,7 @@
       <li><span class="key">Ctrl + Enter</span><?=_('Save Form')?></li>
       <li><span class="key">Ctrl + Backspace</span><?=_('Cancel saving form')?></li>
 
-      <li class="step-top"><span class="key">1</span><?=_('Go to WEB list')?></li>
+      <li class="u-pt30"><span class="key">1</span><?=_('Go to WEB list')?></li>
       <li><span class="key">2</span><?=_('Go to DNS list')?></li>
       <li><span class="key">3</span><?=_('Go to MAIL list')?></li>
       <li><span class="key">4</span><?=_('Go to DB list')?></li>
@@ -38,13 +38,13 @@
     </ul>
     <ul>
       <li><span class="key">f</span><?=_('Focus on search')?></li>
-      <li class="step-top"><span class="key">h</span><?=_('Display/Close shortcuts')?></li>
+      <li class="u-pt30"><span class="key">h</span><?=_('Display/Close shortcuts')?></li>
 
-      <li class="step-top"><span class="key bigger">&larr;</span><?=_('Move backward through top menu')?></li>
+      <li class="u-pt30"><span class="key bigger">&larr;</span><?=_('Move backward through top menu')?></li>
       <li><span class="key bigger">&rarr;</span><?=_('Move forward through top menu')?></li>
       <li><span class="key">Enter</span><?=_('Enter focused element')?></li>
 
-      <li class="step-top"><span class="key bigger">&uarr;</span><?=_('Move up through elements list')?></li>
+      <li class="u-pt30"><span class="key bigger">&uarr;</span><?=_('Move up through elements list')?></li>
       <li><span class="key bigger">&darr;</span><?=_('Move down through elements list')?></li>
     </ul>
   </div>