Search box no longer centered

LPCLPC Major GrinsPosts: 474Registered Users Major grins

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?

Comments

  • leftquarkleftquark SmugMug Product Team Posts: 3,107Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    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

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 3,107Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    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.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • LPCLPC Major Grins Posts: 474Registered Users Major grins
    edited January 12, 2018

    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?

  • LPCLPC Major Grins Posts: 474Registered Users Major grins

    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

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,343Registered Users Major grins

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

    Al - Just a volunteer here having fun
    My Website | My Blog
  • JtringJtring Major grins CaliforniaPosts: 412Registered Users Major grins

    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:

    Jim Ringland . . . . . jtringl.smugmug.com
  • LPCLPC Major Grins Posts: 474Registered Users Major grins

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

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 3,800Registered Users Major grins
    edited January 23, 2018

    @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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 3,800Registered Users Major grins

    @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.

  • JtringJtring Major grins CaliforniaPosts: 412Registered Users Major grins
    edited January 23, 2018

    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.

    Jim Ringland . . . . . jtringl.smugmug.com
  • leftquarkleftquark SmugMug Product Team Posts: 3,107Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    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.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • LPCLPC Major Grins Posts: 474Registered Users Major grins

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

  • leftquarkleftquark SmugMug Product Team Posts: 3,107Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    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.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AJLemosAJLemos EarthPosts: 12Registered Users SmugMug Employee

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

  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 11,688Super Moderators moderator
    edited January 24, 2018

    @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.

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,343Registered Users Major grins

    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/

    Al - Just a volunteer here having fun
    My Website | My Blog
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 11,688Super Moderators moderator
    edited January 24, 2018

    @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.

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,343Registered Users Major grins

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

    Al - Just a volunteer here having fun
    My Website | My Blog
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 11,688Super Moderators moderator

    @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.

  • leftquarkleftquark SmugMug Product Team Posts: 3,107Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    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).

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 11,688Super Moderators moderator

    @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.

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,343Registered Users Major grins
    edited January 25, 2018

    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;
    }
    
    Al - Just a volunteer here having fun
    My Website | My Blog
  • leftquarkleftquark SmugMug Product Team Posts: 3,107Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

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

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,343Registered Users Major grins

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

    Al - Just a volunteer here having fun
    My Website | My Blog
  • AJLemosAJLemos EarthPosts: 12Registered Users SmugMug Employee

    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.

  • LPCLPC Major Grins Posts: 474Registered Users Major grins

    Beautiful, thank you :)

  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 11,688Super Moderators moderator

    @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!

Sign In or Register to comment.