Knacksteem.org - Header, Footer and Editor (Responsive Layout).

 

Repository

https://github.com/knacksteem/knacksteem.org

Pull Request

https://github.com/knacksteem/knacksteem.org/pull/33

Issue

https://github.com/knacksteem/knacksteem.org/issues/34

Task Request

https://steemit.com/knacksteem/@knowledges/development-task-request-help-build-knacksteem-front-end-800-steem-bounty

New Features

Responsive Layout

Below is a new layout for the Header, footer and Editor of Knacksteem, the Layout was made responsive using Row and Col  from the Antd Design System. Also media query were written at different Screen levels

handleEditorToggle() {
this.setState({
     isMarkdownEditorActive: !this.state.isMarkdownEditorActive
   });
 }

![iphone](

![desktop](

The editor state was toggle to add responsiveness and the width was set to 100% to increase the touch radius.

The ollow commit are used to achieve most of the layouts

https://github.com/knacksteem/knacksteem.org/pull/33/commits/dc76e08c5db45421b7f3586872237ec659de5eb8

https://github.com/knacksteem/knacksteem.org/pull/33/commits/ad7af0f29331915aa67ae25725e60c0610f0b74c

https://github.com/knacksteem/knacksteem.org/pull/33/commits/741e777ad9749329434ce210cef9a5241c292231

https://github.com/knacksteem/knacksteem.org/pull/33/commits/76e7e85aea444db18b681eb40cafe7f890608ec8

https://github.com/knacksteem/knacksteem.org/pull/33/commits/73e2bbe2f502ce249cf17159abeb180901cc9b89

What's next?

The next pull for this task will Add the responsive home feed with approved post 

Github Account

https://github.com/ogbiyoyosky