NanoUI: Goon Edition + 512 support (I broke the fucking minifier :D:D:D!)

nano/Gulpfile.js

@@ -30,6 +30,8 @@ const output = {
 /* Dependencies */
 var bower         = require("main-bower-files");
 var child_process = require("child_process");
+var fs            = require("fs");
+var path          = require("path");
 var del           = require("del");
 var gulp          = require("gulp");
 var merge         = require("merge-stream");
@@ -50,7 +52,7 @@ const glob = function (path) {
 	return `${path}/*`;
 };
 
-var minify = util.env["min"];
+var minify = ((process.env.NODE_ENV || 'development').trim().toLowerCase() === 'production');
 
 /*------Task Section------*/
 
@@ -58,7 +60,9 @@ var minify = util.env["min"];
  * Type: Default/Main
  * Just runs the rest of the compilation tasks.
  */
-gulp.task("default", ["fonts", "scripts", "styles"]);
+gulp.task("default", ["fonts", "scripts", "styles"], function () {
+	console.log("Finished...", (minify ? "With minification" : ""))
+});
 
 /* Task: Clean
  * Type: Dependency. 
@@ -91,12 +95,41 @@ gulp.task("watch", function () {
  * Run whenever a file is changed. Recompiles and pushes all changes directly to the local BYOND client cache.
  */
 gulp.task("reload", ["default"], function () {
-	child_process.exec("reload.bat", function (err, stdout, stderr) {
-		if(err)
-			return console.log(err);
+	child_process.exec("reload.bat", function (err, stdout) {
+		if (err)
+			throw err;
+
+		var byond_cache = path.join(stdout.trim(), "BYOND", "cache");
+		var files = fs.readdirSync(byond_cache);
+		for (let file of files) {
+			let filepath = path.join(byond_cache, file);
+			let stats = fs.statSync(filepath)
+			if (file.startsWith("tmp") && stats.isDirectory()) {
+				var tmpFiles = fs.readdirSync(filepath);
+				if (tmpFiles.includes(output.scripts.main)) {
+					setTimeout(function () {transfer_files(filepath)}, 500);
+				}
+			}
+		}
 	});
 });
 
+function transfer_files(target) {
+	let transfer = [input.images, input.layouts, input.templates, output._dir];
+	for (let trf of transfer) {
+		let files = fs.readdirSync(trf)
+		for (let file of files) {
+			let fileData = fs.statSync(path.join(trf, file))
+			if (fileData.isFile())
+				transfer_file(path.join(trf, file), path.join(target, file))
+		}
+	}
+}
+
+function transfer_file(input, target) {
+	fs.createReadStream(input).pipe(fs.createWriteStream(target))
+}
+
 /*---Buildtasks---*/
 
 /* Task: Fonts

nano/README.md

@@ -101,5 +101,5 @@ of the `Gulpfile.js` and `Gulpfile.coffee` files to perform compilation tasks.
 
 In order to build an un-minified version of NanoUI, you may simply run `gulp` in the
 `nanoui` directory. However, this should only be used while testing, and you should run
-the command `gulp --min` before commiting changes, in order to produce minified
+the command `export NODE_ENV=production; gulp` before commiting changes, in order to produce minified
 JavaScript.

nano/layouts/layout_default.tmpl

@@ -1,37 +1,49 @@
+<div id='uiCornerBR' class='fancy'>&nbsp;</div>
 <div id='uiTitleWrapper'>
+    <div id='uiCornerTL' class='fancy'>&nbsp;</div>
+    <div id='uiCornerTR' class='fancy'>&nbsp;</div>
     <i class="statusicon fa fa-eye fa-2x" unselectable="on"></i>
     <div id='uiTitleText' unselectable="on">{{:config.title}}</div>
     <div id='uiTitleFluff' unselectable="on"></div>
     <i class='minimize fancy fa fa-minus fa-2x' unselectable='on'></i>
-    &nbsp;&nbsp;<i class='close fancy fa fa-close fa-2x' unselectable='on'></i>
+    <i class='close fancy fa fa-close fa-2x' unselectable='on'></i>
 </div>
-<div id='uiMapWrapper' class="hidden" unselectable="on">
-    <div id='uiMapHeader' unselectable="on">
-        {{:helper.link('Hide Map', 'close', {'showMap' : 0})}}
-        <div style="float: right; width: 240px;">
-            <span style="float: left;">Zoom Level:&nbsp;</span>
-            <div unselectable="on" class="link zoomLink" data-zoom-level="4">x1.0</div>
-            <div unselectable="on" class="link zoomLink" data-zoom-level="6">x1.5</div>
-            <div unselectable="on" class="link zoomLink" data-zoom-level="8">x2.0</div>
-            <div unselectable="on" class="link zoomLink" data-zoom-level="12">x2.5</div>
-        </div>
-        <!-- Add a template with the key "mapHeader" to have it rendered here -->
-    </div>
-    <div id='uiMapContainer' unselectable="on">
-        <div id='uiMap' unselectable="on">
-            <img id="uiMapImage" src="{{:config.map}}_nanomap_z{{:config.mapZLevel}}.png" width="256" height="256" unselectable="on" />
-            <div id='uiMapContent' unselectable="on">
-                <!-- Add a template with the key "mapContent" to have it rendered here (on the map) -->
-                <!-- Having a "mapContent" template enables the map functionality -->
+<div class='fancy resizeArea top'    rx='0'  ry='-1'></div>
+<div class='fancy resizeArea tr'     rx='1'  ry='-1'></div>
+<div class='fancy resizeArea right'  rx='1'  ry='0'></div>
+<div class='fancy resizeArea br'     rx='1'  ry='1'></div>
+<div class='fancy resizeArea bottom' rx='0'  ry='1'></div>
+<div class='fancy resizeArea bl'     rx='-1' ry='1'></div>
+<div class='fancy resizeArea left'   rx='-1' ry='0'></div>
+<div class='fancy resizeArea tl'     rx='-1' ry='-1'></div>
+<div id='cornerWrapper'>
+    <div id='uiMapWrapper' class="hidden" unselectable="on">
+        <div id='uiMapHeader' unselectable="on">
+            {{:helper.link('Hide Map', 'close', {'showMap' : 0})}}
+            <div style="float: right; width: 240px;">
+                <span style="float: left;">Zoom Level:&nbsp;</span>
+                <div unselectable="on" class="link zoomLink" data-zoom-level="4">x1.0</div>
+                <div unselectable="on" class="link zoomLink" data-zoom-level="6">x1.5</div>
+                <div unselectable="on" class="link zoomLink" data-zoom-level="8">x2.0</div>
+                <div unselectable="on" class="link zoomLink" data-zoom-level="12">x2.5</div>
             </div>
+            <!-- Add a template with the key "mapHeader" to have it rendered here -->
+        </div>
+        <div id='uiMapContainer' unselectable="on">
+            <div id='uiMap' unselectable="on">
+                <img id="uiMapImage" src="{{:config.map}}_nanomap_z{{:config.mapZLevel}}.png" width="256" height="256" unselectable="on" />
+                <div id='uiMapContent' unselectable="on">
+                    <!-- Add a template with the key "mapContent" to have it rendered here (on the map) -->
+                    <!-- Having a "mapContent" template enables the map functionality -->
+                </div>
+            </div>
+            <div id="uiMapTooltip"></div>
+        </div>
+        <div id='uiMapFooter' unselectable="on">
+            <!-- Add a template with the key "mapFooter" to have it rendered here -->
         </div>
-        <div id="uiMapTooltip"></div>
     </div>
-    <div id='uiMapFooter' unselectable="on">
-        <!-- Add a template with the key "mapFooter" to have it rendered here -->
+    <div id='uiContent' unselectable="on">
+    	<div id='uiLoadingNotice'>Initiating...</div>
     </div>
-</div>
-<div id='uiContent' unselectable="on">
-	<div id='uiLoadingNotice'>Initiating...</div>
-</div>
-<div id='resize' class='resize fancy' unselectable='on'></div>
+</div>

nano/layouts/layout_program.tmpl

@@ -1,75 +1,85 @@
 <div id='uiTitleWrapper'>
+    <div id='uiCornerTL' class='fancy'>&nbsp;</div>
     <i class="statusicon fa fa-eye fa-2x" unselectable="on"></i>
     <div id='uiTitleText' unselectable="on">{{:config.title}}</div>
     <div id='uiTitleFluff' unselectable="on"></div>
     <i class='minimize fancy fa fa-minus fa-2x' unselectable='on'></i>
-    &nbsp;&nbsp;<i class='close fancy fa fa-close fa-2x' unselectable='on'></i>
+    <i class='close fancy fa fa-close fa-2x' unselectable='on'></i>
+    <div id='uiCornerTR' class='fancy'>&nbsp;</div>
 </div>
 
 <div class="floatLeft">
-	<div class='item'>
-		<table><tr>
-		{{if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{:data.PC_batteryicon}}'>
-		{{/if}}
-		{{if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{:data.PC_batterypercent}}</b>
-		{{/if}}
-		{{if data.PC_ntneticon}}
-			<td><img src='{{:data.PC_ntneticon}}'>
-		{{/if}}
-			{{if data.PC_apclinkicon}}
-			<td><img src='{{:data.PC_apclinkicon}}'>
-		{{/if}}
-		{{if data.PC_stationtime}}
-			<td><b>{{:data.PC_stationtime}}<b>
-		{{/if}}
-		{{for data.PC_programheaders}}
-			<td><img src='{{:value.icon}}'>
-		{{/for}}
-		</table>
-	</div>
+    <div class='item'>
+        <table><tr>
+        {{if data.PC_batteryicon && data.PC_showbatteryicon}}
+            <td><img src='{{:data.PC_batteryicon}}'>
+        {{/if}}
+        {{if data.PC_batterypercent && data.PC_showbatteryicon}}
+            <td><b>{{:data.PC_batterypercent}}</b>
+        {{/if}}
+        {{if data.PC_ntneticon}}
+            <td><img src='{{:data.PC_ntneticon}}'>
+        {{/if}}
+            {{if data.PC_apclinkicon}}
+            <td><img src='{{:data.PC_apclinkicon}}'>
+        {{/if}}
+        {{if data.PC_stationtime}}
+            <td><b>{{:data.PC_stationtime}}<b>
+        {{/if}}
+        {{for data.PC_programheaders}}
+            <td><img src='{{:value.icon}}'>
+        {{/for}}
+        </table>
+    </div>
 </div>
 <div class="floatRight">
-	<div class='item'>
-		<table><tr>
-			<td>{{:helper.link('Shutdown', 'power-off', {'action' : 'PC_shutdown'})}}
-			{{if data.PC_showexitprogram}}
-				<td>{{:helper.link('EXIT PROGRAM', 'times', {'action' : 'PC_exit'})}}
-					<td>{{:helper.link('Minimize Program', 'minus', {'action' : 'PC_minimize'})}}
-			{{/if}}
-		</table>
-	</div>
-</div>
-
-<div id='uiMapWrapper' class="hidden" unselectable="on">
-    <div id='uiMapHeader' unselectable="on">
-        {{:helper.link('Hide Map', 'close', {'showMap' : 0})}}
-        <div style="float: right; width: 240px;">
-            <span style="float: left;">Zoom Level:&nbsp;</span>
-            <div unselectable="on" class="link zoomLink" data-zoom-level="4">x1.0</div>
-            <div unselectable="on" class="link zoomLink" data-zoom-level="6">x1.5</div>
-            <div unselectable="on" class="link zoomLink" data-zoom-level="8">x2.0</div>
-            <div unselectable="on" class="link zoomLink" data-zoom-level="12">x2.5</div>
-        </div>
-        <!-- Add a template with the key "mapHeader" to have it rendered here -->
+    <div class='item'>
+        <table><tr>
+            <td>{{:helper.link('Shutdown', 'power-off', {'action' : 'PC_shutdown'})}}
+            {{if data.PC_showexitprogram}}
+                <td>{{:helper.link('EXIT PROGRAM', 'times', {'action' : 'PC_exit'})}}
+                    <td>{{:helper.link('Minimize Program', 'minus', {'action' : 'PC_minimize'})}}
+            {{/if}}
+        </table>
     </div>
-    <div id='uiMapContainer' unselectable="on">
-        <div id='uiMap' unselectable="on">
-            <img id="uiMapImage" src="{{:config.map}}_nanomap_z{{:config.mapZLevel}}.png" width="256" height="256" unselectable="on" />
-            <div id='uiMapContent' unselectable="on">
-                <!-- Add a template with the key "mapContent" to have it rendered here (on the map) -->
-                <!-- Having a "mapContent" template enables the map functionality -->
+</div>
+<div class='fancy resizeArea top'    rx='0'  ry='-1'></div>
+<div class='fancy resizeArea tr'     rx='1'  ry='-1'></div>
+<div class='fancy resizeArea right'  rx='1'  ry='0'></div>
+<div class='fancy resizeArea br'     rx='1'  ry='1'></div>
+<div class='fancy resizeArea bottom' rx='0'  ry='1'></div>
+<div class='fancy resizeArea bl'     rx='-1' ry='1'></div>
+<div class='fancy resizeArea left'   rx='-1' ry='0'></div>
+<div class='fancy resizeArea tl'     rx='-1' ry='-1'></div>
+<div id='cornerWrapper'>
+    <div id='uiMapWrapper' class="hidden" unselectable="on">
+        <div id='uiMapHeader' unselectable="on">
+            {{:helper.link('Hide Map', 'close', {'showMap' : 0})}}
+            <div style="float: right; width: 240px;">
+                <span style="float: left;">Zoom Level:&nbsp;</span>
+                <div unselectable="on" class="link zoomLink" data-zoom-level="4">x1.0</div>
+                <div unselectable="on" class="link zoomLink" data-zoom-level="6">x1.5</div>
+                <div unselectable="on" class="link zoomLink" data-zoom-level="8">x2.0</div>
+                <div unselectable="on" class="link zoomLink" data-zoom-level="12">x2.5</div>
             </div>
+            <!-- Add a template with the key "mapHeader" to have it rendered here -->
+        </div>
+        <div id='uiMapContainer' unselectable="on">
+            <div id='uiMap' unselectable="on">
+                <img id="uiMapImage" src="{{:config.map}}_nanomap_z{{:config.mapZLevel}}.png" width="256" height="256" unselectable="on" />
+                <div id='uiMapContent' unselectable="on">
+                    <!-- Add a template with the key "mapContent" to have it rendered here (on the map) -->
+                    <!-- Having a "mapContent" template enables the map functionality -->
+                </div>
+            </div>
+            <div id="uiMapTooltip"></div>
+        </div>
+        <div id='uiMapFooter' unselectable="on">
+            <!-- Add a template with the key "mapFooter" to have it rendered here -->
         </div>
-        <div id="uiMapTooltip"></div>
     </div>
-    <div id='uiMapFooter' unselectable="on">
-        <!-- Add a template with the key "mapFooter" to have it rendered here -->
-    </div>
-</div>
 
-<div class="clearBoth" id='uiContent' unselectable="on">
-	<div id='uiLoadingNotice'>Initiating...</div>
-</div>
-<div id='resize' class='resize fancy' unselectable='on'></div>
+    <div class="clearBoth" id='uiContent' unselectable="on">
+        <div id='uiLoadingNotice'>Initiating...</div>
+    </div>
+</div>

nano/reload.bat

@@ -6,6 +6,4 @@ for /f "tokens=3* delims= " %%a in (
     set documents=%%a
 )
 
-copy assets\* "%documents%\BYOND\cache" /y
-copy templates\* "%documents%\BYOND\cache" /y
-copy layouts\* "%documents%\BYOND\cache" /y
+echo %documents%

nano/scripts/nano/nano_utility.js

@@ -85,9 +85,10 @@ if (typeof doT == 'undefined') {
     reportError('ERROR: Template engine failed to load!');
 }
 
-var reportError = function (str) {
+var reportError = function (str, silent) {
     window.location = "byond://?nano_err=" + encodeURIComponent(str);
-    alert(str);
+    if(!silent)
+        alert(str);
 }
 
 // All scripts are initialised here, this allows control of init order

nano/scripts/nano/nano_window.js

@@ -1,5 +1,9 @@
 var NanoWindow = function () 
 {
+    var offsetX, offsetY;
+    var minWidth = 280;
+    var minHeight = 140;
+
     var setPos = function (x, y) {
         NanoUtility.winset("pos", x + "," + y);
     };
@@ -7,19 +11,68 @@ var NanoWindow = function ()
        NanoUtility.winset("size", w + "," + h);
     };
 
-    var init = function () {
-        if(NanoStateManager.getData().config.user.fancy) {
-            fancyChrome();
-            attachButtons();
-            attachDragAndResize();
-        }
+    var obeyLimits = function () {
+        // Alignment (Thanks Goon (CC BY-NC-SA v3))
+        var prevX = window.screenLeft;
+        var prevY = window.screenTop;
+        //Put the window at top left
+        setPos(0, 0);
+        //Get any offsets still present
+        offsetX = window.screenLeft;
+        offsetY = window.screenTop;
+        // Clamp it to the viewport
+        var clampedX = prevX - offsetX;
+        var clampedY = prevY - offsetY;
+        clampedX = clampedX < offsetX ? 0 : clampedX;
+        clampedY = clampedY < offsetY ? 0 : clampedY;
+        // Put it back
+        setPos(clampedX, clampedY)
+        // Done with alignment
+
+        // Size constraints
+        var width = document.body.offsetWidth;
+        var height = Math.max(document.body.scrollHeight, document.body.offsetHeight,
+            document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+        var newWidth = Math.max(minWidth, width);
+        var newHeight = Math.max(minHeight, height);
+        setSize(newWidth, newHeight);
     };
+
+    var init = function () {
+        /* We want nanoUI windows to obey the limits regardless, 
+        and we're hijacking this library to do so, even if fancy mode is turned off.
+        To be fair, this doesn't stop the user from shrinking them past their intended limit when they're not in fancy mode, 
+        but it's a nice safeguard against shoddily-coded UIs. */
+        setupScroll();
+        obeyLimits();
+
+        if(!NanoStateManager.getData().config.user.fancy) {
+            return
+        }
+
+        fancyChrome();
+        // ... but when fancy mode is turned on, we have to do it again to make sure
+        // that the window offsets are correct for the slightly different window.
+        obeyLimits();
+ 
+        attachButtons();
+        attachDragAndResize();
+    };
+
+    var setupScroll = function() {
+        $("#cornerWrapper").focus();
+    };
+
     var fancyChrome = function() {
         NanoUtility.winset("titlebar", 0);
         NanoUtility.winset("can-resize", 0);
+        NanoUtility.winset("transparent-color", "#FF00E4")
         $('.fancy').show();
-        $('#uiTitleFluff').css("right", "65px");
+        $('#uiTitleFluff').css("right", "72px");
+        $('.statusicon').css("left", "34px");
+        $('#uiTitleText').css("left", "66px");
     };
+
     var attachButtons = function() {
         var close = function() {
             return NanoUtility.close();
@@ -34,82 +87,115 @@ var NanoWindow = function ()
             minimize();
         });
     };
+
     var attachDragAndResize = function() {
-        $(document).on("mousemove", function (event) {
-            drag();
-            resize();
+        /* Drag */
+        $("body").on("mousemove", "#uiTitleWrapper", function (ev) {
+            drag(ev);
         });
-        
-        $(document).on("mouseup", function (event) {
-            if(dragging) {
-                dragging = false;
-                xDrag = null;
-                yDrag = null;
-            }
-            if(resizing) {
-                resizing = false;
-                xResize = null;
-                yResize = null;
-            }
-        });
-        $("#uiTitleWrapper").on("mousedown", function (event) {
+
+        $("body").on("mousedown", "#uiTitleWrapper", function () {
             dragging = true;
+            if ($(this)[0].setCapture) { $(this)[0].setCapture(); }
         });
-        $("#resize").on("mousedown", function (event) {
+
+        $("body").on("mouseup", "#uiTitleWrapper", function () {
+            dragging = false;
+            if ($(this)[0].releaseCapture) { $(this)[0].releaseCapture(); }
+        });
+
+        /* Resize */
+        $("body").on("mousemove", "div.resizeArea", function (ev) {
+            resize.call(this, ev);
+        });
+
+        $("body").on("mousedown", "div.resizeArea", function () {
             resizing = true;
+            if (this.setCapture) { this.setCapture(); }
+        })
+
+        $("body").on("mouseup", "div.resizeArea", function () {
+            resizing = false;
+            if (this.releaseCapture) { this.releaseCapture(); }
         });
     };
-    var dragging, xDrag, yDrag;
-    var drag = function(event) {
-        var x, y;
-        if (event == null) {
-            event = window.event;
+
+    /* Stolen Goon code ftw (CC BY-NC-SA v3.0) */
+    var dragging, lastX, lastY;
+    var drag = function (ev) {
+        ev = ev || window.event;
+        if (lastX === ev.screenX && lastY === ev.screenY) {
+            return
         }
 
-        if (!dragging) {
+        if (lastX === undefined) {
+            lastX = ev.screenX;
+            lastY = ev.clientY;
+        }
+
+        if (dragging) {
+            var dx = (ev.screenX - lastX);
+            var dy = (ev.screenY - lastY);
+            dx += window.screenLeft - offsetX;
+            dy += window.screenTop - offsetY;
+
+            setPos(dx, dy);
+        }
+
+        lastX = ev.screenX;
+        lastY = ev.screenY;
+    }
+
+    var resizing, resizeWorking
+    var resize = function (ev) {
+        if (resizeWorking) {
             return;
         }
 
-        if (xDrag == null) {
-            xDrag = event.screenX;
+        resizeWorking = true;
+        ev = ev || window.event;
+
+        if (lastX === undefined) {
+            lastX = ev.screenX - offsetX;
+            lastY = ev.screenY - offsetY;
         }
 
-        if (yDrag == null) {
-            yDrag = event.screenY;
+        if (resizing) {
+            var width = document.body.offsetWidth;
+            var height = Math.max(document.body.scrollHeight, document.body.offsetHeight,
+                document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+            var rx = Number($(this).attr("rx"));
+            var ry = Number($(this).attr("ry"));
+            
+            var dx = ((ev.screenX-offsetX) - lastX);
+            var dy = ((ev.screenY-offsetY) - lastY);
+            
+            var newX = window.screenLeft - offsetX;
+            var newY = window.screenTop - offsetY;
+            
+            var newW = width + (dx * rx);
+            if(rx == -1){
+                newX += dx;
+            }
+            var newH = height + (dy * ry);
+            if(ry == -1){
+                newY += dy;
+            }
+            
+            newW = Math.max(minWidth, newW);
+            newH = Math.max(minHeight, newH);
+            
+            setPos(newX, newY);
+            setSize(newW, newH);
         }
 
-        x = (event.screenX - xDrag) + (window.screenLeft);
-        y = (event.screenY - yDrag) + (window.screenTop);
+        lastX = ev.screenX - offsetX;
+        lastY = ev.screenY - offsetY;
 
-        setPos(x, y);
-        xDrag = event.screenX;
-        yDrag = event.screenY;
+        resizeWorking = false;
     };
-    var resizing, xResize, yResize;
-    var resize = function() {
-        var x, y;
-        if (event == null) {
-            event = window.event;
-        }
+    /* End stolen Goon code */
 
-        if (!resizing) {
-            return;
-        }
-
-        if (xResize == null) {
-            xResize = event.screenX;
-        }
-
-        if (yResize == null) {
-            yResize = event.screenY;
-        }
-
-        x = Math.max(150, (event.screenX - xResize) + window.innerWidth);
-        y = Math.max(150, (event.screenY - yResize) + window.innerHeight);
-        setSize(x, y);
-        xResize = event.screenX;
-        yResize = event.screenY;
-    };
     return {
         init: function () { //crazy but ensures correct load order (nanoutil - nanotemplate - nanowindow)
             $(document).on('templatesLoaded', function () {

nano/styles/_fancy.less

@@ -0,0 +1,85 @@
+#cornerWrapper {
+    position: absolute;
+    top: 30px;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    padding: 0 8px 0 8px;
+    clear: both;
+    overflow: auto;
+    border: 3px solid #363636;
+    background: data-uri('nanotrasen.svg') no-repeat fixed center/70% 70%,
+        linear-gradient(to bottom,
+        @background-start 0%,
+        @background-end 100%) no-repeat fixed center/100% 100% !important;
+}
+
+#uiContent {
+    padding: 15px;
+    overflow: hidden;
+}
+
+/* Resizing (Stolen from Goon CC-BY-NC-SA) */
+@resize: 5px;
+
+.resizeArea {
+    position: absolute;
+    z-index: 99999;
+}
+.resizeArea.top {
+    top: 0;
+    left: 10px;
+    right: 10px;
+    height: @resize;
+    cursor: n-resize;
+}
+.resizeArea.tr {
+    top: 0;
+    right: 0;
+    height: 10px;
+    width: 10px;
+    cursor: ne-resize;
+}
+.resizeArea.right {
+    top: 10px;
+    right: 0;
+    bottom: 10px;
+    width: @resize;
+    cursor: e-resize;
+}
+.resizeArea.br {
+    bottom: 0;
+    right: 0;
+    height: 10px;
+    width: 10px;
+    cursor: se-resize;
+}
+.resizeArea.bottom {
+    bottom: 0;
+    left: 10px;
+    right: 10px;
+    height: @resize;
+    cursor: s-resize;
+}
+.resizeArea.bl {
+    bottom: 0;
+    left: 0;
+    height: 10px;
+    width: 10px;
+    cursor: sw-resize;
+}
+.resizeArea.left {
+    top: 10px;
+    left: 0;
+    bottom: 10px;
+    width: @resize;
+    cursor: w-resize;
+}
+.resizeArea.tl {
+    top: 0;
+    left: 0;
+    height: 10px;
+    width: 10px;
+    cursor: nw-resize;
+}
+/* End Resizing */

nano/styles/_formatting.less

@@ -169,6 +169,11 @@
 
 .titlebutton() {
     color: #E9C183;
+    // Since we're on some hilariously outdated libraries, the below is an issue
+    // https://github.com/FortAwesome/Font-Awesome/issues/1274
+    // Using the !important directive is necessary to override the FA styles
+    cursor: pointer !important; 
+    z-index: 102; // This is for the corners - makes sure the buttons render on top
     
     &:hover {
         color: lighten(#98b0c3, 10%);
@@ -185,20 +190,4 @@
     position: absolute;
     top: 4px;
     right: 12px;
-}
-
-div.resize {
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    width: 0;
-    height: 0;
-
-    border-style: solid;
-    border-width: 0 0 30px 30px;
-    border-color: transparent transparent #363636 transparent;
-
-    transform: rotate(360deg);
-
-    cursor: nwse-resize;
-}
+}

nano/styles/nanoui.less

@@ -5,6 +5,7 @@
 @import "_color";
 @import "_config";
 @import "_display";
+@import "_fancy";
 @import "_formatting";
 @import "_icon";
 @import "_lists";
@@ -12,16 +13,8 @@
 @import "_native";
 @import "_tooltip";
 
-
-body {
-    background: data-uri('nanotrasen.svg') no-repeat fixed center/70% 70%,
-        linear-gradient(to bottom,
-        @background-start 0%,
-        @background-end 100%) no-repeat fixed center/100% 100%;
-}
-
 //nano scrollbar styling
-html,body {
+html, body {
     scrollbar-face-color:#666666;
     scrollbar-arrow-color:#E9C183;
     scrollbar-track-color:#363636;
@@ -41,6 +34,7 @@ html,body {
     min-width: 100%;   
     background-color: #363636;
     top: 0px;
+    right: 0px;
     overflow: hidden;
     z-index: 100;
     & > div {
@@ -51,6 +45,36 @@ html,body {
     }
 }
 
+.corner() {
+    position: fixed;
+    min-width: 30px;
+    background-color: #FF00E4;
+    z-index: 101;
+    min-height: 30px;
+}
+
+#uiCornerTL {
+    .corner;
+    top: 0px;
+    left: 0px;
+    background: data-uri('tl.gif') no-repeat;
+}
+
+#uiCornerTR {
+    .corner;
+    top: 0px;
+    right: 0px;
+    background: data-uri('tr.gif') no-repeat;
+}
+
+#uiCornerBR {
+    .corner;
+    bottom: 0px;
+    right: 0px;
+    background: data-uri('br.gif') no-repeat;
+}
+
+
 #uiTitleText {
     position: absolute;
     top: 6px;
@@ -134,12 +158,6 @@ html,body {
     clear: both;
 }
 
-#uiContent {
-    clear: both;
-    padding: 8px;
-    margin-top: 30px;
-}
-
 #uiMapTooltip {
     position: absolute;
     right: 10px;
@@ -160,4 +178,4 @@ html,body {
     font-weight: bold;
     padding: 3px 4px 3px 4px;
     margin: 4px 0 4px 0;
-}
+}

nano/templates/pda.tmpl

@@ -6,12 +6,12 @@ Used In File(s): \code\game\objects\items\devices\PDA\PDA.dm
 	<head>
 		<style type="text/css">
 			html {
-				height: 100%; 
-				overflow: auto;
+				height: 100%;
 			}
 
-			body {
-				background: #6F7961;
+			#cornerWrapper {
+				background: #6F7961 !important;
+				border: none;
 			}
 
 			.itemLabelNarrow, .itemLabel, .itemLabelWide, .itemLabelWider, .itemLabelWidest {
@@ -104,10 +104,27 @@ Used In File(s): \code\game\objects\items\devices\PDA\PDA.dm
 			#uiTitleText, #pdaFooter {
 				color: #000000;
 			}
+
+			#uiTitleWrapper {
+				background-color: #8C997B;	
+			}
+			#uiTitleText {
+				left: 30px !important;
+			}
+
+
+			#uiCornerTL, #uiCornerTR,
+			#uiCornerBR, #uiCornerBL {
+				opacity: 0;
+			}
 			
 			.pmon {
 				background: black;
 			}
+
+			.statusicon {
+				display: none;
+			}
 			
 			.itemLabel {
 				color: black;
@@ -122,6 +139,15 @@ Used In File(s): \code\game\objects\items\devices\PDA\PDA.dm
 			}
 		</style>
 	</head>
+{{else}}
+	<head>
+		<style type="text/css">
+			/* These things just don't render correctly at all for us */
+			#uiCornerBR, #uiCornerBL {
+				opacity: 0;
+			}
+		</style>
+	</head>
 {{/if}}
 {{if data.owner}}
 	<div class="item">