Skip to content

Commit 0f31a9f

Browse files
johndohjohndoh
committed
layout improvements for small screens
1 parent 2dd5ed7 commit 0f31a9f

6 files changed

Lines changed: 162 additions & 39 deletions

File tree

‎_includes/downloadbutton.html‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎_includes/footer.html‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<li><a href="/license">License</a></li>
1010
<li class="mt-3">
1111
<div class="color-modes dropend">
12-
<a class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
12+
<a class="dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">
1313
<span class="fa-solid fa-palette me-1"></span> Switch theme
1414
</a>
1515
<ul class="dropdown-menu py-1">
@@ -23,9 +23,9 @@
2323
</div>
2424
<div class="col-12 col-sm-6 mt-4 mt-sm-0 text-sm-end">
2525
<ul class="m-0 p-0">
26-
<li><a aria-label="GitHub" href="https://github.com/roundcube/roundcubemail" target="_blank" rel="noopener"><img src="https://img.shields.io/github/stars/roundcube/roundcubemail?color=%23066da5&label=stars&logo=github&logoColor=%23fff&style=flat-square" alt="GitHub Stars"></li>
27-
<li><a aria-label="GitHub Contributors" href="https://github.com/roundcube/roundcubemail/graphs/contributors" target="_blank" rel="noopener"><img src="https://img.shields.io/github/contributors/roundcube/roundcubemail?color=%23066da5&label=contributors&logo=github&logoColor=%23fff&style=flat-square" alt="GitHub Contributors"></li>
28-
<li><a aria-label="DockerHub" href="https://hub.docker.com/r/roundcube/roundcubemail/" target="_blank" rel="noopener"><img src="https://img.shields.io/docker/pulls/roundcube/roundcubemail?color=%23066da5&label=pulls&logo=docker&logoColor=%23fff&style=flat-square" alt="Docker Downloads"></li>
26+
<li><a aria-label="GitHub" href="https://github.com/roundcube/roundcubemail" target="_blank" rel="noopener"><img src="https://img.shields.io/github/stars/roundcube/roundcubemail?color=%23066da5&label=stars&logo=github&logoColor=%23fff&style=flat-square" alt="GitHub Stars"></a></li>
27+
<li><a aria-label="GitHub Contributors" href="https://github.com/roundcube/roundcubemail/graphs/contributors" target="_blank" rel="noopener"><img src="https://img.shields.io/github/contributors/roundcube/roundcubemail?color=%23066da5&label=contributors&logo=github&logoColor=%23fff&style=flat-square" alt="GitHub Contributors"></a></li>
28+
<li><a aria-label="DockerHub" href="https://hub.docker.com/r/roundcube/roundcubemail/" target="_blank" rel="noopener"><img src="https://img.shields.io/docker/pulls/roundcube/roundcubemail?color=%23066da5&label=pulls&logo=docker&logoColor=%23fff&style=flat-square" alt="Docker Downloads"></a></li>
2929
</ul>
3030
</div>
3131
</div>
@@ -75,14 +75,41 @@
7575
var copytext = "Copy to clipboard";
7676
var copycomplete = "Copied";
7777
var copyerror = "Copy failed";
78-
document.querySelectorAll('a.copy-text').forEach((copybtn) => {
78+
79+
document.querySelectorAll('a.copy-popover-link').forEach((sumbtn) => {
80+
var popover = new bootstrap.Popover(sumbtn, {
81+
content: sumbtn.closest('td').querySelector('.copy-popover-target').innerHTML,
82+
html: true,
83+
customClass: 'copy-popover'
84+
});
85+
86+
sumbtn.addEventListener('shown.bs.popover', () => {
87+
document.querySelectorAll('div.popover a.copy-link').forEach((copybtn) => {
88+
var tooltipInstance = new bootstrap.Tooltip(copybtn, {'title': copytext});
89+
copybtn.addEventListener("click", function(e) { clipboard(this, tooltipInstance, e); }, false);
90+
});
91+
});
92+
});
93+
94+
if (document.querySelectorAll('a.copy-popover-link').length > 0) {
95+
document.addEventListener("click", function(e) {
96+
document.querySelectorAll('a.copy-popover-link').forEach((sumbtn) => {
97+
var popover = bootstrap.Popover.getInstance(sumbtn);
98+
if (popover.tip && event.target.closest('.popover.show') == null && popover.tip.classList.contains('show')) {
99+
popover.hide();
100+
}
101+
});
102+
}, false);
103+
}
104+
105+
document.querySelectorAll('a.copy-link').forEach((copybtn) => {
79106
var tooltipInstance = new bootstrap.Tooltip(copybtn, {'title': copytext});
80107
copybtn.addEventListener("click", function(e) { clipboard(this, tooltipInstance, e); }, false);
81108
});
82109

83110
async function clipboard(copybtn, tooltipInstance, e) {
84111
e.preventDefault();
85-
var payload = copybtn.closest('p,td').querySelector('.copy-target').textContent.trimEnd();
112+
var payload = copybtn.closest('p,td,div').querySelector('.copy-target').textContent.trimEnd();
86113

87114
try {
88115
await navigator.clipboard.writeText(payload);

‎download/index.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,21 @@ <h2 id="{{ id }}">{{ params.name }}{% if params.version %} - {{ params.version }
2929
<th class="package" scope="col">Package</th>
3030
<td class="link"></td>
3131
<th class="size text-nowrap" scope="col">Size</th>
32-
<th class="checksum d-none d-lg-table-cell" scope="col">SHA-256 checksum</th>
32+
<th class="checksum" scope="col"><span class="d-none d-lg-inline">SHA-256 checksum</span></th>
3333
</tr>
3434
</thead>
3535
<tbody>
3636
{% for source in params.sources %}
3737
<tr>
3838
<th class="package fw-normal" scope="row">{{ source.package }}{% if source.package == "Dependent" %}<sup><a href="#fn1" class="text-body-secondary">1</a></sup>{% endif %}</th>
39-
<td class="link"><a href="{{ source.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span>Download</span></a></td>
39+
<td class="link text-center text-lg-start"><a href="{{ source.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span>Download</span></a></td>
4040
<td class="size text-nowrap">{{ source.size }}</td>
41-
<td class="checksum d-none d-lg-table-cell font-monospace text-nowrap"><span class="copy-target">{{ source.checksum }}</span> <span><a class="copy-text" href="#" aria-label="Copy text"></a></span></td>
41+
<td class="checksum font-monospace text-nowrap text-center text-lg-start pe-3">
42+
<span class="d-none d-lg-inline copy-popover-target">
43+
<span class="copy-target d-block d-lg-inline text-nowrap overflow-auto py-3 py-lg-0">{{ source.checksum }}</span><span class="py-3 py-lg-0"><a class="copy-link" href="#" aria-label="Copy text"></a></span>
44+
</span>
45+
<a class="d-inline d-lg-none copy-popover-link checksum" href="#" aria-label="SHA-256 checksum" onclick="return false;" data-bs-title="SHA-256 checksum" data-bs-placement="left"></a>
46+
</td>
4247
</tr>
4348
{% endfor %}
4449
</tbody>
@@ -104,9 +109,8 @@ <h2 id="pgp">PGP signatures for package verification <a class="anchor" href="#pg
104109
</p>
105110

106111
<p>After downloading the <a href="/download/pubkey.asc" class="rc-icon asc-link">pubkey</a> and the signature file, verify packages with</p>
107-
<p class="bg-quote p-3 font-monospace">
108-
<span class="d-block text-end m-0 p-0"><a class="copy-text" href="#" aria-label="Copy text"></a></span>
109-
<span class="copy-target">gpg --verify roundcubemail-&lt;version&gt;.tar.gz{.asc,}</span>
112+
<p class="bg-quote px-3 pe-2 font-monospace d-flex">
113+
<span class="copy-target d-block text-nowrap overflow-auto py-3 flex-grow-1">gpg --verify roundcubemail-&lt;version&gt;.tar.gz{.asc,}</span><span class="py-3"><a class="copy-link" href="#" aria-label="Copy text"></a></span>
110114
</p>
111115

112116
<h2 id="installation">Installation and upgrading <a class="anchor" href="#installation" aria-label="Link to this section: Installation and upgrading"></a></h2>

‎index.html‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33
title: Roundcube - Free and Open Source Webmail Software
44
date: 2020-04-29T21:10:00Z
55
---
6-
<div id="banner" class="py-2">
6+
<div id="banner" class="py-3 py-lg-2">
77
<div class="container">
8-
<div class="row">
9-
<div class="col-md-6 text-center pt-2 pb-4 pb-md-0 pt-lg-5 pt-md-3">
8+
<div class="grid gap-4">
9+
<div class="logo text-center pt-lg-4 pt-xl-5">
1010
<img src="/images/logo.png" data-rc-dark="/images/logo-dark.png" width="432" height="112" id="logo" class="img-fluid" alt="Roundcube - open source webmail software">
11-
12-
<div class="d-none d-md-block col mt-sm-3 mt-md-4 mt-xl-5 banner-download">
13-
{% include downloadbutton.html %}
14-
</div>
1511
</div>
16-
<div class="col-md-6 text-center text-md-end mb-2 mb-md-0">
12+
<div class="image">
1713
{% assign skin = site.data.screenshots | first | first %}
1814
{% if site.data.screenshots[skin]['banner-dark'] %}
1915
<a href="/screens"><img src="/screens/skins/{{ skin }}/banner.png" data-rc-dark="/screens/skins/{{ site.data.screenshots | first | first }}/banner_dark.png" width="647" height="390" id="bannerimg" class="img-fluid" alt="Welcome Roundcube Webmail"></a>
2016
{% else %}
2117
<a href="/screens"><img src="/screens/skins/{{ skin }}/banner.png" width="647" height="390" id="bannerimg" class="img-fluid" alt="Welcome Roundcube Webmail"></a>
2218
{% endif %}
2319
</div>
20+
<div class="download text-center d-flex flex-column justify-content-center justify-content-lg-start align-items-center pt-xl-4">
21+
<a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!">Download</a>
22+
<span class="version text-body-secondary">Version {{ site.data.releases.stable.version }}</span>
23+
</div>
2424
</div>
2525
</div>
2626
</div>
@@ -36,11 +36,6 @@ <h1>Roundcube webmail...</h1>
3636
<a href="/about" class="rc-icon read-link">More information</a>
3737
</p>
3838
<div class="container">
39-
<div class="row">
40-
<div class="col d-block d-md-none mt-5">
41-
{% include downloadbutton.html %}
42-
</div>
43-
</div>
4439
<div class="row">
4540
<div class="col-lg-7 px-0">
4641
<h2>Features</h2>

‎styles/styles.less‎

Lines changed: 110 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
@nav-offset: 6rem;
44
@thumbnail-width: 140px;
55

6+
@max-width-md: 991px;
7+
@max-width-sm: 767px;
8+
@max-width-xs: 575px;
9+
610
@color-primary: #37beff;
711
@color-background-alt: rgba(0, 0, 0, 0.05);
812
@color-header-background: #212529;
@@ -91,6 +95,66 @@ a:not(.btn):not(.nav-link):not(.dropdown-item),
9195
#banner {
9296
margin-top: @nav-height;
9397
background-color: var(--rc-color-banner-background);
98+
99+
> .container > .grid {
100+
display: grid;
101+
grid-template-columns: 1fr 1fr;
102+
grid-template-rows: auto 1fr;
103+
104+
> .logo {
105+
grid-column: 1;
106+
grid-row: 1;
107+
}
108+
109+
> .image {
110+
grid-column: 2;
111+
grid-row: 1 / 3;
112+
}
113+
114+
> .download {
115+
grid-column: 1;
116+
grid-row: 2;
117+
}
118+
119+
@media (max-width: @max-width-md) {
120+
grid-template-columns: 1fr 1.5fr;
121+
122+
> .logo {
123+
grid-column: 1 / 3;
124+
grid-row: 1;
125+
}
126+
127+
> .image {
128+
grid-column: 2;
129+
grid-row: 2;
130+
}
131+
132+
> .download {
133+
grid-column: 1;
134+
grid-row: 2;
135+
}
136+
}
137+
138+
@media (max-width: @max-width-sm) {
139+
grid-template-columns: auto;
140+
grid-template-rows: auto;
141+
142+
> .logo {
143+
grid-column: 1;
144+
grid-row: 1;
145+
}
146+
147+
> .image {
148+
grid-column: 1;
149+
grid-row: 2;
150+
}
151+
152+
> .download {
153+
grid-column: 1;
154+
grid-row: 3;
155+
}
156+
}
157+
}
94158
}
95159

96160
main {
@@ -145,10 +209,13 @@ a.anchor {
145209
}
146210
}
147211

148-
a.copy-text {
212+
a.copy-link {
149213
color: var(--bs-secondary-color);
150214
font-size: .75rem;
151-
vertical-align: middle;
215+
display: inline-block;
216+
width: 1.25em;
217+
text-align: center;
218+
margin-left: .5rem;
152219

153220
&:hover {
154221
text-decoration: none !important;
@@ -170,6 +237,21 @@ a.copy-text {
170237
}
171238
}
172239

240+
a.copy-popover-link {
241+
color: var(--bs-body-color);
242+
text-decoration: none !important;
243+
244+
&.checksum:after {
245+
font: var(--fa-font-solid);
246+
content: @fa-var-file-shield;
247+
}
248+
}
249+
250+
div.popover.copy-popover > div.popover-body {
251+
padding: 0 var(--bs-popover-body-padding-x);
252+
display: flex;
253+
}
254+
173255
h1, h2, h3, p {
174256
scroll-margin-top: 80px;
175257
}
@@ -279,7 +361,7 @@ a.current-theme::after {
279361
}
280362

281363
&.btn-sm {
282-
@media (max-width: 575px) {
364+
@media (max-width: @max-width-xs) {
283365
& > span {
284366
display: none;
285367
}
@@ -385,20 +467,39 @@ table.download-table {
385467
vertical-align: middle;
386468
}
387469

388-
@media (max-width: 991px) {
470+
@media (max-width: @max-width-md) {
389471
th.package {
390-
width: 34%;
472+
width: 40%;
473+
}
474+
475+
td.link {
476+
width: 35%;
391477
}
392478

393-
td.link,
394479
td.size {
395-
width: 33%;
480+
width: 20%;
481+
}
482+
483+
td.checksum {
484+
width: 5%;
396485
}
397486
}
398487

399-
@media (max-width: 575px) {
488+
@media (max-width: @max-width-xs) {
489+
th.package {
490+
width: 55%;
491+
}
492+
400493
td.link {
401-
text-align: center;
494+
width: 20%;
495+
}
496+
497+
td.size {
498+
width: 20%;
499+
}
500+
501+
td.checksum {
502+
width: 5%;
402503
}
403504
}
404505
}

0 commit comments

Comments
 (0)