buddy list modify
This commit is contained in:
khk
parent
150ebd56af
commit
b59e67ed42
|
|
@ -1,10 +1,12 @@
|
|||
@charset 'utf-8';
|
||||
|
||||
$listH-row3: 90px;
|
||||
$listH-row2: 60px;
|
||||
$checkbox-size: 16px;
|
||||
$presence-size: 10px;
|
||||
$thumbnail-msize: 50px !global;
|
||||
$bg-list-hover: #efefef !global;
|
||||
$thumbnail-msize: 40px;
|
||||
$bg-list-hover: #efefef;
|
||||
$bg-list-item-msg: #f0f4f6;
|
||||
|
||||
@mixin ellipsis($row) {
|
||||
overflow: hidden;
|
||||
|
|
@ -28,9 +30,6 @@ $bg-list-hover: #efefef !global;
|
|||
@mixin visible($sh) {
|
||||
display: $sh;
|
||||
}
|
||||
@function position-m($h, $o, $p) {
|
||||
@return ($h - $o - $p) / 2;
|
||||
}
|
||||
@mixin presence-status($status) {
|
||||
@if $status == pcOn {
|
||||
background-color: #28ad66;
|
||||
|
|
@ -42,3 +41,6 @@ $bg-list-hover: #efefef !global;
|
|||
background-color: #f0c10a;
|
||||
}
|
||||
}
|
||||
@function position-m($h, $o, $p) {
|
||||
@return ($h - $o - $p) / 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,29 @@
|
|||
<!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple> 클래스에 checkbox만 추가-->
|
||||
<div class="list-item checkbox" matRipple>
|
||||
<!--presence-pcOn , presence-pcOut presence-pcOff , presence-pcOther-->
|
||||
<span class="presence-pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
|
||||
<div class="item-default">
|
||||
<img
|
||||
class="thumbnail"
|
||||
src="{{ profileImageRoot + userInfo.profileImageFile }}"
|
||||
/>
|
||||
<ul class="info">
|
||||
<li class="name">{{ userInfo.name }} {{ userInfo.grade }}</li>
|
||||
<li class="dept">
|
||||
{{ userInfo.deptName }}
|
||||
가나다라마바사아자차카파하가나다라마바사아자차카파하하가나다
|
||||
</li>
|
||||
<li class="record">{{ userInfo.intro }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-item" matRipple>
|
||||
<!--pcOn , pcOut pcOff , pcOther-->
|
||||
<span class="presence pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
|
||||
<dl class="item-default">
|
||||
<dt>
|
||||
<img
|
||||
class="thumbnail"
|
||||
src="{{ profileImageRoot + userInfo.profileImageFile }}"
|
||||
/>
|
||||
</dt>
|
||||
<dd class="info">
|
||||
<div class="detail">
|
||||
<span class="name">
|
||||
<b>{{ userInfo.name }}</b>
|
||||
{{ userInfo.grade }}
|
||||
</span>
|
||||
<span class="dept">
|
||||
{{ userInfo.deptName }}
|
||||
가나다라마바사아자차카파하가나다라마바사아자차카파하하가나다
|
||||
</span>
|
||||
</div>
|
||||
<div class="msg-status">
|
||||
{{ userInfo.intro }}상태메시지 상태메시지 상태메시지
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
<mat-checkbox *ngIf="checkable"></mat-checkbox>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,21 +6,31 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: $listH-row3;
|
||||
height: $listH-row2;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
padding: 14px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
%presence {
|
||||
display: inline-block;
|
||||
width: $presence-size;
|
||||
height: $presence-size;
|
||||
vertical-align: middle;
|
||||
margin-top: position-m($thumbnail-msize, $presence-size, 0) * -1;
|
||||
//margin-top: position-m($listH-row2, $presence-size, 0);
|
||||
align-items: center;
|
||||
text-indent: -10000000px;
|
||||
margin-right: 10px;
|
||||
margin-right: 8px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
%msg-status {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
background-color: $bg-list-item-msg;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
@include ellipsis(20);
|
||||
@include border-radius(4px);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
@extend %list-item;
|
||||
|
|
@ -28,20 +38,17 @@
|
|||
background-color: $bg-list-hover;
|
||||
}
|
||||
.presence {
|
||||
&-pcOn {
|
||||
@extend %presence;
|
||||
@extend %presence;
|
||||
&.pcOn {
|
||||
@include presence-status(pcOn);
|
||||
}
|
||||
&-pcOut {
|
||||
@extend %presence;
|
||||
&.pcOut {
|
||||
@include presence-status(pcOut);
|
||||
}
|
||||
&-pcOff {
|
||||
@extend %presence;
|
||||
&.pcOff {
|
||||
@include presence-status(pcOff);
|
||||
}
|
||||
&-pcOther {
|
||||
@extend %presence;
|
||||
&.pcOther {
|
||||
@include presence-status(pcOther);
|
||||
}
|
||||
}
|
||||
|
|
@ -60,39 +67,65 @@
|
|||
@include border-radius(100px);
|
||||
}
|
||||
.info {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: calc(100% - 62px);
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
@include ellipsis(1);
|
||||
&.name {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
width: calc(100% - 50px);
|
||||
.detail {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
@include ellipsis(1);
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.dept {
|
||||
font-size: 12px;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
&.dept {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
&.record {
|
||||
//@include visible(none);
|
||||
}
|
||||
}
|
||||
.msg-status {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
@extend %msg-status;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//가변에 따른 list-item width값 변경
|
||||
.list-item {
|
||||
span[class*='presence'] {
|
||||
.item-default {
|
||||
.detail {
|
||||
width: 60%;
|
||||
}
|
||||
.msg-status {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
.presence {
|
||||
+ .item-default {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
&.checkbox {
|
||||
.presence {
|
||||
+ .item-default {
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
.item-default {
|
||||
width: calc(100% - 30px);
|
||||
.info {
|
||||
.detail {
|
||||
width: 100%;
|
||||
}
|
||||
.msg-status {
|
||||
@include visible(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user