Mercurial > gemma

diff client/src/components/usermanagement/Usermanagement.vue @ 2322:a25b4988eb0c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: fixed usermanagement styles Content was breaching out of the viewport because of use of vh/vw units which include scrollbars. The style of Usermanagement.vue is now also scoped. The tooltip css had to move to the main application.scss for it to still work.
author Markus Kottlaender <markus@intevation.de>
date Tue, 19 Feb 2019 09:49:14 +0100
parents f2c67ebeaabb
children 7b79d4966a87
line wrap: on
line diff
--- a/client/src/components/usermanagement/Usermanagement.vue	Tue Feb 19 09:13:27 2019 +0100
+++ b/client/src/components/usermanagement/Usermanagement.vue	Tue Feb 19 09:49:14 2019 +0100
@@ -1,128 +1,122 @@
 <template>
-  <div class="main d-flex flex-row">
+  <div class="main d-flex flex-row" style="position: relative;">
     <Spacer></Spacer>
-    <div class="d-flex content flex-column">
-      <div class="d-flex flex-row">
-        <div :class="userlistStyle">
-          <div class="card">
-            <h6
-              class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+    <div class="d-flex content py-3">
+      <div :class="userlistStyle">
+        <div class="card shadow-xs">
+          <h6
+            class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+          >
+            <font-awesome-icon
+              icon="users-cog"
+              class="mr-2 fa-fw"
+            ></font-awesome-icon>
+            <translate class="headline">Users</translate>
+          </h6>
+          <div class="card-body">
+            <table id="datatable" :class="tableStyle">
+              <thead>
+                <tr>
+                  <th scope="col" @click="sortBy('role')">
+                    <span
+                      >Role&nbsp;
+                      <font-awesome-icon
+                        v-if="sortCriterion == 'role'"
+                        icon="angle-down"
+                      ></font-awesome-icon>
+                    </span>
+                  </th>
+                  <th scope="col" @click="sortBy('user')">
+                    <span
+                      >Username&nbsp;
+                      <font-awesome-icon
+                        v-if="sortCriterion == 'user'"
+                        icon="angle-down"
+                      ></font-awesome-icon>
+                    </span>
+                  </th>
+                  <th scope="col" @click="sortBy('country')">
+                    <span
+                      >Country&nbsp;
+                      <font-awesome-icon
+                        v-if="sortCriterion == 'country'"
+                        icon="angle-down"
+                      ></font-awesome-icon>
+                    </span>
+                  </th>
+                  <th scope="col" @click="sortBy('email')">
+                    <span
+                      >Email&nbsp;
+                      <font-awesome-icon
+                        v-if="sortCriterion == 'email'"
+                        icon="angle-down"
+                      ></font-awesome-icon>
+                    </span>
+                  </th>
+                  <th scope="col"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="user in users" :key="user.user">
+                  <td @click="selectUser(user.user)">
+                    <font-awesome-icon
+                      v-tooltip="roleLabel(user.role)"
+                      :icon="roleIcon(user.role)"
+                      class="fa-lg"
+                    ></font-awesome-icon>
+                  </td>
+                  <td @click="selectUser(user.user)">{{ user.user }}</td>
+                  <td @click="selectUser(user.user)">{{ user.country }}</td>
+                  <td @click="selectUser(user.user)">{{ user.email }}</td>
+                  <td class="text-right">
+                    <button
+                      @click="sendTestMail(user.user)"
+                      class="btn btn-sm btn-info mr-1"
+                      v-tooltip="$gettext('Send testmail')"
+                      v-if="user.email"
+                    >
+                      <font-awesome-icon icon="paper-plane"></font-awesome-icon>
+                    </button>
+                    <button
+                      @click="
+                        showDeleteUserPrompt = true;
+                        userToDelete = user.user;
+                      "
+                      class="btn btn-sm btn-danger"
+                      v-tooltip="$gettext('Delete user')"
+                    >
+                      <font-awesome-icon icon="trash" />
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="d-flex mx-auto align-items-center">
+            <button
+              @click="prevPage"
+              v-if="this.currentPage !== 1"
+              class="mr-2 btn btn-sm btn-light align-self-center"
             >
