KnackSteem new UI implementation

in #utopian-io6 years ago (edited)

Repository

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

Pull request for this feature: https://github.com/knacksteem/knacksteem.org/pull/31

KnackSteem logo

New Features

This change implements the first phase of a redesign of the front-end of the KnackSteem.org web client, as requested by this task. The KnackSteem team had previously gotten a proposal designed by @outwork of a new UI for the site. The output of that designer's work was a Photoshop (PSD) rendering of the new design. This work implements that design into the HTML, CSS, and Javascript of the site, for the existing pages.

  • Overall site structure change from being a two-column layout with the left sidebar flush to the left edge of the browser and collapsing down on mobile to being a two-column layout floating in the middle (left/right) of the browser window, plus a footer band along the bottom. This was a large change, touching many different parts of the React templates and CSS governing the site's overall structure. Additionally, required creating a new version of the KnackSteem logo to work well on the new header/footer background colors.
  • Addition of Font Awesome icon font into the site, and utilized it in the left sidebar as icons for the main navigation links.
  • Added user information box to the left sidebar, showing information about the logged-in user, pulling in display name and cover image, which had not been utilized previously.
  • Added navigation routes and placeholder pages for static content pages to be filled in by the KnackSteem team, including "How it works", "About us", "Contribute", "Contact", "Guidelines", "FAQ", and "Terms of Service".

Home page

Home page before UI update:
home-before

Home page after:
home-final

Home page, with a narrow width, showing how the elements compress down for narrower screens:
responsive

Article view

Example individual article view before UI update:
article-before

Individual article view after:
article-final

Development progress

Some in-progress views of this development:

home page progress

coding in progress

GitHub Account

https://github.com/MidnightLightning

Sort:  

Thank you for your contribution. You have nicely written all the updates you have done for the project. Its good to see that you have also updated the documentation for fellow developers.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Thank you for your review, @codingdefined!

So far this week you've reviewed 2 contributions. Keep up the good work!

Hi @midnight426!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Congratulations @midnight426! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

SteemitBoard - Witness Update
SteemitBoard to support the german speaking community meetups
Vote for @Steemitboard as a witness to get one more award and increased upvotes!