Merge pull request #39 from Skayo/gh-pages

Closed #38
devBanner · Jul 8, 2018 · cb085a1 · cb085a1
2 parents 5f8000a + 992b177
commit cb085a1
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -50,6 +50,19 @@
 						<label for="subtext">Subtext :</label>
 						<input type="text" class="form-control clearable" name="subtext" id="subtext" placeholder="Enter your own subtext..." autocomplete="off" required>
 					</div>
+					<div class="form-row align-items-center mb-3">
+						<div class="col-sm-2 col-xs-3">
+							<label for="width">Width :</label>
+						</div>
+
+						<div class="col">
+							<input type="range" value="800" min="128" max="2048" class="form-control" name="width" id="width" required>
+						</div>
+
+						<div class="col-lg-2 col-md-2 col-sm-2 col-2 text-right">
+							<span id="widthText">800px</span>
+						</div>
+					</div>
 
 					<a id="downloadBtn" class="btn button-red float-right hidden-link disabled" download="banner.png" href="res/images/examplebanner.png">
 						<svg style="vertical-align: sub;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
@@ -69,7 +82,7 @@
 				<div id="result">
 					<h2 class="text-center">Your Generated Banner</h2>
 					<div id="banner-container" class="animated zoomIn">
-						<img class="img-fluid rounded" id="banner" src="res/images/examplebanner.png">
+						<img width="800" height="192" class="img-fluid rounded" id="banner" src="res/images/examplebanner.png">
 						<div class="bannerOverlay errorOverlay rounded">
 							<p>
 								Couldn't generate banner.

diff --git a/res/css/stylesheet.css b/res/css/stylesheet.css
@@ -224,4 +224,4 @@ a.cc-btn.cc-dismiss:hover {
 	display: none;
 	width:   0;
 	height:  0;
-}
+}
diff --git a/res/js/script.js b/res/js/script.js
@@ -3,6 +3,8 @@ var generatorForm = $('#generator-form');
 var downloadBtn = $('#downloadBtn');
 var usernameInput = $('#username');
 var subtextInput = $('#subtext');
+var widthInput = $('#width');
+var widthText = $('#widthText');
 
 // Banner Elements
 var banner = $('#banner');
@@ -70,6 +72,10 @@ banner.on('load', function () {
 	spinnerOverlay.fadeOut();
 });
 
+widthInput.on('input change', function () {
+	widthText.text(this.value + 'px');
+});
+
 $(document).ready(function () {
 	if ($.cookie('dB_username')) {
 		// If cookie exists set value of username-input to its value
@@ -93,4 +99,4 @@ $(document).on('input', '.clearable', function () {
 }).on('touchstart click', '.onX', function (ev) {
 	ev.preventDefault();
 	$(this).removeClass('x onX').val('').change();
-});
+});