kjetil/predi
Watch
1
0
Fork
You've already forked predi
 0
Code Issues 24 Pull requests Projects Releases Packages Wiki Activity Actions

Improve layout #9

New issue
Closed
opened 2014-11-27 19:49:19 +01:00 by kjetil · 13 comments
kjetil commented 2014-11-27 19:49:19 +01:00 (Migrated from gitlab.lallis.org)
Copy link

A designer has been contacted for suggestion, but we might not end up using him.

Anyway. The basic idea for the UI is to have a sticky filter box on top, and the complete list of all contracts the user has access to underneath, sorted by market, contractset and finally the order of contract defined by the administrator.

The filter box will allow free text filtering on titles and descriptions (maybe with highlighting of matched text) and by closing time, whether the user owns stock in a given contract, and so on.

The contracts in the list will initially be in a collapsed state, and can be clicked to expand, revealing further information and controls.

At the far top there should be a toolbar like thingy with the users avatar (use gravatar?), his current account and portfolio balance and a collection of links to a help text, a ranking page, a personal transaction history page and so on.

Tages-anseiger also wants a clickable logo or something at the top.

A designer has been contacted for suggestion, but we might not end up using him. Anyway. The basic idea for the UI is to have a sticky filter box on top, and the complete list of all contracts the user has access to underneath, sorted by market, contractset and finally the order of contract defined by the administrator. The filter box will allow free text filtering on titles and descriptions (maybe with highlighting of matched text) and by closing time, whether the user owns stock in a given contract, and so on. The contracts in the list will initially be in a collapsed state, and can be clicked to expand, revealing further information and controls. At the far top there should be a toolbar like thingy with the users avatar (use gravatar?), his current account and portfolio balance and a collection of links to a help text, a ranking page, a personal transaction history page and so on. Tages-anseiger also wants a clickable logo or something at the top.
kjetil commented 2015-01-22 21:13:41 +01:00 (Migrated from gitlab.lallis.org)
Copy link

Reassigned to @kjetil

Reassigned to @kjetil
kjetil commented 2015-01-22 21:17:19 +01:00 (Migrated from gitlab.lallis.org)
Copy link

The designers suggestion was crappy. Will have to roll up my sleaves...

The designers suggestion was crappy. Will have to roll up my sleaves...
kjetil commented 2015-01-23 14:01:14 +01:00 (Migrated from gitlab.lallis.org)
Copy link

Some inspiration:

Dragdealer: https://skidding.github.io/dragdealer/#demos
Looks very suitabable for both trading and various admin UI. No atmosphere package. Make one?

Codrops ideas: http://tympanus.net/codrops/2014/11/11/drag-and-drop-interaction-ideas/
Lots of good ideas on this site (look around). Even has atmosphere package: https://atmospherejs.com/achmanngopf/dragdrop

Some inspiration: Dragdealer: https://skidding.github.io/dragdealer/#demos Looks very suitabable for both trading and various admin UI. No atmosphere package. Make one? Codrops ideas: http://tympanus.net/codrops/2014/11/11/drag-and-drop-interaction-ideas/ Lots of good ideas on this site (look around). Even has atmosphere package: https://atmospherejs.com/achmanngopf/dragdrop
kjetil commented 2015-01-27 01:01:45 +01:00 (Migrated from gitlab.lallis.org)
Copy link

Ops, it is now impossible to get back from a "page" to the market when there are only one market available. Don't remove the selected-market session variable when entering pages, use an else-if in the main template instead

Ops, it is now impossible to get back from a "page" to the market when there are only one market available. Don't remove the selected-market session variable when entering pages, use an else-if in the main template instead
kjetil commented 2015-02-01 18:54:37 +01:00 (Migrated from gitlab.lallis.org)
Copy link

These are the style guides we received from Tages-Anzeiger:

These are the style guides we received from Tages-Anzeiger: * Tables and Data * "Source Sans Pro" http://www.google.com/fonts/specimen/Source+Sans+Pro * Black, light or normal font weights. * We try to keep tables very simple an clean, please compare http://www.tagesanzeiger.ch/sport/axpo_super_league/ (in the right column) * Body Copy * Georgia, > 17px/24px on Desktop, >18px/25px on Mobile * Titles * Georgia bold * Page Titles * Georgia bold, 38px/40px
kjetil commented 2015-02-02 01:15:01 +01:00 (Migrated from gitlab.lallis.org)
Copy link

