Display the elements as a table instead of a list

This commit is contained in:
yflory
2017-01-25 18:33:59 +01:00
parent 95056315cf
commit 6f5ff07c2b
3 changed files with 99 additions and 112 deletions

View File

@@ -70,9 +70,6 @@ span {
color: #FEDE8B;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
&.fa {
min-width: 20px;
}
}
/* TREE */
@@ -240,55 +237,56 @@ span {
}
.list {
// Make it act as a table!
ul {
display: table;
width: 100%;
}
li {
display: flex;
flex-flow: row;
align-items: center;
padding-right: 0px;
.element {
display: inline-flex;
flex: 1;
display: table-row;
&> span {
padding: 0 5px;
display: table-cell;
}
}
li {
&.header {
cursor: default;
color: #008;
margin-top: 10px;
.element {
span {
&:not(.fa) {
border-right: 1px solid #CCC;
text-align: left;
}
&.fa {
float: right;
}
color: #888;
span {
&:not(.fa) {
text-align: left;
}
&.sortasc, &.sortdesc {
float: right;
}
}
span {
&.name {
padding-left: 0;
&> span {
&.active {
font-weight: bold;
}
&.clickable {
cursor: pointer;
&:hover {
background: #d8d8d8;
}
}
}
}
}
.element {
span {
padding: 0px 10px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
padding-right: 0px;
border-right: 10px solid rgba(0, 0, 0, 0);
&.name {
width: 478px;
&.icon {
width: 30px;
}
&.type, &.atime, &.ctime {
width: 175px;
}
&.title {
width: 250px;
display: inline;
@media screen and (max-width: 1200px) {
display: none;
}
@@ -298,13 +296,6 @@ span {
}
}
}
.header {
span {
&.name {
width: 500px;
}
}
}
}
}