v4.3.0

ModifiedCommand · Feb 4, 2022 · 54d1960 · 54d1960
1 parent 24772f8
commit 54d1960
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Changelog
 
+## [[v4.3.0]](https://github.com/ModifiedCommand/ConvertJavaTextureToBedrock/releases/tag/v4.3.0) - Lastest Commit - Feb 4, 2022
+- Reformated some files
+- Fix all the packages with [API](https://github.com/ModifiedCommand/ConvertJavaTextureToBedrockApi) version [`v4.0.8`](https://github.com/ModifiedCommand/ConvertJavaTextureToBedrockApi/releases/tag/v4.0.8)
+- Automated builds for `gh-pages` with [GitHub Actions](https://github.com/features/actions)
+- Updated Readme and Source Footer Links
+- Made mobile have a shorter name than desktop
+- Created `src/js/images.js` for images for webpack
+- Customized Stylesheet
+  - Added Header Image
+  - Added Margin around Drag and Drop Zone
+  - Colored Drag and Drop Zone
+  - Made Experimental conversions Label and Switch Green
+  - Added Bootstrap
+    - Make three columns for better mobile support
+
 ## [[v4.2.0]](https://github.com/ModifiedCommand/ConvertJavaTextureToBedrock/releases/tag/v4.2.0) - [a1c27d8](https://github.com/ModifiedCommand/ConvertJavaTextureToBedrock/commit/a1c27d888058f61bbb3e67170b5f9cb66e3b53a8) - Dec 10, 2020
 - Weather converter are now experimental
 - Log current `pack_format` if incompatible

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@modifiedcommand/convert-minecraft-java-texture-to-bedrock-webapp",
     "productName": "ConvertJavaTextureToBedrockWebApp",
-    "version": "4.2.1",
+    "version": "4.3.0",
     "description": "Web app for converting Minecraft Java texture packs to Bedrock texture packs",
     "keywords": [
         "Minecraft",
@@ -21,9 +21,11 @@
         "url": "https://github.com/ModifiedCommand/ConvertJavaTextureToBedrock/issues"
     },
     "homepage": "https://github.com/ModifiedCommand/ConvertJavaTextureToBedrock#readme",
-    "dependencies": {},
+    "dependencies": {
+        "file-loader": "^6.2.0"
+    },
     "devDependencies": {
-        "@modifiedcommand/convert-minecraft-java-texture-to-bedrock-api": "github:ModifiedCommand/ConvertJavaTextureToBedrockApi#v4.0.8",
+        "@modifiedcommand/convert-minecraft-java-texture-to-bedrock-api": "github:ModifiedCommand/ConvertJavaTextureToBedrockApi",
         "clean-webpack-plugin": "3.0.0",
         "css-loader": "3.4.2",
         "favicons-webpack-plugin": "1.0.2",
@@ -51,4 +53,4 @@
         "build": "node_modules/.bin/webpack --config webpack.config.js"
     },
     "private": false
-}
+}
diff --git a/src/css/style.less b/src/css/style.less
@@ -1,6 +1,7 @@
 @import (less) "~materialize-css/dist/css/materialize.min.css";
 
