Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend update #6397

Merged
merged 4 commits into from
Nov 21, 2024
Merged

Frontend update #6397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3c3b725
frontend: update CSS, bootstrap version, sitemap
khancyr Nov 18, 2024
14fe018
frontend: raise a bit font size default, improve img loading by css
khancyr Nov 18, 2024
3d44d6e
frontend: add some nofollow to link to not ardupilot websites
khancyr Nov 18, 2024
710eb26
frontend: use aria-label instead of visually-hidden
khancyr Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 18 additions & 32 deletions frontend/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/*! HTML5 Boilerplate v9.0.0-RC1 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
Expand All @@ -10,11 +10,12 @@
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */

html {
font-family: Oxygen;
font-weight: 400;
font-size: 15px;
line-height: 1.42857143;
font-size: 1em;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}

Expand Down Expand Up @@ -73,6 +74,7 @@ html {

.col_min {
min-height: 300px;
aspect-ratio: 4/3;
}

.bg-dark {
Expand Down Expand Up @@ -105,14 +107,11 @@ display: none;
}

/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Customize the background color to match your design.
*/

::-moz-selection {
background: #b3d4fc;
Expand Down Expand Up @@ -196,7 +195,7 @@ textarea {
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
.visually-hidden {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
Expand All @@ -210,13 +209,13 @@ textarea {
}

/*
* Extends the .sr-only class to allow the element
* Extends the .visually-hidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
Expand All @@ -237,18 +236,13 @@ textarea {
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
* The use of `table` rather than `block` is only necessary if using
* `::before` to contain the top-margins of child elements.
*/

.clearfix::before,
.clearfix::after {
content: " ";
content: "";
display: table;
}

Expand Down Expand Up @@ -322,14 +316,6 @@ textarea {
page-break-inside: avoid;
}

/*
* Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}

tr,
img {
page-break-inside: avoid;
Expand Down
48 changes: 20 additions & 28 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,10 @@
<meta name="msapplication-TileColor" content="#ffffff">

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<link rel="stylesheet" href="css/main.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
function loadContent(elementId, file) {
fetch(file)
Expand Down Expand Up @@ -90,13 +87,11 @@
</div>
</div>

<button class="carousel-control-prev" type="button" data-bs-target="#carouselPictures" data-bs-slide="prev">
<button class="carousel-control-prev" type="button" data-bs-target="#carouselPictures" data-bs-slide="prev" aria-label="Previous">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselPictures" data-bs-slide="next">
<button class="carousel-control-next" type="button" data-bs-target="#carouselPictures" data-bs-slide="next" aria-label="Next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>

</div>
Expand Down Expand Up @@ -126,7 +121,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
Loading Blog post
</picture>
</a>
Expand All @@ -137,7 +132,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
Loading Blog post
</picture>
</a>
Expand All @@ -148,7 +143,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
Loading Blog post
</picture>
</a>
Expand All @@ -161,7 +156,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
Loading Blog post
</picture>
</a>
Expand All @@ -172,7 +167,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
Loading Blog post
</picture>
</a>
Expand All @@ -183,7 +178,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
Loading Blog post
</picture>
</a>
Expand All @@ -196,7 +191,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
Loading Blog post
</picture>
</a>
Expand All @@ -207,7 +202,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
Loading Blog post
</picture>
</a>
Expand All @@ -218,7 +213,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
Loading Blog post
</picture>
</a>
Expand Down Expand Up @@ -267,13 +262,13 @@ <h3 class="panel-title">Discussion Forum</h3>
<h3 class="panel-title">Facebook ArduPilot group</h3>
</div>
<div class="panel-body">
<a href="https://www.facebook.com/groups/ArduPilot.org/">Facebook ArduPilot group</a> have
<a href="https://www.facebook.com/groups/ArduPilot.org/" rel="nofollow">Facebook ArduPilot group</a> have
several post
with most recent community cases.

<br><br><br>

<a href="https://www.facebook.com/groups/ArduPilot.org/">
<a href="https://www.facebook.com/groups/ArduPilot.org/" rel="nofollow">
<picture>
<source type="image/webp" srcset="images/FaceBookArduPilot.webp">
<source type="image/jpeg" srcset="images/FaceBookArduPilot.png">
Expand All @@ -292,13 +287,13 @@ <h3 class="panel-title">Facebook ArduPilot group</h3>
<h3 class="panel-title">Discord</h3>
</div>
<div class="panel-body">
Developing questions? Check our <a href="https://ardupilot.org/discord">discord channels</a> and
Developing questions? Check our <a href="https://ardupilot.org/discord" rel="nofollow">discord channels</a> and
exchange
your coding questions with other developers.

<br><br>

<a href="https://ardupilot.org/discord">
<a href="https://ardupilot.org/discord" rel="nofollow">
<picture>
<source type="image/webp" srcset="images/discord_mini.webp">
<source type="image/jpeg" srcset="images/discord_mini.png">
Expand Down Expand Up @@ -601,7 +596,7 @@ <h1>User Cases</h1>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Every country has different regulations governing the operation of remote
controlled
and/or autonomous vehicles. <a href="https://droneregulations.info">This database</a> has country specific
and/or autonomous vehicles. <a href="https://droneregulations.info" rel="nofollow">This database</a> has country specific
information, but it is every operator's responsibility to be seek out and be aware of local, regional, and
federal
regulations.
Expand Down Expand Up @@ -653,25 +648,23 @@ <h1>User Cases</h1>

if (val.has_image) {
const img = document.createElement('img');
img.classList.add("img-fluid", "img-thumbnail");
img.classList.add("img-fluid", "img-thumbnail", "col_min");
img.src = val.image;
img.loading = "lazy";
img.style.maxWidth = "640px";
img.style.width = "100%";
img.style.aspectRatio = "4/3";
//img.alt = val.title;

anchor.innerHTML = '';
anchor.appendChild(img);
} else if (isValidUrl(val.youtube_link)) {
const iframe = document.createElement('iframe');
anchor.classList.add("embed-responsive");
iframe.classList.add("embed-responsive-item", "img-thumbnail");
iframe.classList.add("embed-responsive-item", "img-thumbnail", "col_min");
//iframe.src = val.youtube_link;
iframe.title = val.title;
iframe.style.maxWidth = "640px";
iframe.style.width = "100%";
iframe.style.aspectRatio = "4/3";
iframe.loading = "lazy";
const youtubeUrl = new URL(val.youtube_link);
const videoId = youtubeUrl.pathname.split('/')[2];
Expand Down Expand Up @@ -713,7 +706,6 @@ <h1>User Cases</h1>
img.alt = 'ArduPilot';
img.className = 'img-fluid img-thumbnail col_min';
img.loading = 'lazy';
img.style.aspectRatio = '4/3';
img.textContent = 'Loading Blog post';
picture.appendChild(source1);
picture.appendChild(source2);
Expand Down
Loading