Mercurial > gemma
changeset 2322:a25b4988eb0c
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 | c00e3f7f5b17 |
| children | 5b53be76080c |
| files | client/src/assets/application.scss client/src/components/App.vue client/src/components/usermanagement/Userdetail.vue client/src/components/usermanagement/Usermanagement.vue |
| diffstat | 4 files changed, 124 insertions(+), 133 deletions(-) [+] |
line wrap: on
line diff
--- 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;
--- 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;
--- 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"]),
--- 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 + <font-awesome-icon + v-if="sortCriterion == 'role'" + icon="angle-down" + ></font-awesome-icon> + </span> + </th> + <th scope="col" @click="sortBy('user')"> + <span + >Username + <font-awesome-icon + v-if="sortCriterion == 'user'" + icon="angle-down" + ></font-awesome-icon> + </span> + </th> + <th scope="col" @click="sortBy('country')"> + <span + >Country + <font-awesome-icon + v-if="sortCriterion == 'country'" + icon="angle-down" + ></font-awesome-icon> + </span> + </th> + <th scope="col" @click="sortBy('email')"> + <span + >Email + <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 - <font-awesome-icon - v-if="sortCriterion == 'role'" - icon="angle-down" - ></font-awesome-icon> - </span> - </th> - <th scope="col" @click="sortBy('user')"> - <span - >Username - <font-awesome-icon - v-if="sortCriterion == 'user'" - icon="angle-down" - ></font-awesome-icon> - </span> - </th> - <th scope="col" @click="sortBy('country')"> - <span - >Country - <font-awesome-icon - v-if="sortCriterion == 'country'" - icon="angle-down" - ></font-awesome-icon> - </span> - </th> - <th scope="col" @click="sortBy('email')"> - <span - >Email - <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