Design bugs and Finish touches in Explorer

[coinmandeer-zz]

I finished design of Explorer - added top toolbar (branches etc.) You can find it here: https://projects.invisionapp.com/d/main#/console/15023175/319367480/preview

I will describe what we could fix on current Explorer website bellow:

[coinmandeer-zz]

• Please use image of OpenCryptoData logo - its different font (Should be Roboto Sans) - and its not vertically aligned with base of fonts in menu

• When clicking on "OpenCryptoData" in Explorer - it should always go to Explorer - not on data.opencrypto.io (there is a selector for that)

• Add icons to selected (Explorer / Schema)

[coinmandeer-zz]

I redesigned this toolbar in this matter:

• Branch should have no space from edge (aligned with left-side of logo above)
• Made whole toolbar more free - add some vertical padding (+8px)
  • restyled branch and commit dropdowns as text - they are really similar as search input
  • restyled information about branches
  • refresh ico have same color as other inactive (999999)

[coinmandeer-zz]

• Added icon to search box
• active tab is now grey and whole tabs are wider (16px padding inside every part)
• match icons with icons on Schema (fontawesome)

[coinmandeer-zz]

• Align column title "Name" with Icon (we dont have "Icon" column)
• match icons with schema in column Includes
• Completness:
  • Add sort arrow (green) - which will switch sides
  • Restyle Progress bar (to dark blue, and more narrow)
• Add column "Last Edit"
• Restyle GitHub / Edit links
• I guess we dont have "Owner" yet, so we could hide it for now
• "Link to Explorer" is imho better title than "Detail" in design - but we have to align this link with some padding (64px) to end of line (to the right) - even if there will be gap betwee columns

[coinmandeer-zz]

How about "Next 100 coins" Button? Is is necessary?

[coinmandeer-zz]

PROFILE:

• restyle breadcrumb (grey+bigger green name) with arrow .. Last one is current profile (so its not a link)

• Move "GitHub history" and "Edit on Github" to line with breadcrumb

• Align Icon to top-left corner with 24px margins

• Use Square icon in title (now there is some alternative)

• Restyle and make Explorer/Yaml DATA switch more wider

• Restyle "Report bug" button to "Edit value" as its in design (even with background and icon)

• Hover on first column should contain icons "Edit" (open whole section if there is any sub-categories) and icon "info" - which show description from scheme in fly-out (designed on bottom of mock-up) - both with green hover

Expandable sub-info:

• Add option to collapse and expand subsections
• restyle progress bar
• add what it contains (assets / networks ...)

---

ADD: New line (88px tall)

• Asset contains = list of all subjects + icon
• Last Edit
• Completeness progress bar
• Data size
• Contributors aligned to right side (with +15 more)

New line (56px)

• Large property search (filtering live?)
• Filters: "Filled / Empy"
• Expand all categories button (which will expand all collapsed parrent structures)

[coinmandeer-zz]

• YAML Explorer
• Add line with query
• buttons as are on data.opencrypto.io (Source file, Edit)
• restyle switch YAML / JSON
• Add padding for code-sections (16px)

[coinmandeer-zz]

• It would be great to break lines if code is too long in YAML Explorer

[coinmandeer-zz]

MOBIL:

HP:

• header and menu not working
• Projects (41) a search should be next to each other (it fits there)
• Asset switch have no padding (16px) and its on two-line - could we change it to dropdown? (probabaly with icons?)
• Main-data-table:
  • no scrolling?
  • Mobile columns are only: Icon, Name, Last edit, Github links, View" - everything other is only for larger screens

DETAIL:

• Check header with comments above, try to make it compact (no thing below itself, try to pass them on line as its on desktop) : 1line: breadcrumb (smaller fonts) + Github edit / history Logo+Name+Ass 2.line: Square icon + Explorer/source

  3. line: Contains asset, last edit, data site + contributors on next line

• Containers

  • its okay that they dont have padding

• but we need to keep title as compact as possible: So we fix those issues (on image)

• Add expanding

• Try to make everything more compact, especially sub-assets like on image, there is too much space, it could fit into much smaller place

??? - We need to have "Edit value" on mobile - maybe on long-tap? or to activate hover by pressing line? Or adding edit icon next to every title?