octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-11-09 14:50:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

gui: Optimize folder/device info for small screens (fixes #5774) (#5787)

Browse Source 
break table layout and add button margin on small screens
This commit is contained in:
Wulf Weich 2019-06-17 14:24:45 +02:00 committed by Jakob Borg
parent cea5962417
commit 0d86166890
1 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
gui/default/assets/css/overrides.css
View File

@ -372,3 +372,32 @@ ul.three-columns li, ul.two-columns li {
.fancytree-ext-table {
width: 100% !important;
}
@media (max-width: 419px) {
/* the selectors are build to target only the content of folder and device
panels as it would "destroy" e.g. out of sync or recent changes listings */
div[id^='device-'].panel-collapse table,
div[id^='folder-'].panel-collapse table,
div[id^='device-'].panel-collapse tbody,
div[id^='folder-'].panel-collapse tbody,
div[id^='device-'].panel-collapse tr,
div[id^='folder-'].panel-collapse tr {
display: block;
}
div[id^='device-'].panel-collapse th,
div[id^='folder-'].panel-collapse th,
div[id^='device-'].panel-collapse td,
div[id^='folder-'].panel-collapse td {
display: block;
max-width: 100%;
width: 100%;
}
/* all buttons, except panel headings, get bottom margin, as they won't fit
beside each other anymore */
.btn:not(.panel-heading),
/* this "+"-selector is needed to override some bootstrap defaults */
.btn:not(.panel-heading) + .btn:not(.panel-heading) {
margin-bottom: 1rem;
}
}