-              <font-awesome-icon
-                icon="users-cog"
-                class="mr-2 fa-fw"
-              ></font-awesome-icon>
-              <translate class="headline">Users</translate>
-            </h6>
-            <div class="card-body">
-              <table id="datatable" :class="tableStyle">
-                <thead>
-                  <tr>
-                    <th scope="col" @click="sortBy('role')">
-                      <span
-                        >Role&nbsp;
-                        <font-awesome-icon
-                          v-if="sortCriterion == 'role'"
-                          icon="angle-down"
-                        ></font-awesome-icon>
-                      </span>
-                    </th>
-                    <th scope="col" @click="sortBy('user')">
-                      <span
-                        >Username&nbsp;
-                        <font-awesome-icon
-                          v-if="sortCriterion == 'user'"
-                          icon="angle-down"
-                        ></font-awesome-icon>
-                      </span>
-                    </th>
-                    <th scope="col" @click="sortBy('country')">
-                      <span
-                        >Country&nbsp;
-                        <font-awesome-icon
-                          v-if="sortCriterion == 'country'"
-                          icon="angle-down"
-                        ></font-awesome-icon>
-                      </span>
-                    </th>
-                    <th scope="col" @click="sortBy('email')">
-                      <span
-                        >Email&nbsp;
-                        <font-awesome-icon
-                          v-if="sortCriterion == 'email'"
-                          icon="angle-down"
-                        ></font-awesome-icon>
-                      </span>
-                    </th>
-                    <th scope="col"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="user in users" :key="user.user">
-                    <td @click="selectUser(user.user)">
-                      <font-awesome-icon
-                        v-tooltip="roleLabel(user.role)"
-                        :icon="roleIcon(user.role)"
-                      ></font-awesome-icon>
-                    </td>
-                    <td @click="selectUser(user.user)">{{ user.user }}</td>
-                    <td @click="selectUser(user.user)">{{ user.country }}</td>
-                    <td @click="selectUser(user.user)">{{ user.email }}</td>
-                    <td class="text-right">
-                      <button
-                        @click="sendTestMail(user.user)"
-                        class="btn btn-sm btn-info mr-1"
-                        v-tooltip="$gettext('Send testmail')"
-                        v-if="user.email"
-                      >
-                        <font-awesome-icon
-                          icon="paper-plane"
-                        ></font-awesome-icon>
-                      </button>
-                      <button
-                        @click="
-                          showDeleteUserPrompt = true;
-                          userToDelete = user.user;
-                        "
-                        class="btn btn-sm btn-danger"
-                        v-tooltip="$gettext('Delete user')"
-                      >
-                        <font-awesome-icon icon="trash" />
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div class="d-flex mx-auto align-items-center">
-              <button
-                @click="prevPage"
-                v-if="this.currentPage !== 1"
-                class="mr-2 btn btn-sm btn-light align-self-center"
-              >
-                <font-awesome-icon icon="angle-left"></font-awesome-icon>
-              </button>
-              {{ this.currentPage }} / {{ this.pages }}
-              <button
-                @click="nextPage"
-                v-if="this.currentPage !== this.pages"
-                class="ml-2 btn btn-sm btn-light align-self-center"
-              >
-                <font-awesome-icon icon="angle-right"></font-awesome-icon>
-              </button>
-            </div>
-            <div class="mr-3 pb-3">
-              <button @click="addUser" class="btn btn-info addbutton shadow-sm">
-                <translate>Add User</translate>
-              </button>
-            </div>
+              <font-awesome-icon icon="angle-left"></font-awesome-icon>
+            </button>
+            {{ this.currentPage }} / {{ this.pages }}
+            <button
+              @click="nextPage"
+              v-if="this.currentPage !== this.pages"
+              class="ml-2 btn btn-sm btn-light align-self-center"
+            >
+              <font-awesome-icon icon="angle-right"></font-awesome-icon>
+            </button>
+          </div>
+          <div class="mr-3 py-3 text-right">
+            <button @click="addUser" class="btn btn-info addbutton shadow-sm">
+              <translate>Add User</translate>
+            </button>
           </div>
         </div>
-        <Userdetail
-          class="d-flex userdetails"
-          v-if="isUserDetailsVisible"
-        ></Userdetail>
       </div>
+      <Userdetail v-if="isUserDetailsVisible"></Userdetail>
     </div>
 
     <div
@@ -165,9 +159,7 @@
   </div>
 </template>
 
-<style lang="scss">
-@import "@/assets/tooltip.scss";
-
+<style lang="scss" scoped>
 .addbutton {
   position: absolute;
   bottom: $offset;
@@ -183,7 +175,7 @@
 }
 
 .main {
-  height: 100vh;
+  height: 100%;
 }
 
 .icon {
@@ -309,7 +301,7 @@
     },
     userlistStyle() {
       return [
-        "userlist mt-3 mr-3 shadow-xs",
+        "userlist mr-3",
         {
           userlistsmall: this.isUserDetailsVisible,
           userlistextended: !this.isUserDetailsVisible