Minor fixes (#494)

Fixed scrolling on connection profile page
fixed code text alignment

Author: cazfletch

packages/composer-playground/src/app/add-file/add-file.component.ts

@@ -114,8 +114,8 @@ export class AddFileComponent implements OnInit {
     if (this.fileType === 'js') {
       let code =
         `/**
-  * New script file
-  */`;
+ * New script file
+ */`;
       let scriptManager = this.businessNetwork.getScriptManager();
       let existingScripts = scriptManager.getScripts();
       let filteredScripts = existingScripts.filter((script) => {
@@ -141,10 +141,10 @@ export class AddFileComponent implements OnInit {
 
       let code =
         `/**
-  * New model file
-  */
+ * New model file
+ */
 
-  namespace ${this.addModelNamespace + numModels}`;
+namespace ${this.addModelNamespace + numModels}`;
 
       this.currentFile = new ModelFile(modelManager, code, this.addModelFileName + numModels + this.addModelFileExtension);
       this.currentFileName = this.currentFile.getFileName();

packages/composer-playground/src/app/connectionprofile/connectionprofile.component.html

@@ -37,13 +37,13 @@ <h2>Contact Us</h2>
 </section>
 <section class="main-view">
   <div class="playground-profile-warning" *ngIf="warningVisible">
-    <div style="display:flex;">
-      <div style="margin-right:8px;">
+    <div class="profile-warning-content">
+      <div>
         <svg class="ibm-icon blue-icon" aria-hidden="true">
           <use xlink:href="#icon-world_24"></use>
         </svg>
       </div>
-      <div>
+      <div class="profile-warning-text">
         <h3>Connection Profiles are not available in Web Playground</h3>
         <p>
           It is not possible to add Connection Profiles in the Web Playground version of Fabric Composer.
@@ -53,7 +53,7 @@ <h3>Connection Profiles are not available in Web Playground</h3>
         <p>And of course it's still 100% open source</p>
         <p><a href="http://fabric-composer.org/">Learn more in the docs</a></p>
       </div>
-      <div style="flex:1;text-align:right;">
+      <div>
         <button type="button" class="button secondary" (click)="hideWarning()">Hide</button>
       </div>
     </div>

packages/composer-playground/src/app/connectionprofile/connectionprofile.component.scss

@@ -4,15 +4,11 @@
 connection-profile {
   display: flex;
   width: 100%;
-  height: 100vh;
 
   .side-bar {
-    width: 25%;
     display: flex;
     flex-direction: column;
 
-    box-shadow: 5px 0 5px -5px #333;
-
     .profiles {
       & > * {
         padding: $space-medium $space-large;
@@ -30,17 +26,32 @@ connection-profile {
     }
 
     .about {
-      flex:1;
+      flex: 1;
       justify-content: flex-end;
       padding: $space-medium $space-large;
     }
   }
 
   .main-view {
     background-color: $fourth-highlight;
-    width: 75%;
     padding: $space-large $space-large $space-medium $space-large;
 
+    .playground-profile-warning {
+      background-color: $white;
+      border: 1px solid $fourth-highlight;
+      border-radius: 0.25em;
+      padding: $space-medium;
+      margin-bottom: $space-large;
+
+      .profile-warning-content {
+        display: flex;
+
+        .profile-warning-text {
+          margin: 0 $space-smedium;
+        }
+      }
+    }
+
     .business-network-details {
       display: flex;
 
@@ -56,18 +67,4 @@ connection-profile {
       }
     }
   }
-
-  .playground-profile-warning{
-    background-color:$white;
-    border: 1px solid $fourth-highlight;
-    border-radius: 0.25em;
-    padding: $space-medium;
-    margin-bottom: $space-large;
-
-  }
-
-  .current-profile{
-
-  }
-
 }

packages/composer-playground/src/app/resource/resource.component.scss

@@ -19,8 +19,9 @@ resource-modal {
 
     .resource-bound {
       max-height: 40px;
-      min-width: 410px;
-      max-width: 410px;
+      min-width: 100%;
+     // min-width: 410px;
+     // max-width: 410px;
       margin-top: $space-medium;
     }