Improved image posts scaling
This commit is contained in:
parent
57d6d76386
commit
c4489a14b8
3 changed files with 16 additions and 6 deletions
1
TODO
1
TODO
|
@ -11,7 +11,6 @@ first major release.
|
||||||
- tags: add tag edit snapshots (backed-only)
|
- tags: add tag edit snapshots (backed-only)
|
||||||
- add /history
|
- add /history
|
||||||
- fix post notes on scaled posts
|
- fix post notes on scaled posts
|
||||||
- fix image size not being respected
|
|
||||||
|
|
||||||
refactors:
|
refactors:
|
||||||
- add enum validation in IValidatables (needs refactors of enums and
|
- add enum validation in IValidatables (needs refactors of enums and
|
||||||
|
|
|
@ -2,9 +2,15 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-type-image img {
|
.post-type-image .image-wrapper {
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.post-type-image .image-wrapper img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-type-youtube iframe {
|
.post-type-youtube iframe {
|
||||||
|
@ -154,7 +160,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: rgba(255, 255, 255, 0.8);
|
background: rgba(255, 255, 255, 0.8);
|
||||||
box-shadow: 0 0 1em 0.5em rgba(255, 255, 255, 0.8);
|
box-shadow: 0 0 1em 0.5em rgba(255, 255, 255, 0.8);
|
||||||
z-index: 1;
|
z-index: 2;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#post-view>* {
|
#post-view>* {
|
||||||
|
@ -173,12 +179,14 @@
|
||||||
|
|
||||||
.post-content {
|
.post-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
.post-notes-target,
|
.post-notes-target,
|
||||||
.post-notes {
|
.post-notes {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.post-notes {
|
.post-notes {
|
||||||
|
z-index: 1;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -190,7 +198,7 @@
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 3;
|
||||||
background: white;
|
background: white;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
|
|
@ -6,7 +6,10 @@
|
||||||
|
|
||||||
<% if (post.contentType === 'image') { %>
|
<% if (post.contentType === 'image') { %>
|
||||||
|
|
||||||
<img alt="<%= post.name %>" src="<%= postContentUrl %>"/>
|
<div class="image-wrapper" style="width: <%= post.imageWidth %>px">
|
||||||
|
<img alt="<%= post.name %>" src="<%= postContentUrl %>"/>
|
||||||
|
<div style="padding-top: calc(100% * <%= post.imageHeight %> / <%= post.imageWidth %>)"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<% } else if (post.contentType === 'youtube') { %>
|
<% } else if (post.contentType === 'youtube') { %>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue