Browse Source

improve CSS

Davide Alberani 7 years ago
parent
commit
3cac351b88
1 changed files with 33 additions and 6 deletions
  1. 33 6
      src/App.vue

+ 33 - 6
src/App.vue

@@ -3,7 +3,9 @@
         <md-toolbar class="md-dense">
             <h2 id="toolbar-title" class="md-title">ibt2</h2>
             <span v-if="loggedInUser.username">
-                Logged in: {{ loggedInUser.username }}
+                <span id="logged-in">
+                    Logged in: {{ loggedInUser.username }}
+                </span>
                 <md-button class="md-icon-button" @click="logout()">
                     <md-icon>exit_to_app</md-icon>
                 </md-button>
@@ -12,10 +14,12 @@
                 <md-button v-show="!showLoginForm" class="md-icon-button" @click="focusToLoginForm()">
                     <md-icon>power_settings_new</md-icon>
                 </md-button>
-                <span v-show="showLoginForm">
-                    <md-input-container id="login-form" md-inline>
-                        <md-input ref="usernameInput" @keyup.enter.native="focusToPassword()" v-model="username" placeholder="username" md-inline />
-                        <md-input ref="passwordInput" @keyup.enter.native="login()" v-model="password" placeholder="password" md-line />
+                <span v-show="showLoginForm" id="login-form">
+                    <md-input-container id="username-input" class="login-input" md-inline>
+                        <md-input ref="usernameInput" @keyup.enter.native="focusToPassword()" v-model="username" placeholder="username" md-inline />&nbsp;
+                    </md-input-container>
+                    <md-input-container id="password-input" class="login-input" md-inline>
+                        <md-input ref="passwordInput" @keyup.enter.native="login()" v-model="password" placeholder="password" type="password" md-line />
                     </md-input-container>
                 </span>
             </span>
@@ -204,7 +208,30 @@ export default {
     flex: 1;
 }
 
-#login-form {
+.login-input {
     width: 200px;
+    margin: 0px 0px 0px;
+    padding-top: 0px;
+    padding-left: 4px;
+    min-height: 24px;
+    line-height: 0px;
+    margin-right: 20px;
+    background-color: white;
+}
+
+#username-input {
+    display: inline;
+    float: left;
+}
+
+#password-input {
+    display: inline;
+    float: right;
+}
+
+#logged-in {
+    position: relative;
+    top: 10px;
+
 }
 </style>