moanos/RattenheimRechner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add primary tabs for the three different modes

Browse Source
This commit is contained in:
moanos [he/him] 2025-04-13 17:13:09 +02:00
parent 7e473955d9
commit ee0ba6acf8
5 changed files with 120 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@ -11,6 +11,7 @@
"dependencies": {
"bulma": "^1.0.3",
"bulma-tooltip": "^3.0.2",
"font-awesome": "^4.7.0",
"i18next": "^23.12.2",
"i18next-browser-languagedetector": "^8.0.0",
"i18next-http-backend": "^2.5.2",
@ -18,6 +19,7 @@
},
"devDependencies": {
"@creativebulma/bulma-tooltip": "^1.2.0",
"@fortawesome/fontawesome-free": "^6.7.2",
"css-loader": "^7.1.2",
"sass": "^1.86.3",
"sass-loader": "^16.0.5",
@ -56,6 +58,16 @@
"node": ">=10.0.0"
}
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "6.7.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
"integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
"dev": true,
"license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
"engines": {
"node": ">=6"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@ -1959,6 +1971,15 @@
}
}
},
"node_modules/font-awesome": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
"integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
"license": "(OFL-1.1 AND MIT)",
"engines": {
"node": ">=0.10.3"
}
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",

2
package.json
View File

@ -22,6 +22,7 @@
"license": "AGPL-3.0-or-later",
"devDependencies": {
"@creativebulma/bulma-tooltip": "^1.2.0",
"@fortawesome/fontawesome-free": "^6.7.2",
"css-loader": "^7.1.2",
"sass": "^1.86.3",
"sass-loader": "^16.0.5",
@ -33,6 +34,7 @@
"dependencies": {
"bulma": "^1.0.3",
"bulma-tooltip": "^3.0.2",
"font-awesome": "^4.7.0",
"i18next": "^23.12.2",
"i18next-browser-languagedetector": "^8.0.0",
"i18next-http-backend": "^2.5.2",

42
public/index.html
View File

@ -21,7 +21,44 @@
<div class="content">
<h1 data-i18n-key="app-name" class="title is-1">Käfigrechner</h1>
<div class="container-form">
<div class="tabs is-centered is-boxed is-toggle" id="primary-tabs">
<ul>
<li class="is-active" data-tab-id="1">
<a>
<span class="icon is-small">
<i class="fas fa-number" aria-hidden="true"></i>
</span>
How many rats does this cage fit?
</a>
</li>
<li data-tab-id="2">
<a>
<span class="icon is-small">
<i class="fas fa-question" aria-hidden="true"></i>
</span>
What cage should I get?
</a>
</li>
<li data-tab-id="3">
<a>
<span class="icon is-small">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
Check existing cage
</a>
</li>
</ul>
</div>
</div>
<div id="tab-content">
<div class="" data-content-id="1">
<p>Here you can check how many rats could fit in your cage.</p>
</div>
<div class="" data-content-id="2">
<p>Here is a list of cages you can get.</p>
</div>
<div class="is-active" data-content-id="3">
<div class="card" id="container-cages">
<div class="card-content" id="card-ManualMeasurements">
<h2 class="title is-4"><label data-i18n-key="cage-measurements"
@ -41,7 +78,8 @@
<div class="columns">
<div class="column">
<label for="numFullFloors" class="label" data-i18n-key="full-floors">Vollebenen</label>
<label for="numFullFloors" class="label"
data-i18n-key="full-floors">Vollebenen</label>
<span data-tooltip="Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.">
<svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
stroke="currentColor">

48
src/index.js
View File

@ -1,6 +1,10 @@
import i18next from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import HttpApi from "i18next-http-backend";
import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'
import './main.scss';
/////////////////
@ -62,6 +66,50 @@ function bindLocaleSwitcher(initialValue) {
update();
})();
//////////
// TABS //
//////////
function initTabs(tabs, tabContent, activationClass) {
tabs.forEach((tab) => {
tab.addEventListener('click', (e) => {
let selectedTabID = tab.getAttribute('data-tab-id');
updateActiveTab(tabs, tab);
updateActiveContent(tabContent, selectedTabID);
})
})
}
function updateActiveTab(tabs, selectedTabID) {
tabs.forEach((tab) => {
if (tab && tab.classList.contains(ACTIVATION_CLASS)) {
tab.classList.remove(ACTIVATION_CLASS);
}
});
selectedTabID.classList.add(ACTIVATION_CLASS);
}
function updateActiveContent(tabsContent, selectedTabID) {
tabsContent.forEach((item) => {
if (item && item.classList.contains(ACTIVATION_CLASS)) {
item.classList.remove(ACTIVATION_CLASS);
}
let data = item.getAttribute('data-content-id');
if (data === selectedTabID) {
item.classList.add(ACTIVATION_CLASS);
}
});
}
const primaryTabs = [...document.querySelectorAll('#primary-tabs li')];
const primaryTabsContent = [...document.querySelectorAll('#tab-content div')];
const ACTIVATION_CLASS = 'is-active';
initTabs(primaryTabs, primaryTabsContent, ACTIVATION_CLASS);
////////////////
// CALCULATOR //
////////////////

9
src/main.scss
View File

@ -16,6 +16,15 @@ $beige-lighter: #eff0eb;
$input-shadow: none
);
#tab-content > div {
display: none;
}
#tab-content > div.is-active {
display: block;
}
// Import the Google Font
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");