From 651c2c5101ba0353854a450d86a98538663d08d0 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Sat, 25 Jul 2015 14:04:23 +0200
Subject: [PATCH] Updated users page for bootstrap 3.

---
 src/application/views/backend/users.php | 58 ++++++++++++++++++-------
 src/assets/css/backend.css              |  2 +-
 src/assets/js/backend_users.js          | 51 ++++++++++++++++------
 src/assets/js/working_plan.js           | 32 +++++++-------
 4 files changed, 98 insertions(+), 45 deletions(-)

diff --git a/src/application/views/backend/users.php b/src/application/views/backend/users.php
index a7d0ab71..d1ad70dd 100644
--- a/src/application/views/backend/users.php
+++ b/src/application/views/backend/users.php
@@ -214,7 +214,7 @@
         </div>
         
         <div class="details column col-md-7">
-            <div class="btn-toolbar col-md-5">
+            <div>
                 <div class="add-edit-delete-group btn-group">
                     <button id="add-provider" class="btn btn-primary">
                         <span class="glyphicon glyphicon-plus"></span>
@@ -356,44 +356,72 @@
                     </thead>
                     <tbody>
                         <tr>
-                            <td><label class="checkbox"><input type="checkbox" id="monday" />
-                                    <?php echo $this->lang->line('monday'); ?></label></td>
+                            <td>
+                                <div class="checkbox">
+                                    <label><input type="checkbox" id="monday" />
+                                        <?php echo $this->lang->line('monday'); ?></label>
+                                </div>
+                            </td>
                             <td><input type="text" id="monday-start" class="work-start" /></td>
                             <td><input type="text" id="monday-end" class="work-end" /></td>
                         </tr>
                         <tr>
-                            <td><label class="checkbox"><input type="checkbox" id="tuesday" />
-                                    <?php echo $this->lang->line('tuesday'); ?></label></td>
+                            <td>
+                                <div class="checkbox">
+                                    <label><input type="checkbox" id="tuesday" />
+                                        <?php echo $this->lang->line('tuesday'); ?></label>
+                                </div>
+                            </td>
                             <td><input type="text" id="tuesday-start" class="work-start" /></td>
                             <td><input type="text" id="tuesday-end" class="work-end" /></td>
                         </tr>
                         <tr>
-                            <td><label class="checkbox"><input type="checkbox" id="wednesday" />
-                                    <?php echo $this->lang->line('wednesday'); ?></label></td>
+                            <td>
+                                <div class="checkbox">
+                                    <label><input type="checkbox" id="wednesday" />
+                                        <?php echo $this->lang->line('wednesday'); ?></label>
+                                </div>
+                            </td>
                             <td><input type="text" id="wednesday-start" class="work-start" /></td>
                             <td><input type="text" id="wednesday-end" class="work-end" /></td>
                         </tr>
                         <tr>
-                            <td><label class="checkbox"><input type="checkbox" id="thursday" />
-                                    <?php echo $this->lang->line('thursday'); ?></label></td>
+                            <td>
+                                <div class="checkbox">
+                                    <label><input type="checkbox" id="thursday" />
+                                        <?php echo $this->lang->line('thursday'); ?></label>
+                                </div>
+                            </td>
                             <td><input type="text" id="thursday-start" class="work-start" /></td>
                             <td><input type="text" id="thursday-end" class="work-end" /></td>
                         </tr>
                         <tr>
-                            <td><label class="checkbox"><input type="checkbox" id="friday" />
-                                    <?php echo $this->lang->line('friday'); ?></label></td>
+                            <td>
+                                <div class="checkbox">
+                                    <label><input type="checkbox" id="friday" />
+                                        <?php echo $this->lang->line('friday'); ?></label>
+                                </div>
+                            </td>
                             <td><input type="text" id="friday-start" class="work-start" /></td>
                             <td><input type="text" id="friday-end" class="work-end" /></td>
                         </tr>
                         <tr>
-                            <td><label class="checkbox"><input type="checkbox" id="saturday" />
-                                    <?php echo $this->lang->line('saturday'); ?></label></td>
+                            <td>
+                                <div class="checkbox">
+                                    <label><input type="checkbox" id="saturday" />
+                                        <?php echo $this->lang->line('saturday'); ?></label>
+                                </div>
+                            </td>
                             <td><input type="text" id="saturday-start" class="work-start" /></td>
                             <td><input type="text" id="saturday-end" class="work-end" /></td>
                         </tr>
                         <tr>
-                            <td><label class="checkbox"><input type="checkbox" id="sunday" />
-                                    <?php echo $this->lang->line('sunday'); ?></label></td>
+                            <td>
+                                <div class="checkbox">
+                                    <label><input type="checkbox" id="sunday" />
+                                        <?php echo $this->lang->line('sunday'); ?></label>
+                                </div>
+                            </td>
                             <td><input type="text" id="sunday-start" class="work-start" /></td>
                             <td><input type="text" id="sunday-end" class="work-end" /></td>
                         </tr>
diff --git a/src/assets/css/backend.css b/src/assets/css/backend.css
index df87887e..3c10b523 100644
--- a/src/assets/css/backend.css
+++ b/src/assets/css/backend.css
@@ -569,7 +569,7 @@ body .form-horizontal .controls {
 #users-page #providers .switch-view strong {
     display: inline-block;
     float: left;
-    margin: 8px 20px;
+    margin: 3px 20px;
     font-size: 17px;
 }
 
diff --git a/src/assets/js/backend_users.js b/src/assets/js/backend_users.js
index 40eef5e7..efefdfff 100644
--- a/src/assets/js/backend_users.js
+++ b/src/assets/js/backend_users.js
@@ -55,18 +55,34 @@ var BackendUsers = {
         BackendUsers.wp.bindEventHandlers();
         
         // Fill the services and providers list boxes.
+        var html = '<div class="col-md-12">';
         $.each(GlobalVariables.services, function(index, service) {
-            var html = '<label class="checkbox"><input type="checkbox" data-id="' + service.id + '" />' 
-                    + service.name + '</label>'; 
-            $('#provider-services').append(html);
+            html += 
+                '<div class="checkbox">' +
+                    '<label class="checkbox">' +
+                        '<input type="checkbox" data-id="' + service.id + '" />' +
+                        service.name + 
+                    '</label>' +
+                '</div>';
+            
         });
+        html += '</div>';
+        $('#provider-services').html(html);
         $('#provider-services').jScrollPane({ mouseWheelSpeed: 70 });
                 
+        var html = '<div class="col-md-12">';
         $.each(GlobalVariables.providers, function(index, provider) {
-           var html = '<label class="checkbox"><input type="checkbox" data-id="' + provider.id + '" />' 
-                   + provider.first_name + ' ' + provider.last_name + '</label>';
-            $('#secretary-providers').append(html);
+           html += 
+                '<div class="checkbox">' +
+                    '<label class="checkbox">'  +
+                        '<input type="checkbox" data-id="' + provider.id + '" />' +
+                        provider.first_name + ' ' + provider.last_name + 
+                    '</label>' +
+                '</div>';
+            
         });
+        html += '</div>';
+        $('#secretary-providers').html(html);
         $('#secretary-providers').jScrollPane({ mouseWheelSpeed: 70 });
         
         $('#reset-working-plan').qtip({
@@ -126,14 +142,23 @@ var BackendUsers = {
                     GlobalVariables.providers = response;
                 
                     $('#secretary-providers').data('jsp').destroy();
-                    $('#secretary-providers').html('');
+
+                    var html = '<div class="col-md-12">';
                     $.each(GlobalVariables.providers, function(index, provider) {
-                        var html = '<label class="checkbox"><input type="checkbox" data-id="' + provider.id + '" />' 
-                                + provider.first_name + ' ' + provider.last_name + '</label>';
-                         $('#secretary-providers').append(html);
-                     });
-                     $('#secretary-providers input[type="checkbox"]').prop('disabled', true);
-                     $('#secretary-providers').jScrollPane({ mouseWheelSpeed: 70 });
+                       html += 
+                            '<div class="checkbox">' +
+                                '<label class="checkbox">'  +
+                                    '<input type="checkbox" data-id="' + provider.id + '" />' +
+                                    provider.first_name + ' ' + provider.last_name + 
+                                '</label>' +
+                            '</div>';
+                        
+                    });
+                    html += '</div>';
+                    $('#secretary-providers').html(html);
+                    
+                    $('#secretary-providers input[type="checkbox"]').prop('disabled', true);
+                    $('#secretary-providers').jScrollPane({ mouseWheelSpeed: 70 });
                 }, 'json');
             }
             
