dockeruser
/
CouchPotatoServer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Log styling

pull/5180/head
Ruud 10 years ago
parent
6989f6fc33
commit
d58995f72b
4 changed files with 143 additions and 172 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      couchpotato/core/media/movie/_base/static/movie.scss
  2. 21
      couchpotato/core/plugins/log/static/log.js
  3. 246
      couchpotato/core/plugins/log/static/log.scss
  4. 46
      couchpotato/static/style/main.scss

2
couchpotato/core/media/movie/_base/static/movie.scss
View File

@ -828,7 +828,6 @@
} }
.menus { .menus {
margin-right: $padding;
.button { .button {
padding: 0 $padding/2; padding: 0 $padding/2;
@ -909,6 +908,7 @@
text-align: center; text-align: center;
color: rgba(0,0,0,.2); color: rgba(0,0,0,.2);
cursor: default; cursor: default;
border: 0;
&.active { &.active {
background: $theme_off; background: $theme_off;

21
couchpotato/core/plugins/log/static/log.js
View File

@ -33,6 +33,7 @@ Page.Log = new Class({
var self = this; var self = this;
if (self.log) self.log.destroy(); if (self.log) self.log.destroy();
self.log = new Element('div.container.loading', { self.log = new Element('div.container.loading', {
'text': 'loading...', 'text': 'loading...',
'events': { 'events': {
@ -52,13 +53,20 @@ Page.Log = new Class({
self.log.adopt(self.log_items); self.log.adopt(self.log_items);
self.log.removeClass('loading'); self.log.removeClass('loading');
var navigation = new Element('div.navigation').adopt(
new Element('h2[text=Logs]'),
new Element('div.hint', {
'text': 'Select multiple lines & report an issue'
})
);
var nav = new Element('ul.nav', { var nav = new Element('ul.nav', {
'events': { 'events': {
'click:relay(li.select)': function (e, el) { 'click:relay(li.select)': function (e, el) {
self.getLogs(parseInt(el.get('text')) - 1); self.getLogs(parseInt(el.get('text')) - 1);
} }
} }
}); }).inject(navigation);
// Type selection // Type selection
new Element('li.filter').grab( new Element('li.filter').grab(
@ -101,13 +109,8 @@ Page.Log = new Class({
} }
}).inject(nav); }).inject(nav);
// Hint
new Element('li.hint', {
'text': 'Select multiple lines & report an issue'
}).inject(nav);
// Add to page // Add to page
nav.inject(self.log, 'top'); navigation.inject(self.el, 'top');
self.scrollToBottom(); self.scrollToBottom();
} }
@ -212,7 +215,7 @@ Page.Log = new Class({
.replace('{version}', version ? version.version.repr : '...'), .replace('{version}', version ? version.version.repr : '...'),
textarea; textarea;
var overlay = new Element('div.report', { var overlay = new Element('div.mask.report_popup', {
'method': 'post', 'method': 'post',
'events': { 'events': {
'click': function(e){ 'click': function(e){
@ -269,7 +272,7 @@ Page.Log = new Class({
) )
); );
overlay.inject(self.log); overlay.inject(document.body);
}, },
getSelected: function(){ getSelected: function(){

246
couchpotato/core/plugins/log/static/log.scss
View File

@ -1,153 +1,137 @@
.page.log .nav { @import "couchpotato/static/style/_mixins";
display: block;
text-align: center;
padding: 0 0 30px;
margin: 0;
font-size: 20px;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background: #4E5969;
z-index: 100;
}
.page.log .nav li { .page.log {
display: inline-block;
padding: 5px 10px;
margin: 0;
}
.page.log .nav li.select, .nav {
.page.log .nav li.clear { text-align: right;
cursor: pointer; padding: 0;
} margin: 0;
.page.log .nav li:hover:not(.active):not(.filter) { li {
background: rgba(255, 255, 255, 0.1); display: inline-block;
} padding: 5px 10px;
margin: 0;
.page.log .nav li.active { &.select, &.clear {
font-weight: bold; cursor: pointer;
cursor: default; }
background: rgba(255,255,255,.1);
}
@media all and (max-width: 480px) { &:hover:not(.active):not(.filter) {
.page.log .nav { background: rgba(255, 255, 255, 0.1);
font-size: 14px;
} }
.page.log .nav li { &.active {
padding: 5px; font-weight: bold;
} cursor: default;
background: rgba(255,255,255,.1);
}
} }
}
.page.log .nav li.hint { .hint {
text-align: center;
width: 400px;
left: 50%;
margin-left: -200px;
font-style: italic; font-style: italic;
font-size: 11px;
position: absolute;
right: 20px;
opacity: .5; opacity: .5;
bottom: 5px;
} }
.page.log .loading { .loading {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
padding: 50px; padding: 50px;
}
.page.log .container {
padding: 30px 0 60px;
overflow: hidden;
line-height: 150%;
font-size: 11px;
color: #FFF;
}
.page.log .container select {
vertical-align: top;
} }
.page.log .container .time { .container {
clear: both; padding: $padding;
color: lightgrey;
font-size: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden; overflow: hidden;
padding: 0 3px; line-height: 150%;
font-family: Lucida Console, Monaco, Nimbus Mono L, monospace, serif;
} select {
.page.log .container .time.highlight { vertical-align: top;
background: rgba(255, 255, 255, 0.1);
} }
.page.log .container .time span {
padding: 5px 0 3px; .time {
display: inline-block; clear: both;
vertical-align: middle; font-size: 11px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
padding: 0 3px;
font-family: Lucida Console, Monaco, Nimbus Mono L, monospace, serif;
&.highlight {
background: $theme_off;
}
span {
padding: 5px 0 3px;
display: inline-block;
vertical-align: middle;
}
::selection {
background-color: #000;
color: #FFF;
}
} }
.page.log[data-filter=INFO] .error, .type {
.page.log[data-filter=INFO] .debug, margin-left: 10px;
.page.log[data-filter=ERROR] .debug,
.page.log[data-filter=ERROR] .info,
.page.log[data-filter=DEBUG] .info,
.page.log[data-filter=DEBUG] .error {
display: none;
} }
.page.log .container .type { .message {
margin-left: 10px; float: right;
} width: 86%;
white-space: pre-wrap;
}
.page.log .container .message {
float: right; .error { color: #FFA4A4; }
width: 86%; .debug span { opacity: .6; }
white-space: pre-wrap;
} }
.page.log .container .error { color: #FFA4A4; }
.page.log .container .debug span { opacity: .6; }
.do_report {
position: absolute; &[data-filter=INFO] .error,
padding: 10px; &[data-filter=INFO] .debug,
&[data-filter=ERROR] .debug,
&[data-filter=ERROR] .info,
&[data-filter=DEBUG] .info,
&[data-filter=DEBUG] .error {
display: none;
}
} }
.page.log .report { .report_popup.report_popup {
position: fixed; position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
left: 0; left: 0;
right: 0;
bottom: 0;
top: 0; top: 0;
z-index: 99999; z-index: 99999;
font-size: 14px; font-size: 14px;
} display: flex;
justify-content: center;
align-items: center;
opacity: 1;
color: #FFF;
pointer-events: auto;
.page.log .report .button { .button {
display: inline-block; display: inline-block;
margin: 10px 0; margin: 10px 0;
padding: 10px; padding: 10px;
color: $background_color;
} }
.page.log .report .bug { .bug {
width: 800px; width: 80%;
height: 80%; height: 80%;
position: absolute; max-height: 800px;
left: 50%; max-width: 800px;
top: 50%;
margin: 0 0 0 -400px; display: flex;
transform: translate(0, -50%); flex-flow: column nowrap;
}
.page.log .report .bug textarea { textarea {
display: block; display: block;
width: 100%; width: 100%;
background: #FFF; background: #FFF;
@ -157,43 +141,13 @@
height: 70%; height: 70%;
font-size: 12px; font-size: 12px;
} }
}
.page.log .container .time ::-webkit-selection {
background-color: #000;
color: #FFF;
}
.page.log .container .time ::-moz-selection {
background-color: #000;
color: #FFF;
} }
.page.log .container .time ::-ms-selection { .do_report.do_report {
background-color: #000; z-index: 10000;
position: absolute;
padding: 10px;
background: $primary_color;
color: #FFF; color: #FFF;
} }
.page.log .container .time.highlight ::selection {
background-color: transparent;
color: inherit;
}
.page.log .container .time.highlight ::-webkit-selection {
background-color: transparent;
color: inherit;
}
.page.log .container .time.highlight ::-moz-selection {
background-color: transparent;
color: inherit;
}
.page.log .container .time.highlight ::-ms-selection {
background-color: transparent;
color: inherit;
}
.page.log .container .time.highlight ::selection {
background-color: transparent;
color: inherit;
}

46
couchpotato/static/style/main.scss
View File

@ -86,7 +86,6 @@ input, textarea, select {
font-size: 38px; font-size: 38px;
line-height: $header_height; line-height: $header_height;
height: $header_height; height: $header_height;
opacity: .1;
transition: background 200ms $cubic; transition: background 200ms $cubic;
span { span {
@ -327,19 +326,36 @@ input, textarea, select {
display: block; display: block;
} }
h1, h2, h3, h4 {
font-weight: 300;
}
h2 {
font-size: 24px;
padding: $padding;
@include media-phablet {
font-size: 18px;
line-height: $header_width_mobile;
padding: $padding/2;
}
}
.navigation { .navigation {
z-index: 2;
display: flex; display: flex;
align-items: center;
position: fixed; position: fixed;
top: 0; top: 0;
height: $header_height; height: $header_height;
left: $header_width; left: $header_width + $padding;
right: 0; right: $padding;
background: $background_color; background: $background_color;
border-radius: $border_radius 0 0 0; border-radius: $border_radius 0 0 0;
@include media-phablet { @include media-phablet {
height: $header_width_mobile; height: $header_width_mobile;
left: $header_width_mobile; left: $header_width_mobile + $padding;
} }
ul { ul {
@ -361,6 +377,10 @@ input, textarea, select {
padding: $padding/2; padding: $padding/2;
} }
} }
&:first-child {
margin-left: -$padding;
}
} }
.active a { .active a {
@ -368,16 +388,10 @@ input, textarea, select {
} }
} }
} h2 {
padding: $padding $padding $padding 0;
h1, h2, h3, h4 { }
font-weight: 300;
}
h2 {
font-size: 24px;
padding: $padding;
color: rgba(0,0,0,.5);
} }
} }
@ -489,7 +503,7 @@ input, textarea, select {
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 320px; width: 320px;
z-index: 20; z-index: 2000;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@ -581,8 +595,8 @@ input, textarea, select {
} }
/* Mask */ /* Mask */
.mask{ .mask {
background: rgba(0,0,0, .8); background: rgba(0,0,0,.8);
z-index: 1000; z-index: 1000;
text-align: center; text-align: center;
position: absolute; position: absolute;

Write Preview
Loading…
Cancel
Save