Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Update styles #15

Merged
merged 1 commit into from

3 participants

@nathanstaines

Update the styles so the status messages are less intrusive during development.

@nathanstaines nathanstaines Update styles
Update styles some more
efa327e
@sokra sokra merged commit 09aa395 into from
@sokra
Owner

Thanks, looks much better :smile:

@nathanstaines

No problem, just glad I could help. Don't forget to push the new version to npm ;)

@sokra
Owner

I tried... npm doesn't like me. There was a weird error telling me there is a self signed cert in the cert chain... huh?

@sokra
Owner

ok is published

@nathanstaines

Yeah I ran into that same issue today myself.

Also, I just realised I applied the wrong amount of padding to the header and error messages, it's only a small thing but one that's bound to irritate me every time I see it.

I could submit another pull request or if you'd prefer you could make the following adjustments in style.css... or simply leave it, it's up to you.

.header {
  ...
  padding: 0 10px;
  ...
}

#errors {
  ...
  padding: 10px;
  ...
}
@sokra sokra referenced this pull request from a commit
@sokra sokra fixes padding #15 304a25a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 27, 2014
  1. @nathanstaines

    Update styles

    nathanstaines authored
    Update styles some more
This page is out of date. Refresh to see the latest.
Showing with 40 additions and 24 deletions.
  1. +7 −7 client/live.js
  2. +33 −17 client/style.css
View
14 client/live.js
@@ -8,13 +8,14 @@ $(function() {
var okness = $("#okness");
var $errors = $("#errors");
var iframe = $("#iframe");
+ var header = $(".header");
var hot = false;
var contentPage = window.location.pathname.substr("/webpack-dev-server".length) + window.location.search;
status.text("Connecting to socket.io server...");
$errors.hide(); iframe.hide();
- body.css({background: "#066"});
+ header.css({borderColor: "#96b5b4"});
io = io.connect();
io.on("hot", function() {
@@ -25,7 +26,7 @@ $(function() {
io.on("invalid", function() {
okness.text("");
status.text("App updated. Recompiling...");
- body.css({background: "#088"});
+ header.css({borderColor: "#96b5b4"});
$errors.hide(); if(!hot) iframe.hide();
});
@@ -45,7 +46,7 @@ $(function() {
status.text("App updated with errors. No reload!");
okness.text("Errors while compiling.");
$errors.text("\n" + errors.join("\n\n\n") + "\n\n");
- body.css({background: ""});
+ header.css({borderColor: "#ebcb8b"});
$errors.show(); iframe.hide();
});
@@ -53,20 +54,19 @@ $(function() {
status.text("");
okness.text("Disconnected.");
$errors.text("\n\n\n Lost connection to webpack-dev-server.\n Please restart the server to reestablish connection...\n\n\n\n");
- body.css({background: ""});
+ header.css({borderColor: "#ebcb8b"});
$errors.show(); iframe.hide();
});
iframe.load(function() {
status.text("App ready.");
- body.css({background: ""});
+ header.css({borderColor: ""});
iframe.show();
});
function reloadApp() {
if(hot) {
status.text("App hot update.");
- body.css({background: ""});
try {
iframe[0].contentWindow.postMessage("webpackHotUpdate", "*");
} catch(e) {
@@ -75,7 +75,7 @@ $(function() {
iframe.show();
} else {
status.text("App updated. Reloading app...");
- body.css({background: "red"});
+ header.css({borderColor: "#96b5b4"});
try {
var old = iframe[0].contentWindow.location + "";
if(old.indexOf("about") == 0) old = null;
View
50 client/style.css
@@ -1,41 +1,57 @@
-body, html {
- margin: 0px;
- padding: 0px;
+*,
+*:before,
+*:after {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+body,
+html {
+ margin: 0;
+ padding: 0;
height: 100%;
- background: darkblue;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header {
width: 100%;
- height: 20px;
+ height: 30px;
+ padding: 0 20px;
+ border-left: 10px solid #a3be8c;
font-size: 12px;
- font-family: monospace;
- color: white;
- font-weight: bold;
- padding: 0px;
+ line-height: 30px;
+ color: #eff1f5;
+ background: #343d46;
overflow: hidden;
}
#iframe {
+ position: absolute;
+ top: 30px;
+ right: 0;
+ bottom: 0;
+ left: 0;
width: 100%;
height: -webkit-calc(100% - 30px);
height: -moz-calc(100% - 30px);
height: -ms-calc(100% - 30px);
height: -o-calc(100% - 30px);
height: calc(100% - 30px);
- border: 0px;
- background: white;
+ border: 0;
}
#errors {
width: 100%;
- background: #A00;
- color: white;
- font-weight: bold;
- font-family: monospace;
+ margin: 0;
+ padding: 20px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.4;
+ color: #eff1f5;
+ background: #bf616a;
}
#okness {
- background: yellow;
- color: black;
+ font-weight: bold;
}
Something went wrong with that request. Please try again.