Skip to main content
Topic: Attachment slightly misaligned at low res (Read 2473 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Attachment slightly misaligned at low res

When the names are "long" at low res the attachments thumbnails are slightly misaligned and a bit random.
Bugs creator.
Features destroyer.
Template killer.

Re: Attachment slightly misaligned at low res

Reply #1

They were misaligned at normal res as well !

For a test I updated the css on the site to see what could be done so you can see it now.  I think its better but there is to much white space between the rows.

This is due to the way I did the markup with floats, which made me add a min-height to the divs (which is a hack) to force an image to a new row when its time for a new row (since we don't create any rows in the markup) ... Should be a better way though.

Re: Attachment slightly misaligned at low res

Reply #2

Did some more playing around and added the changes to the site for feedback.

I now have the images with a max-width:100% so they are fluid in their little containers.  Now they shrink as the screen narrows to try and maintain the block layout.  After every 4th I used a pseudo element (non breaking space with a block display to force a new line).  Now they try to stay 4 in a row and shrink as needed which some folks may not like.

Still some oddities for sure, but better I feel.  Thoughts?

Code: [Select]
.attachments {
padding: 10px 0 0;
clear: both;
margin: 0 auto;
}
.attachments .attachment {
box-sizing: border-box;
position: relative;
min-height: 1px;
padding: 0 5px;
display: inline-block;
vertical-align: top;
width: 24%;
margin-bottom: 5px;
}
.attachment_thumb  {
margin-bottom: 20px;
}
.attachment_thumb  img {
max-width: 100%;
height: auto !important;
}
.attachment_thumb, .attachment_name {
margin: 0 auto;
padding: 4px;
text-align: center;
display: block;
vertical-align: middle;
}
Last Edit: December 20, 2014, 07:44:47 pm by Spuds

Re: Attachment slightly misaligned at low res

Reply #3

Yup, much better!
Still some oddity depending on the height of the container, but better.

What do you think of a:
Code: [Select]
display: inline-block;
vertical-align: top;
width: 24%;
instead of the:
Code: [Select]
float: left;
width: 25%;
in .attachments .attachment?
Bugs creator.
Features destroyer.
Template killer.

Re: Attachment slightly misaligned at low res

Reply #4

Ah ... very nice, can drop the pseudo element as well since that was only needed for the float.

Its live now,

ETA: Updated the code block above as well

Re: Attachment slightly misaligned at low res

Reply #5

I've noticed that the new markup prevents our rather basic expandThumb from working as the link itself is constrained.  So it may be time for a poor mans lightbox to replace that function, and here it is:
Code: [Select]
function expandThumb(thumbID)
{
var link = document.getElementById('link_' + thumbID);

// Create the lightbox container if needed
if ($('#elk_lightbox').length <= 0)
$('body').append('<div id="elk_lightbox"><div id="elk_lb_content"></div></div>');

// Load and Show the lightbox window
$('#elk_lb_content').html('<div style="position:fixed;left:50%;top:50%;"><i class="fa fa-spinner fa-spin fa-4x"></i><div>');
$('#elk_lightbox').fadeIn(200);

// Fetch the image, replace the spinner with it when it arrives
$('<img id="elk_lb_img" src="' + link.href + '">')
.load(function() {
$(this).css({'max-height':$(window).height() - 40});
$('#elk_lb_content').html($(this));
})
.error(function() {
// Perhaps a message, but for now make it look like we tried and failed
setTimeout(function() { $("#elk_lightbox").hide();$('#elk_lb_content').html(''); }, 1500);
$(window).off('resize.expandThumb');
});

// Click anywhere on the page to close the lightbox window
$('#elk_lightbox').on('click', function(event) {
event.preventDefault();
$('#elk_lightbox').hide();
$('#elk_lb_content').html('');
$(window).off('resize.expandThumb');
});

// Hit escape to close it as well
$(window).on('keydown', function(event) {
console.log(event.keyCode);
if (event.keyCode === 27 ) {
event.preventDefault();
$('#elk_lightbox').hide();
$('#elk_lb_content').html('');
$(window).off('resize.expandThumb');
}
});

// Make the image size fluid as the browser window changes
$(window).on('resize.expandThumb', function() {
$('#elk_lb_img').css({'max-height':$(window).height() - 40});
});

return false;
}
I've put this on the site for testing and feedback.
Last Edit: January 19, 2015, 08:56:53 pm by Spuds

Re: Attachment slightly misaligned at low res

Reply #6

Made some minor adjustments to the simple lightbox and updated the code above. 

The options I see are
a) live with the old css and sometimes defunct layout
b) use the new layout and some updated expand thumb like above
c) use the new layout and update the existing expand "in place: with some parent()parent() calls to set the container 100%
d) try some other layout that works with the existing expand thumb

Re: Attachment slightly misaligned at low res

Reply #7

I missed the code last time I checked! xD
 emanuele is blind. lol

Anyway, I forgot to say that the lightbox is WOW!
And I like it much more than the existing expand.

I'm not sure I understood the layout problems...
You mean that do the lightbox-like "properly" it requires some changes to the template?
Bugs creator.
Features destroyer.
Template killer.

Re: Attachment slightly misaligned at low res

Reply #8

The lightbox function I posted does not require any template changes, it should work with most any layout since its adding its own div's to the DOM and populating those with the image. 

The negative is you have to close an image in order to get to the next image.  That could be improved, but I made it as basic as possible, short and easy.  Much more than that and it would probably be easier to pick one of the many available ones.

The existing expand_thumb swaps the image src with the full size image src (swaps the image thumbnail with the link).  The "problem" is with the new layout above we have the images well contained with the 24% width, so nothing happens when clicked. (well the thumbnail actually visually degrades since its a css thumbnail size full image at that point). 

In order to have it expand "in place" you  would need to manipulate the DOM to allow that, I'm guessing setting the 24 to 100 may do that, maybe.  That would act more like the old expand, where the image expands in place and moves all the other thumbnails / content around in doing so.  But you could open each thumbnail on the page if you were so inclined.

Am I making any sense at all lol.

Re: Attachment slightly misaligned at low res

Reply #9

Ahhh!!
Sorry, I didn't connect the two previous posts in my mind... :-[

I tend to prefer the current lightbox-like than the expand "in-place" even if it is not a fully-fledged lightbox with tons of bloating.
Yes, it is slightly limiting (for example when comparing two different screenshots), but... dunno, let's see what others think.
To me it can be a 1.0.3, then in 1.1 a more "flexible" lightbox can be considered.
Bugs creator.
Features destroyer.
Template killer.

Re: Attachment slightly misaligned at low res

Reply #10

Before I forgot about this, I've put things back to 1.0.2 levels. I don't think there is any need for this in 1.0.3 can revisit what/if we want to do on 1.1.  Updated the post with the js that was used, forgot to copy the css but oh well easy to recreate if needed.

Re: Attachment slightly misaligned at low res

Reply #11

Okay... :(

 emanuele waits for some cool stuff from Spuds for 1.1 now. :P
Bugs creator.
Features destroyer.
Template killer.

 

Re: Attachment slightly misaligned at low res

Reply #12

Just cleaning things up.  I liked it to, however I don't think much testing was occurring other than the few posts here that had attachments, so unfortunately to the circular file cabinet it goes !