UI improvements :

- Long username are now handled nicely in view. - Account managment view has been improved
GladysAssistant · Sep 20, 2018 · e75bb39 · e75bb39
1 parent ab864ff
commit e75bb39
Show file tree

Hide file tree

Showing 11 changed files with 451 additions and 356 deletions.
diff --git a/assets/img/user-circle.png b/assets/img/user-circle.png
diff --git a/assets/styles/global.css b/assets/styles/global.css
@@ -82,3 +82,63 @@ a.disabled {
 .slider .tooltip {
   pointer-events:none;
 }
+.widget-user-username{
+  width: 70%; 
+  margin-left: 2% !important;
+  white-space: nowrap; 
+  display: inline-flex;
+}
+
+.widget-user-username div{
+  overflow: hidden; 
+  text-overflow: ellipsis;
+}
+
+.user-panel p{
+  text-overflow: ellipsis; 
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 155px;
+}
+
+.user-menu a {
+  text-overflow: ellipsis; 
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 155px;
+}
+
+.select-user {
+  text-overflow: ellipsis; 
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 200px;
+}
+
+
+/* Card */
+.card {
+  box-shadow: 0 1px 8px 1px rgba(0,0,0,0.2);
+  transition: 0.3s;
+  border-radius: 5px;
+}
+
+.card:hover {
+  box-shadow: 0 2px 16px 2px rgba(0,0,0,0.2);
+}
+
+/* Grid */
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 1000px) { 
+  .grid-item {
+    width: 49%;
+  }
+}
+
+.grid-item {
+  margin: 0.5%;
+}
diff --git a/config/locales/en.json b/config/locales/en.json
@@ -398,5 +398,6 @@
   "reset-password-new-password": "New Password",
   "reset-password-button": "Change my password",
   "reset-password-minimum-size-warning": "(Minimum 8 characters)",
-  "forgot-password-reset-failed": "Your password was not changed. Maybe the link was not valid anymore (It is valid only 2 hours), or maybe your password length was too low. Please try again."
+  "forgot-password-reset-failed": "Your password was not changed. Maybe the link was not valid anymore (It is valid only 2 hours), or maybe your password length was too low. Please try again.",
+  "preparation":"Preparation"
 }
diff --git a/config/locales/fr.json b/config/locales/fr.json
@@ -562,5 +562,6 @@
   "reset-password-new-password": "Nouveau mot de passe",
   "reset-password-button": "Changer mon mot de passe",
   "reset-password-minimum-size-warning": "(Minimum 8 caractères)",
-  "forgot-password-reset-failed": "Le changement de votre mot de passe a échoué. Le lien n'était peut être plus valide (il n'est valide que 2 heures) ou le mot de passe était trop court. Merci de ré-essayer."
+  "forgot-password-reset-failed": "Le changement de votre mot de passe a échoué. Le lien n'était peut être plus valide (il n'est valide que 2 heures) ou le mot de passe était trop court. Merci de ré-essayer.",
+  "preparation":"Préparation"
 }
diff --git a/views/device/index.ejs b/views/device/index.ejs
@@ -50,7 +50,7 @@
 
                         <div class="box-body table-responsive">
 
-                                    <table id="example2" class="table table-bordered table-hover">
+                                    <table class="table table-bordered table-hover">
                                         <thead>
                                             <tr>
                                                 <th><%= __('device-name') %></th>
@@ -119,17 +119,14 @@
                                                 <td><input type="text" placeholder="<%= __('device-create-identifier') %>" class="form-control" ng-model="device.identifier" ng-model-options='{ debounce: 500 }' ng-change="vm.updateDevice(device);" /></td>
                                                 <td><input type="text" placeholder="<%= __('device-create-protocol') %>" class="form-control" ng-model="device.protocol" ng-model-options='{ debounce: 500 }' ng-change="vm.updateDevice(device);" /></td>
                                                 <td><input type="text" placeholder="<%= __('device-create-service') %>" class="form-control" ng-model="device.service" ng-model-options='{ debounce: 500 }' ng-change="vm.updateDevice(device);" /></td>
-                                                <td><!--<select name="selectRoom" id="selectRoom" class="form-control" ng-model="device.room">
-                                                    <option ng-repeat="room in vm.rooms" value="{{room.id}}">{{room.name}}</option>
-                                                    </select>-->
-
+                                                <td>                                                    
                                                     <select name="selectRoom" id="selectRoom" class="form-control"
                                                             ng-options="room.name for room in vm.rooms track by room.id"
                                                             ng-model="device.room" ng-change="vm.updateDevice(device);">
                                                    </select>
                                                 </td>
                                                 <td>
-                                                    <select name="selectUser" class="form-control"
+                                                    <select name="selectUser" class="form-control select-user"
                                                             ng-options="user.id as user.name for user in vm.users"
                                                             ng-model="device.user" ng-change="vm.updateDevice(device);">
                                                    </select>
@@ -150,7 +147,7 @@
                                                    </select>
                                                 </td>
                                                 <td>
-                                                    <select name="selectUser" class="form-control"
+                                                    <select name="selectUser" class="form-control select-user"
                                                             ng-options="user.name for user in vm.users track by user.id"
                                                             ng-model="vm.newDevice.user">
                                                    </select>