In Progress

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

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: CSS, HTML, HTML5, jQuery / Prototype, Mobile App Development

See more: bootstrap wysiwyg, rich text bootstrap, mobile rich text, bootstrap rich text, web page mobile, bootstrap expanded collapsed, bootstrap web page, work for freelancers web, work as a software developer as a freelancer, work as a freelancer web developer, who to get web developer, who needs android developer, who is freelancer web developer, what to look for ios developer, what is the latest version of android, what is ios device, what is an ios device, what is an android tablet, what freelancers do, web template html5, web page of freelancer, web page format, web page for freelancer, web icon set, web freelancer com

About the Employer:
( 5 reviews ) Pymble, Australia

Project ID: #4862938

Awarded to:

SebStudios

Hi I have readall your post. I have worked extensively with bootstrap and other frameworks before, I also enjoy building my own css frameworks from scratch now and again. So your project is right up my alley. This so More

$30 AUD in 3 days
(0 Reviews)
0.0

4 freelancers are bidding on average $29 for this job

babysoftS

Hi, Expert here. thanks

$33 AUD in 3 days
(37 Reviews)
6.6
JoomlaVogue

Hello Sir, We have gone through the details you have provided and would be pleased to work on this with you to deliver the results that you have expected and We are sure you will not be disappointed if you give us More

$23 AUD in 3 days
(28 Reviews)
6.0
bazzinfotech

**************************************** Please Check PMB for more details.Thanks. ****************************************

$30 AUD in 3 days
(4 Reviews)
2.1