Began styling member modal

website/client/components/appHeader.vue

@@ -1,24 +1,6 @@
 <template lang="pug">
 #app-header.row
-  avatar#header-avatar(:user="user")
+  user-list-detail
-  div
-    span.character-name {{user.profile.name}}
-    span.character-level Lvl {{user.stats.lvl}}
-    .progress-container.d-flex
-      img.icon(src="~assets/header/png/health@3x.png")
-      .progress
-        .progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
-      span {{user.stats.hp | round}} / {{MAX_HEALTH}}
-    .progress-container.d-flex
-      img.icon(src="~assets/header/png/experience@3x.png")
-      .progress
-        .progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
-      span {{user.stats.exp | round}} / {{toNextLevel}}
-    .progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
-      img.icon(src="~assets/header/png/magic@3x.png")
-      .progress
-        .progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
-      span {{user.stats.mp | round}} / {{maxMP}}
 </template>
 
 <style lang="scss" scoped>
@@ -36,86 +18,14 @@ $header-text-color: #D5C8FF;
   height: 192px;
   color: $header-text-color;
 }
-
-.character-name {
-  display: block;
-  font-size: 16px;
-  margin-top: 32px;
-  line-height: 1.5;
-  color: $white;
-  font-weight: bold;
-}
-
-.character-level {
-  display: block;
-  font-size: 12px;
-  margin-top: 4px;
-  margin-bottom: 20px;
-  line-height: 1;
-}
-
-#header-avatar {
-  margin-top: 24px;
-  margin-right: 1rem;
-}
-
-.progress-container {
-  margin-bottom: 12px;
-}
-
-.progress-container > span {
-  font-size: 12px;
-  margin-left: 10px;
-  line-height: 1em;
-}
-
-.progress-container > .icon {
-  width: 12px;
-  height: 12px;
-  margin-right: 10px;
-}
-
-.progress-container > .progress {
-  width: 203px;
-  margin: 0px;
-  border-radius: 0px;
-  height: 12px;
-  background-color: $header-dark-background;
-}
-
-.progress-container > .progress > .progress-bar {
-  border-radius: 0px;
-  height: 12px;
-  min-width: 0px;
-}
 </style>
 
 <script>
-import Avatar from './avatar';
+import UserListDetail from './userListDetail';
-import { mapState } from 'client/libs/store';
-
-import { toNextLevel } from '../../common/script/statHelpers';
-import statsComputed from '../../common/script/libs/statsComputed';
-import percent from '../../common/script/libs/percent';
 
 export default {
   components: {
-    Avatar,
+    UserListDetail,
-  },
-  methods: {
-    percent,
-  },
-  computed: {
-    ...mapState({
-      user: 'user.data',
-      MAX_HEALTH: 'constants.MAX_HEALTH',
-    }),
-    maxMP () {
-      return statsComputed(this.user).maxMP;
-    },
-    toNextLevel () { // Exp to next level
-      return toNextLevel(this.user.stats.lvl);
-    },
   },
 };
-</script>
+</script>

website/client/components/guilds/membersModal.vue

@@ -3,12 +3,29 @@ div
   button.btn.btn-primary(b-btn, @click="$root.$emit('show::modal','members-modal')") {{ $t('viewMembers') }}
 
   b-modal#members-modal(:title="$t('createGuild')")
-    ul(v-for='member in members', :key='member')
+    .header-wrap(slot="modal-header")
-      li(@click='clickMember') {{member}}
+      .row
-        button(@click='removeMember(member)', v-once) {{$t('remove')}}
+        .col-6
-        button(@click='quickReply(member)', v-once) {{$t('message')}}
+          h1 Testing
-        button(@click='addManager(member)', v-once) {{$t('addManager')}}
+        .col-6
-        button(@click='removeManager(member)', v-once) {{$t('addManager')}}
+          button(type="button" aria-label="Close" class="close")
+            span(aria-hidden="true") ×
+      .row
+        .form-group.col-6
+          input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
+        .col-6
+          span.dropdown-label {{ $t('sortBy') }}
+          b-dropdown(:text="$t('sort')", right=true)
+            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
+    .row(v-for='member in members', :key='member', )
+      .col-8
+        user-list-detail
+      .col-4
+        b-dropdown(:text="$t('sort')", right=true)
+          b-dropdown-item(@click='sort(option.value)') {{$t('remove')}}
+          b-dropdown-item(@click='sort(option.value)') {{$t('message')}}
+          b-dropdown-item(@click='sort(option.value)') {{$t('addManager')}}
+          b-dropdown-item(@click='sort(option.value)') {{$t('removeManager')}}
 
   b-modal#remove-member(:title="$t('confirmRemoveMember')")
     button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
