From 574cf70ccb0138bf5f6139d26eed5f434eecf2b5 Mon Sep 17 00:00:00 2001
From: Mark 'kaosat-dev' Moissette <kaosat.dev@gmail.com>
Date: Tue, 23 Feb 2016 13:24:00 +0100
Subject: [PATCH] feature(errors display): started work on "view" aspect of
 graceful error display

---
 src/app.css                 | 74 ++++++++++++++++++++++++++-----------
 src/components/main/view.js | 10 +++++
 2 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/src/app.css b/src/app.css
index 947926e..d4c5526 100644
--- a/src/app.css
+++ b/src/app.css
@@ -13,9 +13,9 @@ body{
   font-family: 'Open Sans', sans-serif;
   /*-webkit-transition: opacity 0.5s ease-in;
   opacity:1;*/
-  
+
   overflow:hidden;
-  
+
   /*make things unselectable, cross browser*/
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -36,7 +36,6 @@ body{
   top: 0px;
   left: 0px;
   width: 100%;
-
 }
 
 .jam input[type=text]{
@@ -46,6 +45,37 @@ body{
   background-color: rgba(244, 244, 244, 0.25); /*#fff; #f5f5f5;*/
 }
 
+.errorElem {
+  /*
+  height: 20px;
+  left: 10px;
+  */
+  width:100%;
+  position: absolute;
+  bottom: 32px;
+  color: #f99c49;
+
+  /* Firefox */
+  display:-moz-box;
+  -moz-box-pack:center;
+  -moz-box-align:center;
+
+  /* Safari and Chrome */
+  display:-webkit-box;
+  -webkit-box-pack:center;
+  -webkit-box-align:center;
+
+  /* W3C */
+  display:box;
+  box-pack:center;
+  box-align:center;
+}
+.errorElem .inner{
+  width: 50%;
+  background: #fef9eb;
+  text-align: center;
+}
+
 /*without this we get red outlines in number inputs*/
 :invalid {
   box-shadow: none;
@@ -331,16 +361,16 @@ input[type=color]:focus{
 @keyframes spinner {
     to {transform: rotate(360deg);}
 }
- 
+
 @-webkit-keyframes spinner {
     to {-webkit-transform: rotate(360deg);}
 }
- 
+
 .spinner {
     min-width: 30px;
     min-height: 30px;
 }
- 
+
 .spinner:before {
     content: 'Loading…';
     position: absolute;
@@ -351,7 +381,7 @@ input[type=color]:focus{
     margin-top: -13px;
     margin-left: -13px;
 }
- 
+
 .spinner:not(:required):before {
     content: '';
     border-radius: 50%;
@@ -360,7 +390,7 @@ input[type=color]:focus{
     animation: spinner .6s linear infinite;
     -webkit-animation: spinner .6s linear infinite;
 }
-  
+
 /*//////////////*/
 /*camview controls overlay*/
 .camViewControls{
@@ -541,7 +571,7 @@ input[type=color]:focus{
 }
 .fullScreenToggler button{
   margin: 0;
-  padding: 0; 
+  padding: 0;
 }
 
 /*//////////////////*/
@@ -685,16 +715,16 @@ input[type=color]:focus{
 @keyframes spinner {
     to {transform: rotate(360deg);}
 }
- 
+
 @-webkit-keyframes spinner {
     to {-webkit-transform: rotate(360deg);}
 }
- 
+
 .spinner {
     min-width: 30px;
     min-height: 30px;
 }
- 
+
 .spinner:before {
     content: 'Loading…';
     position: absolute;
@@ -705,7 +735,7 @@ input[type=color]:focus{
     margin-top: -13px;
     margin-left: -13px;
 }
- 
+
 .spinner:not(:required):before {
     content: '';
     border-radius: 50%;
@@ -720,7 +750,7 @@ input[type=color]:focus{
 }
 
 .visible{
-  opacity: 1!important; 
+  opacity: 1!important;
 }
 
 .innerWrapper{
@@ -985,15 +1015,15 @@ http://cbracco.me/a-simple-css-tooltip/
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
-  -webkit-transition: 
+  -webkit-transition:
       opacity 0.2s ease-in-out,
         visibility 0.2s ease-in-out,
         -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-    -moz-transition:    
+    -moz-transition:
         opacity 0.2s ease-in-out,
         visibility 0.2s ease-in-out,
         -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-    transition:         
+    transition:
         opacity 0.2s ease-in-out,
         visibility 0.2s ease-in-out,
         transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
@@ -1084,7 +1114,7 @@ http://cbracco.me/a-simple-css-tooltip/
 .tooltip-top:focus:after*/ {
   -webkit-transform: translateY(-12px);
   -moz-transform:    translateY(-12px);
-  transform:         translateY(-12px); 
+  transform:         translateY(-12px);
 }
 
 /* Left */
@@ -1110,7 +1140,7 @@ http://cbracco.me/a-simple-css-tooltip/
 .tooltip-left:focus:after*/ {
   -webkit-transform: translateX(-12px);
   -moz-transform:    translateX(-12px);
-  transform:         translateX(-12px); 
+  transform:         translateX(-12px);
 }
 
 /* Bottom */
@@ -1135,7 +1165,7 @@ http://cbracco.me/a-simple-css-tooltip/
 .tooltip-bottom:focus:after */{
   -webkit-transform: translateY(12px);
   -moz-transform:    translateY(12px);
-  transform:         translateY(12px); 
+  transform:         translateY(12px);
 }
 
 /* Right */
@@ -1159,7 +1189,7 @@ http://cbracco.me/a-simple-css-tooltip/
 .tooltip-right:focus:after */{
   -webkit-transform: translateX(12px);
   -moz-transform:    translateX(12px);
-  transform:         translateX(12px); 
+  transform:         translateX(12px);
 }
 
 /* Move directional arrows down a bit for left/right tooltips */
@@ -1180,4 +1210,4 @@ http://cbracco.me/a-simple-css-tooltip/
   z-index: 10;
   left: 100;
   top: 300;
-}
\ No newline at end of file
+}
diff --git a/src/components/main/view.js b/src/components/main/view.js
index f9b3d32..5da1922 100644
--- a/src/components/main/view.js
+++ b/src/components/main/view.js
@@ -259,6 +259,15 @@ function renderUiElements(uiElements){
     .filter(exists)
     .map(widgetMaker=> widgetMaker(state, uiElements) )
 
+  function renderErrors(state){
+    return <div className='errorElem'>
+      <div className="inner">
+      lots of errors
+      </div>
+    </div>
+  }
+  //{renderErrors(state)}
+
 
   return <div className="jam" >
     {progressBar}
@@ -272,6 +281,7 @@ function renderUiElements(uiElements){
 
     {makeTopToolBar(state)}
 
+
   </div>
 }