From bb8a0da71fab249d8b7f1e66c46f889e69feb813 Mon Sep 17 00:00:00 2001
From: Wu Cheng-Han <jacky_cute0808@hotmail.com>
Date: Fri, 25 Sep 2015 18:55:56 +0800
Subject: [PATCH] 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(-)
diff --git a/public/css/extra.css b/public/css/extra.css
index 6d9d137..12be9f4 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 2c0e4c0..ab5605d 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 3ad78c9..cb6676b 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 = '<img src="' + thumbnail_src + '" />';
+ $(value).prepend(image);
}
});
});
@@ -496,10 +497,11 @@ var youtubePlugin = new Plugin(
var div = $('<div class="youtube raw"></div>');
setSizebyAttr(div, div);
div.attr('videoid', videoid);
+ var thumbnail_src = '//img.youtube.com/vi/' + videoid + '/hqdefault.jpg';
+ var image = '<img src="' + thumbnail_src + '" />';
+ div.append(image);
var icon = '<i class="icon fa fa-youtube-play fa-5x"></i>';
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 7696c9b..f47cf17 100644
--- a/public/views/body.ejs
+++ b/public/views/body.ejs
@@ -1,9 +1,9 @@
<div class="row ui-content" style="display: none;">
- <div class="ui-edit-area">
+ <div class="ui-edit-area unselectable">
<textarea id="textit"></textarea>
</div>
<div class="ui-view-area">
- <div class="ui-infobar container-fluid">
+ <div class="ui-infobar container-fluid unselectable hidden-print">
<small>
<span class="ui-lastchange text-uppercase"></span>
<span class="ui-permission dropdown pull-right">
@@ -18,7 +18,7 @@
</small>
</div>
<div id="doc" class="markdown-body container-fluid"></div>
- <div class="ui-toc dropup" style="display:none;">
+ <div class="ui-toc dropup unselectable hidden-print" style="display:none;">
<div class="pull-right dropdown">
<a id="tocLabel" class="ui-toc-label btn btn-default" data-target="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
<i class="fa fa-bars"></i>
@@ -27,7 +27,7 @@
</ul>
</div>
</div>
- <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown" data-spy="affix" style="top:50px;display:none;"></div>
+ <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:51px;display:none;"></div>
</div>
</div>
<div class="modal fade" id="clipboardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
diff --git a/public/views/header.ejs b/public/views/header.ejs
index a1d3143..88e6337 100644
--- a/public/views/header.ejs
+++ b/public/views/header.ejs
@@ -1,7 +1,7 @@
-<nav class="hidden-print navbar navbar-default navbar-fixed-top unselectable">
+<nav class="navbar navbar-default navbar-fixed-top unselectable hidden-print">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
- <span class="pull-right" style="margin-top: 17px; color: #777;">
+ <span class="pull-right" style="margin-top: 17px; color: #777;">
<div class="visible-xs"> </div>
<div class="visible-sm"> </div>
<div class="visible-md"> </div>
@@ -110,4 +110,4 @@
</ul>
</div>
</nav>
-<div class="ui-spinner"></div>
\ No newline at end of file
+<div class="ui-spinner unselectable hidden-print"></div>
\ No newline at end of file
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index 0004bb7..b8b5d9d 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -28,7 +28,7 @@
</head>
<body style="display:none;">
- <div class="ui-infobar container-fluid">
+ <div class="ui-infobar container-fluid unselectable hidden-print">
<small>
<span class="ui-lastchange text-uppercase"><%- updatetime %></span>
<span class="pull-right"><%- viewcount %> views <a href="#" class="ui-edit" title="Edit this note"><i class="fa fa-pencil"></i></a></span>
@@ -37,7 +37,7 @@
<div id="doc" class="container markdown-body">
<%- body %>
</div>
- <div class="ui-toc dropup" style="display:none;">
+ <div class="ui-toc dropup unselectable hidden-print" style="display:none;">
<div class="pull-right dropdown">
<a id="tocLabel" class="ui-toc-label btn btn-default" data-target="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
<i class="fa fa-bars"></i>
@@ -46,7 +46,7 @@
</ul>
</div>
</div>
- <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown" data-spy="affix" style="display:none;"></div>
+ <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="display:none;"></div>
</body>
</html>