Merge pull request learningequality#4 from rayykim/usermanage

Usermanage

kolibri/plugins/management/assets/src/vue/user-create-modal.vue

@@ -2,12 +2,24 @@
 
   <div class="user-creation-modal">
     <modal btntext="Add New">
-      <div class="title" slot="header">User creation</div>
+      <div class="title" slot="header">Add New Account</div>
       <div slot="body">
-        <br>Username: <input type="text" v-model="username" placeholder="Please type in your username."><br>
-        <br>Password: <input type="text" v-model="password" placeholder="Please type in your password."><br>
-        <br>First name: <input type="text" v-model="firstName" placeholder="Please type in your first name."><br>
-        <br>Last name: <input type="text" v-model="lastName" placeholder="Please type in your last name."><br>
+        <div class="name">
+          <label for="name">Name</label>
+          <input type="text" v-model="username" placeholder="Please type in your username.">
+        </div>
+        <div class="username">
+          <label>Username</label>
+          <input type="text" v-model="password" placeholder="Please type in your password.">
+        </div>
+        <div class="password">
+          <label>Password</label>
+          <input type="text" v-model="firstName" placeholder="Please type in your first name.">
+        </div>
+        <div class="confirm">
+          <label>Confirm Password</label>
+          <input type="text" v-model="lastName" placeholder="Please type in your last name.">
+        </div>
         <!-- radio buttons for selecting role -->
         <br>Learner <input type="radio" value="learner" v-model="role"><br>
         <br>Admin <input type="radio" value="admin" v-model="role"><br>
@@ -96,6 +108,7 @@
   .add-text
     float: left
     padding-top: 6px
+    
 
 </style>
 

kolibri/plugins/management/assets/src/vue/user-roster.vue

@@ -18,17 +18,17 @@
         <option value="learner"> Learners </option>
       </select>
 
-
-      <input v-model="searchFilter" type="search">
-      <svg class="search-button" src="./icons/search.svg"></svg>
+      <input
+        v-model="searchFilter"
+        type="search"
+        placeholder="Search for a user...">
 
       <div class="create">
         <user-create-modal></user-create-modal>
       </div>
 
     </div>
 
-
     <hr>
 
     <table class="roster">
@@ -184,14 +184,18 @@
     float: right
 
   input[type='search']
-    float: left
-    margin: 0 0 10px 10px
-    width: 400px
-    height: 25px
-    border-radius: 10px
-    padding: inherit
-    border: 1px solid #686868
-
+    display: inline-block
+    border: 1px solid #ccc
+    box-shadow: inset 0 1px 3px #ddd
+    border-radius: 2em
+    padding: 0.5em 1em
+    vertical-align: middle
+    box-sizing: border-box
+    position: relative
+    left: 10px
+    &:focus
+      outline: none
+      border-color: $core-text-annotation
 
   select[name='user-filter']
     float: left
@@ -239,4 +243,28 @@
     width: 20px
     height: 20px
 
+  .searchbar .search-button
+    display: inline-block
+    float: left
+    position: relative
+    left: 5px
+    top: 1px
+
+  .searchbar:after
+    content: ''
+    display: table
+    clear: both
+
+  .searchbar
+    border-radius: 5px
+    padding: inherit
+    border: 1px solid #686868
+    width: 40%
+    min-width: 200px
+    max-width: 300px
+    height: 25px
+    float: left
+    position: relative
+    left: 10px
+
 </style>