From 09fb79d3a2613b8e07eacfd0343a549d9fb611fd Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 2 May 2013 09:40:44 -0400 Subject: [PATCH] integrated LESS middleware to static served CSS/less files --- package.json | 3 +- public/css/style.css | 122 +++++++++++++++++++++++++++++ public/css/style.less | 150 ++++++++++++++++++++++++++++++++++++ public/templates/header.tpl | 143 +--------------------------------- src/webserver.js | 1 + 5 files changed, 276 insertions(+), 143 deletions(-) create mode 100644 public/css/style.css create mode 100644 public/css/style.less diff --git a/package.json b/package.json index 645c519fe6..67cc1abef8 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "path": "0.4.9", "crypto": "0.0.3", "passport": "0.1.16", - "passport-local": "0.1.6" + "passport-local": "0.1.6", + "less-middleware": "0.1.11" }, "devDependencies": {}, "optionalDependencies": {}, diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000000..6f23061dd5 --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,122 @@ +@media (min-width: 979px) { + body { + padding-top: 60px; + } +} +#notification_window { + position: absolute; + right: 20px; + top: 80px; + width: 300px; + height: 0px; +} +.toaster-alert { + cursor: pointer; +} +footer.footer { + color: #555; + text-align: center; +} +footer.footer a { + color: #222; +} +#post_window { + width: 100%; + position: absolute; + height: 350px; + left: 0px; + bottom: 0px; + background: white; +} +#post_window input { + width: 100%; + height: 30px; + padding: 5px; +} +#post_window textarea { + width: 100%; + background: #222; + height: 220px; + resize: none; + border-radius: 0; + border: 1px solid #111; + font-size: 16px; + color: #bebebe; + outline: 0; +} +#post_window textarea:focus { + outline: 0; + border: none !important; + box-shadow: none !important; +} +#post_window .post-title-container { + opacity: 0.8; + height: 50px; +} +#post_window .post-content-container { + opacity: 0.8; + background: #000; + width: 100%; + height: 300px; +} +.topic-container { + list-style-type: none; + padding: 0; + margin: 0; + border: 1px solid #eee; + margin-top: 50px; +} +.topic-container a:nth-child(odd) li.topic-row { + background-color: #fdfdfd; +} +.topic-container a:nth-child(even) li.topic-row { + background-color: #fff; +} +.topic-container li.topic-row { + cursor: pointer; + border-bottom: 1px solid #eee; + padding: 10px; +} +.topic-container li:last-child { + border-bottom: 0; +} +.topic-container li.topic-row:hover { + background-color: #eee; +} +.post-container { + list-style-type: none; + padding: 0; + margin: 0; + border: 1px solid #eee; +} +.post-container li:last-child { + border-bottom: 0; +} +.post-container li.post-row { + cursor: pointer; + border-bottom: 1px solid #eee; + padding: 10px; +} +.post-container li.post-row:nth-child(odd) { + background-color: #fdfdfd; +} +.post-container li.post-row:nth-child(even) { + background-color: #fff; +} +.post-container li.post-row:hover { + background-color: #eee; +} +#user_label img { + border: 1px solid #999; + margin-right: 8px; + margin-top: -2px; +} +#user_label span { + font-size: 12px; + font-weight: bold; +} +#reply_title { + font-size: 17px; + padding-top: 14px; + font-weight: 600; +} diff --git a/public/css/style.less b/public/css/style.less new file mode 100644 index 0000000000..a36ece8fd8 --- /dev/null +++ b/public/css/style.less @@ -0,0 +1,150 @@ +@media (min-width: 979px) { + body { + padding-top: 60px; + } +} + +#notification_window { + position: absolute; + right: 20px; + top: 80px; + width: 300px; + height: 0px; +} + +.toaster-alert { + + cursor: pointer; +} + +footer.footer { + color: #555; + text-align: center; + + a { + color: #222; + } +} + +#post_window { + width: 100%; + position: absolute; + height: 350px; + left: 0px; + bottom: 0px; + background: white; + + input { + width: 100%; + height: 30px; + padding: 5px; + } + + textarea { + width: 100%; + background: #222; + height: 220px; + resize: none; + border-radius: 0; + border: 1px solid #111; + font-size: 16px; + color: #bebebe; + outline: 0; + + &:focus { + outline: 0; + border:none !important; + box-shadow:none !important; + } + } + + .post-title-container { + opacity: 0.8; + height: 50px; + } + + .post-content-container { + opacity: 0.8; + background: #000; + width: 100%; + height: 300px; + } +} + +.topic-container { + list-style-type: none; + padding: 0; + margin: 0; + border: 1px solid #eee; + margin-top: 50px; + + a:nth-child(odd) li.topic-row { + background-color:#fdfdfd; + } + + a:nth-child(even) li.topic-row { + background-color:#fff; + } + + li.topic-row { + cursor: pointer; + border-bottom: 1px solid #eee; + padding: 10px; + } + + li:last-child { + border-bottom: 0; + } + + li.topic-row:hover { + background-color: #eee; + } +} + +.post-container { + list-style-type: none; + padding: 0; + margin: 0; + border: 1px solid #eee; + + li:last-child { + border-bottom: 0; + } + + li.post-row { + cursor: pointer; + border-bottom: 1px solid #eee; + padding: 10px; + + &:nth-child(odd) { + background-color:#fdfdfd; + } + + &:nth-child(even) { + background-color:#fff; + } + + &:hover { + background-color: #eee; + } + } +} + +#user_label { + img { + border: 1px solid #999; + margin-right: 8px; + margin-top: -2px; + } + + span { + font-size: 12px; + font-weight: bold; + } +} + +#reply_title { + font-size: 17px; + padding-top: 14px; + font-weight: 600; +} \ No newline at end of file diff --git a/public/templates/header.tpl b/public/templates/header.tpl index 0fbdf2ff3e..7463877f6a 100644 --- a/public/templates/header.tpl +++ b/public/templates/header.tpl @@ -11,148 +11,7 @@ - + diff --git a/src/webserver.js b/src/webserver.js index da96c649c3..ea39bade42 100644 --- a/src/webserver.js +++ b/src/webserver.js @@ -39,6 +39,7 @@ passport.deserializeUser(function(uid, done) { // Middlewares app.use(express.favicon()); // 2 args: string path and object options (i.e. expire time etc) + app.use(require('less-middleware')({ src: path.join(__dirname, '../', '/public') })); app.use(express.static(path.join(__dirname, '../', 'public'))); app.use(express.bodyParser()); // Puts POST vars in request.body app.use(express.cookieParser()); // If you want to parse cookies (res.cookies)