대화방검색, 스티커, 번역 수정중
This commit is contained in:
khk
parent
b9e135dfab
commit
2da4bb69f7
|
|
@ -92,6 +92,7 @@
|
|||
}
|
||||
.room-option {
|
||||
margin-left: auto;
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
.chat-search-frame {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
font-weight: 600;
|
||||
span {
|
||||
margin-left: auto;
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
::ng-deep .mat-tab-labels {
|
||||
|
|
|
|||
|
|
@ -69,7 +69,8 @@ $tablet-s-width: 768px;
|
|||
padding: 0 10px;
|
||||
height: calc(100% - 450px);
|
||||
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
|
||||
height: calc(100% - 160px);
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 170px);
|
||||
}
|
||||
overflow-y: auto;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -45,8 +45,12 @@ textarea[name='message'] {
|
|||
line-height: 1.2em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.mat-form-field-flex {
|
||||
padding-top: 0;
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
background-color: none;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
::ng-deep .send-message-button {
|
||||
margin-left: 20px;
|
||||
|
|
|
|||
|
|
@ -21,16 +21,16 @@
|
|||
</div>
|
||||
<ul class="event-info">
|
||||
<li class="event-date bg-accent-brightest">
|
||||
<span class="text-accent-darkest">{{
|
||||
<label class="text-accent-darkest">{{
|
||||
'common.units.date' | translate
|
||||
}}</span
|
||||
>{{ date | ucapDate: 'YYYY.MM.DD' }}
|
||||
}}</label
|
||||
><span>{{ date | ucapDate: 'YYYY.MM.DD' }}</span>
|
||||
</li>
|
||||
<li class="event-time bg-accent-brightest">
|
||||
<span class="text-accent-darkest">{{
|
||||
<label class="text-accent-darkest">{{
|
||||
'common.units.time' | translate
|
||||
}}</span
|
||||
>{{ date | ucapDate: 'a hh:mm' }}
|
||||
}}</label
|
||||
><span>{{ date | ucapDate: 'a hh:mm' }}</span>
|
||||
</li>
|
||||
<li class="event-content">
|
||||
{{ message.sentMessageJson.title }}
|
||||
|
|
|
|||
|
|
@ -29,8 +29,14 @@
|
|||
&.event-time {
|
||||
padding: 4px 10px;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
label {
|
||||
margin-right: 10px;
|
||||
flex: 0 0 auto;
|
||||
font-size: 0.96em;
|
||||
font-weight: 600;
|
||||
width: 30px;
|
||||
}
|
||||
span {
|
||||
width: 60px;
|
||||
padding: 1px 6px;
|
||||
margin-right: 6px;
|
||||
border-radius: 100px;
|
||||
|
|
@ -39,7 +45,7 @@
|
|||
justify-content: center;
|
||||
font-size: 0.96em;
|
||||
margin-bottom: 2px;
|
||||
color: #777777;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
&.event-content {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div fxFlex fxLayout="row" class="chatroom-search">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
|
||||
<form [formGroup]="fgSearch" class="w-100-p">
|
||||
<form [formGroup]="fgSearch">
|
||||
<i class="material-icons icon-search"> </i>
|
||||
<mat-form-field floatLabel="never">
|
||||
<input
|
||||
|
|
@ -31,10 +31,10 @@
|
|||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<span class="stroke-bar"></span>
|
||||
<span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<span class="stroke-bar"></span>
|
||||
<div class="btns">
|
||||
<button
|
||||
*ngIf="false"
|
||||
|
|
@ -59,39 +59,11 @@
|
|||
<line class="st0" x1="10" y1="2.7" x2="10" y2="12.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<button mat-stroked-button (click)="onClickPrevSearch()" class="btn-toggle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-arrow-up"
|
||||
>
|
||||
<line class="st0" x1="10" y1="15.8" x2="10" y2="4.2" />
|
||||
<polyline class="st0" points="4.2,10 10,4.2 15.8,10 " />
|
||||
</svg>
|
||||
<button class="icon-button btn-search" (click)="onClickPrevSearch()">
|
||||
<i class="mid mdi-arrow-up"></i>
|
||||
</button>
|
||||
<button mat-stroked-button (click)="onClickNextSearch()" class="btn-toggle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-arrow-up"
|
||||
>
|
||||
<line class="st0" x1="10" y1="4.2" x2="10" y2="15.8" />
|
||||
<polyline class="st0" points="15.8,10 10,15.8 4.2,10 " />
|
||||
</svg>
|
||||
<button class="icon-button btn-search" (click)="onClickNextSearch()">
|
||||
<i class="mid mdi-arrow-down"></i>
|
||||
</button>
|
||||
|
||||
<!--<mat-button-toggle-group>
|
||||
|
|
@ -115,27 +87,11 @@
|
|||
</mat-button-toggle>
|
||||
<mat-button-toggle ></mat-button-toggle>
|
||||
</mat-button-toggle-group>-->
|
||||
</div>
|
||||
<span class="stroke-bar"></span>
|
||||
<span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
|
||||
<button
|
||||
class="btn-close-searchbox bg-accent-dark"
|
||||
(click)="inputSearch.value = ''; onClickSearchCancel()"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-x"
|
||||
<button
|
||||
class="icon-button btn-close-searchbox bg-accent-dark"
|
||||
(click)="inputSearch.value = ''; onClickSearchCancel()"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<i class="mid mdi-window-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,31 @@
|
|||
$tablet-l-width: 1024px;
|
||||
$tablet-s-width: 768px;
|
||||
|
||||
.chatroom-search {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex: 0 0 auto;
|
||||
justify-items: center;
|
||||
width: 100%;
|
||||
.search-form {
|
||||
flex-flow: row;
|
||||
padding: 0 0 0 20px;
|
||||
flex: 1 1 auto;
|
||||
width: calc(100% - 126px);
|
||||
position: relative;
|
||||
@media screen and (max-width: #{$tablet-s-width}),
|
||||
(max-height: 600px) {
|
||||
padding: 0 0 0 14px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
flex-flow: row;
|
||||
flex: 1 1 auto;
|
||||
margin-right: 20px;
|
||||
width: 70%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.mat-form-field-label,
|
||||
.mat-hint {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
|
|
@ -22,59 +35,115 @@
|
|||
}
|
||||
.text-amount {
|
||||
display: inline-flex;
|
||||
min-width: 80px;
|
||||
flex: 0 0 auto;
|
||||
min-width: 30px;
|
||||
padding: 0 10px;
|
||||
align-self: center;
|
||||
font-size: 0.7em;
|
||||
font-size: 0.9em;
|
||||
font-weight: normal;
|
||||
justify-content: center;
|
||||
border-radius: 50px;
|
||||
margin-right: 10px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .search-form {
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-wrapper {
|
||||
form {
|
||||
.icon-search {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
color: #ffffff;
|
||||
padding-bottom: 0.8em;
|
||||
.mat-form-field-infix {
|
||||
.mat-input-element {
|
||||
margin-right: 10px;
|
||||
}
|
||||
@media screen and (max-width: #{$tablet-s-width}),
|
||||
(max-height: 600px) {
|
||||
.icon-search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-wrapper {
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
padding-bottom: 0.8em;
|
||||
.mat-form-field-infix {
|
||||
.mat-input-element {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
.mat-form-field-suffix {
|
||||
button {
|
||||
position: relative;
|
||||
transform: translateY(2px);
|
||||
.mat-button-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-form-field-label {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
.mat-form-field-suffix {
|
||||
button {
|
||||
position: relative;
|
||||
transform: translateY(4px);
|
||||
.mat-button-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.2em;
|
||||
.mat-form-field-underline {
|
||||
height: 0;
|
||||
.mat-form-field-ripple {
|
||||
top: 6px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-form-field-label {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
height: 0;
|
||||
.mat-form-field-ripple {
|
||||
top: 6px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
::ng-deep .chat-search {
|
||||
margin: 0 4px 4px;
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
@media screen and (max-width: #{$tablet-s-width}),
|
||||
(max-height: 600px) {
|
||||
padding: 4px;
|
||||
.search-form {
|
||||
form {
|
||||
display: flex;
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-search {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
color: #ffffff;
|
||||
margin-right: 10px;
|
||||
|
||||
.search-form {
|
||||
form {
|
||||
display: flex;
|
||||
.mat-form-field {
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
.mat-form-field-infix {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
.mat-form-field-label-wrapper {
|
||||
top: 0;
|
||||
.mat-form-field-label {
|
||||
top: 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83,39 +152,21 @@
|
|||
.btns {
|
||||
display: flex;
|
||||
flex: 0 0 0%;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
border-radius: 50px;
|
||||
.mat-stroked-button {
|
||||
border: none;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background-color: (0, 0, 0, 0.7);
|
||||
&.btn-toggle {
|
||||
display: flex;
|
||||
//border-right: 1px solid #ffffff;
|
||||
justify-items: center;
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
line-height: inherit;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke: #ffffff;
|
||||
}
|
||||
}
|
||||
margin-left: auto;
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
button {
|
||||
margin-left: 4px;
|
||||
&.btn-search.icon-button {
|
||||
align-self: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-close-searchbox {
|
||||
width: 3em;
|
||||
width: 36px;
|
||||
height: 100%;
|
||||
//background: #0367a6;
|
||||
stroke: #ffffff;
|
||||
|
|
@ -133,7 +184,7 @@
|
|||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
margin: 0 10px;
|
||||
display: inline-flex;
|
||||
align-self: center;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,9 +26,28 @@ mat-icon {
|
|||
}
|
||||
|
||||
.icon-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
i {
|
||||
font-family: 'material-outline-icons';
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-weight: normal;
|
||||
&:before {
|
||||
display: inline-block;
|
||||
font: normal normal normal 20px/1 'Material Design Icons';
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
line-height: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
$tablet-l-width: 1024px;
|
||||
$tablet-s-width: 768px;
|
||||
|
||||
::ng-deep .sticker-selector {
|
||||
height: 220px;
|
||||
height: 210px;
|
||||
border-top: 1px solid #cccccc;
|
||||
.mat-tab-header {
|
||||
.mat-tab-label {
|
||||
|
|
@ -7,27 +10,40 @@
|
|||
}
|
||||
}
|
||||
.mat-tab-body-wrapper {
|
||||
height: 180px;
|
||||
height: 150px;
|
||||
overflow: auto;
|
||||
}
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
height: 180px;
|
||||
.mat-tab-body-wrapper {
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-item-box {
|
||||
flex-wrap: wrap;
|
||||
padding: 20px 20px 0;
|
||||
padding: 10px 20px 0;
|
||||
overflow: auto;
|
||||
|
||||
.sticker-item {
|
||||
width: 60px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
.sticker-item-box {
|
||||
.sticker-item {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected-sticker {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
padding: 10px 20px;
|
||||
text-align: right;
|
||||
background-color: rgba(45, 58, 74, 0.8);
|
||||
img {
|
||||
|
|
@ -36,7 +52,7 @@
|
|||
.btn-close {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 20px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
$tablet-l-width: 1024px;
|
||||
$tablet-s-width: 768px;
|
||||
|
||||
.translation-preview {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -7,7 +10,7 @@
|
|||
.translation-section {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
font-size: 1.1em;
|
||||
font-size: 1em;
|
||||
|
||||
.translate-text {
|
||||
margin: 14px 20px 14px 30px;
|
||||
|
|
@ -18,6 +21,10 @@
|
|||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
@media screen and (max-width: #{$tablet-s-width}),
|
||||
(max-height: 600px) {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
.btn-translation-send {
|
||||
align-self: center;
|
||||
|
|
@ -27,7 +34,7 @@
|
|||
min-width: 40px;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
@ -52,10 +59,6 @@
|
|||
padding: 0 2vw;
|
||||
justify-items: flex-end;
|
||||
align-content: space-between;
|
||||
font-size: 0.9em;
|
||||
/*background-color: rgba(30, 167, 185, 0.1);
|
||||
border-top: 1px solid rgba(30, 167, 185, 0.3);
|
||||
border-bottom: 1px solid rgba(30, 167, 185, 0.3);*/
|
||||
.text-language {
|
||||
display: inline-flex;
|
||||
margin-right: 20px;
|
||||
|
|
@ -65,11 +68,22 @@
|
|||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
padding: 10px 20px 4px;
|
||||
.text-language {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.select-language {
|
||||
display: inline-flex;
|
||||
width: 300px;
|
||||
flex: 0 1 auto;
|
||||
margin-right: 20px;
|
||||
font-size: 1em;
|
||||
@media screen and (max-width: #{$tablet-s-width}),
|
||||
(max-height: 600px) {
|
||||
width: 50%;
|
||||
}
|
||||
.mat-form-field-wrapper {
|
||||
width: 100%;
|
||||
line-height: 0.8em;
|
||||
|
|
@ -85,6 +99,13 @@
|
|||
display: inline-flex;
|
||||
width: 120px;
|
||||
height: unset;
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
.mat-slide-toggle-label {
|
||||
width: 20%;
|
||||
flex-flow: column;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
&.simpleview {
|
||||
margin-right: 20px;
|
||||
margin-left: auto;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user