- Added Files:
Making RB look and work better on a small-screen device.
Review Request #5620 — Created March 14, 2014 and discarded
I'm making RB responsive by using CSS media queries. I have worked on:
- Making the login and registration pages look better on a small-screen device. The code related to this is in common.less under the Login/Register pages section.
- Making the top menu bar ("Support", "Login", Searchbar etc.) and the navigation bar ("My Dashboard", "New Review Request" etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, they are brought visible in the form of a mobile-friendly menu (see the newest screenshots). I'm using the CSS3 transform property to have the menu come on top of the page content without affecting it.
Possible things todo:
- Implement the Menu icon with SVG. It is now done purely in CSS. We might want to use SVG because other icons in RB are also SVG.
- Further testing.
- Organize and improve the code.
- See how https://reviews.reviewboard.org/r/5655/ affects this. Remove duplicate things. Use same variable for the viewport size etc.
Tested on desktop with Firefox and Chrome (but not IE) by resizing the browser window and using the menu on different parts (though not all) of RB. Tested with HTC One Mini and Google Nexus 7 2013 by using the menu on different parts (though not all) of RB. Switching between portrait and landscape mode.
| Description | From | Last Updated |
|---|---|---|
|
Would it make more sense to ask the password only once at mobile. For example Dropbox only asks the password … |
TO tomiaijo | |
|
Are these really necessary to input at mobile where people tend to hate writing. They can always fill the rest … |
TO tomiaijo | |
|
I think it would be nice to collapse the top navigation bar, and make a dropdown toggle that shows the … |
TA tamijo | |
|
Hmm. I'm not sure about this. How about we just fold everything into the drop-down menu (so we have a … |
 david
|
JO
- People:
TO
-
-
Would it make more sense to ask the password only once at mobile. For example Dropbox only asks the password once on mobile registration.
There are several other improvements to this that I could think of:
- Always show the last character as plain text to make it easier to spot errors.
- Show the whole password as plain text
Some discussion about this: http://ux.stackexchange.com/questions/45846/patterns-for-sign-in-registration-forms-that-show-password-as-plain-text-unma
-
Are these really necessary to input at mobile where people tend to hate writing. They can always fill the rest of information later.
JO
- Summary:
-
[WIP] Responsive design for login and registration pages.[WIP] Making RB look and work better on a small-screen device.
- Description:
-
~ I'm using CSS media queries to make the login and registration pages look better on a small-screen device.
~ I'm making RB responsive by using CSS media queries. I have worked on:
+ - Making the login and registration pages look better on a small-screen device. + - Making the top navigation bar (Support, Login etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, it is brought visible. I'm using the CSS3 transform property to do this. + + Todo:
+ + - Fixing some issues with the nav bar functionality.
+ - Including the search bar in the nav bar.
+ - Testing.
- Diff:
-
Revision 2 (+125 -3)
- Added Files:
MI
-
The dropdown menu looks pretty good - how about instead of using text like "menu" we use conventional icons?
With the limited space on mobile its better to refer to things that people are used to instead of text.I've found the following site pretty useful.
http://fontawesome.io/icons/
JO
- Description:
-
~ I'm making RB responsive by using CSS media queries. I have worked on:
~ I'm making RB responsive by using CSS media queries. I have worked on:
- - Making the login and registration pages look better on a small-screen device. - - Making the top navigation bar (Support, Login etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, it is brought visible. I'm using the CSS3 transform property to do this. ~ Todo:
~ - Making the login and registration pages look better on a small-screen device.
+ - Making the top navigation bar (Support, Login, Searchbar etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, it is brought visible. I'm using the CSS3 transform property to do this.
+ - Using icons instead of text in the nav bar with "My Dashboard", "New Review Request" etc.
~ - Fixing some issues with the nav bar functionality.
~ - Including the search bar in the nav bar.
~ - Testing.
~ ~ ~ Todo:
+ - Fixing some issues with the top nav bar functionality. + - Implementing svg icons. + - Testing. + - Organize the code. - Diff:
-
Revision 4 (+186 -4)
- Added Files:
JO
- Description:
-
I'm making RB responsive by using CSS media queries. I have worked on:
- Making the login and registration pages look better on a small-screen device.
~ - Making the top navigation bar (Support, Login, Searchbar etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, it is brought visible. I'm using the CSS3 transform property to do this.
~ - Making the top menu bar ("Support", "Login", Searchbar etc.) and the navigation bar ("My Dashboard", "New Review Request" etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, they are brought visible in the form of a mobile-friendly menu (see the newest screenshots). I'm using the CSS3 transform property to do this.
- - Using icons instead of text in the nav bar with "My Dashboard", "New Review Request" etc.
~ ~ Todo:
~ Todo:
~ - Fixing some issues with the top nav bar functionality. ~ - Implementing svg icons. ~ - Implement svg icons.
~ - Test.
~ - Organize and improve the code.
- - Testing. - - Organize the code. - Diff:
-
Revision 5 (+204 -4)
- Added Files:
JO
- Description:
-
I'm making RB responsive by using CSS media queries. I have worked on:
~ - Making the login and registration pages look better on a small-screen device.
~ - Making the top menu bar ("Support", "Login", Searchbar etc.) and the navigation bar ("My Dashboard", "New Review Request" etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, they are brought visible in the form of a mobile-friendly menu (see the newest screenshots). I'm using the CSS3 transform property to do this.
~ - Making the login and registration pages look better on a small-screen device. The code related to this is in common.less under the Login/Register pages section.
~ - Making the top menu bar ("Support", "Login", Searchbar etc.) and the navigation bar ("My Dashboard", "New Review Request" etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, they are brought visible in the form of a mobile-friendly menu (see the newest screenshots). I'm using the CSS3 transform property to have the menu come on top of the page content without affecting it.
~ Todo:
~ ~ - Implement svg icons.
~ - Test.
~ Possible things todo:
~ + - Implement the Menu icon with SVG. It is now done purely in CSS. We might want to use SVG because other icons in RB are also SVG.
+ - Further testing.
- Organize and improve the code.
+ - See how https://reviews.reviewboard.org/r/5655/ affects this. Remove duplicate things. Use same variable for the viewport size etc.
- Testing Done:
-
+ Tested on desktop with Firefox and Chrome (but not IE) by resizing the browser window and using the menu on different parts (though not all) of RB. Tested with HTC One Mini and Google Nexus 7 2013 by using the menu on different parts (though not all) of RB. Switching between portrait and landscape mode.
JO
- Change Summary:
-
The width of the opened menu used to be the whole screen width (see the earlier screenshots). At least on a tablet it's more logical though that the menu opens right below the Menu icon. Hence the new design (see screenshots).
- Description:
-
I'm making RB responsive by using CSS media queries. I have worked on:
- Making the login and registration pages look better on a small-screen device. The code related to this is in common.less under the Login/Register pages section.
- Making the top menu bar ("Support", "Login", Searchbar etc.) and the navigation bar ("My Dashboard", "New Review Request" etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, they are brought visible in the form of a mobile-friendly menu (see the newest screenshots). I'm using the CSS3 transform property to have the menu come on top of the page content without affecting it.
Possible things todo:
~ - Implement the Menu icon with SVG. It is now done purely in CSS. We might want to use SVG because other icons in RB are also SVG.
~ - Implement the Menu icon with SVG. It is now done purely in CSS. We might want to use SVG because other icons in RB are also SVG.
- Further testing.
- Organize and improve the code.
- See how https://reviews.reviewboard.org/r/5655/ affects this. Remove duplicate things. Use same variable for the viewport size etc.
- Diff:
-
Revision 7 (+237 -11)
- Added Files: