Skip to content

Commit 40fd19b

Browse files
dafidafi
committed
fix: improve colors legends with card grids
1 parent f1efade commit 40fd19b

3 files changed

Lines changed: 155 additions & 84 deletions

File tree

‎colorsLegend.md‎

Lines changed: 67 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -12,86 +12,79 @@ subtitle: Colors and icons used in folder and file comparison views
1212

1313
Folders are shown using different colors to quickly visualize the file comparison results.
1414

15-
<div class="table-wrapper">
16-
<table class="alt">
17-
<thead>
18-
<tr>
19-
<th>Folder</th>
20-
<th>Description</th>
21-
</tr>
22-
</thead>
23-
<tbody>
24-
<tr>
25-
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-000.png"></td>
26-
<td>Matched folder (all contained files are the same on the other side)</td>
27-
</tr>
28-
<tr>
29-
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-001.png"></td>
30-
<td>Folder contains only files older than the other side</td>
31-
</tr>
32-
<tr>
33-
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-010.png"></td>
34-
<td>Folder contains only modified files</td>
35-
</tr>
36-
<tr>
37-
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-011.png"></td>
38-
<td>Folder contains only modified files and files older than the other side</td>
39-
</tr>
40-
<tr>
41-
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-100.png"></td>
42-
<td>Folder contains only files not present on the other side (so-called orphan folder)</td>
43-
</tr>
44-
<tr>
45-
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-101.png"></td>
46-
<td>Folder contains files not present on the other side and files older than the other side</td>
47-
</tr>
48-
<tr>
49-
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-110.png"></td>
50-
<td>Folder contains modified files and files not present on the other side</td>
51-
</tr>
52-
<tr>
53-
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-999.png"></td>
54-
<td>Folder matches <a href="fileFilters.html#show_filtered_files">file filters</a> or is empty and the 'Empty folders' setting is on</td>
55-
</tr>
56-
</tbody>
57-
</table>
15+
<div class="folder-legend-grid">
16+
<div class="folder-legend-card">
17+
<img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-000.png" alt="Matched folder">
18+
<strong>Matched</strong>
19+
<span>All files identical on both sides</span>
20+
</div>
21+
<div class="folder-legend-card">
22+
<img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-001.png" alt="Has older files">
23+
<strong>Has older</strong>
24+
<span>Contains files older than the other side</span>
25+
</div>
26+
<div class="folder-legend-card">
27+
<img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-010.png" alt="Modified files">
28+
<strong>Modified</strong>
29+
<span>Contains modified files</span>
30+
</div>
31+
<div class="folder-legend-card">
32+
<img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-011.png" alt="Modified and older files">
33+
<strong>Modified + older</strong>
34+
<span>Contains modified files and files older than the other side</span>
35+
</div>
36+
<div class="folder-legend-card">
37+
<img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-100.png" alt="Orphan folder">
38+
<strong>Orphan</strong>
39+
<span>Files only on one side</span>
40+
</div>
41+
<div class="folder-legend-card">
42+
<img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-101.png" alt="Orphan and older files">
43+
<strong>Orphan + older</strong>
44+
<span>Orphan files and files older than the other side</span>
45+
</div>
46+
<div class="folder-legend-card">
47+
<img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-110.png" alt="Orphan and modified files">
48+
<strong>Orphan + modified</strong>
49+
<span>Orphan files and modified files</span>
50+
</div>
51+
<div class="folder-legend-card">
52+
<img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-999.png" alt="Filtered or empty folder">
53+
<strong>Filtered / Empty</strong>
54+
<span>Matches active <a href="fileFilters.html#show_filtered_files">file filters</a> or is empty</span>
55+
</div>
5856
</div>
5957

6058
# [File Colors](#file_colors)
6159

6260
Line colors in the File Differ View are based on differences found.
6361

64-
<div class="table-wrapper">
65-
<table class="alt">
66-
<thead>
67-
<tr>
68-
<th>Color</th>
69-
<th>Description</th>
70-
</tr>
71-
</thead>
72-
<tbody>
73-
<tr>
74-
<td class="file-legend-same"></td>
75-
<td>Text content on left and right is the same</td>
76-
</tr>
77-
<tr>
78-
<td class="file-legend-different"></td>
79-
<td>Text content present on the left differs from text content present on the right</td>
80-
</tr>
81-
<tr>
82-
<td class="file-legend-missing-left"></td>
83-
<td>Text content is present only on the right; on the left the line is missing</td>
84-
</tr>
85-
<tr>
86-
<td class="file-legend-missing-right"></td>
87-
<td>Text content is present only on the left; on the right the line is missing</td>
88-
</tr>
89-
<tr>
90-
<td class="file-legend-merged"></td>
91-
<td>Text content has been copied from the other side; this marks the document as edited and it can be saved</td>
92-
</tr>
93-
</tbody>
94-
</table>
62+
<div class="folder-legend-grid">
63+
<div class="folder-legend-card">
64+
<div class="file-legend-swatch file-legend-same"></div>
65+
<strong>Same</strong>
66+
<span>Left and right content is identical</span>
67+
</div>
68+
<div class="folder-legend-card">
69+
<div class="file-legend-swatch file-legend-different"></div>
70+
<strong>Different</strong>
71+
<span>Left content differs from right</span>
72+
</div>
73+
<div class="folder-legend-card">
74+
<div class="file-legend-swatch file-legend-missing-left"></div>
75+
<strong>Missing left</strong>
76+
<span>Line present only on the right; missing on the left</span>
77+
</div>
78+
<div class="folder-legend-card">
79+
<div class="file-legend-swatch file-legend-missing-right"></div>
80+
<strong>Missing right</strong>
81+
<span>Line present only on the left; missing on the right</span>
82+
</div>
83+
<div class="folder-legend-card">
84+
<div class="file-legend-swatch file-legend-merged"></div>
85+
<strong>Merged</strong>
86+
<span>Content copied from the other side; file is marked as edited</span>
87+
</div>
9588
</div>
9689

