mirrors/Scribe.js
1
0
Fork 1
mirror of https://github.com/mathew-kurian/Scribe.js synced 2025-04-25 14:55:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

Updating interface and fixing webpanel issue

Browse source 
Temporary UI update
This commit is contained in:
Mathew Kurian 2014-12-21 14:40:59 -06:00
parent c51b9d3fc9
commit fc99184b60
18 changed files with 492 additions and 256 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/webPanel.js
View file

@ -24,7 +24,7 @@
c : [1, 2, 3] c : [1, 2, 3]
}); });
app.listen(8080, function () { app.listen(3000, function () {
console.time().log('Server listening at port 8080'); console.time().log('Server listening at port 3000');
}); });
}()); }());

22
lib/logWriter.js
View file

@ -71,14 +71,14 @@
var self = this; var self = this;
fs.readFile(historyPath, function (err, data) { fs.readFile(historyPath, {
"encoding" : "utf-8"
}, function(err, data) {
if (err) { if (err) {
throw err; throw err;
} else { } else {
try { try {
self.history = JSON.parse(data); self.history = JSON.parse(data);
} catch (e) { } catch (e) {
throw e; throw e;
} }
@ -96,6 +96,7 @@
* @param {Function} callback * @param {Function} callback
*/ */
LogWriter.prototype.createDir = function(path, callback) { LogWriter.prototype.createDir = function(path, callback) {
mkdirp(path, function(err) { mkdirp(path, function(err) {
callback(err); callback(err);
}); });
@ -155,7 +156,9 @@
if (err) { if (err) {
callback(err); callback(err);
} else { } else {
fs.writeFile(pathToFile, content, callback); fs.writeFile(pathToFile, content, {
"encoding" : "utf-8"
}, callback);
} }
}); });
}; };
@ -209,18 +212,13 @@
var platformKey = process.platform === 'win32' ? 'USERPROFILE' : 'HOME', var platformKey = process.platform === 'win32' ? 'USERPROFILE' : 'HOME',
platformDivider = process.platform === 'win32' ? '\\' : '/'; platformDivider = process.platform === 'win32' ? '\\' : '/';
var userDir = process.env[platformKey].toLowerCase(); var userDir = process.env[platformKey].toLowerCase();
user = userDir.slice(userDir.lastIndexOf(platformDivider) + 1); user = userDir.slice(userDir.lastIndexOf(platformDivider) + 1);
} catch (e) { } catch (e) {
user = 'user'; //default user = 'user'; //default
} finally { } finally {
return user; return user;
} }
}; };
@ -288,7 +286,11 @@
*/ */
LogWriter.prototype.save = function(log, opt) { LogWriter.prototype.save = function(log, opt) {
try {
delete log.opt; //we save logger options in rootPath/[logger].json delete log.opt; //we save logger options in rootPath/[logger].json
} catch(e){
// ignore
}
var json = JSON.stringify(log); var json = JSON.stringify(log);
@ -315,7 +317,6 @@
throw err; throw err;
} }
}); });
}; };
/** /**
@ -327,7 +328,6 @@
* @param {Object} logger Console2 logger options * @param {Object} logger Console2 logger options
*/ */
LogWriter.prototype.addLogger = function(logger) { LogWriter.prototype.addLogger = function(logger) {
this.saveOpt(logger); this.saveOpt(logger);
}; };

13
lib/webPanel.js
View file

