web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

usergrid avatar display and scrolling

Browse Source
This commit is contained in:
David Benqué
2019-12-02 11:34:34 +00:00
parent 66073804ee
commit 1da5e8ac3c
3 changed files with 53 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
customize.dist/src/less2/include/avatar.less
View File

@@ -1,4 +1,5 @@
@import (reference) "./tools.less";
@import (reference) "./colortheme-all.less";
.avatar_vars(
@width: 30px
) {
@@ -35,10 +36,11 @@
}
.cp-avatar-default {
.tools_unselectable();
background: white;
color: black;
background: rgb(160, 160, 160); // XXX testing
color: @cryptpad_text_col; // XXX testing
font-size: @avatar-font-size;
font-size: var(--avatar-font-size);
text-transform: capitalize;
}
media-tag {
min-height: @avatar-width;

51
customize.dist/src/less2/include/usergrid.less
View File

@@ -10,12 +10,12 @@
.cp-usergrid-grid {
display: flex;
flex-wrap: wrap;
margin: -3px;
margin-bottom: 6px;
}
&:not(.large) {
.cp-usergrid-grid {
margin: -3px;
margin-bottom: 6px;
max-height: 130px;
overflow: auto;
@media screen and (max-height: 515px) {
max-height: unset; // remove double scrollbar
}
}
&.cp-usergrid-empty {
@@ -30,13 +30,13 @@
min-width: 0;
margin-bottom: 0 !important;
height: 38px;
margin: 6px 8px 6px 0px;
margin: 6px 0px;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: @cryptpad_color_grey;
opacity: 1; /* Firefox */
}
}
margin-bottom: 15px;
margin-bottom: 10px;
&:empty {
margin: 0;
display: none;
@@ -54,7 +54,6 @@
justify-content: center;
align-items: center;
padding: 5px;
margin: 3px;
cursor: default;
transition: order 0.5s, background-color 0.5s;
margin-top: 1px;
@@ -64,10 +63,21 @@
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
order: -1 !important;
.cp-usergrid-avatar {
media-tag, .cp-avatar-default {
opacity: 0.7;
}
}
}
.cp-usergrid-user-avatar {
min-height: 40px;
}
&:not(.large) {
.cp-usergrid-user-name {
display: none;
}
}
.cp-usergrid-user-name {
overflow: hidden;
white-space: nowrap;
@@ -75,24 +85,33 @@
width: 100%;
text-align: center;
line-height: 18px;
flex: 1;
}
border: 1px solid @colortheme_alertify-primary;
&:not(.large) {
.avatar_main(40px);
.avatar_main(60px);
}
&.large {
.avatar_main(25px);
width: 140px;
width: 145px;
height: 35px;
flex-flow: row;
margin: 0;
margin-right: 15px;
margin-bottom: 1px;
&:nth-child(3n) {
margin-right: 0;
margin: 3px;
flex-basis: calc(33.3333333% - 6px);
flex-shrink: 1;
min-width: 0;
.cp-usergrid-user-name {
margin-left: 5px;
text-align: left;
color: @cryptpad_text_col;
}
}
&.cp-selected {
.cp-usergrid-user-name {
color: @colortheme_alertify-primary-text;
}
}
}
}
}