new loading page (#862)

winslet · web-flow · commit d62d43dc6633 · 2017-05-05T14:38:02.000+01:00
* homepage and support pages stackoverflow changes

* typography changes for readme section

* initial dropdown styling

* code cleanup for dropdown component

* further code cleanup for dropdowns

* added comments

* new loading page

* code mirror background colour change

* select state in code mirror colour change

* table heading spacing change and transaction button alignment fix

* header padding changes
diff --git a/packages/composer-playground/src/app/editor/editor.component.scss b/packages/composer-playground/src/app/editor/editor.component.scss
@@ -35,6 +35,7 @@ app-editor {
     .business-network-details {
       display: flex;
       height:50px;
+      margin-bottom: 0.5rem;
 
       .business-network-version {
         margin-right: $space-smedium;
diff --git a/packages/composer-playground/src/app/registry/registry.component.scss b/packages/composer-playground/src/app/registry/registry.component.scss
@@ -36,11 +36,13 @@ registry {
     margin: $space-large 0;
 
     .id {
-      width: 25%
+      width: 25%;
+      padding-bottom: 0.5rem;
     }
 
     .data {
-      width: 75%
+      width: 75%;
+      padding-bottom: 0.5rem;
     }
 
     .title {
@@ -58,6 +60,7 @@ registry {
       padding: $space-medium;
       position: relative;
       box-shadow: 0 2px 5px -1px $fifth-highlight;
+      border-radius: 4px;
 
       .resource-content {
         display: flex;
diff --git a/packages/composer-playground/src/app/test/test.component.scss b/packages/composer-playground/src/app/test/test.component.scss
@@ -31,6 +31,7 @@ app-test {
     .side-button {
       flex : 1;
       margin: 0 auto;
+      margin-left: $space-large;
 
       .button-item {
         padding-top: 5rem;
diff --git a/packages/composer-playground/src/assets/styles/base/_codemirror.scss b/packages/composer-playground/src/assets/styles/base/_codemirror.scss
@@ -24,20 +24,20 @@
 }
 
 .cm-s-default.CodeMirror {
-  background: #424747;
+  background: #262A35;
   color: #FFFFFF;
   border: none;
   border-radius: 4px;
   box-shadow: 0 1px 4px 0 rgba(0,0,0,0.10);
 }
 
-.cm-s-default div.CodeMirror-selected { background: #303030; }
+.cm-s-default div.CodeMirror-selected { background: #393F4F; }
 .cm-s-default .CodeMirror-line::selection, .cm-s-default .CodeMirror-line > span::selection, .cm-s-default .CodeMirror-line > span > span::selection { background: rgba(48, 48, 48, .99); }
 .cm-s-default .CodeMirror-line::-moz-selection,
 .cm-s-default .CodeMirror-line > span::-moz-selection,
 .cm-s-default .CodeMirror-line > span > span::-moz-selection { background: rgba(48, 48, 48, .99); }
 .cm-s-default .CodeMirror-gutters {
-  background: #424747;
+  background: #262A35;
   border-right: 0px;
 }
 .cm-s-default .CodeMirror-guttermarker { color: #ffffff; }
diff --git a/packages/composer-playground/src/assets/styles/base/_core.scss b/packages/composer-playground/src/assets/styles/base/_core.scss
@@ -4,6 +4,12 @@ body.composer {
   font-family: $font-stack;
   color: $primary-text;
   background-color: $white;
+
+  .initial-loading-elements {
+    margin-top: 40vh;
+    color: $primary-text;
+    text-align: center;
+  }
 }
 
 .composer * {
diff --git a/packages/composer-playground/src/index.html b/packages/composer-playground/src/index.html
@@ -16,9 +16,11 @@
 </head>
 
 <body class="composer">
-
   <app>
-    Loading...
+    <div class="initial-loading-elements" style="margin-top: 40vh; color: #19273C;">
+    <h1 style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.25em; font-weight: 300; text-align: center; line-height: 100%;">Loading Hyperledger Composer...</h1>
+    <p style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.9rem; font-weight: 400; text-align: center; color: #8C9696; margin-bottom: 1.3em;">Prepare to Blockchain</p>
+    </div>
   </app>
 
   <script>
