felixfoertsch/syncthing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

gui: Show folder/device status on small screens (#8643)

Browse Source 
gui: Show folder/device status on small screens

On larger screens, folder and device status is shown in a textual form
directly next to folder and device titles. However, on small screens,
only icons are currently shown, which may be ambiguous to new users, who
cannot possibly know what a specific icon means (see [1]). Thus, on
small screens only, display a new entry in folder/device info that
contains the same textual information that is shown in the title on
larger screens.

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
Co-authored-by: André Colomb <src@andre.colomb.de>
This commit is contained in:
tomasz1986
2023-12-10 15:14:10 +01:00
committed by GitHub
co-authored by André Colomb
parent a28de73031
commit d42fff1016
4 changed files with 136 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gui/default/assets/css/overrides.css
+6 -4
View File
@@ -180,7 +180,7 @@ input[type="checkbox"].extended-attributes-filter-rule-checkbox {
margin-right: .14285715em;
}
.remote-devices-panel {
.inline-icon {
display: inline-block;
}
@@ -460,15 +460,17 @@ ul.three-columns li, ul.two-columns li {
}
@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 */
/* 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.
The !important is needed to override .visible-xs that sets display to a
specific table element instead of block. */
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;
display: block !important;
}
div[id^='device-'].panel-collapse th,
div[id^='folder-'].panel-collapse th,