Merge branch 'feature/sidebar'
This commit is contained in:
commit
775b6f9bee
|
|
@ -1,22 +1,24 @@
|
|||
.sidebar {
|
||||
width: 150px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
bottom: 0;
|
||||
opacity: 95%;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.nav a:hover:not(.active) {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* size and position of the sidebar */
|
||||
.sidebar {
|
||||
width: 150px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
/* background: rgba(34, 129, 247, 0.8); */
|
||||
}
|
||||
|
||||
.nav a {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* show cursor position on link */
|
||||
.nav a:hover:not(.active) {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* show content beneath sidebar */
|
||||
.content {
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +1,35 @@
|
|||
<div class="container-fluid">
|
||||
|
||||
<!-- sidebar div -->
|
||||
<div class="sidebar">
|
||||
<div class="logo">
|
||||
<a class="simple-text logo-normal">
|
||||
Taskboard
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="active">
|
||||
<a [routerLink]="['dashboard']">
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a [routerLink]="['backlog']">
|
||||
<p>Backlog</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a [routerLink]="['sprints']">
|
||||
<p>Sprints</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a [routerLink]="['userstories']">
|
||||
<p>Userstories</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a [routerLink]="['tasks']">
|
||||
<p>Tasks</p>
|
||||
<li
|
||||
routerLinkActive="active"
|
||||
*ngFor="let menuItem of menuItems"
|
||||
class="{{ menuItem.class }} nav-item"
|
||||
>
|
||||
<a [routerLink]="[menuItem.path]">
|
||||
<i class="tim-icons {{ menuItem.icon }}"></i>
|
||||
<p>{{ menuItem.title }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
<!-- content class for sidebar-css -->
|
||||
<div class="content">
|
||||
<div class="fixed-plugin">
|
||||
<div class="show-dropdown" ngbDropdown>
|
||||
<div class=" fixed-plugin">
|
||||
<div class=" show-dropdown" ngbDropdown>
|
||||
<a data-toggle="dropdown" ngbDropdownToggle>
|
||||
<i class="fa fa-cog fa-2x"></i>
|
||||
</a>
|
||||
<ul ngbDropdownMenu>
|
||||
<!--
|
||||
<
|
||||
<!-- sidebar background -->
|
||||
<li class=" header-title">Sidebar Background</li>
|
||||
<li class=" adjustments-line">
|
||||
<a class=" switch-trigger background-color" href="javascript:void(0)">
|
||||
|
|
@ -65,20 +51,13 @@
|
|||
<div class=" clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
-->
|
||||
<li class="adjustments-line text-center color-change">
|
||||
<span class="color-label"> LIGHT MODE </span>
|
||||
<span
|
||||
class="badge light-badge mr-2"
|
||||
(click)="changeDashboardColor('white-content')"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
class="badge dark-badge ml-2"
|
||||
(click)="changeDashboardColor('black-content')"
|
||||
>
|
||||
</span>
|
||||
<span class="color-label"> DARK MODE </span>
|
||||
|
||||
<!-- change dashboard-color for dark-/whitemode -->
|
||||
<li class=" adjustments-line text-center color-change">
|
||||
<span class=" color-label"> LIGHT MODE </span>
|
||||
<span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
|
||||
<span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
|
||||
<span class=" color-label"> DARK MODE </span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,89 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css'],
|
||||
})
|
||||
export class AppComponent {
|
||||
/*
|
||||
changeSidebarColor(color){
|
||||
var sidebar = document.getElementsByClassName('sidebar')[0];
|
||||
var mainPanel = document.getElementsByClassName('main-panel')[0];
|
||||
|
||||
this.sidebarColor = color;
|
||||
|
||||
if(sidebar != undefined){
|
||||
sidebar.setAttribute('data',color);
|
||||
}
|
||||
if(mainPanel != undefined){
|
||||
mainPanel.setAttribute('data',color);
|
||||
}
|
||||
}
|
||||
*/
|
||||
changeDashboardColor(color) {
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
if (body && color === 'white-content') {
|
||||
body.classList.add(color);
|
||||
} else if (body.classList.contains('white-content')) {
|
||||
body.classList.remove('white-content');
|
||||
}
|
||||
}
|
||||
// function that adds color white/transparent to the navbar on resize (this is for the collapse)
|
||||
/*
|
||||
updateColor = () => {
|
||||
var navbar = document.getElementsByClassName('navbar')[0];
|
||||
if (window.innerWidth < 993 && !this.isCollapsed) {
|
||||
navbar.classList.add('bg-white');
|
||||
navbar.classList.remove('navbar-transparent');
|
||||
} else {
|
||||
navbar.classList.remove('bg-white');
|
||||
navbar.classList.add('navbar-transparent');
|
||||
}
|
||||
};
|
||||
*/
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
/*
|
||||
* Interface for sidebar-links
|
||||
*/
|
||||
declare interface RouteInfo {
|
||||
path: string;
|
||||
title: string;
|
||||
class: string;
|
||||
}
|
||||
|
||||
/* define routes for sidebar-links */
|
||||
export const ROUTES: RouteInfo[] = [
|
||||
{
|
||||
path: "/dashboard",
|
||||
title: "Dashboard",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/backlog",
|
||||
title: "Backlog",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/userstories",
|
||||
title: "Userstories",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/tasks",
|
||||
title: "Tasks",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/sprints",
|
||||
title: "Sprints",
|
||||
class: ""
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css'],
|
||||
})
|
||||
|
||||
/* function to add and load sidebar */
|
||||
export class AppComponent {
|
||||
|
||||
menuItems: any[];
|
||||
public sidebarColor: string = "blue";
|
||||
|
||||
ngOnInit() {
|
||||
this.menuItems = ROUTES.filter(menuItem => menuItem);
|
||||
}
|
||||
isMobileMenu() {
|
||||
if (window.innerWidth > 991) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/* function to change sidebar color */
|
||||
changeSidebarColor(color){
|
||||
var sidebar = document.getElementsByClassName('sidebar')[0];
|
||||
var mainPanel = document.getElementsByClassName('main-panel')[0];
|
||||
|
||||
this.sidebarColor = color;
|
||||
|
||||
if(sidebar != undefined){
|
||||
sidebar.setAttribute('data',color);
|
||||
}
|
||||
if(mainPanel != undefined){
|
||||
mainPanel.setAttribute('data',color);
|
||||
}
|
||||
}
|
||||
|
||||
/* function to change dashboard-color for darkmode and whitemode */
|
||||
changeDashboardColor(color){
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
if (body && color === 'white-content') {
|
||||
body.classList.add(color);
|
||||
} else if (body.classList.contains('white-content')) {
|
||||
body.classList.remove('white-content');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,12 @@
|
|||
th.sortable:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
th.sortable:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* show content beneath sidebar */
|
||||
.content {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,3 +5,12 @@
|
|||
.text-very-large {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
/* show content beneath sidebar */
|
||||
.content {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue