thenewboston-developers / website Goto Github PK

• Breakpoint of 768px will truncate the top nav options into a hamburger menu.
• Clicking/tapping onto the hamburger menu will then trigger a dropdown of the top nav functionality.

Landing Page Example
https://www.figma.com/file/ChyT88EmP2Rmzx35I9erCL/Marketing-Site?node-id=6%3A0

Hamburger Icon
Hamburger.zip

• the font weight for the top nav and the guide/api side menu should be Medium
• font size for the top nav & side menu 16px
• the link color is Sail Blue 500 #556CD6, 16px, Medium weight

Early analytics are showing that the majority of the users are coming in from mobile.

• Pngs of the app remain the same size (are not squishy), whether user is on desktop or mobile.
• When pngs of app wrap to the bottom of the title & paragraph, please make sure it is 12px away from the left of the site. (So we see the most of the app png)
• Paragraphs & title on (instant transactions sections) are a max width of 480px.
• View Guide button comes after the 2nd paragraph (instant transaction section)
• Update app pngs with newer pngs attached to this ticket.

Landing Page
https://www.figma.com/file/ChyT88EmP2Rmzx35I9erCL/Marketing-Site?node-id=6%3A0

Marketing Site PNG.zip

check out: https://thenewboston.com/style-guide/

On the /leaderboard and the /tasks pages, when filtering by repository the name of the repository should be included in the URL. For example:

• /leaderboard/Account-Manager
• /leaderboard/Bank
• etc...

This will help us track which are the most commonly used filters in Google Analytics and later allow us to improve the UX by moving the more common filters to the top.

When there is no repository name in the URL (just /leaderboard or /tasks) it will imply to filter "All". When the repository name is unknown (user types something into the URL manually) then display the empty page UI.

Update Marketing Site Landing Page elements/layout

• Update newboston logo
• Contributors, Developers, Roadmap will now be top nav
• Clicking on thenewboston logo will return user back to Landing Page
• Clicking Developers will link users to all the documentation, 'Guide, Bank API, Primary Validator API, etc...'
• Copy text directly from mocks
• Make slack & github buttons both 114px width
• Include slack & github logos inside buttons
• Send Points image has a dropshadow of X: 15, Y: 15, Blur: 40, Hex #: 042235, Opacity: 25%
• In-App 'Banks' image has a dropshadow of X: 0, Y: 15, Blur: 40, Hex #: 042235, Opacity: 25%
• Kill Roboto, please use Helvetica Neue for all text on marketing site
• Please make sure to use thenewboston logo inside the 'View Guide' button

Update Colors:

• Background color 1: #F6F9FC
• Background color 2: #131F41
• ALL text color: #042235
• Secondary button color: #C1C9D2
• Primary button color: #042235

Figma

https://www.figma.com/file/ChyT88EmP2Rmzx35I9erCL/Marketing-Site?node-id=6%3A0

When attempting to join the Slack I get the following.

For this ticket, no need to worry about responsive nor stylistic changes. This ticket will only focus on splitting the links.

We will now split the Developers page into 2 links to make it easier for everyone to view the docs.

• 1 for Guides
• 1 for APIs

Acceptance Criteria

• Just to reiterate, For this ticket, no need to worry about responsive nor stylistic changes. This ticket will only focus on splitting the links.

• Split Dev page into Guide & APIs

• Change top nav link title from Developers to Guide

• Please have a page specifically for Guide menu only (all other API menu will now belong in the API page)

• Add another top nav link called APIs

• Please have a page specifically for Bank API, PV API, CV API, and Deployment Guide

• Order of top nav from left to right will now be Contribute, Guide, APIs, Roadmap

Guides
https://www.figma.com/file/ChyT88EmP2Rmzx35I9erCL/Marketing-Site?node-id=55%3A0

APIs
https://www.figma.com/file/ChyT88EmP2Rmzx35I9erCL/Marketing-Site?node-id=181%3A462

Engineering Notes

1. We currently only have one component for the LeftMenu (components/Layout/LeftMenu). Split this up into LeftMenuGuide and LeftMenuApi
2. Currently the component components/Layout/LayoutDashboard does not have the ability to render different forms of the LeftMenu. have the LayoutDashboard receive a prop that will dictate which LeftMenu it will render, something like:
   

Update deployment guides to differentiate between Bank and Validator where needed

Create roadmap component where we can:

• have teams (to group tasks)
• assign tasks to teams
• each task will be on it's own row (not multiple colors/tasks on the same row like in the diagram)
• in the colored rectangle area, there will be no text (since the task text will be on the left)
• ensure each teams tasks share a similar color
• set a range of 0-4 on the tasks to represent the Q1-Q4 range

Date values:

• 0 = beginning of Q1 (beginning of January)
• 1 = end of Q1
• 4 = end of Q4 (end of December)

Notes:

• this component is simply the UI element only. the data will be static, there is no interaction needed (no adding tasks, deleting tasks interactions, etc...)

Roadmap component will be displayed here: https://thenewboston.com/roadmap

{
  "Account Manager": {
    "1": {
      "task_name": "Create roadmap page",
      "task_range": {
        "start": 1.3,
        "stop": 1.6
      }
    },
    "2": {
      "task_name": "Update deployment guide",
      "task_range": {
        "start": 2.1,
        "stop": 2.7
      }
    }
  },
  "Bank": {
    "1": {
      "task_name": "Create roadmap page",
      "task_range": {
        "start": 1.8,
        "stop": 2.9
      }
    },
    "2": {
      "task_name": "Write tests",
      "task_range": {
        "start": 3.1,
        "stop": 3.4
      }
    }
  }
}

Contributors page needs designs

when scrolling up and down, if you scroll a little bit to the sideways, it does this annoying thing.

Do this ^

