feat: initial bulma restructuring
This commit is contained in:
parent
7b336f2817
commit
809c73a767
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,2 +1,4 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
public/bundle.js*
|
public/bundle.js*
|
||||||
|
/src/main.css
|
||||||
|
/src/main.css.map
|
||||||
|
|||||||
@ -4,6 +4,12 @@
|
|||||||
|
|
||||||
Ein Rechner für die minimale Größe eines Rattenkäfigs nach Standard des [VdRD e.V.](https://vdrd.de)
|
Ein Rechner für die minimale Größe eines Rattenkäfigs nach Standard des [VdRD e.V.](https://vdrd.de)
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run start
|
||||||
|
```
|
||||||
|
|
||||||
## CI
|
## CI
|
||||||
|
|
||||||
CI runs via woodpecker. The following secrets should be set
|
CI runs via woodpecker. The following secrets should be set
|
||||||
|
|||||||
3127
package-lock.json
generated
3127
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@ -6,7 +6,9 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "webpack-dev-server --config webpack.config.js",
|
"start": "webpack-dev-server --config webpack.config.js",
|
||||||
"ex-trans": "i18next -c i18next-parser.config.js",
|
"ex-trans": "i18next -c i18next-parser.config.js",
|
||||||
"build": "webpack --config webpack.config.js"
|
"build": "webpack --config webpack.config.js",
|
||||||
|
"build-bulma": "sass --load-path=node_modules src/main.scss src/main.css",
|
||||||
|
"start-bulma": "npm run build-bulma -- --watch"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@ -19,13 +21,21 @@
|
|||||||
"author": "Julian-Samuel Gebühr",
|
"author": "Julian-Samuel Gebühr",
|
||||||
"license": "AGPL-3.0-or-later",
|
"license": "AGPL-3.0-or-later",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@creativebulma/bulma-tooltip": "^1.2.0",
|
||||||
|
"css-loader": "^7.1.2",
|
||||||
|
"sass": "^1.86.3",
|
||||||
|
"sass-loader": "^16.0.5",
|
||||||
|
"style-loader": "^4.0.0",
|
||||||
"webpack": "^5.93.0",
|
"webpack": "^5.93.0",
|
||||||
"webpack-cli": "^5.1.4",
|
"webpack-cli": "^5.1.4",
|
||||||
"webpack-dev-server": "^5.0.4"
|
"webpack-dev-server": "^5.0.4"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"bulma": "^1.0.3",
|
||||||
|
"bulma-tooltip": "^3.0.2",
|
||||||
"i18next": "^23.12.2",
|
"i18next": "^23.12.2",
|
||||||
"i18next-browser-languagedetector": "^8.0.0",
|
"i18next-browser-languagedetector": "^8.0.0",
|
||||||
"i18next-http-backend": "^2.5.2"
|
"i18next-http-backend": "^2.5.2",
|
||||||
|
"sass-migrator": "^2.3.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -145,7 +145,7 @@ label {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
flex: 0 1 calc(25% - 0.5em);
|
flex: 0 1 calc(25% - 0.5em);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -3,88 +3,43 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Käfigrechner</title>
|
<title>Käfigrechner</title>
|
||||||
<link rel="stylesheet" href="assets/css/style.css">
|
<meta content="width=device-width, initial-scale=1" name="viewport"/>
|
||||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<button class="button has-tooltip-multiline has-tooltip-bottom has-text-link" data-tooltip="This is a tooltip!">
|
||||||
|
Hover me
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="top-navigation">
|
<div class="navbar">
|
||||||
<div class="homebutton">
|
<div class="navbar-brand">
|
||||||
<a href="https://vdrd.de">
|
<a class="button" href="https://vdrd.de">
|
||||||
<b data-i18n-key="back-to-home">zurück zur Homepage</b>
|
<b data-i18n-key="back-to-home">zurück zur Homepage</b>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="language-switcher">
|
|
||||||
<label aria-hidden="false" style="display: none" data-i18n-key="change-language"></label>
|
|
||||||
<select data-i18n-switcher class="locale-switcher" id="locale-switcher">
|
|
||||||
<option value="en">English</option>
|
|
||||||
<option value="de">Deutsch</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1 data-i18n-key="app-name">Käfigrechner</h1>
|
<h1 data-i18n-key="app-name" class="title is-1">Käfigrechner</h1>
|
||||||
<div class="container-form">
|
<div class="container-form">
|
||||||
<div class="cards" id="container-cages">
|
<div class="card" id="container-cages">
|
||||||
<div class="card" id="card-SavicSuiteRoyaleXL">
|
<div class="card-content" id="card-ManualMeasurements">
|
||||||
<label for="SavicSuiteRoyaleXL">
|
<h2 class="title is-4"><label data-i18n-key="cage-measurements"
|
||||||
<input type="checkbox" id="SavicSuiteRoyaleXL"/>
|
for="form-cage-measurements">Käfigmaße</label></h2>
|
||||||
<div class="card-photo">
|
|
||||||
<img alt-i18n-key="alt-savic-xl" src="assets/img/savic-xl.jpeg">
|
|
||||||
</div>
|
|
||||||
<div class="info-container">
|
|
||||||
<h4><b>Savic Suite Royale XL</b></h4>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card" id="card-SavicSuiteRoyale95Double">
|
|
||||||
<label for="SavicSuiteRoyale95Double">
|
|
||||||
<input type="checkbox" id="SavicSuiteRoyale95Double"/>
|
|
||||||
<div class="card-photo">
|
|
||||||
<div>
|
|
||||||
<img alt-i18n-key="alt-savic-95-double" src="assets/img/savic-95-double.jpg">
|
|
||||||
</div>
|
|
||||||
<div class="info-container">
|
|
||||||
<h4><b>Savic Suite Royale 95 Double</b></h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card" id="card-TiakiKleintierkäfigEtagere">
|
|
||||||
<label for="TiakiKleintierkäfigEtagere">
|
|
||||||
<input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
|
|
||||||
<div class="card-photo">
|
|
||||||
<img alt-i18n-key="alt-tiaki" src="assets/img/tiaki.jpeg">
|
|
||||||
</div>
|
|
||||||
<div class="info-container">
|
|
||||||
<h4><b>TIAKI Kleintierkäfig Étagère</b></h4>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card" id="card-ManualMeasurements">
|
|
||||||
<label data-i18n-key="cage-measurements" for="form-cage-measurements">Käfigmaße</label>
|
|
||||||
<form id="form-cage-measurements" class="form-measurements">
|
<form id="form-cage-measurements" class="form-measurements">
|
||||||
<div class="input-measurement">
|
<div class="input-measurement">
|
||||||
<label for="width" data-i18n-key="width-cm">Breite (cm)</label>
|
<label for="width" class="label" data-i18n-key="width-cm">Breite (cm)</label>
|
||||||
<input class="measurement" type="number" id="width">
|
<input class="input" type="number" id="width">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-measurement">
|
<div class="input-measurement">
|
||||||
<label for="depth" data-i18n-key="depth-cm">Tiefe (cm)</label>
|
<label for="depth" class="label" data-i18n-key="depth-cm">Tiefe (cm)</label>
|
||||||
<input class="measurement" type="number" id="depth">
|
<input class="input" type="number" id="depth">
|
||||||
</div>
|
|
||||||
<div class="input-measurement">
|
|
||||||
<label for="height" data-i18n-key="height-cm">Höhe (cm)</label>
|
|
||||||
<input class="measurement" type="number" id="height">
|
|
||||||
</div>
|
</div>
|
||||||
|
<label for="height" class="label" data-i18n-key="height-cm">Höhe (cm)</label>
|
||||||
|
<input class="input" type="number" id="height">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -92,8 +47,8 @@
|
|||||||
|
|
||||||
<div class="container-inputs">
|
<div class="container-inputs">
|
||||||
<div class="input-element">
|
<div class="input-element">
|
||||||
<label for="numFullFloors" data-i18n-key="full-floors">Vollebenen</label>
|
<label for="numFullFloors" class="label" data-i18n-key="full-floors">Vollebenen</label>
|
||||||
<div class="tooltip">
|
<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"
|
<svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
|
||||||
stroke="currentColor">
|
stroke="currentColor">
|
||||||
<path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359"
|
<path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359"
|
||||||
@ -104,32 +59,42 @@
|
|||||||
d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
|
d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
|
||||||
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="tooltiptext" data-i18n-key="full-floors-tooltip">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.</span>
|
</span>
|
||||||
</div>
|
|
||||||
<div class="ncontainer">
|
|
||||||
<div class="input-group">
|
|
||||||
<button id="decreaseFloorNum">-</button>
|
|
||||||
<input type="text" id="numFullFloors" value="3" readonly>
|
|
||||||
<button id="increaseFloorNum">+</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="ncontainer">
|
||||||
<div class="input-element">
|
<div class="input-group">
|
||||||
<div class="slidecontainer">
|
<button id="decreaseFloorNum">-</button>
|
||||||
<label for="numRats" id="labelNumRats"></label>
|
<input type="text" id="numFullFloors" value="3" readonly>
|
||||||
<input type="range" min="3" max="15" value="4" class="slider" id="numRats">
|
<button id="increaseFloorNum">+</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container output-element">
|
<div class="input-element">
|
||||||
<strong data-i18n-key="result">Ergebnis</strong>
|
<div class="slidecontainer">
|
||||||
<div id="resultsDiv"></div>
|
<label for="numRats" id="labelNumRats"></label>
|
||||||
|
<input type="range" min="3" max="15" value="4" class="slider" id="numRats">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="container output-element">
|
||||||
|
<strong data-i18n-key="result">Ergebnis</strong>
|
||||||
|
<div id="resultsDiv"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="./bundle.js"></script>
|
<script src="./bundle.js"></script>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div class="language-switcher">
|
||||||
|
<label aria-hidden="false" style="display: none" data-i18n-key="change-language"></label>
|
||||||
|
<select data-i18n-switcher class="locale-switcher" id="locale-switcher">
|
||||||
|
<option value="en">English</option>
|
||||||
|
<option value="de">Deutsch</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
157
src/index.js
157
src/index.js
@ -1,50 +1,7 @@
|
|||||||
import i18next from "i18next";
|
import i18next from "i18next";
|
||||||
import LanguageDetector from "i18next-browser-languagedetector";
|
import LanguageDetector from "i18next-browser-languagedetector";
|
||||||
import HttpApi from "i18next-http-backend";
|
import HttpApi from "i18next-http-backend";
|
||||||
|
import './main.scss';
|
||||||
|
|
||||||
///////////////
|
|
||||||
// CAGE DATA //
|
|
||||||
///////////////
|
|
||||||
|
|
||||||
const cages_dict = [
|
|
||||||
{
|
|
||||||
"name": "SavicSuiteRoyal95Double",
|
|
||||||
"dimensions": {
|
|
||||||
"width": 95,
|
|
||||||
"depth": 63,
|
|
||||||
"height": 120
|
|
||||||
},
|
|
||||||
"description": {
|
|
||||||
"en": "A european cage that (with added floors) is suitable for 4-7 rats",
|
|
||||||
"de": "Ein eurpäischer Käfig der mit zwei zusätzliche Ebenen für 4-7 Ratten geeignet ist. Oft lässt sich der Käfig auch gebraucht kaufen"
|
|
||||||
},
|
|
||||||
"images": {
|
|
||||||
"1": {
|
|
||||||
"path": "assets/img/savic-95-double.jpg",
|
|
||||||
"alt": "Bild eines Gitterkäfigs mit Türen die die gesamte Front öffnen."
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "SavicSuiteRoyalXL",
|
|
||||||
"dimensions": {
|
|
||||||
"width": 115,
|
|
||||||
"depth": 67.5,
|
|
||||||
"height": 153
|
|
||||||
},
|
|
||||||
"description": {
|
|
||||||
"en": "A european cage that (with added floors) is suitable for 4-9 rats",
|
|
||||||
"de": "Ein eurpäischer Käfig der mit zwei zusätzliche Ebenen für 4-9 Ratten geeignet ist. Oft lässt sich der Käfig auch gebraucht kaufen"
|
|
||||||
},
|
|
||||||
"images": {
|
|
||||||
"1": {
|
|
||||||
"path": "assets/img/savic-xl.jpeg",
|
|
||||||
"alt": "Bild eines Gitterkäfigs mit Türen die die gesamte Front öffnen."
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
/////////////////
|
/////////////////
|
||||||
// TRANSLATION //
|
// TRANSLATION //
|
||||||
@ -60,7 +17,7 @@ async function initI18next() {
|
|||||||
fallbackLng: "en",
|
fallbackLng: "en",
|
||||||
debug: true,
|
debug: true,
|
||||||
backend: {
|
backend: {
|
||||||
loadPath: "/lang/{{lng}}.json",
|
loadPath: "/i18n/{{lng}}.json",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -221,98 +178,6 @@ inputDepth.onchange = updateViaManualMeasurements;
|
|||||||
const inputHeight = document.getElementById("height");
|
const inputHeight = document.getElementById("height");
|
||||||
inputHeight.onchange = updateViaManualMeasurements;
|
inputHeight.onchange = updateViaManualMeasurements;
|
||||||
|
|
||||||
function createCageCard(cageName, cageImages) {
|
|
||||||
console.log(cageImages);
|
|
||||||
// Create the card div
|
|
||||||
const cardDiv = document.createElement('div');
|
|
||||||
cardDiv.className = 'card';
|
|
||||||
cardDiv.id = 'card-'+cageName;
|
|
||||||
|
|
||||||
// Create the label element
|
|
||||||
const label = document.createElement('label');
|
|
||||||
label.setAttribute('for', cageName);
|
|
||||||
|
|
||||||
// Create the checkbox input element
|
|
||||||
const checkbox = document.createElement('input');
|
|
||||||
checkbox.type = 'checkbox';
|
|
||||||
checkbox.id = cageName;
|
|
||||||
|
|
||||||
const cardImageDiv = document.createElement('div');
|
|
||||||
cardImageDiv.className = 'card-photo';
|
|
||||||
|
|
||||||
const img = document.createElement('img');
|
|
||||||
img.setAttribute("alt-i18n-key", 'alt-savic-xl');
|
|
||||||
img.src = cageImages[1].path;
|
|
||||||
|
|
||||||
// Append image to card-photo div
|
|
||||||
cardImageDiv.appendChild(img);
|
|
||||||
|
|
||||||
// Create the info-container div and heading
|
|
||||||
const infoContainerDiv = document.createElement('div');
|
|
||||||
infoContainerDiv.className = 'info-container';
|
|
||||||
|
|
||||||
const heading = document.createElement('h4');
|
|
||||||
heading.innerHTML = '<b>'+ cageName + '</b>';
|
|
||||||
|
|
||||||
// Append heading to info-container div
|
|
||||||
infoContainerDiv.appendChild(heading);
|
|
||||||
|
|
||||||
// Append elements to label
|
|
||||||
label.appendChild(checkbox);
|
|
||||||
label.appendChild(cardImageDiv);
|
|
||||||
label.appendChild(infoContainerDiv);
|
|
||||||
|
|
||||||
// Append label to cardDiv
|
|
||||||
cardDiv.appendChild(label);
|
|
||||||
|
|
||||||
// Append cardDiv to the body or a specific element
|
|
||||||
let containerForCages = document.getElementById("container-cages");
|
|
||||||
containerForCages.appendChild(cardDiv); // Change to a specific parent element if needed
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
|
|
||||||
const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
|
|
||||||
const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere");
|
|
||||||
|
|
||||||
const cardSavicSuiteRoyaleXL = document.getElementById("card-SavicSuiteRoyaleXL");
|
|
||||||
const cardSavicSuiteRoyale95Double = document.getElementById("card-SavicSuiteRoyale95Double");
|
|
||||||
const cardTiakiKleintierkäfigEtagere = document.getElementById("card-TiakiKleintierkäfigEtagere");
|
|
||||||
|
|
||||||
|
|
||||||
function markActiveCage(cageName) {
|
|
||||||
|
|
||||||
cardSavicSuiteRoyaleXL.classList.remove("card-active");
|
|
||||||
cardSavicSuiteRoyale95Double.classList.remove("card-active");
|
|
||||||
cardTiakiKleintierkäfigEtagere.classList.remove("card-active");
|
|
||||||
if (cageName != "") {
|
|
||||||
const activeCage = document.getElementById("card-" + cageName);
|
|
||||||
activeCage.classList.add("card-active")
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCage(event) {
|
|
||||||
selectSavicSuiteRoyaleXL.checked = false;
|
|
||||||
selectSavicSuiteRoyale95Double.checked = false;
|
|
||||||
selectTiakiKleintierkäfigEtagere.checked = false;
|
|
||||||
const selectedCage = event.currentTarget
|
|
||||||
selectedCage.checked = true;
|
|
||||||
const cageName = selectedCage.id;
|
|
||||||
|
|
||||||
var dim = getCageDimensions(cageName);
|
|
||||||
inputWidth.value = dim.width;
|
|
||||||
inputDepth.value = dim.depth;
|
|
||||||
inputHeight.value = dim.height;
|
|
||||||
|
|
||||||
markActiveCage(cageName);
|
|
||||||
|
|
||||||
update();
|
|
||||||
}
|
|
||||||
|
|
||||||
selectSavicSuiteRoyaleXL.onchange = updateCage;
|
|
||||||
selectSavicSuiteRoyale95Double.onchange = updateCage;
|
|
||||||
selectTiakiKleintierkäfigEtagere.onchange = updateCage;
|
|
||||||
|
|
||||||
|
|
||||||
var labelNumRats = document.getElementById("labelNumRats");
|
var labelNumRats = document.getElementById("labelNumRats");
|
||||||
@ -326,17 +191,6 @@ ratSlider.oninput = function () {
|
|||||||
// Full floor functions
|
// Full floor functions
|
||||||
var fullFloorNum = document.getElementById("numFullFloors");
|
var fullFloorNum = document.getElementById("numFullFloors");
|
||||||
|
|
||||||
function getCageDimensions(cageName) {
|
|
||||||
if (cageName == "SavicSuiteRoyaleXL") {
|
|
||||||
return new Dimensions(115, 67.5, 153);
|
|
||||||
}
|
|
||||||
if (cageName == "SavicSuiteRoyale95Double") {
|
|
||||||
return new Dimensions(95, 63, 120);
|
|
||||||
}
|
|
||||||
if (cageName == "TiakiKleintierkäfigEtagere") {
|
|
||||||
return new Dimensions(93.5, 63, 141.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getResultFromChecks(checks) {
|
function getResultFromChecks(checks) {
|
||||||
if (Object.keys(checks).length > 0) {
|
if (Object.keys(checks).length > 0) {
|
||||||
@ -356,7 +210,6 @@ function getResultFromChecks(checks) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateViaManualMeasurements() {
|
function updateViaManualMeasurements() {
|
||||||
markActiveCage("ManualMeasurements");
|
|
||||||
update();
|
update();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -394,9 +247,3 @@ function increaseFloorNum() {
|
|||||||
update();
|
update();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
cages_dict.forEach((cage) => {
|
|
||||||
console.log(cage.images);
|
|
||||||
createCageCard(cage.name, cage.images);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|||||||
20
src/main.scss
Normal file
20
src/main.scss
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
// Set your brand colors
|
||||||
|
$purple: #8a4d76;
|
||||||
|
$pink: #7c95fa;
|
||||||
|
$brown: #757763;
|
||||||
|
$beige-light: #d0d1cd;
|
||||||
|
$beige-lighter: #eff0eb;
|
||||||
|
|
||||||
|
// Path to Bulma's sass folder
|
||||||
|
@use "bulma/sass" with (
|
||||||
|
$family-primary: '"Nunito", sans-serif',
|
||||||
|
$grey-dark: $brown,
|
||||||
|
$grey-light: $beige-light,
|
||||||
|
$primary: $purple,
|
||||||
|
$link: $pink,
|
||||||
|
$control-border-width: 2px,
|
||||||
|
$input-shadow: none
|
||||||
|
);
|
||||||
|
|
||||||
|
// Import the Google Font
|
||||||
|
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
|
||||||
@ -22,4 +22,16 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
static: "public",
|
static: "public",
|
||||||
},
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.scss$/i,
|
||||||
|
use: [
|
||||||
|
'style-loader', // Injects styles into DOM
|
||||||
|
'css-loader', // Resolves CSS imports
|
||||||
|
'sass-loader' // Compiles Sass to CSS
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user