@@ -17,13 +34,37 @@ div
     button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
 </template>
 
+<style lang='scss'>
+
+header {
+  background-color: #edecee;
+  border-radius: 4px 4px 0 0;
+}
+
+.header-wrap {
+  width: 100%;
+}
+
+h1 {
+  color: #4f2a93;
+}
+
+</style>
+
 <script>
 import bModal from 'bootstrap-vue/lib/components/modal';
+import bDropdown from 'bootstrap-vue/lib/components/dropdown';
+import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
+
+import UserListDetail from '../userListDetail';
 
 export default {
   props: ['group'],
   components: {
     bModal,
+    bDropdown,
+    bDropdownItem,
+    UserListDetail,
   },
   data () {
     return {

website/client/components/userListDetail.vue

@@ -0,0 +1,112 @@
+<template lang="pug">
+div
+  avatar#header-avatar(:user="user", style='float:left;')
+  div(style='float:left;')
+    span.character-name {{user.profile.name}}
+    span.character-level Lvl {{user.stats.lvl}}
+    .progress-container.d-flex
+      img.icon(src="~assets/header/png/health@3x.png")
+      .progress
+        .progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
+      span {{user.stats.hp | round}} / {{MAX_HEALTH}}
+    .progress-container.d-flex
+      img.icon(src="~assets/header/png/experience@3x.png")
+      .progress
+        .progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
+      span {{user.stats.exp | round}} / {{toNextLevel}}
+    .progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
+      img.icon(src="~assets/header/png/magic@3x.png")
+      .progress
+        .progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
+      span {{user.stats.mp | round}} / {{maxMP}}
+</template>
+
+<style lang="scss" scoped>
+@import '~client/assets/scss/colors.scss';
+
+// TODO move to colors.scss if used in other places
+$header-dark-background: #271B3D;
+$header-text-color: #D5C8FF;
+
+.character-name {
+  display: block;
+  font-size: 16px;
+  margin-top: 32px;
+  line-height: 1.5;
+  color: $white;
+  font-weight: bold;
+}
+
+.character-level {
+  display: block;
+  font-size: 12px;
+  margin-top: 4px;
+  margin-bottom: 20px;
+  line-height: 1;
+}
+
+#header-avatar {
+  margin-top: 24px;
+  margin-right: 1rem;
+}
+
+.progress-container {
+  margin-bottom: 12px;
+}
+
+.progress-container > span {
+  font-size: 12px;
+  margin-left: 10px;
+  line-height: 1em;
+}
+
+.progress-container > .icon {
+  width: 12px;
+  height: 12px;
+  margin-right: 10px;
+}
+
+.progress-container > .progress {
+  width: 203px;
+  margin: 0px;
+  border-radius: 0px;
+  height: 12px;
+  background-color: $header-dark-background;
+}
+
+.progress-container > .progress > .progress-bar {
+  border-radius: 0px;
+  height: 12px;
+  min-width: 0px;
+}
+</style>
+
+<script>
+import Avatar from './avatar';
+import { mapState } from 'client/libs/store';
+
+import { toNextLevel } from '../../common/script/statHelpers';
+import statsComputed from '../../common/script/libs/statsComputed';
+import percent from '../../common/script/libs/percent';
+
+export default {
+  components: {
+    Avatar,
+  },
+  methods: {
+    percent,
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+      MAX_HEALTH: 'constants.MAX_HEALTH',
+    }),
+    maxMP () {
+      return statsComputed(this.user).maxMP;
+    },
+    toNextLevel () { // Exp to next level
+      return toNextLevel(this.user.stats.lvl);
+    },
+  },
+};
+</script>