@ -8,7 +8,6 @@
path = require('path'), path = require('path'),
fs = require('fs'); fs = require('fs');
/** /**
* map * map
* *
@ -22,6 +21,7 @@
var map = function(arr, callback) { var map = function(arr, callback) {
var result = arr.map(callback); var result = arr.map(callback);
return result.filter(function(item) { return result.filter(function(item) {
return item !== undefined && item !== null; return item !== undefined && item !== null;
}); });
@ -44,7 +44,7 @@
//Static files //Static files
webPanel.use('/', serveStatic('./static')); webPanel.use('/', serveStatic(path.join(__dirname, '..', 'static')));
//API //API
@ -108,6 +108,7 @@
* @return {Array} logs folder in use * @return {Array} logs folder in use
*/ */
var getLogFolders = function() { var getLogFolders = function() {
return map(consoles, function(elem) { return map(consoles, function(elem) {
return elem.logWriter.rootPath || undefined; return elem.logWriter.rootPath || undefined;
}); });
@ -121,6 +122,7 @@
* @return {LogWriter|false} If false, no logWriter with rootPath set to logFolder * @return {LogWriter|false} If false, no logWriter with rootPath set to logFolder
*/ */
var getLogWriter = function(logFolder) { var getLogWriter = function(logFolder) {
var logWriter; var logWriter;
return consoles.some(function(item) { return consoles.some(function(item) {
@ -182,18 +184,15 @@
} else { } else {
//Find the good dates //Find the good dates
var nb = 0, var nb = 0,
result = [], result = [],
dates = Object.keys(logWriter.history.dates).filter(function(date) { dates = Object.keys(logWriter.history.dates).filter(function(date) {
if (date < from && nb <= length) { if (date < from && nb <= length) {
nb++; nb++;
return date; return date;
} else { } else {
return null; return null;
} }
}); });
dates.forEach(function(date) { dates.forEach(function(date) {
@ -231,19 +230,15 @@
res.status(200); res.status(200);
stream.pipe(res); stream.pipe(res);
} else { } else {
res.status(400).send("Can't read path"); res.status(400).send("Can't read path");
} }
}); });
return webPanel; return webPanel;
}; };
module.exports = initWebPanel; module.exports = initWebPanel;
}()); }());

BIN
static/fonts/fontello.eot Normal file
View file

Binary file not shown.

16
static/fonts/fontello.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
<defs>
<font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="left-open" unicode="&#x3c;" d="m653 682l-296-296 296-297q11-10 11-25t-11-25l-92-93q-11-10-25-10t-25 10l-414 415q-11 10-11 25t11 25l414 414q10 10 25 10t25-10l92-93q11-10 11-25t-11-25z" horiz-adv-x="714.3" />
<glyph glyph-name="right-open" unicode="&#x3e;" d="m618 361l-414-415q-11-10-25-10t-26 10l-92 93q-11 11-11 25t11 25l296 297-296 296q-11 11-11 25t11 25l92 93q11 10 26 10t25-10l414-414q10-11 10-25t-10-25z" horiz-adv-x="714.3" />
<glyph glyph-name="arrows-ccw" unicode="&#x4f;" d="m186 140l116 116 0-292-276 16 88 86q-116 122-114 290t120 288q100 100 240 116l4-102q-100-16-172-88-88-88-90-213t84-217z m332 598l276-16-88-86q116-122 114-290t-120-288q-96-98-240-118l-2 104q98 16 170 88 88 88 90 213t-84 217l-114-116z" horiz-adv-x="820" />
<glyph glyph-name="doc-text" unicode="&#xe800;" d="m819 638q16-16 27-42t11-50v-642q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h500q22 0 49-11t42-27z m-248 136v-210h210q-5 16-12 23l-175 175q-6 7-23 12z m215-853v572h-232q-23 0-38 15t-16 38v233h-429v-858h715z m-572 483q0 7 5 12t13 5h393q8 0 13-5t5-12v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36z m411-125q8 0 13-5t5-13v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36q0 8 5 13t13 5h393z m0-143q8 0 13-5t5-13v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36q0 8 5 13t13 5h393z" horiz-adv-x="857.1" />
<glyph glyph-name="folder-empty" unicode="&#xe801;" d="m857 118v393q0 22-15 38t-38 15h-393q-23 0-38 16t-16 38v36q0 22-15 38t-38 15h-179q-22 0-38-15t-16-38v-536q0-22 16-38t38-16h679q22 0 38 16t15 38z m72 393v-393q0-51-37-88t-88-37h-679q-51 0-88 37t-37 88v536q0 51 37 88t88 37h179q51 0 88-37t37-88v-18h375q51 0 88-37t37-88z" horiz-adv-x="928.6" />
</font>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/fonts/fontello.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/fontello.woff Normal file
View file

