Skip to:
Content

bbPress.org

Opened 5 years ago

Last modified 2 years ago

#2711 new enhancement

Make bbPress Edit Profile Section more Responsive

Reported by: Robkk Owned by:
Milestone: 2.7 Priority: normal
Severity: normal Version: 2.5.4
Component: General - UI/UX Keywords: ui-feedback
Cc: jjjay@…, mercijavier@…

Description

The bbpress edit profile section should look a little better on smaller device widths.

The labels should be on top of the input boxes , right now they are just inline with the input boxes.

When they are inline on smaller device width they look all awkward because the words break up.

Attachments (4)

#2711.patch (1.4 KB) - added by Robkk 5 years ago.
2711.patch (1.5 KB) - added by Robkk 5 years ago.
2711-2.patch (1.8 KB) - added by Robkk 4 years ago.
2711-2.patch adds basic styling to the edit user profile page's inputs, labels, and descriptions to make them full width. The patch also add 20px padding above the #bbp-user-body to have space for the #bbp-user-wrapper.
2711.3.patch (1.4 KB) - added by johnjamesjacoby 2 years ago.

Download all attachments as: .zip

Change History (18)

#1 @netweb
5 years ago

Thanks Rob,

For details on how to create a patch, start with the following, these docs will be merged into bbPress soonish and added to the codex and the like:

https://github.com/ntwb/bbPress/blob/master/README.md

And in particular:
https://github.com/ntwb/bbPress/blob/master/README.md#checking-out-the-bbpress-source
https://github.com/ntwb/bbPress/blob/master/README.md#patch-all-the-things-creating-and-submitting-patches

Of note, initially you can get by without worrying about Grunt and NodeJS to create a patch but further down the road these will be important parts of the arsenal to test patches for bbPress, I'm currently working on adding instructions for this to the WordPress Core Handbook which will then be added to bbPress.

Another source of information via https://bbpress.trac.wordpress.org/#HowtoSubmitPatches

#2 @Robkk
5 years ago

@netweb

alright i already have git for windows installed , and i also have tortoise SVN installed too.

since this is stated , and also i dont have that much of an idea of how to use the git clone

Our GitHub mirror repo is not setup at this stage, soon, just not yet.

im just going to follow this tutorial

http://blog.ftwr.co.uk/archives/2005/11/03/windows-wordpress-toolbox/

create my directory folder

add this url to the respository

http://bbpress.svn.wordpress.org/trunk

then just follow the rest of the tutorial on creating patches.

Am i following it right??

@Robkk
5 years ago

#3 @netweb
5 years ago

Rob,

I haven't had a chance to test the actual patch yet but the actual patch looks pretty good, white space. tabs, formatting :)

One issue is that you should create the patch from the root folder of the source code:

The headers of the patch would then look similar to the following:

Index: src/templates/default/css/bbpress.css
===================================================================
--- src/templates/default/css/bbpress.css	(revision 5553)
+++ src/templates/default/css/bbpress.css	(working copy)
@@ -1215,6 +1215,59 @@

This way we know we are changing the bbpress.css file in the src/templates/default/css/ folder, this becomes important when for example a file named functions.php, we have numerous files throughout the repo with that filename thus creating patches from the root always includes the file path. :)

If you redo the patch and upload it again I'll take a look, also no need to include the # in the filename ;)

@Robkk
5 years ago

#4 @Robkk
5 years ago

@netweb I think I got it right this time, maybe one extra line of whitespace on accident but i think the headers are fine now.

#5 follow-up: @tharsheblows
4 years ago

  • Cc jjjay@… added

This looks good and definitely works for mobile. I'd put in a bit more space after the #bbp-single-user-details div but that's about it.

This actually works much better and looks just as good across all widths - the current design breaks rather quickly at just over 1250px browser width in twentyfifteen and starts out broken in twentyfourteen.

What do you think about making it the default rather than in an @media rule? @robkk?

#6 @tharsheblows
4 years ago

Also, I would make the span.description for the password fields the same effective width as those inputs. It'll just require switching to %s for padding.

#7 in reply to: ↑ 5 @Robkk
4 years ago

Replying to tharsheblows:

This looks good and definitely works for mobile. I'd put in a bit more space after the #bbp-single-user-details div but that's about it.

This actually works much better and looks just as good across all widths - the current design breaks rather quickly at just over 1250px browser width in twentyfifteen and starts out broken in twentyfourteen.

What do you think about making it the default rather than in an @media rule? @robkk?

I wouldn't mind it being default , i will add another patch for it later with the modified span.description CSS.

#8 follow-up: @netweb
4 years ago

It would be good to visualise this also, could you add a few screenshots also :)

#9 in reply to: ↑ 8 @Robkk
4 years ago

Replying to netweb:

It would be good to visualise this also, could you add a few screenshots also :)

will do

@Robkk
4 years ago

2711-2.patch adds basic styling to the edit user profile page's inputs, labels, and descriptions to make them full width. The patch also add 20px padding above the #bbp-user-body to have space for the #bbp-user-wrapper.

#10 @Robkk
4 years ago

Pictures

2014 default

https://cldup.com/vdM-9XO8iN.png

2014 with patch

https://cldup.com/mMspMw7Yxg.png

2014 default - 480px

https://cldup.com/DgkJQ2_ZCz.png

2014 with patch - 480px

https://cldup.com/HSfsqb4lcy.png

2014 default - 320px

https://cldup.com/i6bTK3CCBl.png

2014 with patch - 320px

https://cldup.com/lEZMVutAXf.png

2014 default - 240px

https://cldup.com/3qPDPWuKeF.png

2014 with patch - 240px

https://cldup.com/uemuFRE2xl.png

#11 follow-up: @mercime
4 years ago

  • Cc mercijavier@… added

@Robkk Nice! :)

#12 @netweb
4 years ago

Thanks @Robkk, these look great, I'm still unsure about 480px and above being block rather than inline, I will have a look in a couple of other themes.

#13 in reply to: ↑ 11 @Robkk
4 years ago

Replying to mercime:

@Robkk Nice! :)

thank you :)

Replying to netweb:

Thanks @Robkk, these look great, I'm still unsure about 480px and above being block rather than inline, I will have a look in a couple of other themes.

I can make it where its all below 480px, its no problem.

#14 @johnjamesjacoby
2 years ago

  • Milestone changed from 2.6 to 2.7
Note: See TracTickets for help on using tickets.