Skip to content

Commit 5caac87

Browse files
TGRHavocTGRHavoc
committed
refactor: update style of webapp
Bootstrap 4 was released so, I thought I'd give it a try. With this, I've had to update the style of the interface. The interface is now fully dark. This means the navigation elements (mainly the sidebar and navbar) is now dark. Labels have changed... Well, bootstrap have renamed them to "badges" so, I've been forced to call them the same. I've re-done the sidebar so, it no longer uses lists. It's just plain 'ol links. Alerts are now just a solid color instead of a gradient.. Ew, who likes gradients anyways?
1 parent d40bbf9 commit 5caac87

16 files changed

+9411
-5593
lines changed

‎index.php

+53-42
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,13 @@
7070
?>
7171

7272
<script src="js/jquery-3.2.1.min.js"></script>
73+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
74+
75+
<script src="js/bootstrap.bundle.min.js"></script>
7376
<script src="js/bootstrap.min.js"></script>
77+
7478
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
75-
79+
7680
<script>
7781

7882
///////////////////////////////////////////////////////////////////////////
@@ -143,6 +147,7 @@
143147

144148
</head>
145149
<body>
150+
146151
<nav class="navbar navbar-default-invert navbar-static-top" style="margin: 0;">
147152
<!-- At some point, I'll add more stuff here. For the time being, it'll just be the site logo -->
148153
<div class="container-fluid">
@@ -151,66 +156,72 @@
151156
<!-- You can change this shit -->
152157
<a href="https://github.com/TGRHavoc/">
153158
<img src="https://avatars1.githubusercontent.com/u/1770893?s=460&v=4" style="max-height: 30px" >
159+
Live Map
154160
</a>
155161
</div>
162+
156163
</div>
157164
</div>
158165
</nav>
159166

160-
<div id="wrapper" class="container">
161-
<div id="map-holder" style="position: absolute">
162-
<div id="map-canvas" style="position: relative; overflow: hidden; background-color: rgb(15, 168, 210);"></div>
163-
</div>
164-
165-
<div id="side-bar" class="sidebar-nav">
166-
<div class="well" style="padding: 8px 0;">
167-
<ul class="nav nav-list">
168-
<li class="nav-header">Controls</li>
167+
<div id="wrapper" class="container-fluid">
168+
<div class="row">
169+
<div id="sidebar" class="col-2 float-left width show">
170+
<div class="list-group border-0 card text-center text-md-left" style="padding: 8px 0;">
169171

170-
<li>
171-
<a id="refreshBlips" href="#">Refresh Blips</a>
172-
</li>
172+
<a class="nav-header">Controls</a>
173173

174-
<li>
175-
<a id="showBlips" href="#">Show Blips <span id="blips_enabled" class="label label-success pull-right">on</span></a>
176-
</li>
174+
<a class="list-group-item d-inline-block collapsed" id="refreshBlips" href="#">
175+
<span class="d-none d-md-inline">Refresh Blips</span>
176+
</a>
177177

178-
<!--
179-
<li>
180-
<a id="toggleLive" href="#">Live update <span id="live_enabled" class="label label-danger pull-right">off</span></a>
181-
</li>
182-
-->
183-
<li>
184-
<a id="reconnect" href="#">Connect <span id="connection" class="label label-danger pull-right">disconnected</span></a>
185-
</li>
178+
<a id="showBlips" href="#" class="list-group-item d-inline-block collapsed">
179+
<span class="d-none d-md-inline">Show Blips</span>
180+
<span id="blips_enabled" class="badge badge-pill badge-success pull-right">on</span>
181+
</a>
186182

187-
<li id="socket_error" class="label label-danger"></li>
183+
<!--
184+
<li>
185+
<a id="toggleLive" href="#">Live update <span id="live_enabled" class="badge badge-danger pull-right">off</span></a>
186+
</li>
187+
-->
188+
<a id="reconnect" href="#" class="list-group-item d-inline-block collapsed">
189+
<span class="d-none d-md-inline">Connect</span>
190+
<span id="connection" class="badge badge-pill badge-danger pull-right">disconnected</span>
191+
</a>
188192

189-
<li style="height: 50px;">
190-
<a>
191-
Track Player
192-
<select id="playerSelect" class="input-large form-control pull-right" style="width: 65%">
193-
<option></option>
194-
</select>
195-
</a>
196-
</li>
193+
<a class="list-group-item d-inline-block collapsed">
194+
<span class="d-none d-md-inline">Track Player</span>
197195

198-
</ul>
196+
<select id="playerSelect" class="input-large form-control pull-right">
197+
<option></option>
198+
</select>
199+
</a>
200+
</div>
199201

