diff --git a/couchpotato/core/plugins/log/static/log.scss b/couchpotato/core/plugins/log/static/log.scss index 4be815b..fd5edac 100644 --- a/couchpotato/core/plugins/log/static/log.scss +++ b/couchpotato/core/plugins/log/static/log.scss @@ -12,6 +12,16 @@ padding: 5px 10px; margin: 0; + @include media-tablet { + &.filter, &:nth-child(7),&:nth-child(8),&:nth-child(9),&:nth-child(10),&:nth-child(11),&:nth-child(12) { + display: none; + } + + &:last-child { + display: inline-block; + } + } + &.select, &.clear { cursor: pointer; } @@ -32,6 +42,10 @@ font-style: italic; opacity: .5; margin-top: 3px; + + @include media-tablet { + display: none; + } } .container { @@ -39,6 +53,10 @@ overflow: hidden; line-height: 150%; + @include media-phablet { + padding: $padding $padding/2; + } + &.loading { text-align: center; font-size: 20px; @@ -58,6 +76,10 @@ font-family: Lucida Console, Monaco, Nimbus Mono L, monospace, serif; display: flex; + @include media-phablet { + flex-flow: row wrap; + } + &.highlight { background: $theme_off; } @@ -66,7 +88,20 @@ padding: 5px 0 3px; display: inline-block; vertical-align: middle; - width: 90px; + width: 95px; + } + + .message { + white-space: pre-wrap; + flex: 1 auto; + + @include media-phablet { + flex: 1 auto; + margin-top: -$padding/4; + padding: 0; + display: block; + width: 100%; + } } ::selection { @@ -76,15 +111,10 @@ } .type.type { - margin-left: 10px; + margin-left: $padding/3; width: 40px; } - .message { - white-space: pre-wrap; - flex: 1 auto; - } - .error { color: #FFA4A4; } .debug span { opacity: .6; } diff --git a/couchpotato/static/style/combined.min.css b/couchpotato/static/style/combined.min.css index d66c01c..506e758 100644 --- a/couchpotato/static/style/combined.min.css +++ b/couchpotato/static/style/combined.min.css @@ -464,16 +464,26 @@ .page.log .nav li.clear,.page.log .nav li.select{cursor:pointer} .page.log .nav li.active{font-weight:700;cursor:default} .page.log .hint{font-style:italic;opacity:.5;margin-top:3px} +@media (max-width:768px){.page.log .nav li.filter,.page.log .nav li:nth-child(10),.page.log .nav li:nth-child(11),.page.log .nav li:nth-child(12),.page.log .nav li:nth-child(7),.page.log .nav li:nth-child(8),.page.log .nav li:nth-child(9){display:none} +.page.log .nav li:last-child{display:inline-block} +.page.log .hint{display:none} +} .page.log .container{padding:20px;overflow:hidden;line-height:150%} +@media (max-width:480px){.page.log .container{padding:20px 10px} +} .page.log .container.loading{text-align:center;font-size:20px;padding:100px 50px} .page.log .container select{vertical-align:top} .page.log .container .time{clear:both;font-size:.75em;border-top:1px solid rgba(255,255,255,.1);overflow:hidden;padding:0 3px;font-family:Lucida Console,Monaco,Nimbus Mono L,monospace,serif;display:-webkit-flex;display:-ms-flexbox;display:flex} +@media (max-width:480px){.page.log .container .time{-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap} +} .page.log .container .time.highlight{background:#eaeaea} -.page.log .container .time span{padding:5px 0 3px;display:inline-block;vertical-align:middle;width:90px} +.page.log .container .time span{padding:5px 0 3px;display:inline-block;vertical-align:middle;width:95px} +.page.log .container .time .message{white-space:pre-wrap;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto} +@media (max-width:480px){.page.log .container .time .message{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;margin-top:-5px;padding:0;display:block;width:100%} +} .page.log .container .time ::-moz-selection{background-color:#000;color:#FFF} .page.log .container .time ::selection{background-color:#000;color:#FFF} -.page.log .container .type.type{margin-left:10px;width:40px} -.page.log .container .message{white-space:pre-wrap;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto} +.page.log .container .type.type{margin-left:6.67px;width:40px} .page.log .container .error{color:#FFA4A4} .page.log .container .debug span{opacity:.6} .page.log [data-filter=DEBUG] .error,.page.log [data-filter=DEBUG] .info,.page.log [data-filter=ERROR] .debug,.page.log [data-filter=ERROR] .info,.page.log [data-filter=INFO] .debug,.page.log [data-filter=INFO] .error{display:none}