purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Scrumboard, Chat) some css style refinements

Browse Source
This commit is contained in:
mustafahlvc 2017-09-08 19:21:35 +03:00
parent d5b6dea1a2
commit 44cdadaec9
13 changed files with 60 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/core/components/search-bar/search-bar.component.scss
View File

@ -7,7 +7,7 @@
height: 64px;
font-size: 13px;
@include media-breakpoint-down('xs') {
@include media-breakpoint-down('sm') {
height: 56px;
}
@ -20,7 +20,7 @@
height: 64px !important;
line-height: 64px !important;
@include media-breakpoint-down('xs') {
@include media-breakpoint-down('sm') {
height: 56px !important;
line-height: 56px !important;
}
@ -30,7 +30,7 @@
width: 64px !important;
height: 64px !important;
line-height: 64px !important;
@include media-breakpoint-down('xs') {
@include media-breakpoint-down('sm') {
height: 56px !important;
line-height: 56px !important;
}

1
src/app/main/content/apps/chat/chat-view/chat-view.component.scss
View File

@ -3,6 +3,7 @@
flex: 1 0 auto;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
overflow: hidden;
max-width: 100%;
.chat {

8
src/app/main/content/apps/chat/chat.component.scss
View File

@ -9,8 +9,8 @@
max-width: 1400px;
margin: 0 auto;
@include media-breakpoint(xs) {
padding: 8px !important;
@include media-breakpoint-down(md) {
padding: 0 !important;
}
.content-card {
@ -33,6 +33,10 @@
height: auto;
}
> .mat-drawer-content {
max-width: 100%;
}
md-sidenav {
display: flex;
flex-direction: column;

4
src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss
View File

@ -11,6 +11,10 @@
.toolbar-bottom {
height: 240px;
@include media-breakpoint-down(md) {
height: 180px;
}
}
}

4
src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss
View File

@ -11,6 +11,10 @@
.toolbar-bottom {
height: 240px;
@include media-breakpoint-down(md) {
height: 180px;
}
}
}

21
src/app/main/content/apps/scrumboard/board/board.component.html
View File

@ -3,7 +3,7 @@
<div id="board">
<!-- HEADER -->
<div class="header md-accent-bg p-16 p-sm-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column">
<div class="header md-accent-bg p-16 p-md-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column">
<div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap>
@ -20,19 +20,16 @@
<!-- / BOARD SELECTION BUTTON -->
<!-- BOARD NAME -->
<div class="header-board-name mb-8 mb-sm-0"
<div class="header-board-name mb-8 mb-md-0"
fxLayout="row" fxLayoutAlign="center center"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="center center"
fxFlex="1 0 100%" fxFlex.gt-xs="1 0 auto"
fxFlexOrder="1" fxFlexOrder.gt-xs="2">
<div>
<md-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</md-icon>
<fuse-scrumboard-edit-board-name
fxFlex="1 0 auto"
[board]="board"
(onNameChanged)="onBoardNameChanged($event)">
</fuse-scrumboard-edit-board-name>
</div>
<md-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</md-icon>
<fuse-scrumboard-edit-board-name
[board]="board"
(onNameChanged)="onBoardNameChanged($event)">
</fuse-scrumboard-edit-board-name>
</div>
<!-- / BOARD NAME -->
@ -53,10 +50,10 @@
</div>
<!-- / HEADER -->
<div fxFlex class="board-content-wrapper p-16 p-sm-24">
<div fxFlex class="board-content-wrapper p-16 p-md-24">
<!-- BOARD -->
<div class="board-content ngx-dnd-container p-16 p-sm-24" [class]="board.settings.color+'-100-bg'" fxLayout="row"
<div class="board-content ngx-dnd-container p-16 p-md-24" [class]="board.settings.color+'-100-bg'" fxLayout="row"
ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)">
<!-- LIST -->

4
src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html
View File

@ -6,7 +6,7 @@
</div>
<form [formGroup]="form" (submit)="onFormSubmit()"
<form [formGroup]="form" (ngSubmit)="onFormSubmit()"
class="board-name-form" fxFlex="1 0 auto"
*ngIf="formActive" fxFlex="row">
@ -15,7 +15,7 @@
<button md-icon-button fxFlex="0 1 auto">
<md-icon>check</md-icon>
</button>
<button md-icon-button fxFlex="0 1 auto" (click)="closeForm()">
<button md-icon-button fxFlex="0 1 auto" (click)="closeForm()" type="button">
<md-icon>close</md-icon>
</button>
</form>

2
src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss
View File

@ -1,4 +1,6 @@
:host {
display: block !important;
.board-name {
text-overflow: ellipsis;
overflow: hidden;

4
src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html
View File

@ -2,7 +2,7 @@
{{list.name}}
</div>
<form [formGroup]="form" (submit)="onFormSubmit()"
<form [formGroup]="form" (ngSubmit)="onFormSubmit()"
class="list-header-name-form" fxFlex="1 0 auto"
*ngIf="formActive" fxFlex="row">
@ -11,7 +11,7 @@
<button md-icon-button fxFlex="0 1 auto">
<md-icon>check</md-icon>
</button>
<button md-icon-button fxFlex="0 1 auto" (click)="closeForm()">
<button md-icon-button fxFlex="0 1 auto" (click)="closeForm()" type="button">
<md-icon>close</md-icon>
</button>
</form>

2
src/app/main/content/apps/scrumboard/board/list/list.component.scss
View File

@ -20,7 +20,7 @@
padding: 0 8px 0 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
@include media-breakpoint(xs) {
@include media-breakpoint-down(sm) {
height: 48px;
min-height: 48px;
}

47
src/app/main/content/apps/scrumboard/scrumboard.component.html
View File

@ -1,36 +1,31 @@
<!-- BOARDS -->
<div id="boards" class="md-primary-400-bg" fxLayout="column" fxFlex>
<!-- BOARD SELECTION -->
<div id="board-selector" fxLayout="column" fxLayoutAlign="start center" fxFlex>
<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex perfect-scrollbar>
<div class="header pt-44 pt-md-88" fxFlex="0 0 auto">
<h1>Scrumboard App</h1>
</div>
<!-- BOARD LIST -->
<div class="board-list" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<!-- BOARD -->
<div class="board-list-item" *ngFor="let board of boards"
[routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri"
fxLayout="column" fxLayoutAlign="center center">
<md-icon class="s-64">assessment</md-icon>
<div class="board-name">{{board.name}}</div>
</div>
<!-- / BOARD -->
<!-- NEW BOARD BUTTON -->
<div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center"
(click)="newBoard()">
<md-icon class="s-64">add_circle</md-icon>
<div class="board-name">Add new board</div>
</div>
<!-- / NEW BOARD BUTTON -->
<!-- BOARD LIST -->
<div class="board-list" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<!-- BOARD -->
<div class="board-list-item" *ngFor="let board of boards"
[routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri"
fxLayout="column" fxLayoutAlign="center center">
<md-icon class="s-64">assessment</md-icon>
<div class="board-name">{{board.name}}</div>
</div>
<!-- / BOARD LIST -->
<!-- / BOARD -->
<!-- NEW BOARD BUTTON -->
<div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center"
(click)="newBoard()">
<md-icon class="s-64">add_circle</md-icon>
<div class="board-name">Add new board</div>
</div>
<!-- / NEW BOARD BUTTON -->
</div>
<!-- / BOARD SELECTION -->
<!-- / BOARD LIST -->
</div>
<!-- / BOARDS -->

159
src/app/main/content/apps/scrumboard/scrumboard.component.scss
View File

@ -3,11 +3,12 @@
:host {
min-height: 100%;
#board-selector {
margin-top: 88px;
#boards {
width: 100%;
.board-list {
padding: 32px 0;
max-height: none!important;
.board-list-item {
min-width: 210px;
@ -31,157 +32,3 @@
}
}
#scrumboard {
height: 100%;
> .header {
position: relative;
height: 96px;
min-height: 96px;
max-height: 96px;
background-image: none;
z-index: 49;
.header-content {
.header-boards-button {
margin: 0;
}
.header-board-name {
font-size: 16px;
.board-subscribe {
margin-right: 8px;
}
.editable-buttons {
md-icon {
color: #FFFFFF !important;
}
}
}
.right-side {
> .md-button:last-child {
margin-right: 0;
}
}
}
}
#board-selector {
position: absolute;
top: 96px;
right: 0;
left: 0;
height: 192px;
z-index: 48;
padding: 24px;
opacity: 1;
.board-list-item {
width: 128px;
height: 192px;
padding: 16px;
cursor: pointer;
position: relative;
.board-name {
text-align: center;
padding: 16px 0;
}
.selected-icon {
position: absolute;
top: 0;
left: 50%;
width: 32px;
height: 32px;
margin-left: -16px;
border-radius: 50%;
text-align: center;
color: white;
i {
line-height: 32px !important;
}
}
&.add-new-board {
opacity: 0.6;
}
}
}
.content {
padding: 0;
background: transparent;
}
.editable-click {
cursor: pointer;
text-decoration: none;
color: inherit;
border-bottom: none;
}
.editable-wrap {
display: block;
position: relative;
.editable-controls {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
.editable-input {
width: inherit;
background-color: white;
padding: 8px;
border: 1px solid rgba(0, 0, 0, 0.12);
}
.editable-buttons {
display: inherit;
.md-button {
margin: 0;
&:first-of-type {
padding-right: 0;
}
.icon-cancel {
color: rgba(0, 0, 0, 0.32);
}
}
}
}
}
.board-selector-backdrop {
z-index: 47;
}
}
// RESPONSIVE
@include media-breakpoint(xs) {
#scrumboard {
.header {
height: 120px;
max-height: 120px;
min-height: 120px;
}
#board-selector {
top: 120px;
}
}
}

4
src/app/main/toolbar/toolbar.component.scss
View File

@ -27,7 +27,7 @@
min-width: 64px;
height: 64px;
@include media-breakpoint-down('xs') {
@include media-breakpoint-down(sm) {
height: 56px;
}
}
@ -42,7 +42,7 @@
width: 1px;
background: rgba(0, 0, 0, .12);
@include media-breakpoint-down('xs') {
@include media-breakpoint-down(sm) {
height: 56px;
}
}