200-
<ul class="nav nav-list" style="margin-top: 10px;">
201-
<li class="nav-header">Information</li>
202+
<div class="list-group border-0 card text-center text-md-left" >
203+
<a class="nav-header">Information</a>
202204

203-
<li><a>Blips loaded <span id="blip_count" class="label label-info pull-right">0</span></a></li>
205+
<a class="list-group-item d-inline-block collapsed">Blips loaded
206+
<span id="blip_count" class="badge badge-pill badge-info pull-right">0</span>
207+
</a>
204208

205-
<li><a>Online players <span id="player_count" class="label label-info pull-right">0</span></a></li>
206-
</ul>
207-
</div>
209+
<a class="list-group-item d-inline-block collapsed">Online players
210+
<span id="player_count" class="badge badge-pill badge-info pull-right">0</span>
211+
</a>
212+
</div>
208213

209-
<p style="color: black; text-align: center;">This was originaly created by <a href="https://github.com/TGRHavoc">Havoc</a></p>
214+
<div class="list-group border-0 card text-center text-md-left" style="margin-top: 10px;">
215+
<p style="text-align: center;">This was originaly created by <a href="https://github.com/TGRHavoc">Havoc</a></p>
210216

211-
<div id="alert-holder" class="position: absolute; width: 80%; z-index: 1">
217+
<div id="alert-holder" class="list-group-item d-inline-block collapsed" style="white-space: normal; border: none;">
218+
</div>
219+
</div>
212220
</div>
213221

222+
<main id="map-holder" class="col-10 main" >
223+
<div id="map-canvas" style="position: relative; overflow: hidden; background-color: rgb(15, 168, 210);"></div>
224+
</main>
214225
</div>
215226
</div>
216227

‎js/bootstrap.bundle.min.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/bootstrap.min.js

+5-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/src/alerter.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function createAlert(type, title, message, fadeOut){
7474
// Create the alert
7575
// Set the type
7676
var id = makeid(5);
77-
var html = "<div id=\""+id+"\" class=\"alert alert-"+type+" alert-dismissible fade in\" role=\"alert\">";
77+
var html = "<div id=\""+id+"\" class=\"alert alert-"+type+" alert-dismissible fade show\" role=\"alert\">";
7878

7979
//Add the button
8080
html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>";

‎js/src/controls.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function toggleBlips(){
2222

2323
for(var spriteId in _blips){
2424
var blipArray = _blips[spriteId];
25-
25+
2626
for(var i in blipArray){
2727
var blip = blipArray[i];
2828

@@ -66,15 +66,15 @@ $(document).ready(function(){
6666
//webSocket.send("getBlips");
6767
toggleBlips();
6868

69-
$("#blips_enabled").removeClass("label-success").removeClass("label-danger")
70-
.addClass( _showBlips ? "label-success" : "label-danger")
69+
$("#blips_enabled").removeClass("badge-success").removeClass("badge-danger")
70+
.addClass( _showBlips ? "badge-success" : "badge-danger")
7171
.text(_showBlips ? "on" : "off");
7272
});
7373

7474
$("#reconnect").click(function(e){
7575
e.preventDefault();
7676

77-
$("#connection").removeClass("label-success").removeClass("label-danger").addClass("label-warning").text("reconnecting");
77+
$("#connection").removeClass("badge-success").removeClass("badge-danger").addClass("badge-warning").text("reconnecting");
7878

7979
if(webSocket != undefined || webSocket != null){
8080
webSocket.close();

‎js/src/socket.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function onOpen(e) {
4949

5050
$("#connection").removeClass("label-danger")
5151
.removeClass("label-warning")
52-
.addClass("label-success").text("connected");
52+
.addClass("badge-success").text("connected");
5353
$("#socket_error").text("");
5454
}
5555

@@ -144,9 +144,9 @@ function onError(e) {
144144
}
145145

146146
function onClose(e) {
147-
$("#connection").removeClass("label-success")
148-
.removeClass("label-warning")
149-
.addClass("label-danger").text("disconnected");
147+
$("#connection").removeClass("badge-success")
148+
.removeClass("badge-warning")
149+
.addClass("badge-danger").text("disconnected");
150150

151151
_isConnected = false;
152152
}

‎style/bootstrap-theme.css.map

-1
This file was deleted.

‎style/bootstrap-theme.min.css

-5
This file was deleted.

‎style/bootstrap.css.map

-1
This file was deleted.

‎style/bootstrap.min.css

-5
This file was deleted.

0 commit comments

Comments
 (0)