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

Merge pull request #93 from pbondoer/staging

Browse Source 
Add hover on elements in drive and make grid slightly prettier
This commit is contained in:
yflory
2017-03-01 16:33:23 +01:00
committed by GitHub
parent 1bb87164f0 53f4f8826e
commit b238f4c3d3
2 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
www/drive/file.css
View File

@@ -101,18 +101,21 @@ span.fa-folder-open {
color: #000; color: #000;
} }
#tree li { #tree li {
/*cursor: pointer;*/
cursor: auto; cursor: auto;
} }
#tree li:hover > span.element {
text-decoration: underline;
}
#tree li.collapsed ul { #tree li.collapsed ul {
display: none; display: none;
} }
#tree li input { #tree li input {
width: calc(70%); width: calc(70%);
} }
#tree li > span.element-row {
width: 100%;
display: inline-block;
}
#tree li > span.element-row:not(.selected):hover {
background-color: #eee;
}
#tree span.element { #tree span.element {
cursor: pointer; cursor: pointer;
} }
@@ -220,6 +223,9 @@ span.fa-folder-open {
#content li:not(.header) *:not(input) { #content li:not(.header) *:not(input) {
/*pointer-events: none;*/ /*pointer-events: none;*/
} }
#content li:not(.header):hover:not(.selected) {
background-color: #eee;
}
#content li:not(.header):hover .name { #content li:not(.header):hover .name {
/*text-decoration: underline;*/ /*text-decoration: underline;*/
} }
@@ -233,6 +239,8 @@ span.fa-folder-open {
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
padding-top: 10px;
padding-bottom: 5px;
} }
#content div.grid li .name { #content div.grid li .name {
width: 100%; width: 100%;

18
www/drive/file.less
View File

@@ -2,6 +2,8 @@
@tree-fg: #000; @tree-fg: #000;
@tree-lines-col: #888; @tree-lines-col: #888;
@drive-hover: #eee;
@content-bg: @tree-bg; @content-bg: @tree-bg;
@content-bg-ro: darken(@content-bg, 10%); @content-bg-ro: darken(@content-bg, 10%);
@content-fg: @tree-fg; @content-fg: @tree-fg;
@@ -134,17 +136,20 @@ span {
padding: 10px 0px; padding: 10px 0px;
color: @tree-fg; color: @tree-fg;
li { li {
/*cursor: pointer;*/
cursor: auto; cursor: auto;
&:hover > span.element {
text-decoration: underline;
}
&.collapsed ul { &.collapsed ul {
display: none; display: none;
} }
input { input {
width: calc(100% - 30px); width: calc(100% - 30px);
} }
& > span.element-row {
width: 100%;
display: inline-block;
}
& > span.element-row:not(.selected):hover {
background-color: @drive-hover;
}
} }
span.element { span.element {
cursor: pointer; cursor: pointer;
@@ -261,6 +266,9 @@ span {
/*pointer-events: none;*/ /*pointer-events: none;*/
} }
&:hover { &:hover {
&:not(.selected) {
background-color: @drive-hover;
}
.name { .name {
/*text-decoration: underline;*/ /*text-decoration: underline;*/
} }
@@ -276,6 +284,8 @@ span {
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
padding-top: 10px;
padding-bottom: 5px;
.name { .name {
width: 100%; width: 100%;