Skip to content

GitLab

Commit cdc6db9c authored by Martin Urban's avatar Martin Urban
Browse files

File: Changes in table.less / table.css for fixing long filenames

parent c3b98566
Hide whitespace changes
Inline Side-by-side
vispa/extensions/file/static/css/base/views/table/table.css
View file @ cdc6db9c
.file-view-table.row-tiny .node{height:34px}.file-view-table.row-tiny .icon{width:30px}.file-view-table.row-tiny .icon [class^="icon-"],.file-view-table.row-tiny .icon [class*=" icon-"]{font-size:24px}.file-view-table.row-tiny .icon .icon-folder,.file-view-table.row-tiny .icon .icon-folder-open,.file-view-table.row-tiny .icon .icon-folder-symlink{font-size:18px}.file-view-table.row-small .node{height:40px}.file-view-table.row-small .icon{width:45px}.file-view-table.row-small .icon [class^="icon-"],.file-view-table.row-small .icon [class*=" icon-"]{font-size:30px}.file-view-table.row-small .icon .icon-folder,.file-view-table.row-small .icon .icon-folder-open,.file-view-table.row-small .icon .icon-folder-symlink{font-size:24px}.file-view-table.row-medium .node{height:48px}.file-view-table.row-medium .icon{width:60px}.file-view-table.row-medium .icon [class^="icon-"],.file-view-table.row-medium .icon [class*=" icon-"]{font-size:38px}.file-view-table.row-medium .icon .icon-folder,.file-view-table.row-medium .icon .icon-folder-open,.file-view-table.row-medium .icon .icon-folder-symlink{font-size:32px}.file-view-table.row-large .node{height:56px}.file-view-table.row-large .icon{width:75px}.file-view-table.row-large .icon [class^="icon-"],.file-view-table.row-large .icon [class*=" icon-"]{font-size:46px}.file-view-table.row-large .icon .icon-folder,.file-view-table.row-large .icon .icon-folder-open,.file-view-table.row-large .icon .icon-folder-symlink{font-size:40px}.file-table-hidden{display:none !important;visibility:hidden !important}.file-table-select-column{width:70px;text-align:center}.file-table-icon-column{text-align:left}.file-table-size-column{width:120px;text-align:right}.file-table-time-column{width:215px;padding-left:20px;text-align:left}.file-table-options-column{width:50px;text-align:center}.file-view-table .file-list.edit-tools-hidden .edit-tools{color:#f00 !important;display:none !important;visibility:hidden !important}.file-view-table{width:100%}.file-view-table .file-table-head{position:absolute;top:44px;left:0;display:-webkit-flex;display:flex;width:100%;height:36px;padding-top:7px;border-bottom:3px solid #ddd}.file-view-table .file-table-head .glyphicon{margin-left:4px}.file-view-table .file-table-head>.select{width:70px;text-align:center}.file-view-table .file-table-head>.icon{text-align:left}.file-view-table .file-table-head>.name{webkit-flex:1;flex:1}.file-view-table .file-table-head>.size{width:120px;text-align:right}.file-view-table .file-table-head>.time{width:215px;padding-left:20px;text-align:left}.file-view-table .file-table-head>.options{width:50px;text-align:center}.file-view-table .file-table-head>.name,.file-view-table .file-table-head>.size,.file-view-table .file-table-head>.time{cursor:pointer}.file-view-table .file-list{position:absolute;bottom:0;right:0;top:80px;left:0;overflow-y:auto;width:100%}.file-view-table .file-list>.node{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-flex-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;width:100%}.file-view-table .file-list>.node:nth-child(2n){background-color:#f9f9f9}.file-view-table .file-list>.node:hover{background-color:#f5f5f5}.file-view-table .file-list>.node:not(:hover) .edit-tools{visibility:collapse}.file-view-table .file-list>.node[selected]{background-color:#f5f5f5}.file-view-table .file-list>.node.dragover{background-color:rgba(92,184,92,0.5) !important}.file-view-table .file-list>.node.dragover-denied{background-color:rgba(217,83,79,0.5) !important}.file-view-table .file-list>.node.dragstart{opacity:.4}.file-view-table .file-list>.node[draggable=true]{cursor:move;-khtml-user-drag:element}.file-view-table .file-list>.node.stop-pointer-events *{pointer-events:none}.file-view-table .file-list>.node>.select{width:70px;text-align:center}.file-view-table .file-list>.node>.icon{text-align:left}.file-view-table .file-list>.node>.name{-webkit-flex:1;flex:1}.file-view-table .file-list>.node>.name>.input-filename{background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset;color:#555;transition:border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s}.file-view-table .file-list>.node>.name>.input-filename:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.file-view-table .file-list>.node>.name>.input-filename::-webkit-input-placeholder{color:#999}.file-view-table .file-list>.node>.name>.input-filename:-moz-placeholder{color:#999;opacity:1}.file-view-table .file-list>.node>.name>.input-filename::-moz-placeholder{color:#999;opacity:1}.file-view-table .file-list>.node>.name>.input-filename:-ms-input-placeholder{color:#999}.file-view-table .file-list>.node>.name .filename-root{display:inline-block;vertical-align:middle;max-width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-view-table .file-list>.node>.name .filename-ext{white-space:nowrap;vertical-align:middle}.file-view-table .file-list>.node>.edit-tools{font-size:12px;width:250px;text-align:right}.file-view-table .file-list>.node>.edit-tools .glyphicon{margin-left:14px}.file-view-table .file-list>.node>.edit-tools .glyphicon-pencil{margin-left:4px}@media (max-width:992px){.file-view-table .file-list>.node>.edit-tools{width:110px}.file-view-table .file-list>.node>.edit-tools .glyphicon{margin-left:10px;margin-right:10px}.file-view-table .file-list>.node>.edit-tools .glyphicon-pencil{margin-left:8px}}.file-view-table .file-list>.node>.size{width:120px;text-align:right}.file-view-table .file-list>.node>.time{width:215px;padding-left:20px;text-align:left}.file-view-table .file-list>.node>.options{width:50px;text-align:center;cursor:pointer}.fileselector .node{height:38px}.fileselector .icon{width:40px}.fileselector .icon [class^="icon-"],.fileselector .icon [class*=" icon-"]{font-size:26px}.fileselector .icon .icon-folder,.fileselector .icon .icon-folder-open,.fileselector .icon .icon-folder-symlink{font-size:22px}.fileselector .edit-tools{display:none !important;visibility:hidden !important}.fileselector .size{display:none !important;visibility:hidden !important}.fileselector .time{display:none !important;visibility:hidden !important}
\ No newline at end of file
/* define variables and classes from bootstrap */
/* some own variables */
.file-view-table.row-tiny .node {
height: 34px;
}
.file-view-table.row-tiny .icon {
flex: 0 0 30px;
}
.file-view-table.row-tiny .icon [class^="icon-"],
.file-view-table.row-tiny .icon [class*=" icon-"] {
font-size: 24px;
}
.file-view-table.row-tiny .icon .icon-folder,
.file-view-table.row-tiny .icon .icon-folder-open,
.file-view-table.row-tiny .icon .icon-folder-symlink {
font-size: 18px;
}
.file-view-table.row-small .node {
height: 40px;
}
.file-view-table.row-small .icon {
flex: 0 0 45px;
}
.file-view-table.row-small .icon [class^="icon-"],
.file-view-table.row-small .icon [class*=" icon-"] {
font-size: 30px;
}
.file-view-table.row-small .icon .icon-folder,
.file-view-table.row-small .icon .icon-folder-open,
.file-view-table.row-small .icon .icon-folder-symlink {
font-size: 24px;
}
.file-view-table.row-medium .node {
height: 48px;
}
.file-view-table.row-medium .icon {
flex: 0 0 60px;
}
.file-view-table.row-medium .icon [class^="icon-"],
.file-view-table.row-medium .icon [class*=" icon-"] {
font-size: 38px;
}
.file-view-table.row-medium .icon .icon-folder,
.file-view-table.row-medium .icon .icon-folder-open,
.file-view-table.row-medium .icon .icon-folder-symlink {
font-size: 32px;
}
.file-view-table.row-large .node {
height: 56px;
}
.file-view-table.row-large .icon {
flex: 0 0 75px;
}
.file-view-table.row-large .icon [class^="icon-"],
.file-view-table.row-large .icon [class*=" icon-"] {
font-size: 46px;
}
.file-view-table.row-large .icon .icon-folder,
.file-view-table.row-large .icon .icon-folder-open,
.file-view-table.row-large .icon .icon-folder-symlink {
font-size: 40px;
}
/* some classes for columns */
.file-table-hidden {
display: none !important;
visibility: hidden !important;
}
.file-table-select-column {
flex: 0 0 70px;
text-align: center;
}
.file-table-icon-column {
text-align: left;
}
.file-table-size-column {
flex: 0 0 120px;
text-align: right;
}
.file-table-time-column {
flex: 0 0 215px;
padding-left: 20px;
text-align: left;
}
.file-table-options-column {
flex: 0 0 50px;
text-align: center;
}
/* hide edit tools on touch displays */
.file-view-table .file-list.edit-tools-hidden .edit-tools {
color: red !important;
display: none !important;
visibility: hidden !important;
}
/* tale view */
.file-view-table {
width: 100%;
/* table head of filelist */
/* all other rows */
}
.file-view-table .file-table-head {
position: absolute;
top: 44px;
left: 0px;
display: -webkit-flex;
display: flex;
width: 100%;
height: 36px;
padding-top: 7px;
border-bottom: 3px solid #dddddd;
}
.file-view-table .file-table-head .glyphicon {
margin-left: 4px;
}
.file-view-table .file-table-head > .select {
flex: 0 0 70px;
text-align: center;
}
.file-view-table .file-table-head > .icon {
text-align: left;
}
.file-view-table .file-table-head > .name {
webkit-flex: 1;
flex: 1;
}
.file-view-table .file-table-head > .size {
flex: 0 0 120px;
text-align: right;
}
.file-view-table .file-table-head > .time {
flex: 0 0 215px;
padding-left: 20px;
text-align: left;
}
.file-view-table .file-table-head > .options {
flex: 0 0 50px;
text-align: center;
}
.file-view-table .file-table-head > .name,
.file-view-table .file-table-head > .size,
.file-view-table .file-table-head > .time {
cursor: pointer;
}
.file-view-table .file-list {
position: absolute;
bottom: 0px;
right: 0px;
top: 80px;
left: 0px;
overflow-y: auto;
width: 100%;
}
.file-view-table .file-list > .node {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
}
.file-view-table .file-list > .node:nth-child(2n) {
background-color: #f9f9f9;
}
.file-view-table .file-list > .node:hover {
background-color: #f5f5f5;
}
.file-view-table .file-list > .node:not(:hover) .edit-tools {
visibility: collapse;
}
.file-view-table .file-list > .node[selected] {
background-color: #f5f5f5;
}
.file-view-table .file-list > .node.dragover {
background-color: rgba(92, 184, 92, 0.5) !important;
}
.file-view-table .file-list > .node.dragover-denied {
background-color: rgba(217, 83, 79, 0.5) !important;
}
.file-view-table .file-list > .node.dragstart {
opacity: 0.4;
}
.file-view-table .file-list > .node[draggable=true] {
cursor: move;
-khtml-user-drag: element;
}
.file-view-table .file-list > .node.stop-pointer-events * {
pointer-events: none;
}
.file-view-table .file-list > .node > .select {
flex: 0 0 70px;
text-align: center;
}
.file-view-table .file-list > .node > .icon {
text-align: left;
}
.file-view-table .file-list > .node > .name {
-webkit-flex: 1;
flex: 1;
position: relative;
height: 100%;
}
.file-view-table .file-list > .node > .name > .completename {
position: absolute;
width: 100%;
height: 100%;
}
.file-view-table .file-list > .node > .name > .input-filename {
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555555;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
.file-view-table .file-list > .node > .name > .input-filename:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.file-view-table .file-list > .node > .name > .input-filename::-webkit-input-placeholder {
color: #999999;
}
.file-view-table .file-list > .node > .name > .input-filename:-moz-placeholder {
color: #999999;
opacity: 1;
}
.file-view-table .file-list > .node > .name > .input-filename::-moz-placeholder {
color: #999999;
opacity: 1;
}
.file-view-table .file-list > .node > .name > .input-filename:-ms-input-placeholder {
color: #999999;
}
.file-view-table .file-list > .node > .name .filename-root {
display: inline-block;
vertical-align: middle;
max-width: 80%;
max-width: calc(100% - 60px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.file-view-table .file-list > .node > .name .filename-ext {
white-space: nowrap;
vertical-align: middle;
}
.file-view-table .file-list > .node > .edit-tools {
font-size: 12px;
flex: 0 0 250px;
text-align: right;
}
.file-view-table .file-list > .node > .edit-tools .glyphicon {
margin-left: 14px;
}
.file-view-table .file-list > .node > .edit-tools .glyphicon-pencil {
margin-left: 4px;
}
@media (max-width: 992px) {
.file-view-table .file-list > .node > .edit-tools {
flex: 0 0 110px;
}
.file-view-table .file-list > .node > .edit-tools .glyphicon {
margin-left: 10px;
margin-right: 10px;
}
.file-view-table .file-list > .node > .edit-tools .glyphicon-pencil {
margin-left: 8px;
}
}
.file-view-table .file-list > .node > .size {
flex: 0 0 120px;
text-align: right;
}
.file-view-table .file-list > .node > .time {
flex: 0 0 215px;
padding-left: 20px;
text-align: left;
}
.file-view-table .file-list > .node > .options {
flex: 0 0 50px;
text-align: center;
cursor: pointer;
}
.fileselector .node {
height: 38px;
}
.fileselector .icon {
width: 40px;
}
.fileselector .icon [class^="icon-"],
.fileselector .icon [class*=" icon-"] {
font-size: 26px;
}
.fileselector .icon .icon-folder,
.fileselector .icon .icon-folder-open,
.fileselector .icon .icon-folder-symlink {
font-size: 22px;
}
.fileselector .edit-tools {
display: none !important;
visibility: hidden !important;
}
.fileselector .size {
display: none !important;
visibility: hidden !important;
}
.fileselector .time {
display: none !important;
visibility: hidden !important;
}
vispa/extensions/file/static/css/base/views/table/table.less
View file @ cdc6db9c
......@@ -51,7 +51,8 @@
height: @file-table-tiny;
}
.icon {
width: @width-icon-column - 15;
// width: @width-icon-column - 15;
flex: 0 0 @width-icon-column - 15;
.file-table-icon-size(@file-table-tiny);
}
}
......@@ -60,7 +61,8 @@
height: @file-table-small;
}
.icon {
width: @width-icon-column;
// width: @width-icon-column;
flex: 0 0 @width-icon-column;
.file-table-icon-size(@file-table-small);
}
}
......@@ -69,7 +71,8 @@
height: @file-table-medium;
}
.icon {
width: @width-icon-column + 15;
// width: @width-icon-column + 15;
flex: 0 0 @width-icon-column + 15;
.file-table-icon-size(@file-table-medium);
}
}
......@@ -78,7 +81,8 @@
height: @file-table-large;
}
.icon {
width: @width-icon-column + 30;
// width: @width-icon-column + 30;
flex: 0 0 @width-icon-column + 30;
.file-table-icon-size(@file-table-large);
}
}
......@@ -91,23 +95,27 @@
visibility: hidden !important;
}
.file-table-select-column {
width: @width-select-column;
// width: @width-select-column;
flex: 0 0 @width-select-column;
text-align: center;
}
.file-table-icon-column {
text-align: left;
}
.file-table-size-column {
width: @width-size-column;
// width: @width-size-column;
flex: 0 0 @width-size-column;
text-align: right;
}
.file-table-time-column {
width: @width-time-column;
// width: @width-time-column;
flex: 0 0 @width-time-column;
padding-left: 20px;
text-align: left;
}
.file-table-options-column {
width: @width-options-column;
// width: @width-options-column;
flex: 0 0 @width-options-column;
text-align: center;
}
......@@ -223,6 +231,13 @@
> .name {
-webkit-flex: 1;
flex: 1;
position: relative;
height: 100%;
> .completename {
position: absolute;
width: 100%;
height: 100%;
}
> .input-filename {
background-color: @input-bg;
background-image: none;
......@@ -256,6 +271,7 @@
display: inline-block;
vertical-align: middle;
max-width: 80%;
max-width: calc(~"100% - 60px");
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......@@ -267,7 +283,8 @@
}
> .edit-tools {
font-size: 12px;
width: @width-edit-tool-large;
// width: @width-edit-tool-large;
flex: 0 0 @width-edit-tool-large;
text-align: right;
.glyphicon {
margin-left: 14px;
......@@ -276,7 +293,8 @@
margin-left: 4px;
}
@media(max-width:@screen-md) {
width: @width-edit-tool-small;
// width: @width-edit-tool-small;
flex: 0 0 @width-edit-tool-small;
.glyphicon {
margin-left: 10px;
margin-right: 10px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment