Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(dashboard): improve player and rooms responsiveness

Browse source
This commit is contained in:
KostyaDanovsky 2017-09-13 17:44:33 +03:00
parent 05388c0099
commit a20c05ba88
5 changed files with 66 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/pages/dashboard/contacts/contacts.component.html
View file

@ -1,4 +1,4 @@
<nb-card [size]="breakpoint.width >= breakpoints.xxxl ? 'large' : 'xlarge'"> <nb-card [size]="breakpoint.width >= breakpoints.xxxl || breakpoint.width < breakpoints.md ? 'large' : 'xlarge'">
<nb-tabset fullWidth> <nb-tabset fullWidth>
<nb-tab tabTitle="Contacts"> <nb-tab tabTitle="Contacts">
<div class="contact" *ngFor="let c of contacts"> <div class="contact" *ngFor="let c of contacts">

6
src/app/pages/dashboard/rooms/player/player.component.html
View file

@ -2,11 +2,11 @@
<div class="body"> <div class="body">
<div class="cover"> <div class="track-info">
<img [src]="track.cover"> <div class="cover" style.background-image="url('{{track.cover}}')"></div>
<div class="details"> <div class="details">
<h4>{{ track.name }}</h4> <h4>{{ track.name }}</h4>
<span class="artist">{{ track.artist }}</span> <span>{{ track.artist }}</span>
</div> </div>
</div> </div>

86
src/app/pages/dashboard/rooms/player/player.component.scss
View file

@ -8,14 +8,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
border-left: 2px solid nb-theme(separator); height: 100%;
.header { .header {
@include nb-card-header(); @include nb-card-header();
} }
.body { .body {
padding: nb-theme(card-padding); display: flex;
flex-direction: column;
flex: 1;
} }
.footer { .footer {
@ -23,23 +25,28 @@
border-top: 1px solid nb-theme(separator); border-top: 1px solid nb-theme(separator);
} }
.cover { .track-info {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
flex: 1;
padding: nb-theme(card-padding);
img { .cover {
height: 10rem;
width: 10rem;
border-radius: nb-theme(radius) / 2; border-radius: nb-theme(radius) / 2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 10rem;
height: 10rem;
} }
.details { .details {
text-align: center; text-align: center;
padding: 1.75rem 0 1.5rem; padding-top: 1.5rem;
.artist { span {
color: nb-theme(color-fg); color: nb-theme(color-fg);
} }
} }
@ -48,7 +55,6 @@
.progress-wrap { .progress-wrap {
position: relative; position: relative;
height: 1rem; height: 1rem;
margin: 0 -#{nb-theme(card-padding)};
.progress-foreground { .progress-foreground {
background-color: nb-theme(color-success); background-color: nb-theme(color-success);
@ -97,18 +103,20 @@
.timing { .timing {
padding-top: 0.5rem; padding-top: 0.5rem;
margin: 0 -0.25rem; margin: 0 0.5rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: nb-theme(color-fg); color: nb-theme(color-fg);
} }
.controls { .controls {
// TODO fix controls font-size when complete icons fo
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 0.875rem 1.25rem 0; padding: 0.25rem 2rem 1rem;
max-width: 400px;
width: 100%;
margin: 0 auto;
i { i {
display: flex; display: flex;
@ -147,8 +155,9 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 0; margin: 0 auto;
position: relative; position: relative;
max-width: 400px;
i { i {
font-size: 1.5rem; font-size: 1.5rem;
@ -184,6 +193,10 @@
} }
&.collapsed { &.collapsed {
$player-height: 4.5rem;
border: none;
height: $player-height;
.header { .header {
display: none; display: none;
@ -191,6 +204,7 @@
.body { .body {
display: flex; display: flex;
flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0; padding: 0;
@ -200,16 +214,17 @@
display: none; display: none;
} }
.cover { .track-info {
height: 4.5rem; height: $player-height;
flex-direction: row; flex-direction: row;
margin: 0; padding: 0;
flex: initial;
img { .cover {
height: 4.5rem; height: $player-height;
width: 4.5rem; width: $player-height;
margin: 0;
border-radius: 0 0 0 nb-theme(radius); border-radius: 0 0 0 nb-theme(radius);
flex: none;
} }
.details { .details {
@ -228,7 +243,7 @@
align-self: flex-start; align-self: flex-start;
position: absolute; position: absolute;
margin-top: calc(-0.75rem + 1px); margin-top: calc(-0.75rem + 1px);
margin-left: 4.5rem; margin-left: $player-height;
} }
.timing { .timing {
@ -236,7 +251,10 @@
} }
.controls { .controls {
margin: 0 1rem 0 0; padding: 0 1rem 0 0;
max-width: inherit;
width: inherit;
margin: 0;
i { i {
width: inherit; width: inherit;
@ -256,26 +274,28 @@
.volume { .volume {
display: none; display: none;
} }
}
@include media-breakpoint-down(sm) { .track-info .details {
.cover { @include media-breakpoint-down(sm) {
.details {
font-size: 0.875rem;
h4 { h4 {
font-size: 1.25rem; font-size: 1.25rem;
} }
span {
font-size: 0.875rem;
}
} }
}
}
@include media-breakpoint-down(is) { @include media-breakpoint-down(is) {
.cover {
.details {
font-size: 0.75rem;
h4 { h4 {
font-size: 1rem; font-size: 1rem;
} }
span {
font-size: 0.75rem;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
max-height: calc(0.75rem * #{nb-theme(line-height)});
}
} }
} }
} }

10
src/app/pages/dashboard/rooms/rooms.component.scss
View file

@ -5,6 +5,7 @@
@include nb-install-component() { @include nb-install-component() {
ngx-room-selector { ngx-room-selector {
width: 70%; width: 70%;
border-right: 2px solid nb-theme(separator);
} }
ngx-player { ngx-player {
@ -40,6 +41,7 @@
ngx-room-selector, ngx-player { ngx-room-selector, ngx-player {
width: 100%; width: 100%;
border: none;
} }
nb-card { nb-card {
@ -47,9 +49,11 @@
justify-content: space-between; justify-content: space-between;
.collapse { .collapse {
display: flex; display: inline-block;
justify-content: center; position: absolute;
align-self: center; top: 0.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 3rem; font-size: 3rem;
color: nb-theme(color-fg); color: nb-theme(color-fg);
transition: display 0.3s ease; transition: display 0.3s ease;

4
src/app/pages/dashboard/rooms/rooms.component.ts
View file

@ -5,8 +5,8 @@ import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@n
selector: 'ngx-rooms', selector: 'ngx-rooms',
styleUrls: ['./rooms.component.scss'], styleUrls: ['./rooms.component.scss'],
template: ` template: `
<nb-card size="large"> <nb-card [size]="breakpoint.width >= breakpoints.sm ? 'large' : 'medium'">
<i (click)="collapse()" class="ion-ios-arrow-down collapse" [hidden]="isCollapsed()"></i> <i (click)="collapse()" class="nb-arrow-down collapse" [hidden]="isCollapsed()"></i>
<ngx-room-selector (select)="select($event)"></ngx-room-selector> <ngx-room-selector (select)="select($event)"></ngx-room-selector>
<ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player> <ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
</nb-card> </nb-card>