ImperialCollegeLondon / ImperialCollegeLondon/Visual2

Improve v0.12 styling

Open
#35 0 comments 0 reactions 0 assignees View on GitHub
enhancement good first issue
Dominant language
F#
Stars
49
Forks
7
PR merge metrics
No merged PRs in 30d

Description

Colors, fonts in v0.12 are not optimal. There are 4 color schemes - white and black with high contrast and "solarised" versions. Have a look at VisUAL https://salmanarif.bitbucket.io/visual/ for a similar but not identical example of styling. VisUAL2 is not as consistent or attractive as VisUAL.

These changes can all be made in the app CSS, mostly` vistally.css`, but also `monaco-init.js`. The references to other css files are probably not needed and should be cleaned up - with necessary stuff extracted to vistally and the other big CSS files (used as tempates initially for various GUI elements) removed.

Visual studio has a good GUI for playing with CSS with a lot of code completion, auto color picking, etc. However the project CSS currently does not pass CSS linting. this should be fixed if possible. I'm not sure if possible because the CSS uses CSS variables defined under `:root` to communicate with F# code.

Also the CSS classes should be better documented.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reviewing vistally.css and monaco-init.js, then compare the existing v0.12 styling with the linked VisUAL example. Consolidate the needed CSS, address the four color schemes and class documentation, and check whether CSS linting can pass while preserving the CSS variables used by F# code.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, fsharp, javascript
Domain
design, documentation, frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.