Search box no longer centered

LPC

The search box on my search page has moved off to the left

http://www.laurencecounter.com/search

Has anything changed that would break the CSS I have there to center it?

leftquark

Hi @LPC,
We announced changes to the buttons the other day, and are providing some updated CSS here: https://dgrin.com/discussion/263083/button-updates

leftquark

I went in and commented out 2 lines of CSS in your CSS content block, which restored the center align of the search boxes. Let me know if you'd like it to look differently and I can help you get it back to how you had it.

LPC

That's great, thank you. I missed the post about the button changes. That probably explains why the font size and button alignment in the 'Year' area of this page looks different to everything else on that page - http://www.laurencecounter.com/date

Can that be changed?

LPC

Also just noticed, when I now search and get results (search for 'June' for example), the search box still gets bumped off to the left.

http://www.laurencecounter.com/search#q=june

Allen

Why was this button change NOT made to only apply specifically for lightbox pages?

Jtring

While we are dealing with the search box, I notice that where I've added a search widget to a page, the search button has a light gray background, the same color as the search field, until something is entered in the latter. Then the button background turns blue, the accent color in my theme. That's unlike what happens on the search page where the button is blue even when the search field is empty. I think that search widget behavior is new. It's an obvious inconsistency in the look-and-feel. Somewhat worse, that gray button could be a bit of a problem because it may not be 100% obvious to an unfamiliar user that it is a button or how to deal with the pair of empty search box and button of the same color. The search page and the password page, both places where there is a field to be entered and a button to be pushed, offer no such confusion.

Links to examples:

• Search widget on my 404 page: https://jtringl.smugmug.com/404
• Search page: https://jtringl.smugmug.com/search

LPC

So can anything be done about this please? It looks really bad.

Hikin' Mike

@LPC said:
So can anything be done about this please? It looks really bad.

I don't know if/when SM will fix that, but for now you can add this:

/**
* Spacing for Date Buttons Only
***************************************************/
.sm-user-ui .sm-page-date-years .sm-button-size-small,
.sm-user-ui .sm-page-date-years .sm-button+.sm-button {
    margin: 5px 10px 5px 0;
    }

You can edit the spacing as follows margin: top right bottom left

Hikin' Mike

@leftquark said:
Hi @LPC,
We announced changes to the buttons the other day, and are providing some updated CSS here: https://dgrin.com/discussion/263083/button-updates

Not a big deal as I don't display my search page, but mine isn't centered and I don't have any custom CSS in mine.

Jtring

That is pretty sloppy, isn't it? SmugMug's designers should be able to do better than this.

Until this fit-and-finish bug gets cleaned up, I dropped this into my site's custom CSS:

/* DATE PAGE
------------
Tidy up year boxes at the top of the page.  2018-01-23*/
.sm-page-date-years .sm-button {
    margin-left:8px;   
    min-width:130px;
}

The margin-left was present for all the boxes except the first one; this adds common margin to all.

SM had a minimum box width of 120px. With that, years with 999 pictures or fewer produced boxes that were 120px wide but years with 1000 pictures or more produced boxes about 127px wide. That contributed to the offsets. This makes all the boxes a nicely-align able 130px wide. Note this will break if you have more than 10,000 pictures in any one year. A number larger than 130 would be needed.

leftquark

We spent a while testing the button change, since it had such a big impact on many, many, many places around SmugMug. It's a bummer we missed this one, but I think the team did a great job making sure we caught almost all of the places where the button could have some display issues.

I've passed this along to the engineering team to slot in for the fix.

LPC

Thanks everyone, I will tweak the CSS later today. Thanks for your help.

leftquark

We'll have a fix for the date page out shortly. Wrapping up the fix now, it'll go for a quick round of QA, and then should be live.

AJLemos

Thank you for bringing this to our attention. We have pushed out a patch and your date page should be looking better than ever.

denisegoldberg

@AJLemos said:
Thank you for bringing this to our attention. We have pushed out a patch and your date page should be looking better than ever.

It's better than it was but not perfect. I think the boxes should all be aligned; as it is it still looks sloppy.

I have reapplied the CSS that @Jtring supplied above to fix the issue.

Allen

It works perfect here. What did you change it to?
I changed to 140 to work for 10,000 photos. Probably should use that as don't think many have 100,000 per year or maybe do?
https://www.photosbyat.com/date/

denisegoldberg

@Allen said:
It works perfect here. What did you change it to?
I changed to 140 to work for 10,000 photos. Probably should use that as don't think many have 100,000 per year or maybe do?
https://www.photosbyat.com/date/

The code that @Jtring supplied worked perfectly.

When @AJLemos indicated that smug had implemented a fix I removed the code. Unfortunately the smugmug-applied fix doesn't correct the problem.

Allen

I just commented out the fix I applied and the boxes went bonkers. So Smug's fix failed.
Reapplied mine and back to good.

denisegoldberg

@Allen said:
I just commented out the fix I applied and the boxes went bonkers. So Smug's fix failed.
Reapplied mine and back to good.

Yup. I just reapplied the fix and it looks good again.

leftquark

The length of the boxes is inconsistent due to the fact that it shows the # of photos for each year, and the length of the # may be different. Would y'all mind posting a screenshot of what you mean when it "went bonkers"? I've checked the fix that AJ pushed on my own site, as well as some others and things appear fixed (though don't perfectly align, which I'm personally OK with).

denisegoldberg

@leftquark said:
The length of the boxes is inconsistent due to the fact that it shows the # of photos for each year, and the length of the # may be different. Would y'all mind posting a screenshot of what you mean when it "went bonkers"? I've checked the fix that AJ pushed on my own site, as well as some others and things appear fixed (though don't perfectly align, which I'm personally OK with).

Screen shot from my site is shown above. While it is better than it was before the fix, I think it looks better with the boxes aligned.

Allen

I can resize the page all over and the boxes stay equal.
https://www.photosbyat.com/date/

/* DATE PAGE
------------
Tidy up year boxes at the top of the page.  2018-01-23*/
.sm-page-date-years .sm-button {
    margin-left:8px;   
    min-width:140px;
}

leftquark

We'll be pushing a min width for the date buttons shortly. Thanks AJ!

Allen

Haha got'a be logged in to see above 10K. Guess hidden family just as big as public photos.

AJLemos

We've applied a min-width of 140px on the year buttons on the /date page. They now align as a grid when wrapping as long as each year has less than 99999 photos. Thanks for the input.

LPC

Beautiful, thank you

denisegoldberg

@AJLemos said:
We've applied a min-width of 140px on the year buttons on the /date page. They now align as a grid when wrapping as long as each year has less than 99999 photos. Thanks for the input.

Thank you, that looks good!