From 38e295527340b835b32670d49d8a6c2ca33ef89e Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Tue, 12 Jul 2016 21:27:54 +0200
Subject: [PATCH] Re-designed the backend header in order to be responsive.

---
 src/application/views/backend/header.php | 148 +++++++++++++----------
 src/assets/css/backend.css               |  35 +++---
 2 files changed, 104 insertions(+), 79 deletions(-)
diff --git a/src/application/views/backend/header.php b/src/application/views/backend/header.php
index e441f276..a954c355 100755
--- a/src/application/views/backend/header.php
+++ b/src/application/views/backend/header.php
@@ -70,68 +70,94 @@
 </head>
 
 <body>
-<div id="header">
-    <div id="header-logo">
-        <img src="<?php echo $base_url; ?>/assets/img/logo.png">
-        <span><?php echo $company_name; ?></span>
+<nav id="header" class="navbar">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-menu" 
+                    aria-expanded="false" aria-controls="navbar">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+
+            <div id="header-logo" class="navbar-brand">
+                <img src="<?php echo $base_url; ?>/assets/img/logo.png">
+                <span><?php echo $company_name; ?></span>
+            </div>
+        </div>
+        
+
+        <div id="header-menu" class="collapse navbar-collapse">
+            <ul class="nav navbar-nav navbar-right">
+                <?php // CALENDAR MENU ITEM
+                      // ------------------------------------------------------ ?>
+                <?php $hidden = ($privileges[PRIV_APPOINTMENTS]['view'] == TRUE) ? '' : 'hidden'; ?>
+                <?php $active = ($active_menu == PRIV_APPOINTMENTS) ? 'active' : ''; ?>
+                <li class="<?php echo $active . $hidden; ?>">
+                    <a href="<?php echo site_url('backend'); ?>" class="menu-item"
+                            title="<?php echo $this->lang->line('manage_appointment_record_hint'); ?>">
+                        <?php echo $this->lang->line('calendar'); ?>
+                    </a>
+                </li>
+
+                <?php // CUSTOMERS MENU ITEM
+                      // ------------------------------------------------------ ?>
+                <?php $hidden = ($privileges[PRIV_CUSTOMERS]['view'] == TRUE) ? '' : 'hidden'; ?>
+                <?php $active = ($active_menu == PRIV_CUSTOMERS) ? 'active' : ''; ?>
+                <li class="<?php echo $active . $hidden; ?>">
+                    <a href="<?php echo site_url('backend/customers'); ?>" class="menu-item"
+                            title="<?php echo $this->lang->line('manage_customers_hint'); ?>">
+                        <?php echo $this->lang->line('customers'); ?>
+                    </a>
+                </li>
+
+                <?php // SERVICES MENU ITEM
+                      // ------------------------------------------------------ ?>
+                <?php $hidden = ($privileges[PRIV_SERVICES]['view'] == TRUE) ? '' : 'hidden'; ?>
+                <?php $active = ($active_menu == PRIV_SERVICES) ? 'active' : ''; ?>
+                <li class="<?php echo $active . $hidden; ?>">
+                    <a href="<?php echo site_url('backend/services'); ?>" class="menu-item"
+                            title="<?php echo $this->lang->line('manage_services_hint'); ?>">
+                        <?php echo $this->lang->line('services'); ?>
+                    </a>
+                </li>
+
+                <?php // USERS MENU ITEM
+                      // ------------------------------------------------------ ?>
+                <?php $hidden = ($privileges[PRIV_USERS]['view'] ==  TRUE) ? '' : 'hidden'; ?>
+                <?php $active = ($active_menu == PRIV_USERS) ? 'active' : ''; ?>
+                <li class="<?php echo $active . $hidden; ?>">
+                    <a href="<?php echo site_url('backend/users'); ?>" class="menu-item"
+                            title="<?php echo $this->lang->line('manage_users_hint'); ?>">
+                        <?php echo $this->lang->line('users'); ?>
+                    </a>
+                </li>
+
+                <?php // SETTINGS MENU ITEM
+                      // ------------------------------------------------------ ?>
+                <?php $hidden = ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE
+                        || $privileges[PRIV_USER_SETTINGS]['view'] == TRUE) ? '' : 'hidden'; ?>
+                <?php $active = ($active_menu == PRIV_SYSTEM_SETTINGS) ? 'active' : ''; ?>
+                <li class="<?php echo $active . $hidden; ?>">
+                    <a href="<?php echo site_url('backend/settings'); ?>" class="menu-item"
+                            title="<?php echo $this->lang->line('settings_hint'); ?>">
+                        <?php echo $this->lang->line('settings'); ?>
+                    </a>
+                </li>
+
+                <?php // LOGOUT MENU ITEM
+                      // ------------------------------------------------------ ?>
+                <li>
+                    <a href="<?php echo site_url('user/logout') ?>" class="menu-item"
+                            title="<?php echo $this->lang->line('log_out_hint'); ?>">
+                        <?php echo $this->lang->line('log_out'); ?>
+                    </a>
+                </li>
+            </ul>
+        </div>
     </div>
