ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/posts: fix resize modes on chrome

Browse source
This commit is contained in:
rr- 2017-01-03 20:00:41 +01:00
parent e2fcd08ce9
commit 4340b4d9b2
4 changed files with 12 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
client/css/post-content-control.styl
View file

@ -8,16 +8,7 @@
margin: 0 auto margin: 0 auto
position: relative position: relative
img, object, video, .post-overlay .resize-listener
position: absolute
height: 100%
width: 100%
left: 0
right: 0
top: 0
bottom: 0
.post-overlay>*
position: absolute position: absolute
left: 0 left: 0
right: 0 right: 0

7
client/html/post_content.tpl
View file

@ -1,11 +1,11 @@
<div class='post-content post-type-<%- ctx.post.type %>'> <div class='post-content post-type-<%- ctx.post.type %>'>
<% if (['image', 'animation'].includes(ctx.post.type)) { %> <% if (['image', 'animation'].includes(ctx.post.type)) { %>
<img alt='' src='<%- ctx.post.contentUrl %>'/> <img class='resize-listener' alt='' src='<%- ctx.post.contentUrl %>'/>
<% } else if (ctx.post.type === 'flash') { %> <% } else if (ctx.post.type === 'flash') { %>
<object width='<%- ctx.post.canvasWidth %>' height='<%- ctx.post.canvasHeight %>' data='<%- ctx.post.contentUrl %>'> <object class='resize-listener' width='<%- ctx.post.canvasWidth %>' height='<%- ctx.post.canvasHeight %>' data='<%- ctx.post.contentUrl %>'>
<param name='wmode' value='opaque'/> <param name='wmode' value='opaque'/>
<param name='movie' value='<%- ctx.post.contentUrl %>'/> <param name='movie' value='<%- ctx.post.contentUrl %>'/>
</object> </object>
@ -14,6 +14,7 @@
<%= ctx.makeElement( <%= ctx.makeElement(
'video', { 'video', {
class: 'resize-listener',
controls: true, controls: true,
loop: (ctx.post.flags || []).includes('loop'), loop: (ctx.post.flags || []).includes('loop'),
autoplay: ctx.autoplay, autoplay: ctx.autoplay,
@ -27,6 +28,6 @@
<% } else { console.log(new Error('Unknown post type')); } %> <% } else { console.log(new Error('Unknown post type')); } %>
<div class='post-overlay'> <div class='post-overlay resize-listener'>
</div> </div>
</div> </div>

8
client/js/controls/post_content_control.js
View file

@ -86,8 +86,12 @@ class PostContentControl {
} }
_resize(width, height) { _resize(width, height) {
this._postContentNode.style.width = width + 'px'; const resizeListenerNodes = [this._postContentNode].concat(
this._postContentNode.style.height = height + 'px'; ...this._postContentNode.querySelectorAll('.resize-listener'));
for (let node of resizeListenerNodes) {
node.style.width = width + 'px';
node.style.height = height + 'px';
}
} }
_refreshSize() { _refreshSize() {

1
client/js/controls/post_notes_overlay_control.js
View file

@ -547,6 +547,7 @@ class PostNotesOverlayControl extends events.EventTarget {
this._hostNode = hostNode; this._hostNode = hostNode;
this._svgNode = document.createElementNS(svgNS, 'svg'); this._svgNode = document.createElementNS(svgNS, 'svg');
this._svgNode.classList.add('resize-listener');
this._svgNode.classList.add('notes-overlay'); this._svgNode.classList.add('notes-overlay');
this._svgNode.setAttribute('preserveAspectRatio', 'none'); this._svgNode.setAttribute('preserveAspectRatio', 'none');
this._svgNode.setAttribute('viewBox', '0 0 1 1'); this._svgNode.setAttribute('viewBox', '0 0 1 1');