Visual changes and Readme. (refs #1)

README.md

@@ -1,10 +1,12 @@
 valid [![Phovea][phovea-image]][phovea-url] [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
 =====================
 
-Visually exploring flows in weighted dynamic netowrks for data journalists
+Visually exploring flows in weighted dynamic networks for data journalists.
 
 Installation
 ------------
+Open your Git Bash or Commandline tool and navigate to the preferred working directory. Ideally your "C:\" root path.
+There execute the following commands, which will clone the latest version and install all dependencies.
 
 ```
 git clone https://github.com/VALIDproject/valid.git
@@ -14,21 +16,27 @@ npm install
 
 Testing
 -------
+In order to run unit tests, execute the following command.
 
 ```
 npm test
 ```
 
 Building
 --------
+To build a deploy version, which is then located in the "deploy" folder, execute the following command.
 
 ```
 npm run build
 ```
 
 Launching
 ---------
+To start the application execute this command or use the npm scripts (more Information Wiki).
 
 ```
 npm start
 ```
+
+***
+For more Information about the setup process and general Workflow visit the WIKI of this repository.

src/style.scss

@@ -1,2 +1,5 @@
-
-@import "styles/base";
+/**
+ * Basic variables and layout
+ */
+@import 'styles/vars';
+@import 'styles/base';

src/styles/_base.scss

@@ -6,3 +6,28 @@ body, html {
 th, label, strong, b, .label {
  font-weight: 500 !important;
 }
+
+.busy {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.26) url('#{$imagesDirectory}/Valid_Logo.jpg') no-repeat fixed center;
+ z-index: 999;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+}
+
+/**
+ * Animation for loading
+ * @usage: `animation: color_change 1s ease-out infinite alternate;`
+ */
+@keyframes color_change {
+ from { background-color: transparent; }
+ to { background-color: $hover-color; }
+}
+
+.loading {
+ animation: color_change 1s ease-out infinite alternate;
+}

src/styles/_vars.scss

@@ -0,0 +1,6 @@
+/**
+ * Add all variables here for SCSS, like colors or paths.
+ */
+
+$imagesDirectory: '~phovea_ui/src/assets';
+$hover-color: orange;