WordPress.org

Making WordPress.org

Opened 3 years ago

Closed 23 months ago

Last modified 23 months ago

#2211 closed defect (fixed)

Profile Image bottom spacing

Reported by: f.staude Owned by: iandunn
Milestone: Priority: normal
Component: Profiles Keywords: ui-feedback good-first-bug has-screenshots
Cc:

Description

On the Profilepages, depends on number of badges and string length, are views possible In which the badges stick directly under the avatar icon.
Example: my profile https://profiles.wordpress.org/fstaude/ on a tablet.

My suggestion:
In https://buddypress.org/wp-content/themes/profiles.wordpress.org/style.css?ver=12 change

div#item-header img.avatar {
    float: left;
    margin: 0 20px 0 3px;
}

to

div#item-header img.avatar {
    float: left;
    margin: 0 20px 10px 3px;
}

I would have attached a patch. But I have not figured out how to use vvv and the meta-enviroment to commit to profiles.wordpress.org. If someone has a tip or a URL, just tell me.

Attachments (3)

IMG_0163.PNG (313.1 KB) - added by f.staude 3 years ago.
correct screenshot from ipad
wp-profiles.png (87.0 KB) - added by danieltj 2 years ago.
Updated profile page
wp-profile.PNG (56.1 KB) - added by mp518 2 years ago.
after change screenshot

Download all attachments as: .zip

Change History (14)

@f.staude
3 years ago

correct screenshot from ipad

#1 @f.staude
3 years ago

Sorry. 2016-04-25_1824.png is a wrong file and can be deleted. IMG_0163.PNG is the correct screenshot from the ipad.

#2 @iandunn
3 years ago

  • Keywords good-first-bug needs-patch added
  • Owner set to iandunn
  • Status changed from new to accepted

The Profiles theme hasn't been open-sourced yet, so it's not in the Meta Environment.

Just adding the CSS in a Trac ticket/comment is fine for small changes like this, though.

I think it still looks a bit odd, though, even with the new margin. It seems like it'd make more sense to have #user-badges be a blocking element, let the badges take up 100% of the content area, and center-align them.

#3 @danieltj
2 years ago

What about the following CSS? I'll add an image of what it looks like.

@media screen and ( max-width: 960px ) {

  div#item-header #user-badges {
    width: 100%;
    margin-top: 30px;
  }

  div#item-header #user-badges li {
    float: left;
  }

}

@danieltj
2 years ago

Updated profile page

#4 @mp518
2 years ago

  • Keywords has-screenshots added

Already added 100% width ul.item-list so just add width auto also margin will only 10px should be look good if there is any changes then let me know.below media query css available.

@media screen and ( max-width: 960px ) {
        div#item-header #user-badges{
            width:auto;
            margin: 10px 0 0 0;
        }
        div#item-header #user-badges li {
            float: left;
        }
}

@mp518
2 years ago

after change screenshot

#5 follow-up: @melchoyce
2 years ago

I like the spacing in wp-profiles.png.

#6 in reply to: ↑ 5 ; follow-up: @danieltj
23 months ago

Replying to melchoyce:

I like the spacing in wp-profiles.png.

I'm happy to commit the changes, just need to figure out how to commit them to this ticket for review :')

#7 in reply to: ↑ 6 ; follow-up: @SergeyBiryukov
23 months ago

  • Keywords has-screenshots removed

Replying to danieltj:

I'm happy to commit the changes, just need to figure out how to commit them to this ticket for review :')

Profiles theme is not open-sourced yet (see #1152), so adding the relevant styles in a comment like comment:3 is fine. Someone with access to dotorg Trac should be able to take it from there :)

#8 @SergeyBiryukov
23 months ago

  • Keywords has-screenshots added; needs-patch removed

#9 in reply to: ↑ 7 @danieltj
23 months ago

Replying to SergeyBiryukov:

Replying to danieltj:

I'm happy to commit the changes, just need to figure out how to commit them to this ticket for review :')

Profiles theme is not open-sourced yet (see #1152), so adding the relevant styles in a comment like comment:3 is fine. Someone with access to dotorg Trac should be able to take it from there :)

Thanks! Adding my code I posted above underneath the div#item-header #user-badges li selector on line 360 does the trick nicely and replicates the screenshot I provided.

#10 @coffee2code
23 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

Fixed in [13369-dotorg] :

Profiles: Improve spacing and display of badges at smaller viewport sizes.

Switches to full-width with improved vertical spacing.

Props danieltj.
See #2211.

and [13370-dotorg]:

Profiles: Improve spacing below avatar image (necessary at smaller viewport sizes).

Props fstaude.
Fixes #2211.

This ticket was mentioned in Slack in #meta by danieltj. View the logs.


23 months ago

Note: See TracTickets for help on using tickets.