From f08c7de6095ea46043c443d276057b369f4bb512 Mon Sep 17 00:00:00 2001 From: Martin Mahner Date: Wed, 6 Sep 2017 13:52:52 +0200 Subject: [PATCH] Fixed wordwrap and marking --- dpaste/static/dpaste/_details.scss | 7 ++++--- dpaste/static/dpaste/dpaste.css | 2 +- dpaste/templates/dpaste/snippet_details.html | 4 ++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/dpaste/static/dpaste/_details.scss b/dpaste/static/dpaste/_details.scss index 0ecd093..5a748f3 100644 --- a/dpaste/static/dpaste/_details.scss +++ b/dpaste/static/dpaste/_details.scss @@ -59,7 +59,8 @@ $codeColor: #f8f8f2; $codeLineColor: #aaa; $codeBackgroundColor: #232829; -$markerColor: #f4e009; +$markerColor: rgb(244,244,9); +$markerBackgroundColor: rgba(244,244,9,.2); .snippet-code { @@ -71,7 +72,7 @@ $markerColor: #f4e009; line-height: 1.1rem; padding: 1rem 0; - .wordwrap { + &.wordwrap { overflow: auto; white-space: nowrap; } @@ -85,7 +86,7 @@ $markerColor: #f4e009; &.marked { color: $markerColor; - background-color: $markerColor; + background-color: $markerBackgroundColor; } } diff --git a/dpaste/static/dpaste/dpaste.css b/dpaste/static/dpaste/dpaste.css index 8fe50b0..55b35dd 100644 --- a/dpaste/static/dpaste/dpaste.css +++ b/dpaste/static/dpaste/dpaste.css @@ -1 +1 @@ -body{color:#888;background:#F7F8F9;font-family:"SF Mono","Fira Mono",monospace;font-size:1em;font-weight:300;margin:0;padding:0}a:link,a:visited{color:#6da3d9;font-family:"SF Mono","Fira Mono",monospace;font-weight:500;text-decoration:none}a:hover,a:visited{color:#6da3d9;text-decoration:underline}select,input{font-size:medium}header{background:#426ca1;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem}header h1{color:white;font-size:1em;font-weight:500;margin:0}header h1 input{font-size:1em;background-color:transparent;border:none;padding:0;margin:0;color:white;min-width:15em;outline:none}header nav{font-size:.9rem}header nav a:link,header nav a:visited{color:white;font-weight:500;text-decoration:none;margin:0 .2em;white-space:nowrap}header nav a:link:hover,header nav a:visited:hover{text-decoration:underline}header nav a:last-child{border:1px solid white;border-radius:5px;padding:.3em .5em}header nav a:last-child:hover{text-decoration:none;background-color:#49629b}.form-content{background-color:white;padding:1rem 1rem}.form-content textarea{box-sizing:border-box;width:100%;height:25rem;font-family:"SF Mono","Fira Mono",Monaco,Menlo,Consolas,"Courier New",monospace;font-size:.8rem;border:1px solid #bbb;padding:1rem;transition:border .5s linear}.form-content textarea:focus{outline:none;border-color:#3fca6e}.form-options{padding:1rem 2rem;display:flex;justify-content:space-between;font-size:.9rem}.form-actions{padding:1rem 2rem;background-color:white}.form-actions .shortcut{font-size:.9rem;color:#888;letter-spacing:1px}.form-actions input[type=submit]{color:white;background-color:#6da3d9;border:none;padding:.6em 1em;font-weight:500;font-family:"SF Mono", "Fira Mono", monospace;border-radius:2px;cursor:pointer}.form-actions input[type=submit]:hover{background:#608bc0}.snippet-options{padding:1rem 2rem;font-size:.9rem}.snippet-options a:link,.snippet-options a:visited{margin:0 .2em}.snippet-options a:hover,.snippet-options a:active{text-decoration:underline}.snippet-reply h2{background-color:white;padding:1rem 2rem;padding-bottom:0;margin:0;font-size:1.5rem;font-weight:500}.snippet-reply[data-hidden=yes]{opacity:0.3;cursor:pointer}.snippet-reply[data-hidden=yes] *{cursor:pointer}.snippet-text{color:#666;font-size:16px;line-height:24px;max-width:620px;font-family:Helvetica, FreeSerif, serif;font-weight:300}.snippet-code{background:#232829;color:#f8f8f2;font-family:"SF Mono","Fira Mono",Monaco,Menlo,Consolas,"Courier New",monospace;font-size:0.8rem;font-weight:300;line-height:1.1rem;padding:1rem 0}.snippet-code .wordwrap{overflow:auto;white-space:nowrap}.snippet-code ol{margin:0 0 0 2rem}.snippet-code ol li{color:#aaa;cursor:pointer}.snippet-code ol li.marked{color:#f4e009;background-color:#f4e009}.snippet-list{padding:1rem 2rem}.snippet-list dt:not(:first-child){margin-top:1rem}.snippet-list dt:last-child{margin-top:2rem}.snippet-list dd{font-family:"SF Mono","Fira Mono",Monaco,Menlo,Consolas,"Courier New",monospace;font-size:.9rem}.page{padding:1rem 2rem;background-color:white;color:#444}.page table th{text-align:left}.snippet-code .gd{background-color:rgba(226,12,19,0.3);color:#fff;display:block}.snippet-code .gi{background-color:rgba(23,189,10,0.2);color:#fff;display:block}.snippet-code .hll{background-color:#49483e}.snippet-code .c{color:#75715e}.snippet-code .err{color:#960050;background-color:#1e0010}.snippet-code .k{color:#66d9ef}.snippet-code .l{color:#ae81ff}.snippet-code .n{color:#f8f8f2}.snippet-code .o{color:#f92672}.snippet-code .p{color:#f8f8f2}.snippet-code .cm{color:#75715e}.snippet-code .cp{color:#75715e}.snippet-code .c1{color:#75715e}.snippet-code .cs{color:#75715e}.snippet-code .ge{font-style:italic}.snippet-code .gs{font-weight:bold}.snippet-code .kc{color:#66d9ef}.snippet-code .kd{color:#66d9ef}.snippet-code .kn{color:#f92672}.snippet-code .kp{color:#66d9ef}.snippet-code .kr{color:#66d9ef}.snippet-code .kt{color:#66d9ef}.snippet-code .ld{color:#e6db74}.snippet-code .m{color:#ae81ff}.snippet-code .s{color:#e6db74}.snippet-code .na{color:#a6e22e}.snippet-code .nb{color:#f8f8f2}.snippet-code .nc{color:#a6e22e}.snippet-code .no{color:#66d9ef}.snippet-code .nd{color:#a6e22e}.snippet-code .ni{color:#f8f8f2}.snippet-code .ne{color:#a6e22e}.snippet-code .nf{color:#a6e22e}.snippet-code .nl{color:#f8f8f2}.snippet-code .nn{color:#f8f8f2}.snippet-code .nx{color:#a6e22e}.snippet-code .py{color:#f8f8f2}.snippet-code .nt{color:#f92672}.snippet-code .nv{color:#f8f8f2}.snippet-code .ow{color:#f92672}.snippet-code .w{color:#f8f8f2}.snippet-code .mf{color:#ae81ff}.snippet-code .mh{color:#ae81ff}.snippet-code .mi{color:#ae81ff}.snippet-code .mo{color:#ae81ff}.snippet-code .sb{color:#e6db74}.snippet-code .sc{color:#e6db74}.snippet-code .sd{color:#e6db74}.snippet-code .s2{color:#e6db74}.snippet-code .se{color:#ae81ff}.snippet-code .sh{color:#e6db74}.snippet-code .si{color:#e6db74}.snippet-code .sx{color:#e6db74}.snippet-code .sr{color:#e6db74}.snippet-code .s1{color:#e6db74}.snippet-code .ss{color:#e6db74}.snippet-code .bp{color:#f8f8f2}.snippet-code .vc{color:#f8f8f2}.snippet-code .vg{color:#f8f8f2}.snippet-code .vi{color:#f8f8f2}.snippet-code .il{color:#ae81ff} +body{color:#888;background:#F7F8F9;font-family:"SF Mono","Fira Mono",monospace;font-size:1em;font-weight:300;margin:0;padding:0}a:link,a:visited{color:#6da3d9;font-family:"SF Mono","Fira Mono",monospace;font-weight:500;text-decoration:none}a:hover,a:visited{color:#6da3d9;text-decoration:underline}select,input{font-size:medium}header{background:#426ca1;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem}header h1{color:white;font-size:1em;font-weight:500;margin:0}header h1 input{font-size:1em;background-color:transparent;border:none;padding:0;margin:0;color:white;min-width:15em;outline:none}header nav{font-size:.9rem}header nav a:link,header nav a:visited{color:white;font-weight:500;text-decoration:none;margin:0 .2em;white-space:nowrap}header nav a:link:hover,header nav a:visited:hover{text-decoration:underline}header nav a:last-child{border:1px solid white;border-radius:5px;padding:.3em .5em}header nav a:last-child:hover{text-decoration:none;background-color:#49629b}.form-content{background-color:white;padding:1rem 1rem}.form-content textarea{box-sizing:border-box;width:100%;height:25rem;font-family:"SF Mono","Fira Mono",Monaco,Menlo,Consolas,"Courier New",monospace;font-size:.8rem;border:1px solid #bbb;padding:1rem;transition:border .5s linear}.form-content textarea:focus{outline:none;border-color:#3fca6e}.form-options{padding:1rem 2rem;display:flex;justify-content:space-between;font-size:.9rem}.form-actions{padding:1rem 2rem;background-color:white}.form-actions .shortcut{font-size:.9rem;color:#888;letter-spacing:1px}.form-actions input[type=submit]{color:white;background-color:#6da3d9;border:none;padding:.6em 1em;font-weight:500;font-family:"SF Mono", "Fira Mono", monospace;border-radius:2px;cursor:pointer}.form-actions input[type=submit]:hover{background:#608bc0}.snippet-options{padding:1rem 2rem;font-size:.9rem}.snippet-options a:link,.snippet-options a:visited{margin:0 .2em}.snippet-options a:hover,.snippet-options a:active{text-decoration:underline}.snippet-reply h2{background-color:white;padding:1rem 2rem;padding-bottom:0;margin:0;font-size:1.5rem;font-weight:500}.snippet-reply[data-hidden=yes]{opacity:0.3;cursor:pointer}.snippet-reply[data-hidden=yes] *{cursor:pointer}.snippet-text{color:#666;font-size:16px;line-height:24px;max-width:620px;font-family:Helvetica, FreeSerif, serif;font-weight:300}.snippet-code{background:#232829;color:#f8f8f2;font-family:"SF Mono","Fira Mono",Monaco,Menlo,Consolas,"Courier New",monospace;font-size:0.8rem;font-weight:300;line-height:1.1rem;padding:1rem 0}.snippet-code.wordwrap{overflow:auto;white-space:nowrap}.snippet-code ol{margin:0 0 0 2rem}.snippet-code ol li{color:#aaa;cursor:pointer}.snippet-code ol li.marked{color:#f4f409;background-color:rgba(244,244,9,0.2)}.snippet-list{padding:1rem 2rem}.snippet-list dt:not(:first-child){margin-top:1rem}.snippet-list dt:last-child{margin-top:2rem}.snippet-list dd{font-family:"SF Mono","Fira Mono",Monaco,Menlo,Consolas,"Courier New",monospace;font-size:.9rem}.page{padding:1rem 2rem;background-color:white;color:#444}.page table th{text-align:left}.snippet-code .gd{background-color:rgba(226,12,19,0.3);color:#fff;display:block}.snippet-code .gi{background-color:rgba(23,189,10,0.2);color:#fff;display:block}.snippet-code .hll{background-color:#49483e}.snippet-code .c{color:#75715e}.snippet-code .err{color:#960050;background-color:#1e0010}.snippet-code .k{color:#66d9ef}.snippet-code .l{color:#ae81ff}.snippet-code .n{color:#f8f8f2}.snippet-code .o{color:#f92672}.snippet-code .p{color:#f8f8f2}.snippet-code .cm{color:#75715e}.snippet-code .cp{color:#75715e}.snippet-code .c1{color:#75715e}.snippet-code .cs{color:#75715e}.snippet-code .ge{font-style:italic}.snippet-code .gs{font-weight:bold}.snippet-code .kc{color:#66d9ef}.snippet-code .kd{color:#66d9ef}.snippet-code .kn{color:#f92672}.snippet-code .kp{color:#66d9ef}.snippet-code .kr{color:#66d9ef}.snippet-code .kt{color:#66d9ef}.snippet-code .ld{color:#e6db74}.snippet-code .m{color:#ae81ff}.snippet-code .s{color:#e6db74}.snippet-code .na{color:#a6e22e}.snippet-code .nb{color:#f8f8f2}.snippet-code .nc{color:#a6e22e}.snippet-code .no{color:#66d9ef}.snippet-code .nd{color:#a6e22e}.snippet-code .ni{color:#f8f8f2}.snippet-code .ne{color:#a6e22e}.snippet-code .nf{color:#a6e22e}.snippet-code .nl{color:#f8f8f2}.snippet-code .nn{color:#f8f8f2}.snippet-code .nx{color:#a6e22e}.snippet-code .py{color:#f8f8f2}.snippet-code .nt{color:#f92672}.snippet-code .nv{color:#f8f8f2}.snippet-code .ow{color:#f92672}.snippet-code .w{color:#f8f8f2}.snippet-code .mf{color:#ae81ff}.snippet-code .mh{color:#ae81ff}.snippet-code .mi{color:#ae81ff}.snippet-code .mo{color:#ae81ff}.snippet-code .sb{color:#e6db74}.snippet-code .sc{color:#e6db74}.snippet-code .sd{color:#e6db74}.snippet-code .s2{color:#e6db74}.snippet-code .se{color:#ae81ff}.snippet-code .sh{color:#e6db74}.snippet-code .si{color:#e6db74}.snippet-code .sx{color:#e6db74}.snippet-code .sr{color:#e6db74}.snippet-code .s1{color:#e6db74}.snippet-code .ss{color:#e6db74}.snippet-code .bp{color:#f8f8f2}.snippet-code .vc{color:#f8f8f2}.snippet-code .vg{color:#f8f8f2}.snippet-code .vi{color:#f8f8f2}.snippet-code .il{color:#ae81ff} diff --git a/dpaste/templates/dpaste/snippet_details.html b/dpaste/templates/dpaste/snippet_details.html index 96d2fd6..2e631d0 100644 --- a/dpaste/templates/dpaste/snippet_details.html +++ b/dpaste/templates/dpaste/snippet_details.html @@ -98,12 +98,12 @@ } } - let lines = document.querySelectorAll('.code li'); + let lines = document.querySelectorAll('.snippet-code li'); lines.forEach(function(el){ el.onclick = function(e) { el.classList.toggle('marked'); let hash = 'L'; - let marked = document.querySelectorAll('.code li.marked'); + let marked = document.querySelectorAll('.snippet-code li.marked'); marked.forEach(function(line){ if (hash !== 'L') hash += ',';