server/apps/files/css/mobile.scss
Abijeet 5d95911537
Fixes UI issues with the design,
1. Removes an unnecessary width
2. Content of the table header moving down on selection. Happening due to increase in height of header.
3. Invalid font-size for the actions menu.
4. Vertical position of the action menu

Signed-off-by: Abijeet <abijeetpatro@gmail.com>
2018-06-18 07:39:44 +02:00

86 lines
1.8 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* 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;
}
/* dont 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;
}
#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;
}
/* 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 {
float: right;
}
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;
}
}