Re-designed the backend header in order to be responsive.

This commit is contained in:
Alex Tselegidis 2016-07-12 21:27:54 +02:00
parent 7280a5d0c2
commit 38e2955273
2 changed files with 104 additions and 79 deletions

View file

@ -70,68 +70,94 @@
</head> </head>
<body> <body>
<div id="header"> <nav id="header" class="navbar">
<div id="header-logo"> <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"> <img src="<?php echo $base_url; ?>/assets/img/logo.png">
<span><?php echo $company_name; ?></span> <span><?php echo $company_name; ?></span>
</div> </div>
</div>
<div id="header-menu">
<div id="header-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<?php // CALENDAR MENU ITEM <?php // CALENDAR MENU ITEM
// ------------------------------------------------------ ?> // ------------------------------------------------------ ?>
<?php $hidden = ($privileges[PRIV_APPOINTMENTS]['view'] == TRUE) ? '' : 'hidden'; ?> <?php $hidden = ($privileges[PRIV_APPOINTMENTS]['view'] == TRUE) ? '' : 'hidden'; ?>
<?php $active = ($active_menu == PRIV_APPOINTMENTS) ? 'active' : ''; ?> <?php $active = ($active_menu == PRIV_APPOINTMENTS) ? 'active' : ''; ?>
<a href="<?php echo site_url('backend'); ?>" class="menu-item <?php echo $hidden; ?><?php echo $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'); ?>"> title="<?php echo $this->lang->line('manage_appointment_record_hint'); ?>">
<?php echo $this->lang->line('calendar'); ?> <?php echo $this->lang->line('calendar'); ?>
</a> </a>
</li>
<?php // CUSTOMERS MENU ITEM <?php // CUSTOMERS MENU ITEM
// ------------------------------------------------------ ?> // ------------------------------------------------------ ?>
<?php $hidden = ($privileges[PRIV_CUSTOMERS]['view'] == TRUE) ? '' : 'hidden'; ?> <?php $hidden = ($privileges[PRIV_CUSTOMERS]['view'] == TRUE) ? '' : 'hidden'; ?>
<?php $active = ($active_menu == PRIV_CUSTOMERS) ? 'active' : ''; ?> <?php $active = ($active_menu == PRIV_CUSTOMERS) ? 'active' : ''; ?>
<a href="<?php echo site_url('backend/customers'); ?>" class="menu-item <?php echo $hidden; ?><?php echo $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'); ?>"> title="<?php echo $this->lang->line('manage_customers_hint'); ?>">
<?php echo $this->lang->line('customers'); ?> <?php echo $this->lang->line('customers'); ?>
</a> </a>
</li>
<?php // SERVICES MENU ITEM <?php // SERVICES MENU ITEM
// ------------------------------------------------------ ?> // ------------------------------------------------------ ?>
<?php $hidden = ($privileges[PRIV_SERVICES]['view'] == TRUE) ? '' : 'hidden'; ?> <?php $hidden = ($privileges[PRIV_SERVICES]['view'] == TRUE) ? '' : 'hidden'; ?>
<?php $active = ($active_menu == PRIV_SERVICES) ? 'active' : ''; ?> <?php $active = ($active_menu == PRIV_SERVICES) ? 'active' : ''; ?>
<a href="<?php echo site_url('backend/services'); ?>" class="menu-item <?php echo $hidden; ?><?php echo $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'); ?>"> title="<?php echo $this->lang->line('manage_services_hint'); ?>">
<?php echo $this->lang->line('services'); ?> <?php echo $this->lang->line('services'); ?>
</a> </a>
</li>
<?php // USERS MENU ITEM <?php // USERS MENU ITEM
// ------------------------------------------------------ ?> // ------------------------------------------------------ ?>
<?php $hidden = ($privileges[PRIV_USERS]['view'] == TRUE) ? '' : 'hidden'; ?> <?php $hidden = ($privileges[PRIV_USERS]['view'] == TRUE) ? '' : 'hidden'; ?>
<?php $active = ($active_menu == PRIV_USERS) ? 'active' : ''; ?> <?php $active = ($active_menu == PRIV_USERS) ? 'active' : ''; ?>
<a href="<?php echo site_url('backend/users'); ?>" class="menu-item <?php echo $hidden; ?><?php echo $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'); ?>"> title="<?php echo $this->lang->line('manage_users_hint'); ?>">
<?php echo $this->lang->line('users'); ?> <?php echo $this->lang->line('users'); ?>
</a> </a>
</li>
<?php // SETTINGS MENU ITEM <?php // SETTINGS MENU ITEM
// ------------------------------------------------------ ?> // ------------------------------------------------------ ?>
<?php $hidden = ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE <?php $hidden = ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE
|| $privileges[PRIV_USER_SETTINGS]['view'] == TRUE) ? '' : 'hidden'; ?> || $privileges[PRIV_USER_SETTINGS]['view'] == TRUE) ? '' : 'hidden'; ?>
<?php $active = ($active_menu == PRIV_SYSTEM_SETTINGS) ? 'active' : ''; ?> <?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; ?>" <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'); ?>"> title="<?php echo $this->lang->line('settings_hint'); ?>">
<?php echo $this->lang->line('settings'); ?> <?php echo $this->lang->line('settings'); ?>
</a> </a>
</li>
<?php // LOGOUT MENU ITEM <?php // LOGOUT MENU ITEM
// ------------------------------------------------------ ?> // ------------------------------------------------------ ?>
<li>
<a href="<?php echo site_url('user/logout') ?>" class="menu-item" <a href="<?php echo site_url('user/logout') ?>" class="menu-item"
title="<?php echo $this->lang->line('log_out_hint'); ?>"> title="<?php echo $this->lang->line('log_out_hint'); ?>">
<?php echo $this->lang->line('log_out'); ?> <?php echo $this->lang->line('log_out'); ?>
</a> </a>
</li>
</ul>
</div> </div>
</div> </div>
</nav>
<div id="notification" style="display: none;"></div> <div id="notification" style="display: none;"></div>

View file

@ -20,14 +20,14 @@ root {
/* BACKEND GENERAL ELEMENTS /* BACKEND GENERAL ELEMENTS
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */
#header { #header {
height: 70px;
background-color: #35B66F; background-color: #35B66F;
border-bottom: 4px solid #2B995D; border-bottom: 4px solid #c0f1d6;
box-shadow: none;
border-radius: 0;
} }
#header #header-logo { #header #header-logo {
display: inline-block; padding: 6px;
margin: 6px 12px;
} }
#header #header-logo img { #header #header-logo img {
@ -41,38 +41,36 @@ root {
float: left; float: left;
font-size: 20px; font-size: 20px;
color: white; color: white;
margin-top: 9px; margin-top: 14px;
font-weight: bold; font-weight: lighter;
} }
#header .navbar-header .navbar-toggle .icon-bar {
background: white;
}
#header #header-menu { #header #header-menu {
display: inline-block; background: #35b66f;
float: right;
height: 100%;
} }
#header #header-menu .menu-item { #header #header-menu .menu-item {
float: left; cursor: pointer;
padding: 18px 18px 19px; min-width: 100px;
height: 70px;
min-width: 130px;
text-align: center;
font-weight: bold;
color: #FFF; color: #FFF;
text-align: center;
text-decoration: none; text-decoration: none;
font-size: 16px; font-size: 14px;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
#header #header-menu .menu-item:hover:not(.active) { #header #header-menu .menu-item:hover:not(.active) {
background-color: #2A8F57; background-color: #2A8F57;
border-bottom: 4px solid #236C48;
} }
#header #header-menu .active { #header #header-menu .active {
color: #C5FFD6; color: #C5FFD6;
background: #29A067; background: #29A067;
border-bottom: 4px solid #2A7751;
} }
#footer { #footer {
@ -765,3 +763,4 @@ body .form-horizontal .controls {
#settings-page #update-ea { #settings-page #update-ea {
margin-left: 12px; margin-left: 12px;
} }