WIP: Create pipeline

Author: michelvocks

frontend/client/App.vue

@@ -97,8 +97,42 @@ html {
   }
 }
 
+.button {
+  background-color: #4da2fc !important;
+  font-weight: bold;
+  border-color: transparent;
+  color: whitesmoke;
+}
+
+.button:hover, .button:active, .button:focus {
+  color: whitesmoke;
+  border-color: transparent;
+}
+
 .content-article {
   color: whitesmoke;
   background-color: #3f3d49;
 }
+
+.content-article label {
+  color: whitesmoke;
+  font-weight: normal;
+}
+
+.input-bar {
+  background-color: #19191b;
+  color: white;
+  border-color: #2a2735;
+}
+
+.input-bar::-webkit-input-placeholder {
+    color: #8c91a0;
+    text-shadow: none;
+    -webkit-text-fill-color: initial;
+}
+
+.title-text {
+  border-bottom: 1px solid;
+  padding-bottom: 8px;
+}
 </style>

frontend/client/components/layout/Navbar.vue

@@ -7,10 +7,10 @@
             <i class="fa fa-search fa-lg" aria-hidden="true"/>
           </div>
           <div>
-            <input class="borderless-search" type="text" placeholder="Find a pipeline ..." v-model="search">
+            <input class="borderless-search" type="text" placeholder="Find pipeline ..." v-model="search">
           </div>
           <div class="navbar-button">
-            <a class="button create-pipeline-button" @click="createPipeline">
+            <a class="button" @click="createPipeline">
               <span class="icon">
                 <i class="fa fa-plus"></i>
               </span>
@@ -46,15 +46,15 @@
         <div class="block login-modal-content">
           <div class="login-modal-content">
             <p class="control has-icons-left">
-              <input class="input is-large login-input" v-focus type="text" v-model="username" @keyup.enter="login" placeholder="Username">
+              <input class="input is-large input-bar" v-focus type="text" v-model="username" @keyup.enter="login" placeholder="Username">
               <span class="icon is-small is-left">
                 <i class="fa fa-user-circle"></i>
               </span>
             </p>
           </div>
           <div class="login-modal-content">
             <p class="control has-icons-left">
-              <input class="input is-large login-input" type="password" @keyup.enter="login" v-model="password" placeholder="Password">
+              <input class="input is-large input-bar" type="password" @keyup.enter="login" v-model="password" placeholder="Password">
               <span class="icon is-small is-left">
                 <i class="fa fa-lock"></i>
               </span>
@@ -165,18 +165,6 @@ export default {
 
 <style lang="scss">
 
-.create-pipeline-button {
-  background-color: #4da2fc !important;
-  font-weight: bold;
-  border-color: transparent;
-  color: whitesmoke;
-}
-
-.create-pipeline-button:hover, .create-pipeline-button:active, .create-pipeline-button:focus {
-  color: whitesmoke;
-  border-color: transparent;
-}
-
 .navbar-button {
   padding-top: 17px;  
 }
@@ -219,20 +207,7 @@ export default {
   padding: 10px;
 }
 
-.login-input {
-  background-color: #3f3d49;
-  color: white;
-  border-color: #2a2735;
-}
-
-.login-input::-webkit-input-placeholder {
-    color: #8c91a0;
-    text-shadow: none;
-    -webkit-text-fill-color: initial;
-}
-
 .login-button {
-  background-color: #4da2fc !important;
   width: 150px;
   height: 50px;
 }

frontend/client/views/pipelines/create.vue

@@ -1,12 +1,47 @@
 <template>
   <div class="tile is-ancestor">
-    <div class="tile is-vertical is-3">
+    <div class="tile is-vertical is-5">
       <div class="tile">
         <div class="tile is-parent is-vertical">
           <article class="tile is-child notification content-article">
-            <p class="subtitle">From Git repository</p>
+            <p class="title title-text">Compile from source</p>
             <div class="content">
-              
+              <label class="label">Copy the link of your <strong>git repo</strong> here.</label>
+              <p class="control has-icons-left">
+                <input class="input is-medium input-bar" v-focus type="text" placeholder="Link to git repo ...">
+                <span class="icon is-small is-left">
+                  <i class="fa fa-git"></i>
+                </span>
+              </p>
+              <p class="control">
+                <a class="button">
+                  <span class="icon">
+                    <i class="fa fa-github"></i>
+                  </span>
+                  <span>Add credentials</span>
+                </a>
+                <a class="button" style="margin-left: 20px;">
+                  <span class="icon">
+                    <i class="fa fa-github"></i>
+                  </span>
+                  <span>Add private key</span>
+                </a>
+              </p>
+              <hr>
+              <label class="label">Type the name of your pipeline. You can put your pipelines into folders by defining a path. For example <strong>MyFolder/MyAwesomePipeline</strong>.</label>
+              <p class="control has-icons-left">
+                <input class="input is-medium input-bar" type="text" placeholder="Pipeline name ...">
+                <span class="icon is-small is-left">
+                  <i class="fa fa-book"></i>
+                </span>
+              </p>
+              <hr>
+              <a class="button">
+                <span class="icon">
+                  <i class="fa fa-plus"></i>
+                </span>
+                <span>Create Pipeline</span>
+              </a>
             </div>
           </article>
         </div>