Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +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-tab tabTitle="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="cover">
<img [src]="track.cover">
<div class="track-info">
<div class="cover" style.background-image="url('{{track.cover}}')"></div>
<div class="details">
<h4>{{ track.name }}</h4>
<span class="artist">{{ track.artist }}</span>
<span>{{ track.artist }}</span>
</div>
</div>

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

@ -8,14 +8,16 @@
display: flex;
flex-direction: column;
justify-content: space-between;
border-left: 2px solid nb-theme(separator);
height: 100%;
.header {
@include nb-card-header();
}
.body {
padding: nb-theme(card-padding);
display: flex;
flex-direction: column;
flex: 1;
}
.footer {
@ -23,23 +25,28 @@
border-top: 1px solid nb-theme(separator);
}
.cover {
.track-info {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 1;
padding: nb-theme(card-padding);
img {
height: 10rem;
width: 10rem;
.cover {
border-radius: nb-theme(radius) / 2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 10rem;
height: 10rem;
}
.details {
text-align: center;
padding: 1.75rem 0 1.5rem;
padding-top: 1.5rem;
.artist {
span {
color: nb-theme(color-fg);
}
}
@ -48,7 +55,6 @@
.progress-wrap {
position: relative;
height: 1rem;
margin: 0 -#{nb-theme(card-padding)};
.progress-foreground {
background-color: nb-theme(color-success);
@ -97,18 +103,20 @@
.timing {
padding-top: 0.5rem;
margin: 0 -0.25rem;
margin: 0 0.5rem;
display: flex;
justify-content: space-between;
color: nb-theme(color-fg);
}
.controls {
// TODO fix controls font-size when complete icons fo
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.875rem 1.25rem 0;
padding: 0.25rem 2rem 1rem;
max-width: 400px;
width: 100%;
margin: 0 auto;
i {
display: flex;
@ -147,8 +155,9 @@
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
margin: 0 auto;
position: relative;
max-width: 400px;
i {
font-size: 1.5rem;
@ -184,6 +193,10 @@
}
&.collapsed {
$player-height: 4.5rem;
border: none;
height: $player-height;
.header {
display: none;
@ -191,6 +204,7 @@
.body {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0;
@ -200,16 +214,17 @@
display: none;
}
.cover {
height: 4.5rem;
.track-info {
height: $player-height;
flex-direction: row;
margin: 0;
padding: 0;
flex: initial;
img {
height: 4.5rem;
width: 4.5rem;
margin: 0;
.cover {
height: $player-height;
width: $player-height;
border-radius: 0 0 0 nb-theme(radius);
flex: none;
}
.details {
@ -228,7 +243,7 @@
align-self: flex-start;
position: absolute;
margin-top: calc(-0.75rem + 1px);
margin-left: 4.5rem;
margin-left: $player-height;
}
.timing {
@ -236,7 +251,10 @@
}
.controls {
margin: 0 1rem 0 0;
padding: 0 1rem 0 0;
max-width: inherit;
width: inherit;
margin: 0;
i {
width: inherit;
@ -256,26 +274,28 @@
.volume {
display: none;
}
}
@include media-breakpoint-down(sm) {
.cover {
.details {
font-size: 0.875rem;
.track-info .details {
@include media-breakpoint-down(sm) {
h4 {
font-size: 1.25rem;
}
span {
font-size: 0.875rem;
}
}
}
}
@include media-breakpoint-down(is) {
.cover {
.details {
font-size: 0.75rem;
@include media-breakpoint-down(is) {
h4 {
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() {
ngx-room-selector {
width: 70%;
border-right: 2px solid nb-theme(separator);
}
ngx-player {
@ -40,6 +41,7 @@
ngx-room-selector, ngx-player {
width: 100%;
border: none;
}
nb-card {
@ -47,9 +49,11 @@
justify-content: space-between;
.collapse {
display: flex;
justify-content: center;
align-self: center;
display: inline-block;
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 3rem;
color: nb-theme(color-fg);
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',
styleUrls: ['./rooms.component.scss'],
template: `
<nb-card size="large">
<i (click)="collapse()" class="ion-ios-arrow-down collapse" [hidden]="isCollapsed()"></i>
<nb-card [size]="breakpoint.width >= breakpoints.sm ? 'large' : 'medium'">
<i (click)="collapse()" class="nb-arrow-down collapse" [hidden]="isCollapsed()"></i>
<ngx-room-selector (select)="select($event)"></ngx-room-selector>
<ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
</nb-card>