From bb8a0da71fab249d8b7f1e66c46f889e69feb813 Mon Sep 17 00:00:00 2001 From: Wu Cheng-Han Date: Fri, 25 Sep 2015 18:55:56 +0800 Subject: Added support of print and unselectable styles, updated vimeo and youtube parsing method for this --- public/css/extra.css | 41 +++++++++++++++++++++++++++++++++++------ public/css/index.css | 15 ++++++++------- public/js/extra.js | 8 +++++--- public/views/body.ejs | 8 ++++---- public/views/header.ejs | 6 +++--- public/views/pretty.ejs | 6 +++--- 6 files changed, 58 insertions(+), 26 deletions(-) (limited to 'public') diff --git a/public/css/extra.css b/public/css/extra.css index 6d9d137f..12be9f4b 100644 --- a/public/css/extra.css +++ b/public/css/extra.css @@ -2,6 +2,7 @@ .vimeo, .youtube { + position: relative; cursor: pointer; display: table; max-width: 540px; @@ -11,17 +12,28 @@ background-size: contain; background-color: black; } +.vimeo img, +.youtube img { + position: absolute; + margin: auto; + top: 0; + left: 0; + right: 0; + bottom: 0; +} .vimeo .icon, .youtube .icon { - opacity: 0.3; - display: table-cell; - vertical-align: middle; - height: inherit; - margin: 0 auto; + position: absolute; + height: auto; + width: auto; + top: 50%; + left: 50%; + margin-top: -40px; + margin-left: -40px; color: white; + opacity: 0.3; -webkit-transition: opacity 0.2s; /* Safari */ transition: opacity 0.2s; - } .vimeo:hover .icon, .youtube:hover .icon { @@ -214,4 +226,21 @@ small .dropdown { small .dropdown a:focus, small .dropdown a:hover { text-decoration: none; +} + +.unselectable { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + user-select: none; +} + +@media print { + div, table, img, pre, blockquote { + page-break-inside: avoid !important; + } + a[href]:after { + font-size: 12px !important; + } } \ No newline at end of file diff --git a/public/css/index.css b/public/css/index.css index 2c0e4c04..ab5605d2 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -209,13 +209,6 @@ div[contenteditable]:empty:not(:focus):before{ .CodeMirror-scrollbar-filler { background: inherit; } -.unselectable { - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - user-select: none; -} .btn-file { position: relative; @@ -295,4 +288,12 @@ div[contenteditable]:empty:not(:focus):before{ overflow: hidden; text-overflow: ellipsis; } + +@media print { + body { + padding-top: 0 !important; + } + .CodeMirror { + height: auto !important; + } } \ No newline at end of file diff --git a/public/js/extra.js b/public/js/extra.js index 3ad78c9a..cb6676bc 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -117,7 +117,8 @@ function finishView(view) { dataType: 'jsonp', success: function (data) { var thumbnail_src = data[0].thumbnail_large; - $(value).css('background-image', 'url(' + thumbnail_src + ')'); + var image = ''; + $(value).prepend(image); } }); }); @@ -496,10 +497,11 @@ var youtubePlugin = new Plugin( var div = $('
'); setSizebyAttr(div, div); div.attr('videoid', videoid); + var thumbnail_src = '//img.youtube.com/vi/' + videoid + '/hqdefault.jpg'; + var image = ''; + div.append(image); var icon = ''; div.append(icon); - var thumbnail_src = '//img.youtube.com/vi/' + videoid + '/hqdefault.jpg'; - div.css('background-image', 'url(' + thumbnail_src + ')'); return div[0].outerHTML; } ); diff --git a/public/views/body.ejs b/public/views/body.ejs index 7696c9b2..f47cf175 100644 --- a/public/views/body.ejs +++ b/public/views/body.ejs @@ -1,9 +1,9 @@