-html, body {
+html,
+body {
   .white;
   .black-text;
   display: flex;
@@ -51,8 +52,8 @@ footer {
     label {
       .yellow-text;
 
-      input[type=checkbox]:checked + .lever,
-      input[type=checkbox]:checked + .lever:after {
+      input[type="checkbox"]:checked + .lever,
+      input[type="checkbox"]:checked + .lever:after {
         .yellow;
       }
 
@@ -83,7 +84,8 @@ footer {
 }
 
 @media (prefers-color-scheme: dark) {
-  html, body {
+  html,
+  body {
     .grey.darken-4;
     .white-text;
   }
@@ -119,3 +121,48 @@ footer {
     .grey.darken-3;
   }
 }
+
+.mobileOnly {
+  display: none;
+}
+
+.dekstopOnly {
+  display: block;
+}
+
+@media (max-width: 768px) {
+  .mobileOnly {
+    display: block;
+  }
+  .dekstopOnly {
+    display: none;
+  }
+}
+
+main {
+  background: #c78a73 !important;
+  margin: 25px;
+}
+
+body {
+  background-color: #795548 !important;
+}
+
+nav .nav-title {
+  margin: 0px 28px;
+}
+
+nav.nav-extended {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+    url("./../img/header.jpg");
+  background-position: center;
+}
+
+footer .switch label {
+  color: #4caf50 !important;
+}
+
+footer .switch label input[type="checkbox"]:checked + .lever,
+footer .switch label input[type="checkbox"]:checked + .lever:after {
+  background: #4caf50 !important;
+}
diff --git a/src/html/index.html b/src/html/index.html
@@ -1,61 +1,76 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
-    <title><%= require("./../../package").description %></title>
+    <title>
+        <%= require("./../../package").description %>
+    </title>
     <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 </head>
+
 <body>
-<header>
-    <nav class="nav-extended brown">
-        <div class="nav-content">
-            <span class="nav-title"><%= require("./../../package").description %></span>
-        </div>
-    </nav>
-</header>
-<main>
-    <span>Select&nbsp;</span>
-    <label class="btn green"><input accept=".zip" id="selectInputFileButton" title="Select zip file" type="file">Zip
-        file</label>
-    <label>&nbsp;</label>
-    <label class="btn green disabled"><input id="selectInputFolderButton" title="Select folder" type="file"
-                                             webkitdirectory>Folder</label>
-    <span>&nbsp;or drag'n'drop</span>
-</main>
-<footer class="page-footer brown">
-    <div class="switch">
-        <label>
-            <input id="experimentalSwitch" type="checkbox">
-            <span class="lever"></span>
-            Experimental conversions
-        </label>
-    </div>
-    <div class="footer-copyright">
-        <div class="container">
-            <div class="row">
-                <div class="col l6">
-                    <div>Works directly in your browser - no upload required and offline usage</div>
-                    <div>More infos in the <a class="green-text"
-                                              href="https://github.com/ModifiedCommand/ConvertJavaTextureToBedrock/blob/master/README.md"
-                                              target="_blank">Readme</a></div>
+    <header>
+        <div class="row text-center">
+            <nav class="nav-extended brown">
+                <div class="nav-content">
+                    <span class="nav-title">
+                        <span class="dekstopOnly">
+                            <%= require("./../../package").description %>
+                        </span>
+                    <span class="mobileOnly">
+                            MCJava to MCBedrock
+                        </span>
+                    </span>
                 </div>
-                <div class="col l6">
-                    <div>
-                        NOT OFFICIAL MINECRAFT PRODUCT. NOT APPROVED BY OR ASSOCIATED WITH MOJANG
+            </nav>
+        </div>
+    </header>
+    <main>
+        <span>Select&nbsp;</span>
+        <label class="btn green"><input accept=".zip" id="selectInputFileButton" title="Select zip file" type="file">Zip
+            file</label>
+        <label>&nbsp;</label>
+        <label class="btn green"><input id="selectInputFolderButton" title="Select folder" type="file"
+                webkitdirectory>Folder</label>
+        <span>&nbsp;or drag'n'drop</span>
+    </main>
+    <footer class="page-footer brown">
+        <div class="footer-copyright">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-lg-4">
+                        <div class="switch">
+                            <label>
+                                <input id="experimentalSwitch" type="checkbox">
+                                <span class="lever"></span>
+                                Experimental conversions
+                            </label>
+                        </div>
+                        <br>
                     </div>
-                    <div>&nbsp;</div>
-                    <div>
-                        Version: <%= require("./../../package").version %>
+                    <div class="col-lg-4">
+                        <div>Works directly in your browser - no upload required and offline usage. For more infomation, please read the <a class="green-text" href="https://github.com/ModifiedCommand/ConvertJavaTextureToBedrock/blob/master/README.md" target="_blank">Readme</a></div>
+                        <br>
                     </div>
-                    <div>
-                        <a class="green-text" href="https://github.com/ModifiedCommand/ConvertJavaTextureToBedrock"
-                           target="_blank">Source</a>
+                    <div class="col-lg-4">
+                        <div>
+                            NOT OFFICIAL MINECRAFT PRODUCT. NOT APPROVED BY OR ASSOCIATED WITH MOJANG
+                        </div>
+                        <div>&nbsp;</div>
+                        <div>
+                            Version:
+                            <%= require("./../../package").version %>
+                                <a class="green-text" href="https://github.com/ModifiedCommand/ConvertJavaTextureToBedrock" target="_blank">Source</a>
+                        </div>
+                        <br>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-</footer>
-<div class="toast" id="toastMessage"></div>
+    </footer>
+    <div class="toast" id="toastMessage"></div>
 </body>
-</html>
+
+</html>
diff --git a/src/img/header.jpg b/src/img/header.jpg
diff --git a/src/js/images.js b/src/js/images.js
@@ -0,0 +1 @@
+import headerImage from './../img/header.jpg';
diff --git a/src/js/index.mjs b/src/js/index.mjs
@@ -3,6 +3,7 @@ import OfflinePluginRuntime from "offline-plugin/runtime";
 import swal from "sweetalert";
 import Worker from "./worker.js";
 import "./../css/style.less";
+import Images from "./images.js";
 
 document.addEventListener("DOMContentLoaded", () => {
     const toastMessage = document.getElementById("toastMessage");

diff --git a/webpack.config.js b/webpack.config.js
@@ -30,7 +30,13 @@ module.exports = {
                 options: {
                     name: "[name].[contenthash].js"
                 }
-            }
+            }, {
+                test: /\.(jpe?g|png|gif|svg)$/i,
+                loader: 'file-loader',
+                options: {
+                    name: '[name].[ext]'
+                }
+            },
         ]
     },
     optimization: {