Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • datavis datavis
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 7
    • Issues 7
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Container Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Field Science
  • datavisdatavis
  • Wiki
  • UX Notes

Last edited by Porter Libby Nov 17, 2021
Page history

UX Notes

<-- Back to Home

The main style file, found at /public/css/main.css. This file contains the definition for most of the mutabile colors in the front-end, and is made to be easy to access and modify. The structure for this defined as follows:

:root {
    --datacolor1: #1D976C;
    --datacolor2:#93F9B9;
    --theme1: #444;
    --theme2: #888;
    --theme3: #bbb;
    --theme4: #ddd;
    --themeh: white;
    --themep: black;
}

datacolor1 and datacolor2

These two colors define the notification glow for the map view and graph view buttons when new data as added for viewing.

theme colors

Theme colors 1-4 define different UI colors to be used in the background of different elements. This is most visible in data view, but should theoretically make all three views follow the same color scheme, even though the other views are mostly covered by a map and a graph respectively.

themeh and themep

These two colors define default text colors for header size and paragraph size text respectively.

Customizing the map

In /public/js/map.js, the following control variables can be found:

maptype1 = "topo";
maptype2 = "satellite";

These can be used to modify the map modes shown in the map view. Possible values can be found here on the ArcGIS API website.

Clone repository
  • Database
  • Dev Notes
  • Mobile
  • Setup
  • UX Notes
  • Home