# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1550566154 -3600
# Node ID a25b4988eb0c94bf07eda4ea8899b9d370558aae
# Parent  c00e3f7f5b178d0b0cb8af9d44661fefd0a81a93
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.

diff -r c00e3f7f5b17 -r a25b4988eb0c client/src/assets/application.scss
--- a/client/src/assets/application.scss	Tue Feb 19 09:13:27 2019 +0100
+++ b/client/src/assets/application.scss	Tue Feb 19 09:49:14 2019 +0100
@@ -12,6 +12,7 @@
  * Thomas Junk <thomas.junk@intevation.de>
  * Markus Kottländer <markus.kottlaender@intevation>
  */
+@import "@/assets/tooltip.scss";
 
 $shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
 $border-radius: 0.25rem;
diff -r c00e3f7f5b17 -r a25b4988eb0c client/src/components/App.vue
--- a/client/src/components/App.vue	Tue Feb 19 09:13:27 2019 +0100
+++ b/client/src/components/App.vue	Tue Feb 19 09:49:14 2019 +0100
@@ -44,8 +44,8 @@
   position: absolute;
   top: 0;
   left: 0;
-  height: 100vh;
-  width: 100vw;
+  right: 0;
+  bottom: 0;
   z-index: 4;
   pointer-events: none;
 }
@@ -56,8 +56,8 @@
 }
 
 #app {
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff -r c00e3f7f5b17 -r a25b4988eb0c client/src/components/usermanagement/Userdetail.vue
--- a/client/src/components/usermanagement/Userdetail.vue	Tue Feb 19 09:13:27 2019 +0100
+++ b/client/src/components/usermanagement/Userdetail.vue	Tue Feb 19 09:49:14 2019 +0100
@@ -1,5 +1,5 @@
 <template>
-  <div class="userdetails mt-3 shadow fadeIn animated card">
+  <div class="userdetails shadow-xs fadeIn animated card">
     <h6
       class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
     >
@@ -154,8 +154,6 @@
 
 .userdetails {
   height: 600px;
-  margin-top: $offset;
-  margin-left: $offset;
   margin-right: $offset;
 }
 
@@ -252,11 +250,11 @@
   },
   computed: {
     cardHeader() {
-      if (this.currentUser.isNew) return "N.N";
+      if (this.currentUser.isNew) return this.$gettext("Add User");
       return this.currentUser.user;
     },
     userNamePlaceholder() {
-      if (this.currentUser.isNew) return "N.N";
+      if (this.currentUser.isNew) return this.$gettext("Username");
       return "";
     },
     ...mapState("application", ["countries"]),
diff -r c00e3f7f5b17 -r a25b4988eb0c client/src/components/usermanagement/Usermanagement.vue
--- 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