kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-08-03 11:28:21 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make features section clickable

Browse Source
This commit is contained in:
Jaifroid 2025-06-11 09:23:24 +01:00
parent 8c46c2ca07
commit 05a1409fe2
2 changed files with 101 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
www/css/app.css
View File

@ -714,94 +714,81 @@ pre {
background-color: #ccc !important;
}
/* Collapsible features section */
.collapsible-section {
border: 1px solid #ddd;
border-radius: 4px;
margin: 10px 0;
}
@media (max-width: 768px) {
/*Increase touchability of bottom buttons*/
footer .btn-default {
font-size: 120% !important;
}
.features-summary {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding: 15px;
margin: 0;
outline: none;
background-color: #f8f9fa;
border-radius: 4px;
}
/* Pour réduire la taille du menu en haut */
/*.navbar {
min-height: 20px !important;
margin-bottom: 1px !important;
}*/
/*.navbar-brand, .navbar-nav a { /* GK added navbar-nav a*/
/*padding-top: 2px !important;
padding-bottom: 1px !important;
height: 25px !important;
.features-summary:hover {
background-color: #e9ecef;
}
.features-summary::-webkit-details-marker {
display: none;
}
.features-summary h3 {
margin: 0;
flex-grow: 1;
}
.collapse-indicator {
font-size: 0.8em;
transition: transform 0.3s ease;
margin-left: 10px;
}
.collapsible-section[open] .collapse-indicator {
transform: rotate(180deg);
}
.features-content {
margin-top: 0;
padding: 0 15px 15px;
}
/* Dark theme support */
.dark .collapsible-section {
border-color: #4a5568;
}
.dark .features-summary {
background-color: #2d3748;
}
.dark .features-summary:hover {
background-color: #374151;
}
/* Mobile-specific styling */
@media (max-width: 768px) {
/*Increase touchability of bottom buttons*/
footer .btn-default {
font-size: 120% !important;
}
.navbar-nav a {
padding-bottom: 15px !important;
}*/
/*.navbar-toggle {
padding-top: 2px !important;
padding-bottom: 2px !important;
margin-top: 2px !important;
margin-bottom: 0px !important;
background-color: lightgray !important;
}*/
/* Pour réduire la taille des éléments et boutons dans l'aréa de navégation - GK
.navbar-nav, .navbar-nav > li {
padding-top: 2px !important;
padding-bottom: 2px !important;
margin-top: 2px !important;
margin-bottom: 0px !important;
} */
.navbar-nav {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*Make sure these align correctly rather than stacking at full width - GK*/
.navbar-nav > li > a {
/*float: left !important;*/
/*Added this to prevent the buttons becoming so small*/
padding-top: 15px !important;
}
/*.col-md-offset-1 {
padding-left: 5px !important;
}
[role=region] > header {
margin-bottom: 10px !important;
}*/
/* Pour supprimer l'espace entre la zone de recherche et l'iframe
.list-group {
.navbar-nav {
margin-top: 0 !important;
margin-bottom: 0 !important;
} */
/* Pour réduire la taille du champ de recherche
.form-control {
height: 28px !important;
padding-bottom: 5px !important;
} */
/*.dropdown-menu {
font-size: 20px !important;
}
Pour réduire la taille des boutons en haut de l'écran
.btn-xs, .btn-sm, .btn-default, .btn-group-xs > .btn, .btn-group-sm > .btn {
font-size: 10px !important;
}*/
/* Pour réduire la taille des boutons en bas de l'écran
.btn-lg, .btn-group-lg > .btn {
padding-top: 1px !important;
padding-bottom: 1px !important;
font-size: 16px !important;
}*/
/*Make sure these align correctly rather than stacking at full width - GK*/
.navbar-nav > li > a {
/*float: left !important;*/
/*Added this to prevent the buttons becoming so small*/
padding-top: 15px !important;
}
@media (max-width: 440px) {
/*.btn-primary {
font-size: 12px !important;
}
.input-group-btn {
display: inline !important;
}
#btnHome {
float: left;
}*/
}
}

51
www/index.html
View File

@ -117,28 +117,35 @@
<p><a href="https://github.com/kiwix/kiwix-js-pwa/blob/main/CHANGELOG.md" target="_blank" rel="noopener">And there's more...<img alt="external link" src="I/s/Icon_External_Link.png"></a></p>
</div>
<div id="features">
<h3>Features in Version 3.x</h3>
<ul style="padding-left:15px;">
<li>Support for all known ZIM types from Wikipedia 0.5 to Zimit v2</li>
<li>Huge range of supported browsers and frameworks</li>
<li>Full-text searching of ZIM contents using <a href="https://github.com/openzim/javascript-libzim" target="_blank" rel="noopener">javascript-libzim</a></li>
<li>Cutting-edge Origin Private File System support with best-available fallbacks</li>
<li>Built-in DarkReader support for nearly all ZIM types</li>
<li>Display article previews in popovers for Wikimedia archives</li>
<li>Use multiple ZIM archives simultaneously with File Handling API</li>
<li>ZIM content is loaded in a secure sandbox for your protection</li>
<li>Download ZIM archives in-app and display download progress</li>
<li>Read Zimit archives you create yourself with <a href="https://youzim.it" target="_blank" rel="noopener">youzim.it</a>
<li>Open a new browsable tab or window</li>
<li>In-page searching and highlighting</li>
<li>Title and URL search with wildcards .* or regexes</li>
<li>Alphabetical index of all articles in archive (type space in search field)</li>
<li>Find assets by URL in ZIM archive by prefixing namespace (or type space + / in search)</li>
<li>Printing articles (with optional filtering for Wikipedia articles)</li>
<li>Transform Wikipedia layout from mobile to desktop style and vice versa</li>
<li>Download and save content from ZIM</li>
<li>Support full-screen and orientation lock in most browsers and frameworks</li>
</ul>
<details class="collapsible-section">
<summary class="features-summary">
<h3>Features in Version 3.x</h3>
<span class="collapse-indicator">▼</span>
</summary>
<div class="features-content">
<ul style="padding-left:15px;">
<li>Support for all known ZIM types from Wikipedia 0.5 to Zimit v2</li>
<li>Huge range of supported browsers and frameworks</li>
<li>Full-text searching of ZIM contents using <a href="https://github.com/openzim/javascript-libzim" target="_blank" rel="noopener">javascript-libzim</a></li>
<li>Cutting-edge Origin Private File System support with best-available fallbacks</li>
<li>Built-in DarkReader support for nearly all ZIM types</li>
<li>Display article previews in popovers for Wikimedia archives</li>
<li>Use multiple ZIM archives simultaneously with File Handling API</li>
<li>ZIM content is loaded in a secure sandbox for your protection</li>
<li>Download ZIM archives in-app and display download progress</li>
<li>Read Zimit archives you create yourself with <a href="https://youzim.it" target="_blank" rel="noopener">youzim.it</a>
<li>Open a new browsable tab or window</li>
<li>In-page searching and highlighting</li>
<li>Title and URL search with wildcards .* or regexes</li>
<li>Alphabetical index of all articles in archive (type space in search field)</li>
<li>Find assets by URL in ZIM archive by prefixing namespace (or type space + / in search)</li>
<li>Printing articles (with optional filtering for Wikipedia articles)</li>
<li>Transform Wikipedia layout from mobile to desktop style and vice versa</li>
<li>Download and save content from ZIM</li>
<li>Support full-screen and orientation lock in most browsers and frameworks</li>
</ul>
</div>
</details>
</div>
</div>
</div>