niggl/srumboard_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sidebar size responsive

Browse Source
This commit is contained in:
Tobias Gabelunke 2020-07-01 10:00:53 +02:00
parent ab720fd798
commit e80cd86302
2 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/app.component.css
View File

@ -0,0 +1,15 @@
.sidebar-wrapper {
position: relative;
margin-top: 0px;
}
.sidebar {
position: absolute;
width: 15%;
margin-top: 10px;
}
.sidebar a:hover:not(.active) {
background-color: indigo;
color: white;
}

86
src/app/app.component.html
View File

@ -2,9 +2,9 @@
<div class="sidebar">
<!--
Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red"
-->
<div class="sidebar-wrapper" ps>
Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red"
-->
<div class="sidebar-wrapper">
<div class="logo">
<a href="javascript:void(0)" class="simple-text logo-normal">
Taskboard
@ -13,70 +13,68 @@
<ul class="nav" data-color="blue">
<li class="active ">
<a href="/dashboard">
<i class="tim-icons icon-chart-pie-36"></i>
<p>Dashboard</p>
</a>
</li>
<li>
<a href="/sprints">
<i class="tim-icons icon-atom"></i>
<p>Sprints</p>
</a>
</li>
<li>
<a href="/userstories">
<i class="tim-icons icon-pin"></i>
<p>Userstories</p>
</a>
</li>
<li>
<a href="/tasks">
<i class="tim-icons icon-bell-55"></i>
<p>Tasks</p>
</a>
</li>
</ul>
<div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div>
</div>
</div>
<router-outlet></router-outlet>
<div class="container">
<router-outlet></router-outlet>
</div>
<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>
<!--
<li class=" header-title">Sidebar Background</li>
<li class=" adjustments-line">
<a class=" switch-trigger background-color" href="javascript:void(0)">
<div class=" badge-colors text-center">
<span
class=" badge filter badge-danger"
[ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
>
</span>
<span
class=" badge filter badge-primary"
[ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
>
</span>
<span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
<span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
</span>
</div>
<div class=" clearfix"></div>
<div class=" fixed-plugin">
<div class=" show-dropdown" ngbDropdown>
<a data-toggle="dropdown" ngbDropdownToggle>
<i class="fa fa-cog fa-2x"></i>
</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>
</li>
</ul>
<ul ngbDropdownMenu>
<!--
<li class=" header-title">Sidebar Background</li>
<li class=" adjustments-line">
<a class=" switch-trigger background-color" href="javascript:void(0)">
<div class=" badge-colors text-center">
<span
class=" badge filter badge-danger"
[ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
>
</span>
<span
class=" badge filter badge-primary"
[ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
>
</span>
<span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
<span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
</span>
</div>
<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>
</li>
</ul>
</div>
</div>
</div>