Re-designed the backend header in order to be responsive.
This commit is contained in:
parent
7280a5d0c2
commit
38e2955273
2 changed files with 104 additions and 79 deletions
|
@ -70,68 +70,94 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
<div id="header-logo">
|
||||
<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">
|
||||
|
||||
<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' : ''; ?>
|
||||
<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'); ?>">
|
||||
<?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' : ''; ?>
|
||||
<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'); ?>">
|
||||
<?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' : ''; ?>
|
||||
<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'); ?>">
|
||||
<?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' : ''; ?>
|
||||
<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'); ?>">
|
||||
<?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' : ''; ?>
|
||||
<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'); ?>">
|
||||
<?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>
|
||||
</nav>
|
||||
|
||||
<div id="notification" style="display: none;"></div>
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue