UI improvements

author: piernov <piernov@piernov.org> 2016-05-07 13:31:49 +0200
committer: piernov <piernov@piernov.org> 2016-05-07 13:32:27 +0200
commit: 8621eae6aa5fcdba0a60f0a5f1136412c61999ec (patch)
tree: 40923d48a0948c807fa87f118497cf6b60f77cbc
parent: 25556ed4765a897996fba7fb4b0776f043d47cb9 (diff)
download: candybox-8621eae6aa5fcdba0a60f0a5f1136412c61999ec.tar.gz
candybox-8621eae6aa5fcdba0a60f0a5f1136412c61999ec.tar.bz2
candybox-8621eae6aa5fcdba0a60f0a5f1136412c61999ec.tar.xz
candybox-8621eae6aa5fcdba0a60f0a5f1136412c61999ec.zip
3 files changed, 107 insertions, 51 deletions
diff --git a/css/craftmine.css b/css/craftmine.css
index c459baa..fa42bd9 100644
--- a/css/craftmine.css
+++ b/css/craftmine.css
@@ -15,7 +15,57 @@
 }
 .item-icon {
 	display:inline-block;
-	width: 1em;
-	font-size: 3em;
+	font-size: 4em;
 	font-family: "Symbola";
 }
+.list-group-item > .label {
+	float:right;
+}
+#tab2 > ul > li > button {
+	width: 9em;
+	height: 9em;
+}
+.label {
+	font-size: 1.2em;
+}
+.list-group > button {
+	border-radius: 0;
+}
+a {
+	color: #5cb85c;
+}
+/*	color: hotpink;
+}
+.label-success {
+	background-color: hotpink;
+}
+
+.btn-success {
+	background-color: hotpink;
+	border-color: deeppink;
+}
+.btn-success:hover {
+	background-color: pink;
+	border-color: hotpink;
+}
+.btn-success.active.focus, .btn-success.active:focus,
+.btn-success.active:hover, .btn-success.focus:active,
+.btn-success:active:focus, .btn-success:active:hover,
+.btn-success.focus, .btn-success:focus {
+	background-color: deeppink;
+	border-color: magenta;
+}
+.panel-success {
+	border-color: lightpink;
+}
+.panel-success > .panel-heading {
+	background-color: pink;
+	color: deeppink;
+	border-color: lightpink;
+}
+.alert-success {
+	color: deeppink;
+	border-color: lightpink;
+	background-color: pink;
+}
+*/
diff --git a/index.xhtml b/index.xhtml
index 0760aeb..dcfdc69 100644
--- a/index.xhtml
+++ b/index.xhtml
@@ -18,44 +18,46 @@
 </head>
 <body onload="init()">
 <div class="container-fluid">
-<div class="row">
 	<h1>CraftMine</h1>
-</div>
-<div class="row">
-	<div class="col-md-4">
+
+	<div class="col-md-3">
 		<div class="row">
-			<div class="col-md-10">
-				<span id="gold">0</span>
-				<span id="mine">0</span>
-				<p>Miners : <span id="miners">0</span></p>
-				<span id="guild"></span>
-				<ul class="list-inline">
-					<li><button class="btn btn-default" type="button" name="withdraw" onclick="withdrawMine()">Withdraw</button></li>
-					<li><button class="btn btn-default" type="button" name="HireMiner" onclick="hireMiner()">Hire one miner</button></li>
-				</ul>
+			<div class="col-md-12">
+				<div class="panel panel-success">
+					<div class="panel-heading">
+						<h3 class="panel-title">Stats</h3>
+					</div>
+					<div class="panel-body">
+						<ul class="list-group">
+							<li class="list-group-item">Mine<span id="mine" class="label label-success">14</span></li>
+							<li class="list-group-item">Gold<span id="gold" class="label label-success">14</span></li>
+							<li class="list-group-item">Miners<span id="miners" class="label label-success">14</span></li>
+						</ul>
+
+						<div class="list-group">
+							<button class="list-group-item btn" type="button" name="withdraw" onclick="withdrawMine()">Withdraw</button>
+							<button class="list-group-item btn" type="button" name="HireMiner" onclick="hireMiner()">Hire one miner</button>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
-		<div id="error-box" class="row" style="margin-top:1em;display:none">
-			<div class="col-md-10">
-				<div class="alert alert-danger">
-					<ul>
-					</ul>
-				</div>
+		<div id="error-box" class="row" style="display:none">
+			<div class="alert alert-danger">
+				<ul>
+				</ul>
 			</div>
 		</div>
-		<div id="info-box" class="row" style="margin-top:1em;display:none">
-			<div class="col-md-10">
-				<div class="alert alert-success">
-					<ul>
-					</ul>
-				</div>
+		<div id="info-box" class="row" style="display:none">
+			<div class="alert alert-success">
+				<ul>
+				</ul>
 			</div>
 		</div>
 
 	</div>
-	<div class="col-md-8">
-		<div class="row">
 
+	<div class="col-md-9">
 		<div id="tabs-panel" class="tabbable">
 		<ul class="nav nav-tabs">
 			<li><a href="#tab1">Build</a></li>
@@ -66,41 +68,45 @@
 		</ul>
 		<div class="tab-content">
 			<div class="tab-pane" id="tab1">
-				<h4>Select a building to build:</h4>
+				<h3>Select a building to build:</h3>
 				<ul class="list-inline">
-					<li><button class="btn btn-default" type="button" onclick="createGuild()">Miner's guild</button></li>
-					<li><button class="btn btn-default" type="button" onclick="buildShop()">Shop</button></li>
-					<li><button class="btn btn-default" type="button" onclick="buildDungeon()">Dungeon</button></li>
+					<li><button class="btn btn-success" type="button" onclick="createGuild()">Miner's guild</button></li>
+					<li><button class="btn btn-success" type="button" onclick="buildShop()">Shop</button></li>
+					<li><button class="btn btn-success" type="button" onclick="buildDungeon()">Dungeon</button></li>
 				</ul>
 			</div>
 			<div class="tab-pane" id="tab2">
-				<h4>There's no shop in this city.</h4>
+				<h3>There's no shop in this city.</h3>
 			</div>
 			<div class="tab-pane" id="tab3">
-				<h4>Your inventory is empty.</h4>
+				<h3>Your inventory is empty.</h3>
 			</div>
 			<div class="tab-pane" id="tab4">
-				<h4>Look at how poor you are! You can't access the dungeon, it is only for the elite.</h4>
+				<h3>Look at how poor you are! You can't access the dungeon, it is only for the elite.</h3>
 			</div>
 			<div class="tab-pane" id="tab5">
-				<h4>Saved games:</h4>
-				<div class="form" id="listsaves">
+				<h3>Saved games:</h3>
+				<form class="form-horizontal">
+				<div id="listsaves">
 				</div>
-				<ul class="list-inline">
-					<li><button class="btn btn-default" type="button" onclick="loadSave()">Load</button></li>
-					<li><button class="btn btn-default" type="button" onclick="saveGame()">Save game</button></li>
-					<li><button class="btn btn-default" type="button" onclick="downGame()">Download current game</button></li>
-					<li><button class="btn btn-default" type="button" onclick="downloadSave()">Download</button></li>
-					<li><input type="file" id="selectedFile" style="display: none;" accept=".save.xml" onchange="uploadSave()" />
-						<button class="btn btn-default" type="button" onclick="document.getElementById('selectedFile').click()">Upload</button></li>
-					<li><button class="btn btn-default" type="button" onclick="deleteSave()">Delete</button></li>
-				</ul>
+				<div class="form-group">
+				<div class="col-sm-offset-2 col-sm-10">
+				<div class="btn-group">
+					<button class="btn btn-success" type="button" onclick="loadSave()">Load</button>
+					<button class="btn btn-success" type="button" onclick="saveGame()">Save game</button>
+					<button class="btn btn-success" type="button" onclick="downGame()">Download current game</button>
+					<button class="btn btn-success" type="button" onclick="downloadSave()">Download</button>
+					<input type="file" id="selectedFile" style="display: none;" accept=".save.xml" onchange="uploadSave()" />
+						<button class="btn btn-success" type="button" onclick="document.getElementById('selectedFile').click()">Upload</button>
+					<button class="btn btn-success" type="button" onclick="deleteSave()">Delete</button>
+				</div>
+				</div>
+				</div>
+				</form>
 			</div>
 		</div>
 		</div>
 	</div>
-	</div>
-</div>
 </div>
 </body>
 </html>
diff --git a/js/gui.js b/js/gui.js
index 89fa0fa..ee29622 100644
--- a/js/gui.js
+++ b/js/gui.js
@@ -15,7 +15,7 @@ function changeTab() {
 function showMessage(type, msg) {
 	var msg_box = document.getElementById(type+"-box");
 	msg_box.style.display = "initial";
-	var msg_list = msg_box.firstElementChild.firstElementChild.firstElementChild;
+	var msg_list = msg_box.firstElementChild.firstElementChild;
 	msg_list.innerHTML = "<li>" + msg + "</li>\n" + msg_list.innerHTML;
 
 	window.setTimeout(hideMessage.bind(null, type), MESSAGE_TIMEOUT);
@@ -23,7 +23,7 @@ function showMessage(type, msg) {
 
 function hideMessage(type) {
 	var msg_box = document.getElementById(type+"-box");
-	var msg_list = msg_box.firstElementChild.firstElementChild.firstElementChild;
+	var msg_list = msg_box.firstElementChild.firstElementChild;
 	var item = msg_list.lastElementChild;
 	msg_list.removeChild(item);
author	piernov <piernov@piernov.org>	2016-05-07 13:31:49 +0200
committer	piernov <piernov@piernov.org>	2016-05-07 13:32:27 +0200
commit	8621eae6aa5fcdba0a60f0a5f1136412c61999ec (patch)
tree	40923d48a0948c807fa87f118497cf6b60f77cbc
parent	25556ed4765a897996fba7fb4b0776f043d47cb9 (diff)
download	candybox-8621eae6aa5fcdba0a60f0a5f1136412c61999ec.tar.gz candybox-8621eae6aa5fcdba0a60f0a5f1136412c61999ec.tar.bz2 candybox-8621eae6aa5fcdba0a60f0a5f1136412c61999ec.tar.xz candybox-8621eae6aa5fcdba0a60f0a5f1136412c61999ec.zip