Binary file not shown.

7
static/index.html
View file

@ -11,6 +11,7 @@
href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700'
rel='stylesheet' rel='stylesheet'
type='text/css'> type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="lib/ng-toggle.css" type="text/css"> <link rel="stylesheet" href="lib/ng-toggle.css" type="text/css">
<link rel="stylesheet" href="lib/autocomplete.css" type="text/css"> <link rel="stylesheet" href="lib/autocomplete.css" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css"> <link href="style.css" rel="stylesheet" type="text/css">
@ -22,16 +23,16 @@
<header class="header"> <header class="header">
<div class="header__menu-button" ng-click="sidebar = !sidebar"></div> <div class="header__menu-button" ng-click="sidebar = !sidebar"></div>
<p class="header__title a" ng-click="back()">{{title}}</p> <p class="header__title a" ng-click="back()">{{path}}</p>
<div class="header__mode"> <div class="header__mode">
Mode : {{mode}} {{mode}}
<ng-toggle ng-true-val="'dates'" ng-false-val="'folder'" ng-model="mode"></ng-toggle> <ng-toggle ng-true-val="'dates'" ng-false-val="'folder'" ng-model="mode"></ng-toggle>
</div> </div>
<a class="header__logo" href="/logs"></a> <a class="header__logo" href="/logs"></a>
</header> </header>
<ng-view></ng-view> <ng-view ng-class="{lowerScope: controller == 'logsController', higherScope: controller == 'dateController' }"></ng-view>
<div class="mask" ng-show="sidebar" ng-click="sidebar = false"></div> <div class="mask" ng-show="sidebar" ng-click="sidebar = false"></div>

8
static/js/app.js
View file

