From fe215e8be60a6b8dee569fa47dfc6f44309dc054 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Fri, 15 Jul 2016 21:09:38 +0200
Subject: [PATCH] Refactored CSS with common backend rules for services page.

---
 src/application/views/backend/services.php |  6 +-
 src/assets/css/backend.css                 | 70 ++++------------------
 src/assets/js/backend_categories_helper.js | 24 ++++----
 src/assets/js/backend_services.js          |  2 +-
 src/assets/js/backend_services_helper.js   | 26 ++++----
 5 files changed, 39 insertions(+), 89 deletions(-)

diff --git a/src/application/views/backend/services.php b/src/application/views/backend/services.php
index c2d6c9c1..2258700c 100644
--- a/src/application/views/backend/services.php
+++ b/src/application/views/backend/services.php
@@ -27,7 +27,7 @@
     });
 </script>
 
-<div id="services-page" class="container-fluid">
+<div id="services-page" class="container-fluid backend-page">
     <ul class="nav nav-tabs">
         <li role="presentation" class="services-tab tab active"><a><?php echo $this->lang->line('services'); ?></a></li>
         <li role="presentation" class="categories-tab tab"><a><?php echo $this->lang->line('categories'); ?></a></li>
@@ -60,7 +60,7 @@
                 <div class="results"></div>
             </div>
 
-            <div class="details column col-xs-12 col-sm-7">
+            <div class="record-details column col-xs-12 col-sm-7">
                 <div class="btn-toolbar">
                     <div class="add-edit-delete-group btn-group">
                         <button id="add-service" class="btn btn-primary">
@@ -157,7 +157,7 @@
                 <div class="results"></div>
             </div>
 
-            <div class="details col-xs-12 col-sm-7">
+            <div class="record-details col-xs-12 col-sm-7">
                 <div class="btn-toolbar">
                     <div class="add-edit-delete-group btn-group">
                         <button id="add-category" class="btn btn-primary">
diff --git a/src/assets/css/backend.css b/src/assets/css/backend.css
index e89f71bd..1c445dfd 100644
--- a/src/assets/css/backend.css
+++ b/src/assets/css/backend.css
@@ -249,6 +249,13 @@ body .jspTrack {
     cursor: default;
 }
 
+.record-details input:read-only,
+.record-details select:disabled,
+.record-details textarea:read-only {
+    opacity: 0.85;
+    box-shadow: none;
+}
+
 
 /* BACKEND CALENDAR PAGE
    -------------------------------------------------------------------- */
@@ -455,43 +462,14 @@ body .form-horizontal .controls {
     cursor: pointer;
 }
 
-#services-page .filter-records {
-    max-width: 350px;
-    margin-bottom: 20px;
-}
-
-#services-page .filter-records .results {
-    overflow-y: auto;
-    max-height: 650px;
-    outline: none;
-}
-
-#services-page .service-row {
-    padding: 10px 7px;
-}
-
-#services-page .service-row:hover:not(.selected-row) {
-    cursor: pointer;
-    background-color: #F3F3F3;
-}
-
-#services-page .selected-row {
-    background-color: #F4F4F4;
-    border-right: 5px solid #35B66F;
-}
-
-#services-page .filter-records .results hr {
-    margin: 5px 0;
-}
-
-#services-page .details .ui-spinner {
+#services-page .record-details .ui-spinner {
     border: none;
     margin-bottom: 10px;
     display: block;
     color: #666;
 }
 
-#services-page .details .ui-state-disabled {
+#services-page .record-details .ui-state-disabled {
     opacity: 1;
 }
 
@@ -499,38 +477,10 @@ body .form-horizontal .controls {
     margin: 0px;
 }
 
-#services-page .details .ui-spinner a {
+#services-page .record-details .ui-spinner a {
     cursor: pointer;
 }
 
