c500b19762
The selected files summary shown in the multiselect header has a margin to align it with the names of the files in the contents of the file list. However, on very narrow screens, and depending on the verbosity of the language, the summary can overlap with the actions when the selection contains files and folders. To try to mitigate this, besides showing only the icons for the actions, the summary margin is removed too in very narrow screens. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
97 lines
2.1 KiB
SCSS
97 lines
2.1 KiB
SCSS
/* 938 = table min-width(688) + app-navigation width: 250
|
||
769 = size where app-navigation (768) is hidden +1
|
||
688 = table min-width */
|
||
@media only screen and (max-width: 938px) and (min-width: 769px), only screen and (max-width: 688px) {
|
||
|
||
.app-files #app-content.dir-drop{
|
||
background-color: rgba(255, 255, 255, 1)!important;
|
||
}
|
||
|
||
/* don’t require a minimum width for files table */
|
||
#body-user #filestable {
|
||
min-width: initial !important;
|
||
}
|
||
|
||
table th#headerSize,
|
||
table td.filesize,
|
||
table th#headerDate,
|
||
table td.date {
|
||
display: none;
|
||
}
|
||
|
||
/* remove padding to let border bottom fill the whole width*/
|
||
table td {
|
||
padding: 0;
|
||
}
|
||
|
||
/* remove shift for multiselect bar to account for missing navigation */
|
||
table.multiselect thead {
|
||
padding-left: 0;
|
||
}
|
||
|
||
/* restrict length of displayed filename to prevent overflow */
|
||
table td.filename .nametext {
|
||
width: 100%;
|
||
}
|
||
|
||
#fileList a.action.action-menu img {
|
||
padding-left: 0;
|
||
}
|
||
|
||
#fileList .fileActionsMenu {
|
||
margin-right: 6px;
|
||
}
|
||
/* hide text of the share action on mobile */
|
||
#fileList a.action-share span:not(.icon) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ellipsis on file names */
|
||
table td.filename .nametext .innernametext {
|
||
max-width: calc(100% - 175px) !important;
|
||
}
|
||
|
||
/* show the delete icon in name column in lower resolutions */
|
||
table th#headerName .selectedActions .delete-selected {
|
||
display: inline;
|
||
}
|
||
|
||
/* proper notification area for multi line messages */
|
||
#notification-container {
|
||
display: flex;
|
||
}
|
||
|
||
/* shorten elements for mobile */
|
||
#uploadprogressbar, #uploadprogressbar .label.inner {
|
||
width: 50px;
|
||
}
|
||
/* hide desktop-only parts */
|
||
#uploadprogressbar .desktop {
|
||
display: none !important;
|
||
}
|
||
#uploadprogressbar .mobile {
|
||
display: block !important;
|
||
}
|
||
|
||
/* ensure that it is visible over #app-content */
|
||
table.dragshadow {
|
||
z-index: 1000;
|
||
}
|
||
|
||
}
|
||
@media only screen and (max-width: 480px) {
|
||
/* Only show icons */
|
||
table th .selectedActions a span:not(.icon) {
|
||
display: none;
|
||
}
|
||
|
||
/* Increase touch area for the icons */
|
||
table th .selectedActions a {
|
||
padding: 17px 14px;
|
||
}
|
||
|
||
/* Remove the margin to reduce the overlap between the name and the icons */
|
||
table.multiselect th .columntitle.name {
|
||
margin-left: 0;
|
||
}
|
||
}
|