ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

Browse Source
This commit is contained in:
leejinho 2020-02-05 11:48:28 +09:00
commit 74128a071a
5 changed files with 83 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
View File

@ -3,6 +3,12 @@ $tablet-l-width: 1024px;
$tablet-s-width: 768px;
$mob-l-width: 640px;
@mixin tab {
@media screen and (max-width: #{$tablet-l-width}), (max-height: #{$tablet-s-width}) {
@content;
}
}
.login {
width: 100%;
background-size: cover;
@ -84,7 +90,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transform: scale(0.70);
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
opacity $time/4 step-end;
opacity: 0;
@ -264,53 +270,61 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
::ng-deep .login-form-box {
position: absolute;
width: 30vw;
width: 26vw;
height: 70%;
top: 15%;
right: 15%;
display: flex;
justify-content: flex-end;
z-index: 100;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
@media screen and (max-width: #{$desktop-l-width}) {
width: 28vw;
}
@media screen and (max-width: #{$tablet-l-width}), (max-height: $tablet-s-width) {
width: 34vw;
}
.mat-form-field {
&:last-child,
&:first-child {
margin-top: 10px;
}
padding-top: 20px;
.mat-form-field-wrapper {
padding-bottom: 0;
.mat-form-field-infix {
padding-top: 0;
border: 0;
}
.mat-form-field-label-wrapper {
top: -1.4em;
}
.mat-form-field-underline {
bottom: 0;
}
//min-size 반응형 적용
@include tab {
.mat-form-field-infix {
input {
line-height: 1em;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
font-size: 0.9em;
}
}
.mat-form-field-label-wrapper {
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
font-size: 0.9em;
top: -1em;
}
}
.mat-form-field-subscript-wrapper {
.mat-error {
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
font-size: 0.8em;
}
}
}
}
&.mat-focused,
&:not(.mat-form-field-hide-placeholder) {
.mat-form-field-label-wrapper {
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
font-size: 0;
}
}
}
}
}
.error-container {
padding-top: 10px;
}
}
@media all and (max-width: 1400px) {

1
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

@ -275,6 +275,7 @@ $daesang-grey: (
cursor: pointer;
}
//snackbar
.cdk-global-overlay-wrapper {
align-items: center !important;
justify-content: center !important;

37
projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
View File

@ -3,15 +3,22 @@ $tablet-l-width: 1024px;
$tablet-s-width: 768px;
$mob-l-width: 640px;
$login-max-height: 800px;
@mixin desktop-m {
@media screen and (max-width: #{$desktop-l-width}) {
@content;
}
}
// 태블릿
@mixin tab {
@media screen and (max-width: #{$tablet-l-width}), (max-height: #{$login-max-height}) {
@media screen and (max-width: #{$tablet-l-width}) {
@content;
}
}
// 모바일 large
@mixin mob-large {
@mixin mob-l {
@media screen and (max-width: #{$mob-l-width}) {
@content;
}
@ -31,7 +38,7 @@ $login-max-height: 800px;
font-size: 14px;
.mat-title {
margin: 10px 0 40px 0;
margin: 10px 0 10px 0;
text-indent: -10000000px;
width: 140px;
height: 140px;
@ -39,6 +46,7 @@ $login-max-height: 800px;
display: inline-flex;
background-size: 100% auto;
flex: 1 1 auto;
background-position-x: center;
}
form {
@ -47,10 +55,10 @@ $login-max-height: 800px;
mat-form-field {
width: 100%;
&.login-id {
margin-bottom: 10px;
&.login-pw {
margin-top: 10px;
@media screen and (max-width: #{$tablet-s-width}) {
margin-bottom: 0;
margin-top: 0;
}
}
}
@ -130,8 +138,9 @@ $login-max-height: 800px;
opacity: 0.7;
padding: 6px;
border-radius: 100px;
width: 68%;
color: #2d3a4a;
width: 72%;
color: #333333;
font-size: 0.86em;
&:hover {
opacity: 1;
}
@ -146,8 +155,13 @@ $login-max-height: 800px;
}
}
}
// 모바일 large
@include mob-large {
@include desktop-m {
.login-form {
.mat-title {
background-size: 86% auto;
}
}
}
@include tab {
@ -173,7 +187,8 @@ $login-max-height: 800px;
width: 100%;
margin-left: -12%;
font-size: 0.9em;
padding: 6px;
padding: 0px;
line-height: 3em;
}
}
}

7
projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
View File

@ -11,8 +11,8 @@ $tablet-l-width: 1024px;
display: inline-flex;
margin-right: 20px;
justify-items: center;
width: 80px;
justify-content: space-between;
flex: 0 0 auto;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
margin-right: 10px;
}
@ -20,8 +20,11 @@ $tablet-l-width: 1024px;
width: 24px;
height: 24px;
line-height: normal;
margin-right: 6px;
margin-right: 12px;
color: rgb(0, 0, 0, 0.7);
@media screen and (max-width: #{$tablet-l-width}) {
margin-right: 6px;
}
.mat-icon {
font-size: 20px;
color: rgb(0, 0, 0, 0.87);

12
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
View File

@ -5,7 +5,8 @@ import {
Output,
EventEmitter,
ViewChildren,
ChangeDetectorRef
ChangeDetectorRef,
ChangeDetectionStrategy
} from '@angular/core';
import {
RoomInfo,
@ -18,7 +19,7 @@ import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { TranslatePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe';
import {
TranslateService as uiTranslateService,
TranslateService as UcapUiTranslateService,
StringUtil
} from '@ucap-webmessenger/ui';
import { TranslateService } from '@ngx-translate/core';
@ -27,7 +28,8 @@ import { EventType } from '@ucap-webmessenger/protocol-event';
@Component({
selector: 'ucap-room-list-item',
templateUrl: './list-item.component.html',
styleUrls: ['./list-item.component.scss']
styleUrls: ['./list-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListItemComponent implements OnInit {
@Input()
@ -58,7 +60,7 @@ export class ListItemComponent implements OnInit {
constructor(
private logger: NGXLogger,
private uiTranslateService: uiTranslateService,
private ucapUiTranslateService: UcapUiTranslateService,
private translateService: TranslateService,
private changeDetectorRef: ChangeDetectorRef
) {}
@ -125,7 +127,7 @@ export class ListItemComponent implements OnInit {
getRoomNameByRoomUser(roomUserInfos: (RoomUserInfo | UserInfoShort)[]) {
let roomName = new TranslatePipe(
this.uiTranslateService,
this.ucapUiTranslateService,
this.changeDetectorRef
).transform(roomUserInfos, 'name', ',');