-#services-page .details input,
-#services-page .details select,
-#services-page .details textarea {
-    background-color: white;
-    cursor: pointer;
-}
-
-#services-page #categories .category-row {
-    padding: 10px 7px;
-}
-
-#services-page #categories .category-row:hover:not(.selected-row) {
-    background-color: #F3F3F3;
-    cursor: pointer;
-}
-
-.details input:read-only,
-.details select:disabled,
-.details textarea:read-only {
-    opacity: 0.85;
-    box-shadow: none;
-}
-
-#services-page .details {
-    max-width:  450px;
-    margin-bottom: 20px;
-}
-
 /* BACKEND USERS PAGE
    -------------------------------------------------------------------- */
 #users-page h2 {
diff --git a/src/assets/js/backend_categories_helper.js b/src/assets/js/backend_categories_helper.js
index ba2530d8..37d25254 100644
--- a/src/assets/js/backend_categories_helper.js
+++ b/src/assets/js/backend_categories_helper.js
@@ -45,7 +45,7 @@
          */
         $('#filter-categories form').submit(function() {
             var key = $('#filter-categories .key').val();
-            $('.selected-row').removeClass('selected-row');
+            $('.selected').removeClass('selected');
             instance.resetForm();
             instance.filter(key);
             return false;
@@ -72,8 +72,8 @@
             });
 
             instance.display(category);
-            $('#filter-categories .selected-row').removeClass('selected-row');
-            $(this).addClass('selected-row');
+            $('#filter-categories .selected').removeClass('selected');
+            $(this).addClass('selected');
             $('#edit-category, #delete-category').prop('disabled', false);
         });
 
@@ -84,7 +84,7 @@
             instance.resetForm();
             $('#categories .add-edit-delete-group').hide();
             $('#categories .save-cancel-group').show();
-            $('#categories .details').find('input, textarea').prop('readonly', false);
+            $('#categories .record-details').find('input, textarea').prop('readonly', false);
             $('#filter-categories button').prop('disabled', true);
             $('#filter-categories .results').css('color', '#AAA');
         });
