modify: add style for checking github name status

sota1235 · Oct 24, 2015 · af9a436 · af9a436
1 parent e36d783
commit af9a436
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -43,7 +43,7 @@ gulp.task('script', () => {
 
 gulp.task('watch', () => {
   gulp.watch('./resources/assets/sass/**/*.sass', ['sass']);
-  gulp.watch('./resources/assets/js/**/*.js');
+  gulp.watch('./resources/assets/js/**/*.js', ['script']);
 });
 
 gulp.task('default', ['script', 'sass']);
diff --git a/resources/assets/js/index.babel.js b/resources/assets/js/index.babel.js
@@ -25,7 +25,7 @@ $(() => {
   };
 
   let checkStatus = () => {
-    $gitNameStatus.text('now checking your GitHub name...');
+    $gitNameStatus.text('Checking...');
     $gitNameStatus.css('color', 'blue');
   };
 
@@ -44,7 +44,7 @@ $(() => {
         return checkJson(result);
       })
       .then((result) => {
-        showStatus(result ? 'user name is valid' : 'invalid user name', result);
+        showStatus(result ? 'User name OK!!' : 'invalid user name', result);
       })
       .catch(error => console.log(error));
   });

diff --git a/resources/assets/sass/index.sass b/resources/assets/sass/index.sass
@@ -15,16 +15,29 @@
   .sa_form
     display: inline-block
 
-    input[type=text]
-      background-color: $main_color
-      color: $base_color
-      border: none
-      display: block
-      font-size: 1.5em
-      font-weight: 700
-      padding: 0.6em 1em
-      margin-bottom: 0.5em
-      width: 100%
+    .field
+      input[type=text]
+        background-color: $main_color
+        color: $base_color
+        border: none
+        display: block
+        font-size: 1.5em
+        font-weight: 700
+        padding: 0.6em 1em
+        margin-bottom: 0.5em
+        width: 100%
+
+      .status
+        position: absolute
+        display: table
+        left: 850px
+        min-height: 56px
+        font-size: 15px
+        font-weight: 700
+
+        .git_status
+          display: table-cell
+          vertical-align: middle
 
     button#register
       background-color: $accent_color

diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
@@ -5,9 +5,15 @@
   <div>
     <h1>SaborunaYo</h1>
     <div class="sa_form">
-      <input type="text" id="github_name" placeholder="GitHub name" required>
-      <div class="status"><span class="git_status"></span></div>
-      <input type="text" id="yo_name" placeholder="Yo name" required>
+      <div class="field">
+        <div class="status">
+          <p class="git_status"></p>
+        </div>
+        <input type="text" id="github_name" placeholder="GitHub name" required>
+      </div>
+      <div class="field">
+        <input type="text" id="yo_name" placeholder="Yo name" required>
+      </div>
       <button id="register">Register</button>
     </div>
   </div>