learnelectronics avatar

SteemAX 1.4 ~ New GUI Complete With Coloring Coding, Updated Graphics & Mobilized Menu

learnelectronics

Published: 23 Oct 2018 › Updated: 23 Oct 2018SteemAX 1.4 ~ New GUI Complete With Coloring Coding, Updated Graphics & Mobilized Menu

SteemAX 1.4 ~ New GUI Complete With Coloring Coding, Updated Graphics & Mobilized Menu

Repository

https://github.com/artolabs/steemax

steemax_1.4_update.png

SteemAX helps minnow content-creators and whale curators

by automating an exchange of upvotes between their quality blog posts, allowing both 1 to 1 as well as disproportional exchanges that grant bigger curations, better support than a bid bot, and the long-term support they both deserve.

SteemAX 1.4 Improvements

First of all, thank you to camiloferrua@camiloferrua for providing the designs that guided the improvements to the GUI on SteemAX!

mobilized_steemax.png

Using the mockups provided, the table that displays the exchange history (at https://steemax.info/history) was updated with a new "clock" and "exchange arrows" graphics, and the fonts were made bigger, giving the table a much nicer feel and easier readability.

Using the same design guidelines, and reusing the same graphics, the Invite Info Page (my page provided as an example) was also updated to have the same look and feel. Additionally, the Accept, Cancel, Barter and Send (previously named "Start") buttons have all been color coded so that when they are activated the "Steem Connect" button shares their color letting the user know which command will be sent to steem-ax@steem-ax.

SteemAX now has a global navigation menu that can be accessed from every page (accept the Home page) by clicking the "hamburger icon", which then reveals the menu via CSS animation.

The menu and all other changes in this update have all be made mobile ready, using media queries for screen sizes 380, 600 and 1024 and above. All designs are responsive and will readily reformat themselves on the fly.

Color Coding

One of the biggest problems people were having when using SteemAX was understanding how to send the invite after it has been created. A user must send $0.001 SBD to steem-ax@steem-ax along with the Memo ID Code in the memo field in order for their invite to be sent to the invitee. SteemAX works this way because:

  • The only polite way to send a message to another Steemian on the blockchain is via the memo field when sending funds.
  • Requiring a monetary send deters spammers from using SteemAX to gain exchanges for spam accounts.
  • SteemAX only has permission to vote on behalf of your account, and never has permission to transfer funds.

After the user creates their invites they will then click the pending invite counter (see previous update) to see a complete list of all their exchanges, including active exchanges as well as those pending further user action. The invites recently created by the user now have a blue button labeled "Send" instead of "Start". There is no longer a "Cancel" button, but instead there is now a grey "X" at the top right of every exchange invite. When the user clicks either of these buttons a new box is revealed showing the exact vote exchange values along with the button the sends the selected command to steem-ax@steem-ax. Now that the buttons are color code, clicking the blue "Send" button also turns the "Steem Connect" button blue, and likewise, clicking the cancellation "X" turns the Steem Connect button red. Additionally, the Barter button is coded grey, and the Accept button is also blue as it will never appear at the same time as the send button.

color_coded.gif

To accomplish this:

  • The HTML for each button was updated to include the CSS class name, giving individual control of the buttons. This HTML is generated by web.py. Commit d1fca01

  • The CSS was updated to include the classes that color the buttons. This commit also shows all the new classes created to update the GUI as per camiloferrua@camiloferrua's designs (over 1000 additional lines of code). Commit 4ae80f2

  • The Javascript was updated to include the color changes as each particular function is executed for those buttons. Commit 683a94b

Navigation Menu

A new "hamburger icon" now appears at the top right of every page except the home page, which when clicked will cause a menu to appear at the far right of the screen. This menu is sized appropriately for all screen sizes. The options in the menu are very simple and will expand with additional updates, but for now they include returning home, seeing the exchange history, creating an invite and seeking help via the Artopium discord server.

menu.gif

To accomplish this:

  • The HTML of the Invite Info Page, the Exchange History Page, and the Invite Creation Form were all updated to include the menu icon as well as the menu and it's options. Additionally, these commits contain updates needed to incorporate camiloferrua@camiloferrua's designs. Commit 7fb5031 Commit 4f8ebac Commit 60765c8

  • The CSS in the page_layout files, used as site-wide "template code", was updated to give the menu a very basic design. Hopefully this will be improved with graphic icons via a task request. Commit 07d53eb

  • The Javascript was updated to rotate the menu icon, as well as display the menu itself. Commit 683a94b

Issues Fixed

There were two issues that were fixed in this update.

  • Issue #11: The cancellation notice was forwarded to the invitee if it was canceled immediately after being created, causing the invitee to receive a notice for an exchange they have not yet accepted. Additionally, if they have never been to SteemAX before this could potentially be their first message ever. Yikes! This was fixed by updating the code in axtrans.py in Commit d53f109

  • Issue #12: The ratio slider would skip the numbers 1 and 11. The logic was ajusted a little bit as it was found to be a bit messy, however the real problem lies in the fact that using the mouse causes the ratio output to skip numbers, particularly those nearest to 1 and 11, however if you use the left and right arrows on the keyboard to move the slider all numbers are displayed correctly. This shows it's not a logical error but one of mouse sensitivity. Logic was updated in Commit f6b26ea

Technology Stack

SteemAX is written to use Python 3.5 and MySQL. The web interface for https://steemax.trade and https://steemax.info has been written in HTML, CSS and Javascript.

Roadmap

In the future more contributors will be brought into the fold
via Task Requests to help improve the functionality of the site and most especially the look and feel. After all, projects always benefit from the synergistic action of teamwork.

Contact

Please contact Mike (Mike-A) on Discord
https://discord.gg/97GKVFC

GitHub Account

https://github.com/artolabs

Leave SteemAX 1.4 ~ New GUI Complete With Coloring Coding, Updated Graphics & Mobilized Menu to:

Written by

Read more #utopian-io posts


Best Posts From learnelectronics

We have not curated any of learnelectronics's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From learnelectronics