9790
# [Difference Indicator](#difference_indicator)

‎css/input.css‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,41 @@ img.folder-legend {
9494
max-height: 16px;
9595
}
9696

97+
.folder-legend-grid {
98+
display: grid;
99+
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
100+
gap: 12px;
101+
margin: 1.25rem 0;
102+
}
103+
104+
.folder-legend-card {
105+
display: flex;
106+
flex-direction: column;
107+
align-items: center;
108+
text-align: center;
109+
padding: 14px 10px 12px;
110+
border: 1px solid #e2e8f0;
111+
border-radius: 8px;
112+
gap: 8px;
113+
background: #f8fafc;
114+
}
115+
116+
.folder-legend-card img {
117+
object-fit: contain;
118+
}
119+
120+
.folder-legend-card strong {
121+
font-size: 0.82rem;
122+
color: #1e293b;
123+
line-height: 1.3;
124+
}
125+
126+
.folder-legend-card span {
127+
font-size: 0.75rem;
128+
color: #64748b;
129+
line-height: 1.4;
130+
}
131+
97132
img.wiki-img {
98133
max-width: 50%;
99134
border: 1px solid #94a3b8;
@@ -106,27 +141,34 @@ table.file-legend tr td {
106141
padding: 6px 10px;
107142
}
108143

109-
td.file-legend-same {
144+
.file-legend-same {
110145
background-color: #0f172a;
111146
color: #e2e8f0;
112147
}
113148

114-
td.file-legend-different {
149+
.file-legend-different {
115150
background-color: #d1fadf;
116151
}
117152

118-
td.file-legend-missing-left {
153+
.file-legend-missing-left {
119154
background-color: #e0f2fe;
120155
}
121156

122-
td.file-legend-missing-right {
157+
.file-legend-missing-right {
123158
background-color: #fef9c3;
124159
}
125160

126-
td.file-legend-merged {
161+
.file-legend-merged {
127162
background-color: #fef3c7;
128163
}
129164

165+
.file-legend-swatch {
166+
width: 100%;
167+
height: 20px;
168+
border-radius: 3px;
169+
border: 1px solid rgba(0,0,0,0.08);
170+
}
171+
130172
#main a[href^="https://"]::before,
131173
#main a[href^="http://"]::before,
132174
.link-https::before,

‎css/theme.css‎

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1527,6 +1527,36 @@ img.folder-legend {
15271527
max-width: 16px;
15281528
max-height: 16px;
15291529
}
1530+
.folder-legend-grid {
1531+
display: grid;
1532+
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
1533+
gap: 12px;
1534+
margin: 1.25rem 0;
1535+
}
1536+
.folder-legend-card {
1537+
display: flex;
1538+
flex-direction: column;
1539+
align-items: center;
1540+
text-align: center;
1541+
padding: 14px 10px 12px;
1542+
border: 1px solid #e2e8f0;
1543+
border-radius: 8px;
1544+
gap: 8px;
1545+
background: #f8fafc;
1546+
}
1547+
.folder-legend-card img {
1548+
object-fit: contain;
1549+
}
1550+
.folder-legend-card strong {
1551+
font-size: 0.82rem;
1552+
color: #1e293b;
1553+
line-height: 1.3;
1554+
}
1555+
.folder-legend-card span {
1556+
font-size: 0.75rem;
1557+
color: #64748b;
1558+
line-height: 1.4;
1559+
}
15301560
img.wiki-img {
15311561
max-width: 50%;
15321562
border: 1px solid #94a3b8;
@@ -1537,22 +1567,28 @@ img.wiki-img {
15371567
table.file-legend tr td {
15381568
padding: 6px 10px;
15391569
}
1540-
td.file-legend-same {
1570+
.file-legend-same {
15411571
background-color: #0f172a;
15421572
color: #e2e8f0;
15431573
}
1544-
td.file-legend-different {
1574+
.file-legend-different {
15451575
background-color: #d1fadf;
15461576
}
1547-
td.file-legend-missing-left {
1577+
.file-legend-missing-left {
15481578
background-color: #e0f2fe;
15491579
}
1550-
td.file-legend-missing-right {
1580+
.file-legend-missing-right {
15511581
background-color: #fef9c3;
15521582
}
1553-
td.file-legend-merged {
1583+
.file-legend-merged {
15541584
background-color: #fef3c7;
15551585
}
1586+
.file-legend-swatch {
1587+
width: 100%;
1588+
height: 20px;
1589+
border-radius: 3px;
1590+
border: 1px solid rgba(0,0,0,0.08);
1591+
}
15561592
#main a[href^="https://"]::before, #main a[href^="http://"]::before, .link-https::before, .link-external::before {
15571593
font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free";
15581594
padding-right: 0.35em;

0 commit comments

Comments
 (0)