@@ -95,7 +95,7 @@
         $('#edit-category').click(function() {
             $('#categories .add-edit-delete-group').hide();
             $('#categories .save-cancel-group').show();
-            $('#categories .details').find('input, textarea').prop('readonly', false);
+            $('#categories .record-details').find('input, textarea').prop('readonly', false);
 
             $('#filter-categories button').prop('disabled', true);
             $('#filter-categories .results').css('color', '#AAA');
@@ -259,7 +259,7 @@
      * @param {Object} category Contains the category data.
      */
     CategoriesHelper.prototype.validate = function(category) {
-        $('#categories .details').find('input, textarea').css('border', '');
+        $('#categories .record-details').find('input, textarea').css('border', '');
 
         try {
             var missingRequired = false;
@@ -287,11 +287,11 @@
     CategoriesHelper.prototype.resetForm = function() {
         $('#categories .add-edit-delete-group').show();
         $('#categories .save-cancel-group').hide();
-        $('#categories .details').find('input, textarea').val('');
-        $('#categories .details').find('input, textarea').prop('readonly', true);
+        $('#categories .record-details').find('input, textarea').val('');
+        $('#categories .record-details').find('input, textarea').prop('readonly', true);
         $('#edit-category, #delete-category').prop('disabled', true);
 
-        $('#filter-categories .selected-row').removeClass('selected-row');
+        $('#filter-categories .selected').removeClass('selected');
         $('#filter-categories .results').css('color', '');
         $('#filter-categories button').prop('disabled', false);
     };
@@ -305,7 +305,7 @@
      */
     CategoriesHelper.prototype.getFilterHtml = function(category) {
         var html =
-                '<div class="category-row" data-id="' + category.id + '">' +
+                '<div class="category-row entry" data-id="' + category.id + '">' +
                     '<strong>' + category.name + '</strong>' +
                 '</div><hr>';
 
@@ -324,11 +324,11 @@
     CategoriesHelper.prototype.select = function(id, display) {
         display = display || false;
 
-        $('#filter-categories .selected-row').removeClass('selected-row');
+        $('#filter-categories .selected').removeClass('selected');
 
         $('#filter-categories .category-row').each(function() {
             if ($(this).attr('data-id') === id) {
-                $(this).addClass('selected-row');
+                $(this).addClass('selected');
                 return false;
             }
         });
diff --git a/src/assets/js/backend_services.js b/src/assets/js/backend_services.js
index 39e5881b..9203873f 100644
--- a/src/assets/js/backend_services.js
+++ b/src/assets/js/backend_services.js
@@ -53,7 +53,7 @@ window.BackendServices = window.BackendServices || {};
         });
 
         // Instantiate helper object (service helper by default).
-        helper = new ServicesHelper();
+        helper = servicesHelper;
         helper.resetForm();
         helper.filter('');
 
diff --git a/src/assets/js/backend_services_helper.js b/src/assets/js/backend_services_helper.js
index f63d4e92..1c6d83f1 100644
--- a/src/assets/js/backend_services_helper.js
+++ b/src/assets/js/backend_services_helper.js
@@ -34,7 +34,7 @@
          */
         $('#filter-services form').submit(function(event) {
             var key = $('#filter-services .key').val();
-            $('#filter-services .selected-row').removeClass('selected-row');
+            $('#filter-services .selected').removeClass('selected');
             instance.resetForm();
             instance.filter(key);
             return false;
@@ -70,8 +70,8 @@
             });
 
             instance.display(service);
-            $('#filter-services .selected-row').removeClass('selected-row');
-            $(this).addClass('selected-row');
+            $('#filter-services .selected').removeClass('selected');
+            $(this).addClass('selected');
             $('#edit-service, #delete-service').prop('disabled', false);
         });
 
@@ -82,8 +82,8 @@
             instance.resetForm();
             $('#services .add-edit-delete-group').hide();
             $('#services .save-cancel-group').show();
-            $('#services .details').find('input, textarea').prop('readonly', false);
-            $('#services .details').find('select').prop('disabled', false);
+            $('#services .record-details').find('input, textarea').prop('readonly', false);
+            $('#services .record-details').find('select').prop('disabled', false);
             $('#service-duration').spinner('enable');
 
             $('#filter-services button').prop('disabled', true);
@@ -138,8 +138,8 @@
         $('#edit-service').click(function() {
             $('#services .add-edit-delete-group').hide();
             $('#services .save-cancel-group').show();
-            $('#services .details').find('input, textarea').prop('readonly', false);
-            $('#services .details select').prop('disabled', false);
+            $('#services .record-details').find('input, textarea').prop('readonly', false);
+            $('#services .record-details select').prop('disabled', false);
             $('#service-duration').spinner('enable');
 
             $('#filter-services button').prop('disabled', true);
@@ -251,16 +251,16 @@
      * Resets the service tab form back to its initial state.
      */
     ServicesHelper.prototype.resetForm = function() {
-        $('#services .details').find('input, textarea').val('');
+        $('#services .record-details').find('input, textarea').val('');
         $('#service-category').val('null');
         $('#services .add-edit-delete-group').show();
         $('#services .save-cancel-group').hide();
         $('#edit-service, #delete-service').prop('disabled', true);
-        $('#services .details').find('input, textarea').prop('readonly', true);
+        $('#services .record-details').find('input, textarea').prop('readonly', true);
         $('#service-category').prop('disabled', true);
         $('#service-duration').spinner('disable');
 
-        $('#filter-services .selected-row').removeClass('selected-row');
+        $('#filter-services .selected').removeClass('selected');
         $('#filter-services button').prop('disabled', false);
         $('#filter-services .results').css('color', '');
     };
@@ -335,7 +335,7 @@
      */
     ServicesHelper.prototype.getFilterHtml = function(service) {
         var html =
-                '<div class="service-row" data-id="' + service.id + '">' +
+                '<div class="service-row entry" data-id="' + service.id + '">' +
                     '<strong>' + service.name + '</strong><br>' +
                     service.duration + ' min - ' +
                     service.price + ' ' + service.currency + '<br>' +
@@ -354,11 +354,11 @@
     ServicesHelper.prototype.select = function(id, display) {
         display = display || false;
 
-        $('#filter-services .selected-row').removeClass('selected-row');
+        $('#filter-services .selected').removeClass('selected');
 
         $('#filter-services .service-row').each(function() {
             if ($(this).attr('data-id') === id) {
-                $(this).addClass('selected-row');
+                $(this).addClass('selected');
                 return false;
             }
         });