Idea: Hide contracts in initial view. The timeline show all the important information already. On clicking the contractset, open an overlay with timeline, + all contracts with sliders.

This will make the contractset-list easier to navigate, and it will more or less guarantee that all interesting values are on-screen when user is trading.

Idea: Hide contracts in initial view. The timeline show all the important information already. On clicking the contractset, open an overlay with timeline, + all contracts with sliders. This will make the contractset-list easier to navigate, and it will more or less guarantee that all interesting values are on-screen when user is trading.
kjetil commented 2015-02-09 22:36:37 +01:00 (Migrated from gitlab.lallis.org)
Copy link

Points:

  • Label stuff with text (ie items in wallet, price in contractview)
  • Try setting a white background color. Will need to try and compensate in panels with borders or background-color
Points: * Label stuff with text (ie items in wallet, price in contractview) * Try setting a white background color. Will need to try and compensate in panels with borders or background-color
kjetil commented 2015-02-10 22:17:40 +01:00 (Migrated from gitlab.lallis.org)
Copy link

Hide the closing soon filter. Put in premade textfilters for "Kantonsrat" and "Regierungsrat" instead

~~Hide the closing soon filter. Put in premade textfilters for "Kantonsrat" and "Regierungsrat" instead~~
kjetil commented 2015-02-13 01:10:52 +01:00 (Migrated from gitlab.lallis.org)
Copy link

For wallet on small screen; Show just rank and net worth with vertical text. If you tap it, it will open the same version as the fullscreen one but in a floating box in the lower corner. Anther tap closes it

For wallet on small screen; Show just rank and net worth with vertical text. If you tap it, it will open the same version as the fullscreen one but in a floating box in the lower corner. Anther tap closes it
kjetil commented 2015-02-13 01:11:24 +01:00 (Migrated from gitlab.lallis.org)
Copy link

marketplace on top of menu

marketplace on top of menu
kjetil commented 2015-02-13 01:11:52 +01:00 (Migrated from gitlab.lallis.org)
Copy link
  1. test whether white background works (I promised to test that because Tages-Anzeiger is always on white background)
  2. test if only Sans Source on marketplace works better
  3. test whether the blue they tend to use can also be used on the app
1. test whether white background works (I promised to test that because Tages-Anzeiger is always on white background) 2. test if only Sans Source on marketplace works better 3. test whether the blue they tend to use can also be used on the app
kjetil commented 2015-04-02 18:51:28 +02:00 (Migrated from gitlab.lallis.org)
Copy link

Closing this as it has turned in to just being a catch all for UI issues. Not helpful

Closing this as it has turned in to just being a catch all for UI issues. Not helpful
kjetil commented 2015-04-02 18:51:30 +02:00 (Migrated from gitlab.lallis.org)
Copy link

Status changed to closed

Status changed to closed
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
develop
master
feature/start-market
feature/ui_performance
feature/alternative_layout
feature/error_messages
feature/image_upload
feature/improve_user_ui
feature/leaderboards
feature/filter
feature/router
feature/rest-api
feature/tagesanzeiger_login
feature/fix_sliders
feature/fix_chart
feature/adminui
feature/jade
i18n
feature/fix_packages
GraphExperiments
1.7.1
1.7.0
1.6.25
1.6.24
1.6.23
1.6.22
1.6.21
1.6.20
1.6.19
1.6.18
1.6.17
1.6.16
1.6.15
1.6.14
1.6.13
1.6.12
1.6.11
1.6.10
1.6.9
1.6.8
1.6.7
1.6.6
1.6.5
1.6.4
1.6.2
1.6.3
1.6.1
Labels
Clear labels   
admin

   
bug

   
confirmed

   
critical

   
discussion

   
enhancement

   
feature

   
long-term

   
technical
No labels
admin
bug
confirmed
critical
discussion
enhancement
feature
long-term
technical
Milestone
Clear milestone
No items
No milestone
Delivery
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kjetil/predi#9
No description provided.