@ -49,6 +49,7 @@
logWriter = $location.search().path; //which log writer to use ? logWriter = $location.search().path; //which log writer to use ?
$rootScope.title = logWriter + ' dates'; $rootScope.title = logWriter + ' dates';
$rootScope.path = logWriter + ' · dates';
//Get dates //Get dates
return ScribeAPI.dateExplorer({ return ScribeAPI.dateExplorer({
@ -77,6 +78,7 @@
var path = $location.search().path; var path = $location.search().path;
$rootScope.title = path; $rootScope.title = path;
$rootScope.path = path;
//Get folder content //Get folder content
return ScribeAPI.folderExplorer({ return ScribeAPI.folderExplorer({
@ -102,6 +104,12 @@
'ScribeAPI', 'ScribeAPI',
function ($rootScope, $location, $q, $window, $document, ScribeAPI) { function ($rootScope, $location, $q, $window, $document, ScribeAPI) {
$rootScope.$on('$routeChangeSuccess', function(ev,data) {
if (data.$$route && data.$$route.controller){
$rootScope.controller = data.$$route.controller;
}
});
/** /**
* getAllLogsFiles * getAllLogsFiles
* *

9
static/js/controllers/logsController.js
View file

@ -15,7 +15,6 @@
//reset //reset
$rootScope.sidebar = false; $rootScope.sidebar = false;
/** /**
* attachCurrentFiles * attachCurrentFiles
* *
@ -79,10 +78,10 @@
//ng-toggle values //ng-toggle values
//3 states : 1 / null / 0 //3 states : 1 / null / 0
$scope.showFile = null; $scope.showFile = 0;
$scope.showTime = 1; $scope.showTime = 0;
$scope.showDate = 0; $scope.showDate = 1;
$scope.showTags = null; $scope.showTags = 1;
//Stores all lines (a line = a log) //Stores all lines (a line = a log)
$scope.lines = []; $scope.lines = [];

15
static/lib/autocomplete.css
View file

@ -6,9 +6,13 @@
} }
.autocomplete input{ .autocomplete input{
font-size: 1.2em; font-size: 10px;
width: 100%; width: 100%;
padding:0.4em; padding: 8px;
background: #222;
border: 1px solid #2C2C2C;
color: #FFF;
font-family: "Open Sans";
} }
.autocomplete ul{ .autocomplete ul{
@ -25,8 +29,11 @@
text-align: left; text-align: left;
list-style:none; list-style:none;
width: 100%; width: 100%;
padding:0.4em; padding: 7px;
background-color: #fff; background: #333;
font-family: "Open Sans";
font-size: 10px;
color: #FFF;
} }
.autocomplete li.active{ .autocomplete li.active{

10
static/lib/ng-toggle.css
View file

@ -2,7 +2,7 @@
display: inline-block; display: inline-block;
margin: 3px; margin: 3px;
position: relative; position: relative;
width: 62px; width: 46px;
height: 36px; height: 36px;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0); -webkit-transform: translateZ(0) scale(1.0, 1.0);
@ -36,10 +36,10 @@
cursor: pointer; cursor: pointer;
} }
.ng-toggle-switch.true { .ng-toggle-switch.true {
background-color: #68C527; background-color: #21ce99;
} }
.ng-toggle-switch.false { .ng-toggle-switch.false {
background-color: #ff4d35; background-color: #323232;
} }
.ng-toggle-false { .ng-toggle-false {
position: absolute; position: absolute;
@ -59,7 +59,7 @@
border-radius: 100%; border-radius: 100%;
background-color: white; background-color: white;
position: absolute; position: absolute;
top: 3px; top: 1px;
left: 16px; left: 16px;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
@ -70,7 +70,7 @@
left: 29px; left: 29px;
} }
.ng-toggle-switch.false .ng-toggle-handle { .ng-toggle-switch.false .ng-toggle-handle {
left: 3px; left: 2px;
} }
.ng-toggle-tooltip { .ng-toggle-tooltip {
display: inline-block; display: inline-block;

4
static/partials/elements/blocks.html
View file

@ -1,9 +1,9 @@
<div <div
class="block" class="block"
ng-class="{'block--date' : type == 'date', 'block--file': forceFile}" ng-class="{'block--date' : type == 'date', 'block--file': forceFile}"
style="background: {{ color() }}" style="/*box-shadow:inset 10px 0 0 {{ color() }}*/"
> >
<p class="block__message block__message--top" ng-if="messageTop">{{messageTop}}</p> <p class="block__message block__message--top" ng-if="messageTop">{{messageTop}}</p>
<p class="block__message block__message--middle" ng-if="message">{{message}}</p> <p class="block__message block__message--middle" ng-if="message">{{message}}</p>
<p class="block__message block__message--bottom" ng-if="messageBottom">{{messageBottom}}</p> <p class="block__message block__message--bottom" ng-if="messageBottom">&middot;&nbsp; {{messageBottom}}</p>
</div> </div>

4
static/partials/elements/log.html
View file

@ -1,10 +1,10 @@
<p class="log"> <p class="log">
<span class="log__item log__time"> <span class="log__item log__time">
<span ng-if="showDate != 0 && (showDate == 1 || log.show.date)"> <span ng-if="showDate != 0 && (showDate == 1 || log.show.date)" class="log__time__higher">
{{log.context.time | date: 'EEE MMM dd yyyy'}} {{log.context.time | date: 'EEE MMM dd yyyy'}}
</span> </span>
<span ng-if="showTime != 0 && (showTime == 1 || log.show.time)"> <span ng-if="showTime != 0 && (showTime == 1 || log.show.time)" class="log__time__lower">
{{log.context.time | date: 'yyyy-MM-ddTHH:mm:ss:Z'}} {{log.context.time | date: 'yyyy-MM-ddTHH:mm:ss:Z'}}
</span> </span>
</span> </span>

22
static/partials/elements/menu.html
View file

@ -2,31 +2,31 @@
<ul class="actions"> <ul class="actions">
<li class="action action--reload a" ng-click="reload()">⟳</li> <li class="action action--reload a" ng-click="reload()">Refresh</li>
<li class="action"> <li class="action">
<h4 class="title">Date :</h4> <h4 class="title">Date</h4>
<ng-toggle tri-toggle ng-model="showDate"></ng-toggle> <ng-toggle ng-model="showDate"></ng-toggle>
</li> </li>
<li class="action"> <li class="action">
<h4 class="title">Time :</h4> <h4 class="title">Time</h4>
<ng-toggle tri-toggle ng-model="showTime"></ng-toggle> <ng-toggle ng-model="showTime"></ng-toggle>
</li> </li>
<li class="action"> <li class="action">
<h4 class="title">Tags :</h4> <h4 class="title">Tags</h4>
<ng-toggle tri-toggle ng-model="showTags"></ng-toggle> <ng-toggle ng-model="showTags"></ng-toggle>
</li> </li>
<li class="action"> <li class="action">
<h4 class="title">File :</h4> <h4 class="title">File</h4>
<ng-toggle tri-toggle ng-model="showFile"></ng-toggle> <ng-toggle ng-model="showFile"></ng-toggle>
</li> </li>
<li class="action"> <li class="action">
<h4 class="title">Order by :</h4> <h4 class="title">Order by</h4>
<select ng-model="order"> <select ng-model="order">
<option value="context.time">Time</option> <option value="context.time">Time</option>
@ -43,7 +43,7 @@
</li> </li>
<li class="action action--search pull-right"> <li class="action action--search pull-right">
<h4 class="title">Filter :</h4> <h4 class="title">Filter</h4>
<form action=""> <form action="">
<input type="text" class="input" ng-model="search"> <input type="text" class="input" ng-model="search">
</form> </form>

2
static/partials/elements/sidebarLogs.html
View file

@ -28,7 +28,7 @@
on-select="addFile" on-select="addFile"
ng-keyup="$event.keyCode == 13 && addFile(fileToAdd)" ng-keyup="$event.keyCode == 13 && addFile(fileToAdd)"
click-activation="true" click-activation="true"
attr-placeholder="A path" attr-placeholder="File Path"
attr-input-class="input" attr-input-class="input"
class="sidebar__block"></autocomplete> class="sidebar__block"></autocomplete>

4
static/partials/logs.html
View file

@ -16,8 +16,8 @@
</div> </div>
<div class="logs__empty" ng-if="lines.length == 0"> <div class="logs__empty" ng-if="lines.length == 0">
<h1>No file selected</h1> <h1>Select file(s) from</h1>
<h2>← Open menu</h2> <h1>sidebar to display</h1>
</div> </div>
</div> </div>

358
static/style.css
View file

@ -1,11 +1,21 @@
@font-face {
font-family: 'Fontello';
src: url('fonts/fontello.eot'); /* IE9 Compat Modes */
src: url('fonts/fontello.eot?#fontello') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/fontello.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/fontello.woff') format('woff'), /* Pretty Modern Browsers */
url('fonts/fontello.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/fontello.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/* /*
* Scribe.js style * Scribe.js style
*/ */
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: Consolas, Menlo, Monaco, Lucida Console, font-family: "Source Code Pro", Consolas, Menlo, Monaco, Lucida Console,
Liberation Mono, DejaVu Sans Mono, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace, serif; Bitstream Vera Sans Mono, Courier New, monospace, serif;
} }
@ -18,7 +28,7 @@ body {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
border: 0; border: 0;
background: #161d25; background: #222;
font-size: 12px; font-size: 12px;
} }
@ -31,6 +41,10 @@ body {
} }
.pull-right { .pull-right {
float: right; float: right;
margin-right: 8px;
border-right: none !important;
border-left: 1px solid #222;
padding-left: 12px !important;
} }
.clear { .clear {
clear: both; clear: both;
@ -38,30 +52,31 @@ body {
.tiny { .tiny {
font-size: 9px; font-size: 9px;
position: relative;
top: -3px;
} }
.input { .input {
border-radius: 2px; border-radius: 4px;
border: none; border: none;
outline: none;
} }
.bck-tag { .bck-tag {
background: #04c25f; padding: 0px 0px;
border-radius: 3px;
color: #000;
margin-right: 2px;
padding: 2px 4px;
text-transform: uppercase; text-transform: uppercase;
font-size: 9px; font-size: 9px;
letter-spacing: 1px; color: #21ce99;
font-weight: 700; font-family: "Open Sans";
/* font-weight: bold; */
/* letter-spacing: 1px; */
} }
.page { .page {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 50px;
overflow-y: auto; overflow-y: auto;
background: #111;
} }
.mask { .mask {
@ -77,47 +92,58 @@ body {
* Header * Header
*/ */
.header { .header {
position : absolute; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
z-index: 4; z-index: 4;
width: 100%; /* width: 100%; */
height: 50px; height: 50px;
background: #34495e; background: #222;
box-shadow: #101 0px 0px 6px; /* border-bottom: 1px solid #222; */
/* box-shadow: 0 1px 5px #111; */
right: 0;
left: 0;
border-bottom: 1px solid #2A2A2A;
} }
.header__menu-button { .header__menu-button {
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 9px; top: 10px;
height: 30px; height: 30px;
width: 40px; width: 40px;
border-radius: 3px; border-radius: 4px;
background: url("img/menu.png") center center no-repeat; background: url("img/menu.png") center center no-repeat;
background-size: 67%; background-size: 85%;
cursor: pointer; cursor: pointer;}
background-color: #2980b9;
border: 1px solid rgba(255, 255, 255, 0.05)
}
.header__title { .header__title {
position: absolute; position: absolute;
top: 2px; top: 5px;
left: 70px; left: 70px;
height: 30px; height: 30px;
width: 500px; width: 500px;
font-size: 9px; font-size: 11px;
line-height: 33px; line-height: 40px;
font-weight: 300; font-weight: 300;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
color: #fff; color: #FFF;
font-family: "Open Sans";
margin: 0;
} }
.header__mode { .header__mode {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 180px; right: 180px;
color: #e2e2e2; color: #e2e2e2;
text-transform: uppercase;
font-family: "Open Sans";
font-weight: normal;
line-height: 40px;
font-size: 10px;
letter-spacing: 1px;
} }
.header__mode > * { .header__mode > * {
display: inline-block; display: inline-block;
@ -144,20 +170,27 @@ body {
z-index: 3; z-index: 3;
overflow-y: auto; overflow-y: auto;
width: 300px; width: 300px;
padding-top: 50px; background: #222;
background: #111;
color: #fff; color: #fff;
transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 0, 0);
transition: transform 0.5s ease; transition: transform 0.5s ease;
border-right: 1px solid #2A2A2A;
} }
.sidebar--open { .sidebar--open {
box-shadow: #111 0 0 20px 0; box-shadow: 1px 0 3px #000;
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
} }
.sidebar__title { .sidebar__title {
font-size: 18px; font-size: 13px;
padding: 0 22px; padding: 0 22px;
margin: 22px 0; margin: 22px 0;
font-family: "Open Sans";
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0;
color: #999;
font-weight: normal;
} }
.sidebar__block { .sidebar__block {
list-style: none; list-style: none;
@ -166,12 +199,22 @@ body {
.sidebar__item { .sidebar__item {
list-style: none; list-style: none;
width: 100%; width: 100%;
padding-left: 22px; font-size: 12px;
font-size: 18px;
font-family: "Open Sans";
text-transform: uppercase;
letter-spacing: 1px;
} }
.sidebar__item a { .sidebar__item a {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
font-family: "Open Sans";
text-transform: uppercase;
color: #FFF;
letter-spacing: 1px;
font-size: 17px;
font-weight: bold;
} }
/** /**
@ -179,25 +222,31 @@ body {
*/ */
.block { .block {
display: inline-block; display: inline-block;
height: 200px; height: 44px;
width: 200px;
margin: 10px;
margin-right: 0; margin-right: 0;
color: rgba(255, 255, 255, 0.39); color: #FFF;
font-family: "Open Sans"; font-family: "Open Sans";
font-size: 53px; font-size: 0;
text-align: center; text-align: center;
line-height: 49px; line-height: 30px;
font-weight: 300; font-weight: 300;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
background: #393e41; background: #393e41;
border: 1px solid rgba(255, 255, 255, 0.05); border: none;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
background: #111 !important;
border-bottom: 1px solid #222;
border-radius: 0;
padding-left: 20px;
width: 100%;
text-align: left;
transition: box-shadow 250ms;
} }
.block:hover { .block:hover {
background: #595e50; background: #595e50;
@ -206,16 +255,27 @@ body {
margin: 0; margin: 0;
font-family: "Open Sans"; font-family: "Open Sans";
text-align: center; text-align: center;
font-size: 18px; font-size: 11px;
font-weight: normal; font-weight: bold;
letter-spacing: 0px;
position: relative;
top: 6px;
} }
.block__message--top { .block__message--top {
padding-top: 6px; padding-top: 0;
} }
.block__message--middle { .block__message--middle {
width: 100%; width: 100%;
height: 100%;
line-height: 200px; text-align: left;
padding: 0;
position: relative;
height: auto;
font-size: 14px;
top: 6px;
font-weight: normal;
letter-spacing: 2px;
} }
.block__message--top + .block__message--middle { .block__message--top + .block__message--middle {
height: auto; height: auto;
@ -237,41 +297,57 @@ body {
} }
.block--date {} .block--date {}
.block--date .block__message--top { .block--date .block__message--top {
letter-spacing: 2px;
font-weight: 700; font-weight: 700;
color: #FFF;
display: inline-block;
width: auto;
} }
.block--date .block__message--middle { .block--date .block__message--middle {
font-size: 92px; font-size: 11px;
color: #fff; color: #fff;
font-weight: 300; font-weight: bold;
line-height: 93px;
display: inline-block;
width: auto;
margin-left: 3px;
} }
.block--date .block__message--bottom { .block--date .block__message--bottom {
letter-spacing: 2px;
font-weight: 300; font-weight: 300;
color: #888;
display: inline-block;
width: auto;
margin-left: 4px;
letter-spacing: 0px;
} }
/** /**
* Nav * Nav
*/ */
.nav { .nav {
position: absolute; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background: #222;
border-top: 1px solid #2A2A2A;
} }
.nav > .btn { .nav > .btn {
display: inline-block; display: inline-block;
padding: 4px 14px; padding: 7px 12px !important;
background: rgba(255, 255, 255, 0.2); font-size: 13px;
box-shadow: #101 0px 0px 6px;
border-radius : 4px;
font-size: 38px;
color: #e2e2e2; color: #e2e2e2;
font-family: "Fontello";
margin-right: 0 !important;
transition: background 250ms;
} }
.nav > .btn:hover { .nav > .btn:hover {
cursor: pointer; cursor: pointer;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1);
} }
/** /**
@ -281,24 +357,43 @@ body {
width: 100%; width: 100%;
height: 40px; height: 40px;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
margin-bottom: 14px; background: #222;
border-bottom: 1px solid #2A2A2A;
/* box-shadow: 0 1px 3px #000; */
position: fixed;
z-index: 5;
top: 49px;
} }
.actions { .actions {
margin: 0; margin: 0;
padding: 0 6px;
height: 40px;
padding-left: 17px;
} }
.action { .action {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
list-style: none; list-style: none;
height: 40px;
padding-left: 6px;
margin-right: 5px;
} }
.action > * { .action > * {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.action .title { .action .title {
color: #e2e2e2; color: #888;
font-weight: 400; font-weight: 400;
font-family: "Open Sans";
text-transform: uppercase;
font-size: 9px;
font-weight: bold;
height: 40px;
margin: 0;
line-height: 39px;
} }
.action--search > * { .action--search > * {
display: inline-block; display: inline-block;
@ -308,12 +403,26 @@ body {
height: 24px; height: 24px;
min-width: 190px; min-width: 190px;
font-size: 14px; font-size: 14px;
background: #222;
outline: none;
background: #222; font-size: 11px; padding: 8px; color: #FFF; border: 1px solid #2C2C2C;
} }
.action--reload { .action--reload {
color: #e2e2e2; color: #888;
font-size: 24px; font-size: 9px;
font-weight: 700;
margin-right: 8px; font-family: "Open Sans";
text-align: center;
line-height: 20px;
text-transform: uppercase;
font-weight: bold;
background: #333;
height: 20px;
width: 62px;
padding-left: 0;
color: #AAA;
border-radius: 3px;
} }
/** /**
@ -322,29 +431,44 @@ body {
.logs__wrapper { .logs__wrapper {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
max-width: 100%; max-width: 85%;
/* width: 100%; */
text-align: left;
padding: 15px;
} }
.log { .log {
display: table-row; display: table-row;
height: auto; height: auto;
width: 100%; width: 100%;
font-size: 11px; font-size: 9px;
line-height: 20px; line-height: 17px;
color: #bebebe; color: #bebebe;
margin: 0;
} }
.log__item { .log__item {
display: table-cell; display: table-cell;
padding: 0 6px; padding: 0 6px;
padding-right: 3px;
text-align: left;
} }
.log__tags {} .log__tags {}
.log__tag {} .log__tag {}
.log__time {} .log__time {}
.log__location {} .log__location {}
.log__location > span { .log__location > span {
background: #2980b9; color: #2980b9;
} }
.log__message { .log__message {
white-space: pre; white-space: pre;
color: #FFF;
line-height: 13px;
/* margin-top: -10px; */
position: relative;
/* top: -10px; */
/* border-left: 1px solid #222; */
/* box-shadow: inset 2px 0 2px -2px #000; */
} }
.log__json { .log__json {
white-space: pre-wrap; white-space: pre-wrap;
@ -352,29 +476,41 @@ body {
.logs__empty { .logs__empty {
text-align: center; text-align: center;
width: 100%; width: 100%;
color: #e2e2e2 color: #e2e2e2;
position:relative;
top:50%;
margin:0 auto;
margin-top:-30px;
} }
.logs__empty > * { .logs__empty > * {
font-weight: 400; font-weight: 400;
font-family: "Open Sans";
color: #333;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
line-height: 8px;
} }
/** /**
* ngToggle * ngToggle
*/ */
.ng-toggle-wrap { .ng-toggle-wrap {
margin: 2px; margin: 0px;
margin-left: -7px;
} }
.ng-toggle-switch { .ng-toggle-switch {
width: 42px; width: 36px;
height: 22px; height: 17px;
} }
.ng-toggle-handle { .ng-toggle-handle {
width: 16px; width: 15px;
height: 16px; height: 15px;
left: 12px; left: 12px;
} }
.ng-toggle-switch.true .ng-toggle-handle { .ng-toggle-switch.true .ng-toggle-handle {
left: 22px; left: 20px;
} }
/** /**
@ -389,10 +525,84 @@ body {
} }
.sidebar__block > .autocomplete { .sidebar__block > .autocomplete {
padding: 0 22px; padding: 0 22px;
margin-top: 10px;
} }
.sidebar__block > .autocomplete > ul { .sidebar__block > .autocomplete > ul {
left: 22px; left: 22px;
right: 22px; right: 22px;
width: auto; width: auto;
border-color: #333;
border-radius: 4px;
margin-top: 5px;
overflow: hidden;
} }
.log__time__higher {
font-family: "Open Sans";
font-weight: normal;
margin-right: 5px;
text-transform: uppercase;
}
.log__time__lower {
font-family: "Open Sans";
/* font-style: italic; */
color: #555;
font-weight: normal;
}
ng-view.ng-scope {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
}
label {
position: relative;
top: -3px;
font-size: 9px;
}
form.ng-pristine.ng-valid {
position: relative;
}
.toggle-button {
background: #444;
color:#FFF;
border: none;
padding: 5px 20px;
border-radius: 3px;
font-family: "Open Sans";
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 8px;
letter-spacing: 1px;
outline: none;
border: 1px solid #444;
border-bottom-width: 3px;
}
button.toggle-button.active {
background: rgb(33, 206, 153);
border-color: rgb(33, 206, 153);
}
.block:hover {
box-shadow: inset 10px 0 0 #21ce99;
}
.lowerScope {
top:89px !important;
}
.higherScope {
bottom: 29px !important;
}