Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-03-09 07:02:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(demo): improve dashboard and ui features pages

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-20 18:13:11 +03:00
parent 8127f98f3c
commit b10e5e9ae5
20 changed files with 158 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/app/pages/dashboard/security-cameras/security-cameras.component.html
View file

@ -19,23 +19,26 @@
</div>
</div>
<div class="cameras" *ngIf="!isSingleView">
<div class="camera" *ngFor="let c of cameras" [style.background-image]="'url(' + c.source + ')'" (click)="selectCamera(c)">
<span>{{ c.title }}</span>
<div class="camera" *ngFor="let camera of cameras" [style.background-image]="'url(' + camera.source + ')'"
(click)="selectCamera(camera)">
<span>{{ camera.title }}</span>
</div>
</div>
</nga-card-body>
<nga-card-footer>
<nga-actions size="medium">
<nga-action icon="ion-navicon"></nga-action>
<nga-actions size="medium" fullWidth>
<nga-action>
<nga-search type="rotate-layout"></nga-search>
<i class="ion-ios-pause-outline"></i><span>Pause</span>
</nga-action>
<nga-action icon="ion-ios-email-outline"></nga-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
<nga-action>
<nga-user [menu]="userMenu" name="Han Solo"></nga-user>
<i class="ion-navicon"></i><span>Log View</span>
</nga-action>
<nga-action>
<i class="ion-ios-search"></i><span>Search</span>
</nga-action>
<nga-action>
<i class="ion-ios-gear-outline"></i><span>Setup</span>
</nga-action>
<nga-action icon="ion-ios-gear-outline"></nga-action>
</nga-actions>
</nga-card-footer>
</nga-card>

61
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View file

@ -1,14 +1,18 @@
@import '../../../@theme/styles/variables';
@include nga-install-component() {
nga-card {
nga-card-header {
padding: 0;
}
nga-card-header {
padding: 0;
border: none;
}
nga-card-body {
padding: 0;
}
nga-card-body {
padding: 0;
}
nga-card-footer {
padding: 1rem 0;
border: none;
}
.cameras-card-header {
@ -32,26 +36,34 @@
flex-direction: column;
justify-content: center;
color: nga-theme(color-fg);
border-left: 1px solid #342e73;
}
a:first-child {
border-left: 1px solid nga-theme(separator);
}
a:last-child {
border-top-right-radius: nga-theme(card-border-radius);
}
a.active {
background-color: #342e73;
color: #00d990;
text-shadow: 0 4px 10px rgba(33, 7, 77, 0.4), 0 0 12px rgba(0, 217, 144, 0.4);
background-color: nga-theme(color-bg-active);
color: nga-theme(color-fg-highlight);
text-shadow: 0 0 12px rgba(nga-theme(color-fg-highlight), 0.4);
border: none;
}
}
.cameras {
display: flex;
flex-wrap: wrap;
height: 100%;
.camera {
position: relative;
background-position: center;
background-size: cover;
// TODO: Use calculated height
height: 278px;
height: 50%;
width: 50%;
span {
@ -71,7 +83,7 @@
content: '';
position: absolute;
width: 100%;
height: 278px;
height: 100%;
opacity: 0.2;
transition: 0.1s;
}
@ -83,14 +95,27 @@
.cameras.single-view {
.camera {
// TODO: Use calculated height
height: 556px;
height: 100%;
width: 100%;
&::before {
// TODO: Use calculated height
height: 556px;
height: 100%;
}
}
}
nga-action {
i {
color: nga-theme(color-fg);
font-size: 2.5rem;
margin-right: 1rem;
}
span {
font-family: nga-theme(font-family-secondary);
font-weight: nga-theme(font-weight-bold);
color: nga-theme(color-fg-heading);
text-transform: uppercase;
}
}
}