-
-    <div id="header-menu">
-        <?php // CALENDAR MENU ITEM
-              // ------------------------------------------------------ ?>
-        <?php $hidden = ($privileges[PRIV_APPOINTMENTS]['view'] == TRUE) ? '' : 'hidden'; ?>
-        <?php $active = ($active_menu == PRIV_APPOINTMENTS) ? 'active' : ''; ?>
-        <a href="<?php echo site_url('backend'); ?>" class="menu-item <?php echo $hidden; ?><?php echo $active; ?>"
-                title="<?php echo $this->lang->line('manage_appointment_record_hint'); ?>">
-            <?php echo $this->lang->line('calendar'); ?>
-        </a>
-
-        <?php // CUSTOMERS MENU ITEM
-              // ------------------------------------------------------ ?>
-        <?php $hidden = ($privileges[PRIV_CUSTOMERS]['view'] == TRUE) ? '' : 'hidden'; ?>
-        <?php $active = ($active_menu == PRIV_CUSTOMERS) ? 'active' : ''; ?>
-        <a href="<?php echo site_url('backend/customers'); ?>" class="menu-item <?php echo $hidden; ?><?php echo $active; ?>"
-                title="<?php echo $this->lang->line('manage_customers_hint'); ?>">
-            <?php echo $this->lang->line('customers'); ?>
-        </a>
-
-        <?php // SERVICES MENU ITEM
-              // ------------------------------------------------------ ?>
-        <?php $hidden = ($privileges[PRIV_SERVICES]['view'] == TRUE) ? '' : 'hidden'; ?>
-        <?php $active = ($active_menu == PRIV_SERVICES) ? 'active' : ''; ?>
-        <a href="<?php echo site_url('backend/services'); ?>" class="menu-item <?php echo $hidden; ?><?php echo $active; ?>"
-                title="<?php echo $this->lang->line('manage_services_hint'); ?>">
-            <?php echo $this->lang->line('services'); ?>
-        </a>
-
-        <?php // USERS MENU ITEM
-              // ------------------------------------------------------ ?>
-        <?php $hidden = ($privileges[PRIV_USERS]['view'] ==  TRUE) ? '' : 'hidden'; ?>
-        <?php $active = ($active_menu == PRIV_USERS) ? 'active' : ''; ?>
-        <a href="<?php echo site_url('backend/users'); ?>" class="menu-item <?php echo $hidden; ?><?php echo $active; ?>"
-                title="<?php echo $this->lang->line('manage_users_hint'); ?>">
-            <?php echo $this->lang->line('users'); ?>
-        </a>
-
-        <?php // SETTINGS MENU ITEM
-              // ------------------------------------------------------ ?>
-        <?php $hidden = ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE
-                || $privileges[PRIV_USER_SETTINGS]['view'] == TRUE) ? '' : 'hidden'; ?>
-        <?php $active = ($active_menu == PRIV_SYSTEM_SETTINGS) ? 'active' : ''; ?>
-        <a href="<?php echo site_url('backend/settings'); ?>" class="menu-item <?php echo $hidden; ?><?php echo $active; ?>"
-                title="<?php echo $this->lang->line('settings_hint'); ?>">
-            <?php echo $this->lang->line('settings'); ?>
-        </a>
-
-        <?php // LOGOUT MENU ITEM
-              // ------------------------------------------------------ ?>
-        <a href="<?php echo site_url('user/logout') ?>" class="menu-item"
-                title="<?php echo $this->lang->line('log_out_hint'); ?>">
-            <?php echo $this->lang->line('log_out'); ?>
-        </a>
-
-    </div>
-</div>
+</nav>
 
 <div id="notification" style="display: none;"></div>
 
diff --git a/src/assets/css/backend.css b/src/assets/css/backend.css
index 7f485fc3..809fb995 100644
--- a/src/assets/css/backend.css
+++ b/src/assets/css/backend.css
@@ -20,14 +20,14 @@ root {
 /* BACKEND GENERAL ELEMENTS
    -------------------------------------------------------------------- */
 #header {
-    height: 70px;
     background-color: #35B66F;
-    border-bottom: 4px solid #2B995D;
+    border-bottom: 4px solid #c0f1d6;
+    box-shadow: none;
+    border-radius: 0;
 }
 
 #header #header-logo {
-    display: inline-block;
-    margin: 6px 12px;
+    padding: 6px;
 }
 
 #header #header-logo img {
@@ -41,38 +41,36 @@ root {
     float: left;
     font-size: 20px;
     color: white;
-    margin-top: 9px;
-    font-weight: bold;
+    margin-top: 14px;
+    font-weight: lighter;
 }
 
+#header .navbar-header .navbar-toggle .icon-bar {
+    background: white;
+}
+
+
 #header #header-menu {
-    display: inline-block;
-    float: right;
-    height: 100%;
+    background: #35b66f;
 }
 
 #header #header-menu .menu-item {
-    float: left;
-    padding: 18px 18px 19px;
-    height: 70px;
-    min-width: 130px;
-    text-align: center;
-    font-weight: bold;
+    cursor: pointer;
+    min-width: 100px;
     color: #FFF;
+    text-align: center;
     text-decoration: none;
-    font-size: 16px;
+    font-size: 14px;
     transition: background-color 0.2s;
 }
 
 #header #header-menu .menu-item:hover:not(.active) {
     background-color: #2A8F57;
-    border-bottom: 4px solid #236C48;
 }
 
 #header #header-menu .active {
     color: #C5FFD6;
     background: #29A067;
-    border-bottom: 4px solid #2A7751;
 }
 
 #footer {
@@ -765,3 +763,4 @@ body .form-horizontal .controls {
 #settings-page #update-ea {
     margin-left: 12px;
 }
+
