Opened 10 years ago
Last modified 8 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)
Change History (18)
#2
@
10 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??
#3
@
10 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 ;)
#4
@
10 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:
↓ 7
@
10 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
@
10 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
@
10 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:
↓ 9
@
10 years ago
It would be good to visualise this also, could you add a few screenshots also :)
#9
in reply to:
↑ 8
@
10 years ago
Replying to netweb:
It would be good to visualise this also, could you add a few screenshots also :)
will do
@
10 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.
#12
@
10 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.
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