diff --git a/src/assets/js/working_plan.js b/src/assets/js/working_plan.js
index 2a830083..69b17174 100644
--- a/src/assets/js/working_plan.js
+++ b/src/assets/js/working_plan.js
@@ -55,17 +55,17 @@ WorkingPlan.prototype.setup = function(workingPlan) {
                             '<td class="break-start editable">' + brk.start + '</td>' +
                             '<td class="break-end editable">' + brk.end + '</td>' +
                             '<td>' + 
-                                '<button type="button" class="btn edit-break" title="' + EALang['edit'] + '">' +
-                                    '<i class="icon-pencil"></i>' +
+                                '<button type="button" class="btn btn-sm edit-break" title="' + EALang['edit'] + '">' +
+                                    '<span class="glyphicon glyphicon-pencil"></span>' +
                                 '</button>' +
-                                '<button type="button" class="btn delete-break" title="' + EALang['delete'] + '">' +
-                                    '<i class="icon-remove"></i>' +
+                                '<button type="button" class="btn btn-sm delete-break" title="' + EALang['delete'] + '">' +
+                                    '<span class="glyphicon glyphicon-remove"></span>' +
                                 '</button>' +
-                                '<button type="button" class="btn save-break hidden" title="' + EALang['save'] + '">' +
-                                    '<i class="icon-ok"></i>' +
+                                '<button type="button" class="btn btn-sm save-break hidden" title="' + EALang['save'] + '">' +
+                                    '<span class="glyphicon glyphicon-ok"></span>' +
                                 '</button>' +
-                                '<button type="button" class="btn cancel-break hidden" title="' + EALang['cancel'] + '">' +
-                                    '<i class="icon-ban-circle"></i>' +
+                                '<button type="button" class="btn btn-sm cancel-break hidden" title="' + EALang['cancel'] + '">' +
+                                    '<span class="glyphicon glyphicon-ban-circle"></span>' +
                                 '</button>' +
                             '</td>' +
                         '</tr>';
@@ -178,17 +178,17 @@ WorkingPlan.prototype.bindEventHandlers = function() {
                     '<td class="break-start editable">09:00</td>' +
                     '<td class="break-end editable">10:00</td>' +
                     '<td>' + 
-                        '<button type="button" class="btn edit-break" title="' + EALang['edit'] + '">' +
-                            '<i class="icon-pencil"></i>' +
+                        '<button type="button" class="btn btn-sm edit-break" title="' + EALang['edit'] + '">' +
+                            '<span class="glyphicon glyphicon-pencil"></span>' +
                         '</button>' +
-                        '<button type="button" class="btn delete-break" title="' + EALang['delete'] + '">' +
-                            '<i class="icon-remove"></i>' +
+                        '<button type="button" class="btn btn-sm delete-break" title="' + EALang['delete'] + '">' +
+                            '<span class="glyphicon glyphicon-remove"></span>' +
                         '</button>' +
-                        '<button type="button" class="btn save-break hidden" title="' + EALang['save'] + '">' +
-                            '<i class="icon-ok"></i>' +
+                        '<button type="button" class="btn btn-sm save-break hidden" title="' + EALang['save'] + '">' +
+                            '<span class="glyphicon glyphicon-ok"></span>' +
                         '</button>' +
-                        '<button type="button" class="btn cancel-break hidden" title="' + EALang['cancel'] + '">' +
-                            '<i class="icon-ban-circle"></i>' +
+                        '<button type="button" class="btn btn-sm cancel-break hidden" title="' + EALang['cancel'] + '">' +
+                            '<span class="glyphicon glyphicon-ban-circle"></span>' +
                         '</button>' +
                     '</td>' +
                 '</tr>';