summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorWu Cheng-Han2015-09-25 18:55:56 +0800
committerWu Cheng-Han2015-09-25 18:55:56 +0800
commitbb8a0da71fab249d8b7f1e66c46f889e69feb813 (patch)
treea4c5d10af4abf0a7094f9db47f2c2d23195dac50 /public
parent2493c8f986c35bd9a51e450ac794189e2d5c173b (diff)
Added support of print and unselectable styles, updated vimeo and youtube parsing method for this
Diffstat (limited to '')
-rw-r--r--public/css/extra.css41
-rw-r--r--public/css/index.css15
-rw-r--r--public/js/extra.js8
-rw-r--r--public/views/body.ejs8
-rw-r--r--public/views/header.ejs6
-rw-r--r--public/views/pretty.ejs6
6 files changed, 58 insertions, 26 deletions
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 = '<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 7696c9b2..f47cf175 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 a1d31430..88e63374 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">&nbsp;</div>
<div class="visible-sm">&nbsp;</div>
<div class="visible-md">&nbsp;</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 0004bb7c..b8b5d9d4 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>