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

Bootstrap version updated to remove jQuery dependency #1235

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Bootstrap version updated to remove jQuery dependency #1235

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1b3d557
Bootstrap version updated to remove jQuery dependency
AritraLeo Mar 17, 2024
d7a7666
Merge branch 'kiwix:main' into issues/1233
AritraLeo Mar 18, 2024
146ff05
Button Toggle issue and hover color resolved
AritraLeo Mar 18, 2024
a05ebfb
Issues fixed - margin left, button style, dropdown
AritraLeo Mar 26, 2024
6a57a06
Merge branch 'kiwix:main' into issues/1233
AritraLeo Mar 29, 2024
077a5e0
Merge branch 'kiwix:main' into issues/1233
AritraLeo Apr 4, 2024
3f073c2
Merge branch 'kiwix:main' into issues/1233
AritraLeo Apr 11, 2024
5e89bb4
Merge branch 'kiwix:main' into issues/1233
AritraLeo Apr 15, 2024
53527d0
Merge branch 'kiwix:main' into issues/1233
AritraLeo May 19, 2024
400ab1a
Resolved non code issues
AritraLeo May 19, 2024
8f91d7a
Search bar drop down removed, footer aligned, removed all jQuery ment…
AritraLeo Jun 6, 2024
7045d6d
Merge remote-tracking branch 'upstream/main' into issues/1233
AritraLeo Jul 20, 2024
82a2a1f
Merge branch 'kiwix:main' into issues/1233
AritraLeo Jul 25, 2024
3f97494
Codefactor's requested changes made to service-worker.js
AritraLeo Aug 1, 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
77 changes: 29 additions & 48 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,8 @@
"dependencies": {
"@fortawesome/fontawesome-free": "5.9.0",
"@types/fs-extra": "^9.0.11",
"bootstrap": "^4.6.2",
"core-js": "3.30.2",
"jquery": "^3.7.0"
"bootstrap": "^5.0.2",
"core-js": "3.30.2"
},
"devDependencies": {
"@babel/cli": "^7.21.5",
Expand Down
8 changes: 5 additions & 3 deletions rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ const config = {
copy({
targets: [{
src: ['www/js/lib/*dec-wasm.wasm', 'www/js/lib/libzim-asm.js', 'www/js/lib/libzim-wasm.*', 'www/js/lib/webpHeroBundle*',
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.*', 'node_modules/jquery/dist/jquery.slim.min.*', '!www/js/lib/libzim-wasm.dev*'],
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.*',
// 'node_modules/jquery/dist/jquery.slim.min.*',
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
'!www/js/lib/libzim-wasm.dev*'],
dest: 'dist/www/js'
},
{ src: ['node_modules/bootstrap/dist/css/bootstrap.min.*'], dest: 'dist/www/css' },
Expand Down Expand Up @@ -131,7 +133,7 @@ if (process.env.BUILD === 'production') {
// Comment out the old app.js link
.replace(/(<script type="module.*app.js.*)/, '<!-- $1 -->')
// Redirect jQuery and bootstrap
.replace(/(<script\s.*src=").*jquery.slim.min.js/, '$1js/jquery.slim.min.js')
// .replace(/(<script\s.*src=").*jquery.slim.min.js/, '$1js/jquery.slim.min.js')
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
.replace(/(<script\s.*src=").*bootstrap.bundle.min.js/, '$1js/bootstrap.bundle.min.js')
.replace(/(<link\s.*href=").*bootstrap.min.css/, '$1css/bootstrap.min.css')
}
Expand Down Expand Up @@ -184,7 +186,7 @@ if (process.env.BUILD === 'production') {
// Comment out the old app.js link
.replace(/(<script type="module.*app.js.*)/, '<!-- $1 -->')
// Redirect jQuery and bootstrap
.replace(/(<script\s.*src=").*jquery.slim.min.js/, '$1js/jquery.slim.min.js')
// .replace(/(<script\s.*src=").*jquery.slim.min.js/, '$1js/jquery.slim.min.js')
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
.replace(/(<script\s.*src=").*bootstrap.bundle.min.js/, '$1js/bootstrap.bundle.min.js')
.replace(/(<link\s.*href=").*bootstrap.min.css/, '$1css/bootstrap.min.css')
}
Expand Down
2 changes: 0 additions & 2 deletions service-worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,9 +150,7 @@
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map',
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap.min.css.map',

Check warning on line 153 in service-worker.js

View check run for this annotation

codefactor.io / CodeFactor

service-worker.js#L153 

Unexpected trailing comma. (comma-dangle)
'node_modules/jquery/dist/jquery.slim.min.js',
'node_modules/jquery/dist/jquery.slim.min.map'
];

if ('WebAssembly' in self) {
Expand Down
11 changes: 11 additions & 0 deletions www/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,17 @@ button {
margin: 2px;
}

/* Changes - overriding changes of bootstrap for dark btn hover*/

.btn-outline-dark:hover {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}




Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
.btn-danger {
background-color: lightyellow;
color: darkred;
Expand Down
28 changes: 15 additions & 13 deletions www/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,11 @@ <h5 class="modal-title" id="modalLabel">Modal title goes here</h5>
<section id="search-article" role="region">
<header id="top">
<nav class="navbar navbar-expand-md bg-light" role="navigation">
<a id="appVersion" class="navbar-brand">Kiwix</a>
<a id="appVersion" class="navbar-brand ms-3">Kiwix</a>

<!-- Toggler/collapsible Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target=".navbar-collapse">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse">
<i class="fas fa-bars"></i>
</button>

Expand All @@ -109,7 +109,7 @@ <h5 class="modal-title" id="modalLabel">Modal title goes here</h5>
<div class="row">
<span class="col-10">
<span class="input-group">
<input type="search" data-i18n-tip="home-prefix-tip" title="You can search the contents of your ZIM archive using this search field. It will suggest article titles **starting** with the letters you type." id="prefix" placeholder="Search..." class="form-control" />
<input type="search" data-i18n-tip="home-prefix-tip" title="You can search the contents of your ZIM archive using this search field. It will suggest article titles **starting** with the letters you type." id="prefix" placeholder="Search..." class="form-select" />
<button type="button" data-i18n-tip="home-search" title="Search" class="btn btn-outline-secondary" id="searchArticles"><i class="fas fa-search"></i></button>
</span>
</span>
Expand Down Expand Up @@ -465,15 +465,17 @@ <h2 data-i18n="configure-title">Configuration</h2>
<button type="button" class="close" data-hide="alert">&times;</button>
<span id="persistentMessage"></span>
</div>
<!-- Dropdown prev (updated but arrow isn't visible) -->
<div class="dropdown" style="float:right">
<select class="form-control" tabindex="4" id="languageSelector" name="languageSelector" aria-labelledby="languageSelector">
<option data-i18n="configure-language-selector-default" selected class="dropdown-item" href="#" value="default">Language</a>
<select class="form-select dropdown-toggle" tabindex="4" id="languageSelector" data-bs-toggle="dropdown" name="languageSelector" aria-labelledby="languageSelector">
<option data-i18n="configure-language-selector-default" selected class="dropdown-item" href="#" value="default">Language </a>
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
<option class="dropdown-item" href="#" value="en">English</a>
<option class="dropdown-item" href="#" value="fr">Français</a>
<option class="dropdown-item" href="#" value="es">Español</a>
<option data-i18n="configure-language-selector-other" class="dropdown-item" href="#" value="other">More coming soon...!</a>
</select>
</div>

Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
<p id="downloadInstruction"><span data-i18n="configure-download-instructions">This application needs a ZIM archive to work.<br />
For full instructions, please see the section</span> <strong><a href="#configuration" data-i18n="about" class="aboutLinks">About</a></strong>.</p>
<div id="selectorsDisplay" style="display: none;">
Expand All @@ -484,16 +486,16 @@ <h2 data-i18n="configure-title">Configuration</h2>
<p data-i18n="configure-select-instructions" id="selectInstructions">Please select or drag and drop a .zim file (or all the .zimaa, .zimab etc in
case of a split ZIM file):</p>
<span id="fileSelectionButtonContainer">
<label tabindex="5" id="archiveFilesLbl" class="btn btn-light custom-file-upload">
<label tabindex="5" id="archiveFilesLbl" class="btn btn-outline-dark custom-file-upload">
<input type="file" id="archiveFiles" multiple class="btn"
accept="application/octet-stream,.zim,.zimaa,.zimab,.zimac,.zimad,.zimae,.zimaf,.zimag,.zimah,.zimai,.zimaj,.zimak,.zimal,.zimam,.ziman,.zimao,.zimap,.zimaq,.zimar,.zimas,.zimat,.zimau,.zimav,.zimaw,.zimax,.zimay,.zimaz,.zimba,.zimbb,.zimbc,.zimbd,.zimbe,.zimbf,.zimbg,.zimbh,.zimbi,.zimbj,.zimbk,.zimbl,.zimbm,.zimbn,.zimbo,.zimbp,.zimbq,.zimbr,.zimbs,.zimbt,.zimbu,.zimbv,.zimbw,.zimbx,.zimby,.zimbz" />
<span data-i18n="home-btn-fileselect">Select ZIM File(s)</span>
</label>
<label tabindex="6" class="btn btn-light custom-file-upload" id="folderSelect" data-i18n="" style="display: none;" data-i18n="configure-btn-folderselect">
<label tabindex="6" class="btn btn-outline-dark custom-file-upload" id="folderSelect" data-i18n="" style="display: none;" data-i18n="configure-btn-folderselect">
<input type="file" id="archiveFolders" style="display: none;" webkitdirectory="true"/>
<span data-i18n="configure-btn-folderselect">Select Folder</span>
</label>
<label tabindex="7" class="btn btn-light custom-file-upload" id="btnLibrary" data-i18n="configure-btn-library" data-i18n-tip="configure-btn-library-tip" title="This will display a graphical library of ZIM archives for download if your browser can open it. Otherwise, it opens a text-only version. If you are using the Chromium extension in ServiceWorkerLocal mode, you will only be able to use the latter (switch to ServiceWorker mode for the full graphical version).">
<label tabindex="7" class="btn btn-outline-dark custom-file-upload" id="btnLibrary" data-i18n="configure-btn-library" data-i18n-tip="configure-btn-library-tip" title="This will display a graphical library of ZIM archives for download if your browser can open it. Otherwise, it opens a text-only version. If you are using the Chromium extension in ServiceWorkerLocal mode, you will only be able to use the latter (switch to ServiceWorker mode for the full graphical version).">
Browse ZIM Library
</label>
</span>
Expand All @@ -512,7 +514,7 @@ <h2 data-i18n="configure-title">Configuration</h2>
</p>
<p data-i18n="configure-select-file-instructions">Please select the archive you want to use:</p>
</div>
<select id="archiveList" class="form-control"></select>
<select id="archiveList" class="form-select"></select>
<p><i data-i18n="configure-changed-content-note">(Re-pick folder if there is new content on your device)</i></p>
<span id="rescanButtonAndText" style="display: none;">
<button type="button" class="btn btn-light" id="btnRescanDeviceStorage" data-i18n="configure-btn-rescan">Rescan</button>
Expand Down Expand Up @@ -560,7 +562,7 @@ <h3 data-i18n="configure-display-settings-title">Display settings</h3>
<label data-i18n-tip="configure-display-selectapptheme-tip" title="Allows selection of themes either for the app only, or for the app and the loaded content.">
<span data-i18n="configure-display-selectapptheme"><b>Select app theme</b> (content inversion is experimental):</span>
</label>
<select class="form-control" id="appThemeSelect">
<select class="form-select" id="appThemeSelect">
<option data-i18n="configure-display-themeoption-light" value="light">Light</option>
<option data-i18n="configure-display-themeoption-dark-apponly" value="dark">Dark (app only)</option>
<option data-i18n="configure-display-themeoption-dark-invert" value="dark_invert">Dark (generic invert)</option>
Expand Down Expand Up @@ -622,7 +624,7 @@ <h3 data-i18n="configure-performance-settings-title">Performance settings</h3>
<div class="col-sm-8">
<div class="range">
<label>
<input type="range" class="form-control-range" min="5" max="100" id="titleSearchRange" value="25">
<input type="range" class="form-select-range" min="5" max="100" id="titleSearchRange" value="25">
<span data-i18n="configure-performance-searchrange-valuetext">Value</span>: <span id="titleSearchRangeVal"></span> (<i data-i18n="configure-performance-searchrange-help">default 25, higher values increase search time</i>)
</label>
</div>
Expand Down Expand Up @@ -800,7 +802,7 @@ <h3 data-i18n="configure-expert-settings-title">Expert settings</h3>
<!-- Legacy jQuery and Bootstrap are not ES-module-aware, and interact with each other using side-effects, so we are forced to load them globally here.
There is code in rollup.config.js which alters these references, and the link reference above, to point to the local destination of the copied modules.
-->
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.slim.min.js"></script>
<!-- <script type="text/javascript" src="../node_modules/jquery/dist/jquery.slim.min.js"></script> -->
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="module" defer src="js/app.js"></script>
Expand Down
Loading