depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update to hide scrollbar (but scrollable) in the slide mode

Browse source
This commit is contained in:
Wu Cheng-Han 2016-08-15 11:30:12 +08:00
parent 29d198def9
commit 058c35730b
3 changed files with 49 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public/css/slide.css
View file

@ -280,6 +280,25 @@ pre.mermaid > svg {
max-width: 758px;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}
.container.hidescrollbar {
right: -17px;
}
.reveal {
height: 100vh;
}

4
public/js/slide.js
View file

@ -110,3 +110,7 @@ Reveal.addEventListener('ready', function (event) {
}, 0);
});
Reveal.addEventListener('slidechanged', renderSlide);
var isMacLike = navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) ? true : false;
if (!isMacLike) $('.container').addClass('hidescrollbar');

51
public/views/slide.ejs
View file

@ -46,33 +46,34 @@
</script>
</head>
<body>
<div class="reveal">
<div class="slides"><%- slides %></div>
</div>
<div id="meta" style="display: none;"><%- meta %></div>
<div class="footer">
<div class="unselectable hidden-print" style="color: #777;">
<small>
<span>
<% if(lastchangeuserprofile) { %>
<span class="ui-lastchangeuser">&thinsp;<i class="ui-user-icon small" style="background-image: url(<%- lastchangeuserprofile.photo %>);" data-toggle="tooltip" data-placement="right" title="<%- lastchangeuserprofile.name %>"></i></span>
<% } else { %>
<span class="ui-no-lastchangeuser">&thinsp;<i class="fa fa-clock-o"></i></span>
<% } %>
&nbsp;<span class="text-uppercase ui-status-lastchange"></span>
<span class="ui-lastchange text-uppercase" data-createtime="<%- createtime %>" data-updatetime="<%- updatetime %>"></span>
</span>
<span class="pull-right"><%- viewcount %> views <a href="#" class="ui-edit" title="Edit this note"><i class="fa fa-fw fa-pencil"></i></a></span>
</small>
<div class="container">
<div class="reveal">
<div class="slides"><%- slides %></div>
</div>
<% if(typeof disqus !== 'undefined' && disqus) { %>
<div style="margin-top: 25px; margin-bottom: 15px;">
<%- include disqus %>
<div id="meta" style="display: none;"><%- meta %></div>
<div class="footer">
<div class="unselectable hidden-print" style="color: #777;">
<small>
<span>
<% if(lastchangeuserprofile) { %>
<span class="ui-lastchangeuser">&thinsp;<i class="ui-user-icon small" style="background-image: url(<%- lastchangeuserprofile.photo %>);" data-toggle="tooltip" data-placement="right" title="<%- lastchangeuserprofile.name %>"></i></span>
<% } else { %>
<span class="ui-no-lastchangeuser">&thinsp;<i class="fa fa-clock-o"></i></span>
<% } %>
&nbsp;<span class="text-uppercase ui-status-lastchange"></span>
<span class="ui-lastchange text-uppercase" data-createtime="<%- createtime %>" data-updatetime="<%- updatetime %>"></span>
</span>
<span class="pull-right"><%- viewcount %> views <a href="#" class="ui-edit" title="Edit this note"><i class="fa fa-fw fa-pencil"></i></a></span>
</small>
</div>
<% if(typeof disqus !== 'undefined' && disqus) { %>
<div style="margin-top: 25px; margin-bottom: 15px;">
<%- include disqus %>
</div>
<% } %>
</div>
<% } %>
</div>
<script type="text/x-mathjax-config">