• Use tab interaction to display each Windows, Mac, and Linux download button & installation instruction
• Include text content of latest version, right aligned to the end of the line
• Include name of Windows, Mac, or Linux in the download button in their dedicated tab. (For example 'Download for Windows'.
• Include installation instructions below per tab.

Installation Instructions text for Windows:

1. Download thenewboston
2. Click on the downloaded file
3. You will get a modal that says ‘Windows protected your PC’. Click More info
4. Then click Run anyway

Installation Instructions text for Mac:

1. Download thenewboston
2. Click on the downloaded file
3. Drag and drop the app to the Applications folder
4. Open the app

Installation Instructions text for Linux:

1. Download thenewboston
2. To run thenewboston, make it executable
   ($ sudo chmod a+x TNB-Account-Manager-1.0.0-alpha.20-linux*.AppImage)
3. Run!
   ($ ./TNB-Account-Manager-1.0.0-alpha.20-linux*.AppImage)

https://www.figma.com/file/ChyT88EmP2Rmzx35I9erCL/Marketing-Site?node-id=500%3A1096

Update the docs to account for the new "Get Started" flow.

Need API Docs for /upgrade_notice endpoint

I've been reading the documentation on thenewboston.com and I've noticed that the scrolling freezes from time to time.
I scroll, then I stop to read a paragraph for example and when I try to scroll some more, I can't, I try scrolling up/down multiple times and after a 3-4 seconds it unfreezes and it instantly scroll to the last scroll you've entered.

I tried hard to find a reproducing scenario, but I can't, it's super random.
I didn't test in details on other browsers, but I wasn't able to reproduce it on Chrome (at least in the time I've tried)
My Safari version is: 13.1.1 (15609.2.9.1.2)

Something is broken

Homepage needs general design improvements

Add a basic leaderboard page to the website. Hi-Fi will come later, so for now only include basic designs and logic.

• For Guide & APIs pages, we will now have a max width of 720px specifically for the written information.
• Breakpoint of 768px, can still fit 720px information.
• Marketing Site itself will always have left and right padding of 12px.
• Once 768px breakpoint is reached, the side menu will truncate into a dropdown menu under the top nav.
• If API page titles get too long on mobile, please use ellipses. (...)

APIs
https://www.figma.com/file/ChyT88EmP2Rmzx35I9erCL/Marketing-Site?node-id=181%3A462

Icons Used
icon.zip

• Remove 'Designer' section and put resources under React/FE

Contributor
https://www.figma.com/file/ChyT88EmP2Rmzx35I9erCL/Marketing-Site?node-id=0%3A1

https://www.figma.com/file/4lI8orw0bWotODTAF0rtR8/Marketing-Site-Landing-Page?node-id=143%3A690

• For Guide & APIs pages, we will now have a max width of 720px specifically for the written information.
• Leave diagrams to be the same width they already are. (Bc some diagrams are best viewed past 720px width.)
• Breakpoint of 768px, can still fit 720px information.
• Marketing Site itself will always have left and right padding of 12px.
• Once 768px breakpoint is reached, the side menu will truncate into a dropdown menu under the top nav.
• If API page titles get too long on mobile, please use ellipses. (...)

Guide
https://www.figma.com/file/ChyT88EmP2Rmzx35I9erCL/Marketing-Site?node-id=55%3A0

• design "Previous" and "Next" buttons for docs pages so users do not have to open up the menu again to go to the next page on mobile
• also note in design that on the first page, there will be no "Previous" (or it will be disabled) and on the last page there will be no "Next" (or it will be disabled)

https://redux-toolkit.js.org/api/configureStore#middleware

• https://thenewboston.com/confirmation-validator-api/bank-confirmation-services

please refer to #167

Check out: https://thenewboston.com/style-guide/

Breadcrumb menu needs text-overflow: ellipsis;

• review deployment guides
• replace references to "Validator" in the bank guide

On mobile devices, the left menu should close after a link/menu item is clicked

Go through each page and fix any HTML nesting warnings (usually with tables and lists)

Contributors page needs redesigned

Current page

https://thenewboston.com/contributors

Figma mocks

https://www.figma.com/file/UQ6kcxls0hpewOrZh7Eie3/Contributor-Page?node-id=7%3A150

New design

Currently, this repo uses material-icons font library to display icons. We want to update this to use SVGs (just like it is done in AccountManager)

1. Install mdi-react and create a new component just like the one found in our website repo: https://github.com/thenewboston-developers/Account-Manager/tree/master/src/renderer/components/Icon

2. update all occurrences of material-icons to use the newly added Icon component.

3. Erase/uninstall all traces of material-icons

Resources: you can find the name of the icons here: https://github.com/thenewboston-developers/Account-Manager/tree/master/src/renderer/components/Icon

Everytime a menu item is clicked, the new content that gets loaded does not begin from top. Instead, the page is scrolled as far as the previous page was scrolled. The content needs to be loaded from the top.

If sidebar navigation overlaps the content instead of sliding it then it will look better I think because in mobile it totally slides the content. Or one option can be it should take up the whole width in the mobile device.

We can achieve the overlap thing by position: absolute and some height. And on the click of hamburger changing display or width property.

To make the navbar width:100% and on the click of hamburger changing display or width property.

In both the cases, I have given some top margin to the sidebar as thenewboston logo should be visible.

This issue is in reference to these discussions:

• #70
• #90

We first need to do a bit of research on how best to handle the left menu first. I can see the scenario where the user is reading through the guide or API docs and they want to keep the left menu open as they click between pages which I feel is ideal. But I also see how when user is on mobile that that would want to auto-close the left menu when they click since it covers up the content on smaller devices. So if that’s the logic, then we need to figure out the best placement for the hamburger toggle as well. So just some research and design needed first before we can start building a solution.

• For Guide & APIs pages, we will now have a max width of 720px specifically for the written information.
• Leave diagrams/image sizes the same width they already are (because some diagrams are best viewed past 720px width)

Guide
https://www.figma.com/file/ChyT88EmP2Rmzx35I9erCL/Marketing-Site?node-id=55%3A0

please refer to #167

Responsive top navigation/header needed

Fix build warning