Single web page with styled mobile rich text control (bootstrap-wysiwyg)

IN PROGRESS
Bids
4
Avg Bid (AUD)
$29
Project Budget (AUD)
$10 - $30

Project Description:
We're in the process of evaluating [url removed, login to view] as part of starting a software project.

This project should be very simple for any web developer with some experience in mobile web dev.

We are more than capable of doing this work ourselves, but we'd like to evaluate the quality we can get from freelancers here. We are definitely in need of quality freelancers in the medium to long term, so this can be viewed as a simple test project.

If you're interested, please read on:

Synopsis:
- We need a single web page displaying a read-only question on the mobile device, and a control for entering rich text to answer the question. That's it! We'll use this webpage as a template.
- The rich text control should look almost identical to the editor in the Evernote mobile app.
- Here is the URL of the HTML5/Javascript rich text control. You can read about it there: [url removed, login to view]

Detailed Requirements:
- Required output: a single web page for the mobile web browser, styled for the mobile device (phone and tablet).
- Compatibility: this must work correctly on iOS Safari (iOS 6 or above), Android Chrome and the Android built-in browser (ICS or above), and FireFox on Android and iOS (the latest version will do)
- Orientation: the web page must display correctly when the device is rotated vertically or horizontally.
- Other styling considerations: styling must adhere to the guidelines as set out in: [url removed, login to view]
- Technologies: HTML5, Javascript, JQuery and CSS only. No Flash.

- Page components: the page is in the format of question and answer. The question is in a div, and the answer to be entered through the rich text control. The question div appears at the top, and the text control (including the toolbar) appears below it, spanning the remainder of the page. The text control should look very similar to the Evernote mobile app.
- Expand/Collapse Question div: the question may include one or more paragraphs. The div needs to be collapsible/expandable so as to give maximum screen space to the text control. The div should collapse upwards when swiped to the top, and expanded again when swiped down. The div should give an indication that it can be swiped by displaying an arrow (up/down) in the expanded/collapsed states. This arrow icon must be drawn in CSS only. In the div's collapsed state, you can only see the first line of the question, with the line ending with "...". When swiping, there should be animation showing the div is being expanded or collapsed. The text box should also resize accordingly. This is a very simple animation, and it should be done in CSS only.
- Text control toolbar: the toolbar should be at the bottom of the text control. The toolbar itself needs to be scrollable horizontally, so that the user can swipe through the toolbar to access all the buttons. The buttons are the same ones are the bootstrap-wysiwyg web page. The buttons need to be styled appropriate for the mobile device, and each button needs to be borderless. For a sample of the appearance of the toolbar, please see the Evernote mobile app for reference.
- Font size: should be appropriate for the mobile device. For reference, see the Evernote mobile app.

Project management
- You have 5 days maximum to complete the task (obviously fully tested and top quality work).
- Communication: Please be in touch at least once a day to demonstrate progress, so that any misunderstanding may be sorted out early.

As mentioned, this is an evaluation task, so we'll most likely give you more work if we are pleased with the way you work, and your output

If you're interested in bidding, please include the word "readall" somewhere in your reply to show that you have read the description properly. Replies without this word will be ignored. As you can see, we are pretty serious in what we do, and we look forward to partnering who shares our professionalism.

Skills required:
CSS, HTML, HTML5, jQuery / Prototype, Mobile Phone
About the employer:
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.


$ 33
in 3 days
$ 23
in 3 days
$ 30
in 3 days
Hire SebStudios
$ 30
in 3 days