animated ui, list of vnc styling (#18)

* animated ui, list of vnc styling * features list
aerokube · Apr 30, 2017 · 8d98acb · 8d98acb
1 parent a3a1543
commit 8d98acb
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ Simple status page with UI updates by SSE,
 backed by constant polling of status handle
 of [selenoid](https://github.com/aerokube/selenoid) on small go backend.
 
-![ui](docs/img/ui.png)
+![ui](docs/img/ui.gif)
 
 
 ## Usage
@@ -26,6 +26,27 @@ The following flags are supported:
 - ```--period``` - data refresh period (e.g. ```5s``` or ```1m```)
 - ```--selenoid-uri``` - selenoid uri to fetch data from (e.g. ```http://localhost:4444/```)
 
+## Features
+
+### Stats
+
+Shows current quota usage, pending browsers and queue.
+
+![ui](docs/img/ui.png)
+
+### VNC
+
+If you get browser from selenoid with `enableVNC=true` capability, you can see list of available screens:
+
+![ui](docs/img/vnc-list.png)
+
+And interact with this browser:
+
+![ui](docs/img/vnc.png)
+
+Please refer to selenoid documentation about VNC usage.
+
+
 ## Development
 
 1) Ensure you have [yarn](https://github.com/yarnpkg/yarn) and [go-bindata-assetfs](https://github.com/elazarl/go-bindata-assetfs) installed

diff --git a/docs/img/ui.gif b/docs/img/ui.gif
diff --git a/docs/img/vnc-list.png b/docs/img/vnc-list.png
diff --git a/docs/img/vnc.png b/docs/img/vnc.png
diff --git a/web/src/components/VncList/style.scss b/web/src/components/VncList/style.scss
@@ -1,11 +1,14 @@
 .vnc-list {
+  display: flex;
+  flex-wrap: wrap;
 
   .vnc-session-link {
     display: flex;
     line-height: 60px;
     color: #fff;
     text-decoration: none;
     box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .12);
+    margin: 5px;
 
     &_no-any {
       color: #fff;