Botão de staff

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.forumeiros.com
Versão do fórum: PunBB

Descrição

Gostaria de um código para adicionar o mesmo efeito que isto: http://prntscr.com/gcjqdo
Só que diferente disso gostaria de adicionar grupos, aí por exemplo:
No meu fórum tem grupo de "Donos","Sub-Donos" e "Administradores", aí apareceria esses 3 e a pessoa escolhia o grupo e via os membros e quais deles estão online.
Seria possível ?

É possível, mas é quase inalcançável. O Luiz demorou um bom tempo para fazer esse plugin, e mesmo assim tudo o que ele faz é puxar as informações já disponíveis na tela do /memberlist. Para puxarmos o que quer, teríamos que puxar da /groups, e nela não tem as informações como o avatar do membro e o status de online, nos obrigando a fazer uma segunda query para cada membro para puxar essas informações do perfil.

É simplesmente complicado demais para ser feito e pesado demais para o usuário relativo ao valor que trará para seu fórum.

Kyo Panda escreveu:É possível, mas é quase inalcançável. O Luiz demorou um bom tempo para fazer esse plugin, e mesmo assim tudo o que ele faz é puxar as informações já disponíveis na tela do /memberlist. Para puxarmos o que quer, teríamos que puxar da /groups, e nela não tem as informações como o avatar do membro e o status de online, nos obrigando a fazer uma segunda query para cada membro para puxar essas informações do perfil.

É simplesmente complicado demais para ser feito e pesado demais para o usuário relativo ao valor que trará para seu fórum.

Pode puxar as informações sem o avatar nem nada, apenas as mesmas informações que você disse que pode ser feito. Contudo, quero que dê para mandar MP e mostre que está online, seria possível?

O status online também não é possível, veja:



http://brasilplayultimate.forumeiros.com/g17-donos

Essas são as informações que consigo puxar sem impactar o fórum. O que está nessa página é possível de puxar.

Kyo Panda escreveu:O status online também não é possível, veja:



http://brasilplayultimate.forumeiros.com/g17-donos

Essas são as informações que consigo puxar sem impactar o fórum. O que está nessa página é possível de puxar.

Puxa apenas se está online (aquela bolinha igual nos tópicos: http://prntscr.com/gd14ye) , horário que entrou e pra enviar mp.

Dá pra fazer?

Mas essas informações não existem na página que te passei. Consigo apenas puxar as informações que estão lá sem gerar lag no seu fórum. :/

Consegue então só o nome de usuário e o MP?

Seriam:

• Mensagem Privada
  
• Nome de usuário
  
• Mensagens
  
• Localização
  
• Email
  
• Web site
  

Kyo Panda escreveu:Seriam:

• Mensagem Privada
  
• Nome de usuário
  
• Mensagens
  
• Localização
  
• Email
  
• Web site
  

Sim, quero deixar só nome e mensagem privada, apenas isso, retirando todo o resto.

Você deseja um código igual ao que temos aqui, mas sem:

• As opções de busca (caixa de busca e opções de filtro);
  
• O avatar.
  

Deixando somente com:

• O nome de usuário;
  
• O link para MP.
  

Correto?

Luiz escreveu:Você deseja um código igual ao que temos aqui, mas sem:

• As opções de busca (caixa de busca e opções de filtro);
  
• O avatar.
  

Deixando somente com:

• O nome de usuário;
  
• O link para MP.
  

Correto?

Exato mas apenas pra administração, no caso membro desses grupos:
Donos
Sub-Donos
Administradores

Seria possível?

Não posso trabalhar com distinção por grupos, mas somente com as informações que estão disponíveis na página /memberlist.

Isso já foi explicado pelo Kyo Panda acima.

Luiz escreveu:Não posso trabalhar com distinção por grupos, mas somente com as informações que estão disponíveis na página /memberlist.

Isso já foi explicado pelo Kyo Panda acima.

Certo, teria como um código do mesmo jeito que eu personalizasse para adicionar os membros então ? com as mesmas informações pedidas acima ?

Exemplo: Entra um membro novo na staff, vou lá e edito o código e coloco ele.
Caso não tenha, pode prosseguir da maneira que o senhor falou.

Explique melhor essa segunda opção:

Certo, teria como um código do mesmo jeito que eu personalizasse para adicionar os membros então ? com as mesmas informações pedidas acima ?

Exemplo: Entra um membro novo na staff, vou lá e edito o código e coloco ele.

Luiz escreveu:Explique melhor essa segunda opção:

Certo, teria como um código do mesmo jeito que eu personalizasse para adicionar os membros então ? com as mesmas informações pedidas acima ?

Exemplo: Entra um membro novo na staff, vou lá e edito o código e coloco ele.

Certo, vamos lá
Tipo um código HTML cujo eu iria adicionando "manualmente" os usuários que nele estariam, entende ?
Aí eu personalizava sozinho para aparecer apenas membros da minha equipe, entendeu ?

Okay. Você ainda vai desejar a caixa de busca? Não, né?

Negativo, sem a caixa por favor.

Só mais uma observação.
Nessa sua segunda proposta, não poderemos ver quando foi o último login do usuário, certo, logo, eles seriam mostrados em ordem hierárquica pelo cargo.

Luiz escreveu:Só mais uma observação.
Nessa sua segunda proposta, não poderemos ver quando foi o último login do usuário, certo, logo, eles seriam mostrados em ordem hierárquica pelo cargo.

Certo, dá para mostrar que ele está online pelo menos?

Nope, foi o que disse acima.

Certo, pode prosseguir, estou de acordo.

Os UP's acima foram apagados para despoluir o tópico.

---

O código será mais ou menos este:

Código:

(function ($) {
  'use strict';

  var config = {

    list: [
      {
        name: 'Grupo 1',
        color: '#3399cc',
        members: [
          { name: 'Membro 1', id: 1 },
          { name: 'Membro 2', id: 2 },
          { name: 'Membro 3', id: 3 }
        ]
      }, {
        name: 'Grupo 2',
        color: '#000',
        members: [
          { name: 'Membro 4', id: 4 },
          { name: 'Membro 5', id: 5 },
          { name: 'Membro 6', id: 6 },
          { name: 'Membro 7', id: 7 }
        ]
      }
    ],

    view: {
      lang: {
        title: 'Staff do Fórum',
        next: 'Próximo',
        prev: 'Anterior'
      },
     
      template: $([
        '<div class="staff-userlist">',
        '  <header>',
        '  </header>',
        '  <main>',
        '    <div class="append-zone">',
        '    </div>',
        '  </main>',
        '  <footer>',
        '  </footer>',
        '</div>'
      ].join('\n'))
    },
   
    engine: {

      /**
      * @param {object} parent - Corresponde ao seletor pai que a lista será colocada.
      */
      init: function (parent) {

        $.each(config.list, function (index, group) {
          var $list = $('<div>', {
            'class': 'fa-list-group',
            'html' : [
              $('<span>', { 'class': 'fa-list-group-title', 'text': group.name }).prop('outerHTML'),
              $('<div>', { 'class': 'fa-list-append-zone' }).prop('outerHTML')
            ].join('\n')
          })
            .css('background-color', group.color)
          ;

          $.each(group.members, function (index, user) {
            $('<div>', {
              'class': 'fa-list-user-item',
              'html' : [
                $('<a>', { 'text': user.name, 'href': '/u' + user.id }).prop('outerHTML'),
                $('<a>', { 'html': '<i class="fa fa-envelope-o"></i>', 'href': '/privmsg?mode=post&u=' + user.id }).prop('outerHTML')
              ].join('\n')
            })
              .appendTo($list.find('.fa-list-append-zone'))
            ;
          });

          $list.appendTo(config.view.template.find('.append-zone'));
        });

        $(parent).append(config.view.template);
      }
    }
  };

  $(function () {
    config.engine.init($('body'));
  });
}(jQuery));

Ainda faltam os estilos, no entanto, para configurar, você deverá completar um JSON com as informações:

Código:

list: [
  {
    name: 'Grupo 1',
    color: '#3399cc',
    members: [
      { name: 'Membro 1', id: 1 },
      { name: 'Membro 2', id: 2 },
      { name: 'Membro 3', id: 3 }
    ]
  }, {
    name: 'Grupo 2',
    color: '#000',
    members: [
      { name: 'Membro 4', id: 4 },
      { name: 'Membro 5', id: 5 },
      { name: 'Membro 6', id: 6 },
      { name: 'Membro 7', id: 7 }
    ]
  }
],

Ou seja, é manual.
Tudo okay, certo?

Perfeito.
Mas veja:
http://prntscr.com/gllow2
Faltou CSS né ? kkk
Vou aguardar você fazer para terminar de testar.

Edit:
Testei o código assim e parou de funcionar, fiz algo errado dentro os cochetes?

Código:

(function ($) {
  'use strict';
 
  var config = {
 
    list: [
      {
        name: 'Donos',
        color: '#E30000',
        members: [
          { name: 'DR_Ultimate', id: 1 },
          { name: 'Diego_Ultimate', id: 9 },
          { name: 'Math_Ultimate', id: 207 }
        ]
      }, {
        name: 'Sub-Donos',
        color: '#FF00FF',
        members: [
          { name: 'Ninguém', id: - },
          { name: 'Ninguém', id: - }
        ]
      }, {
        name: 'Administradores',
        color: '#0033FF',
        members: [
          { name: 'Ninguém', id: - },
          { name: 'Ninguém', id: - },
          { name: 'Ninguém', id: - },
          { name: 'Ninguém', id: - }
        ]
      }
    ],
 
    view: {
      lang: {
        title: 'Staff do Fórum',
        next: 'Próximo',
        prev: 'Anterior'
      },
     
      template: $([
        '<div class="staff-userlist">',
        '  <header>',
        '  </header>',
        '  <main>',
        '    <div class="append-zone">',
        '    </div>',
        '  </main>',
        '  <footer>',
        '  </footer>',
        '</div>'
      ].join('\n'))
    },
   
    engine: {
 
      /**
      * @param {object} parent - Corresponde ao seletor pai que a lista será colocada.
      */
      init: function (parent) {
 
        $.each(config.list, function (index, group) {
          var $list = $('<div>', {
            'class': 'fa-list-group',
            'html' : [
              $('<span>', { 'class': 'fa-list-group-title', 'text': group.name }).prop('outerHTML'),
              $('<div>', { 'class': 'fa-list-append-zone' }).prop('outerHTML')
            ].join('\n')
          })
            .css('background-color', group.color)
          ;
 
          $.each(group.members, function (index, user) {
            $('<div>', {
              'class': 'fa-list-user-item',
              'html' : [
                $('<a>', { 'text': user.name, 'href': '/u' + user.id }).prop('outerHTML'),
                $('<a>', { 'html': '<i class="fa fa-envelope-o"></i>', 'href': '/privmsg?mode=post&u=' + user.id }).prop('outerHTML')
              ].join('\n')
            })
              .appendTo($list.find('.fa-list-append-zone'))
            ;
          });
 
          $list.appendTo(config.view.template.find('.append-zone'));
        });
 
        $(parent).append(config.view.template);
      }
    }
  };
 
  $(function () {
    config.engine.init($('body'));
  });
}(jQuery));

Irei começar a fazer os estilos agora, como disse anteriormente:

Luiz escreveu:Ainda faltam os estilos, no entanto, para configurar, você deverá completar um JSON com as informações:

---

iScroll escreveu:Testei o código assim e parou de funcionar, fiz algo errado dentro os cochetes?

Sim, em number, você colocou um hífen, o que não é permitido no JavaScript — exceto se for uma string.
Se você trocar o hífen por zero ou qualquer outro número ou uma string irá funcionar.

Glossário:

Certo no aguardo

UP

Demorou, mas chegou:

Código:

/**
 * @name Staff Widget.
 * @author Luiz {@link https://lffg.github.io/}
 * @version 1.0
 * @licence MIT
 */
(function ($, html, css) {
  'use strict';

  var config = {

    list: [
      {
        name: 'Grupo 1',
        color: '#3399cc',
        members: [
          { name: 'Membro 1', id: 1 },
          { name: 'Membro 2', id: 2 },
          { name: 'Membro 3', id: 3 }
        ]
      }, {
        name: 'Grupo 2',
        color: '#000',
        members: [
          { name: 'Membro 4', id: 4 },
          { name: 'Membro 5', id: 5 },
          { name: 'Membro 6', id: 6 },
          { name: 'Membro 7', id: 7 }
        ]
      }, {
        name: 'Grupo 3',
        color: 'red',
        members: [
          { name: 'Membro 8', id: 8 },
          { name: 'Membro 9', id: 9 },
          { name: 'Membro 10', id: 10 },
          { name: 'Membro 11', id: 11 },
          { name: 'Membro 12', id: 12 },
          { name: 'Membro 13', id: 13 },
          { name: 'Membro 14', id: 14 }
        ]
      }
    ],

    view: {
      lang: {
        title: 'Staff do Fórum'
      },

      template: $(html.join('\n'))
    },

    engine: {

      /**
      * @param {object} parent - Corresponde ao seletor pai que a lista será colocada.
      */
      init: function (parent) {

        $.each(config.list, function (index, group) {
          var $list = $('<div>', {
            'class': 'fa-list-group',
            'html' : [
              $('<span>', {
                'class': 'fa-list-group-title',
                'text': group.name
              })
                .css('background-color', group.color)
                .prop('outerHTML')
              ,
              $('<div>', { 'class': 'fa-list-append-zone' }).prop('outerHTML')
            ].join('\n')
          })
            .css('border-left-color', group.color)
          ;

          $.each(group.members, function (index, user) {
            $('<div>', {
              'class': 'fa-list-user-item',
              'html' : [
                $('<a>', { 'text': user.name, 'href': '/u' + user.id }).prop('outerHTML'),
                $('<a>', {
                  'class': 'pm-link',
                  'html': '<i class="fa fa-envelope-o"></i>',
                  'href': '/privmsg?mode=post&u=' + user.id
                }).prop('outerHTML')
              ].join('\n')
            })
              .appendTo($list.find('.fa-list-append-zone'))
            ;
          });

          $list.appendTo(config.view.template.find('.append-zone'));
        });

        $(config.view.template)
          .find('.fa-lang-title')
            .text(config.view.lang.title)
        ;

        $(parent).append(config.view.template);
        $('<style>', { 'text': css.join('\n') }).appendTo('head');

        return this;
      },

      hide: function () {
        $(config.view.template)
          .find('.staff-userlist')
            .hide()
        ;

        return this;
      },

      events: function () {
        $(document).on('click', function () {
          $(config.view.template)
            .find('.staff-userlist')
              .hide()
          ;
        });

        $(config.view.template).on('click', function (event) {
          event.stopPropagation();
        });

        $(config.view.template)
          .find('.staff-userlist-toggler')
            .on('click', function () {
              $(config.view.template)
                .find('.staff-userlist')
                  .toggle()
              ;
            })
        ;

        return this;
      }
    }
  };

  $(function () {
    config.engine.init($('body')).hide().events();
  });
}(jQuery, [
  '<div class="staff-userlist-wrapper">',
  '  <a href="javascript:void(0);" class="staff-userlist-toggler">',
  '    <i class="fa fa-user-secret"></i>',
  '  </a>',
  '  <div class="staff-userlist">',
  '    <header>',
  '      <h3 class="fa-lang-title"></h3>',
  '    </header>',
  '    <main>',
  '      <div class="append-zone">',
  '      </div>',
  '    </main>',
  '  </div>',
  '</div>'
], [
  '.fa-memberlist-wrapper { display: none; }',
  '.staff-userlist-wrapper {',
  '  position: fixed;',
  '  bottom: 0;',
  '  left: 0;',
  '  z-index: 99999;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler {',
  '  background-color: #39c;',
  '  width: 50px;',
  '  height: 50px;',
  '  display: -webkit-inline-box;',
  '  display: -ms-inline-flexbox;',
  '  display: inline-flex;',
  '  -webkit-box-pack: center;',
  '      -ms-flex-pack: center;',
  '          justify-content: center;',
  '  -webkit-box-align: center;',
  '      -ms-flex-align: center;',
  '          align-items: center;',
  '  border-top-right-radius: 3px;',
  '  cursor: pointer;',
  '  -webkit-transition: all 130ms linear;',
  '  transition: all 130ms linear;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler:hover {',
  '  background-color: #444;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler .fa {',
  '  color: #fff;',
  '  font-size: 30px;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist {',
  '  position: absolute;',
  '  bottom: 50px;',
  '  left: 0;',
  '  background-color: #fff;',
  '  width: 350px;',
  '  box-shadow: 5px 5px rgba(0, 0, 0, 0.3);',
  '  border: solid 1px #ddd;',
  '  border-left: none;',
  '  border-left: solid 0px;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist header {',
  '  background-color: #39c;',
  '  border-bottom: solid 1px #ddd;',
  '  padding: 13px 15px;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist header h3 {',
  '  margin: 0;',
  '  padding: 0;',
  '  border: none;',
  '  color: #fff;',
  '  font-family: "Trebuchet MS", "Segoe UI", "Ubuntu", "Helvetica Neue", "Helvetica", Arial, sans-serif;',
  '  font-size: 18px;',
  '  font-weight: 500;',
  '}',
  '.staff-userlist-wrapper .staff-userlist main .append-zone {',
  '  max-height: 80vh;',
  '  max-height: -moz-calc(100vh - 355px);',
  '  max-height: -webkit-calc(100vh - 355px);',
  '  max-height: -ms-calc(100vh - 355px);',
  '  max-height: -o-calc(100vh - 355px);',
  '  max-height: calc(100vh - 355px);',
  '  overflow-y: scroll;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group {',
  '  border-bottom: solid 1px #ddd;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group:last-child {',
  '  border-bottom: none;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-group-title {',
  '  display: block;',
  '  font-size: 14px;',
  '  padding: 9px 15px;',
  '  color: #fff;',
  '  font-family: "Trebuchet MS", "Segoe UI", "Ubuntu", "Helvetica Neue", "Helvetica", Arial, sans-serif;',
  '  text-transform: uppercase;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone {',
  '  padding: 10px 15px;',
  '  line-height: 20px;',
  '  font-size: 13px;',
  '}',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone .fa-list-user-item {',
  '  display: block;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone .fa-list-user-item .pm-link {',
  '  float: right;',
  '}'
]));

o/

OPAAAAAAAAA \o/
Perfeitão, falta só arrumar alguns pequenos detalhes, veja: http://prntscr.com/gmc6y6

Méh.
Isso é do seu CSS.

O header do seu fórum é selecionado pelo CSS pela tag (header). Isso é extremamente prejudicial.
Recomendo que troque o seletor para um ID ou classe.

---

Código:

/**
 * @name Staff Widget.
 * @author Luiz {@link https://lffg.github.io/}
 * @version 1.0
 * @licence MIT
 */
(function ($, html, css) {
  'use strict';

  var config = {

    list: [
      {
        name: 'Grupo 1',
        color: '#3399cc',
        members: [
          { name: 'Membro 1', id: 1 },
          { name: 'Membro 2', id: 2 },
          { name: 'Membro 3', id: 3 }
        ]
      }, {
        name: 'Grupo 2',
        color: '#000',
        members: [
          { name: 'Membro 4', id: 4 },
          { name: 'Membro 5', id: 5 },
          { name: 'Membro 6', id: 6 },
          { name: 'Membro 7', id: 7 }
        ]
      }, {
        name: 'Grupo 3',
        color: 'red',
        members: [
          { name: 'Membro 8', id: 8 },
          { name: 'Membro 9', id: 9 },
          { name: 'Membro 10', id: 10 },
          { name: 'Membro 11', id: 11 },
          { name: 'Membro 12', id: 12 },
          { name: 'Membro 13', id: 13 },
          { name: 'Membro 14', id: 14 }
        ]
      }
    ],

    view: {
      lang: {
        title: 'Staff do Fórum'
      },

      template: $(html.join('\n'))
    },

    engine: {

      /**
      * @param {object} parent - Corresponde ao seletor pai que a lista será colocada.
      */
      init: function (parent) {

        $.each(config.list, function (index, group) {
          var $list = $('<div>', {
            'class': 'fa-list-group',
            'html' : [
              $('<span>', {
                'class': 'fa-list-group-title',
                'text': group.name
              })
                .css('background-color', group.color)
                .prop('outerHTML')
              ,
              $('<div>', { 'class': 'fa-list-append-zone' }).prop('outerHTML')
            ].join('\n')
          })
            .css('border-left-color', group.color)
          ;

          $.each(group.members, function (index, user) {
            $('<div>', {
              'class': 'fa-list-user-item',
              'html' : [
                $('<a>', { 'text': user.name, 'href': '/u' + user.id }).prop('outerHTML'),
                $('<a>', {
                  'class': 'pm-link',
                  'html': '<i class="fa fa-envelope-o"></i>',
                  'href': '/privmsg?mode=post&u=' + user.id
                }).prop('outerHTML')
              ].join('\n')
            })
              .appendTo($list.find('.fa-list-append-zone'))
            ;
          });

          $list.appendTo(config.view.template.find('.append-zone'));
        });

        $(config.view.template)
          .find('.fa-lang-title')
            .text(config.view.lang.title)
        ;

        $(parent).append(config.view.template);
        $('<style>', { 'text': css.join('\n') }).appendTo('head');

        return this;
      },

      hide: function () {
        $(config.view.template)
          .find('.staff-userlist')
            .hide()
        ;

        return this;
      },

      events: function () {
        $(document).on('click', function () {
          $(config.view.template)
            .find('.staff-userlist')
              .hide()
          ;
        });

        $(config.view.template).on('click', function (event) {
          event.stopPropagation();
        });

        $(config.view.template)
          .find('.staff-userlist-toggler')
            .on('click', function () {
              $(config.view.template)
                .find('.staff-userlist')
                  .toggle()
              ;
            })
        ;

        return this;
      }
    }
  };

  $(function () {
    config.engine.init($('body')).hide().events();
  });
}(jQuery, [
  '<div class="staff-userlist-wrapper">',
  '  <a href="javascript:void(0);" class="staff-userlist-toggler">',
  '    <i class="fa fa-user-secret"></i>',
  '  </a>',
  '  <div class="staff-userlist">',
  '    <header>',
  '      <h3 class="fa-lang-title"></h3>',
  '    </header>',
  '    <main>',
  '      <div class="append-zone">',
  '      </div>',
  '    </main>',
  '  </div>',
  '</div>'
], [
  '.fa-memberlist-wrapper { display: none; }',
  '.staff-userlist-wrapper {',
  '  position: fixed;',
  '  bottom: 0;',
  '  left: 0;',
  '  z-index: 99999;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler {',
  '  background-color: #39c;',
  '  width: 50px;',
  '  height: 50px;',
  '  display: -webkit-inline-box;',
  '  display: -ms-inline-flexbox;',
  '  display: inline-flex;',
  '  -webkit-box-pack: center;',
  '      -ms-flex-pack: center;',
  '          justify-content: center;',
  '  -webkit-box-align: center;',
  '      -ms-flex-align: center;',
  '          align-items: center;',
  '  border-top-right-radius: 3px;',
  '  cursor: pointer;',
  '  -webkit-transition: all 130ms linear;',
  '  transition: all 130ms linear;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler:hover {',
  '  background-color: #444;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler .fa {',
  '  color: #fff;',
  '  font-size: 30px;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist {',
  '  position: absolute;',
  '  bottom: 50px;',
  '  left: 0;',
  '  background-color: #fff;',
  '  width: 350px;',
  '  box-shadow: 5px 5px rgba(0, 0, 0, 0.3);',
  '  border: solid 1px #ddd;',
  '  border-left: none;',
  '  border-left: solid 0px;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist header {',
  '  background-color: #39c;',
  '  border-bottom: solid 1px #ddd;',
  '  padding: 13px 15px;',
  '  height: auto;',
  '  width: auto;',
  '  background-size: initial;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist header h3 {',
  '  margin: 0;',
  '  padding: 0;',
  '  border: none;',
  '  color: #fff;',
  '  font-family: "Trebuchet MS", "Segoe UI", "Ubuntu", "Helvetica Neue", "Helvetica", Arial, sans-serif;',
  '  font-size: 18px;',
  '  font-weight: 500;',
  '}',
  '.staff-userlist-wrapper .staff-userlist main .append-zone {',
  '  max-height: 80vh;',
  '  max-height: -moz-calc(100vh - 355px);',
  '  max-height: -webkit-calc(100vh - 355px);',
  '  max-height: -ms-calc(100vh - 355px);',
  '  max-height: -o-calc(100vh - 355px);',
  '  max-height: calc(100vh - 355px);',
  '  overflow-y: scroll;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group {',
  '  border-bottom: solid 1px #ddd;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group:last-child {',
  '  border-bottom: none;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-group-title {',
  '  display: block;',
  '  font-size: 14px;',
  '  padding: 9px 15px;',
  '  color: #fff;',
  '  font-family: "Trebuchet MS", "Segoe UI", "Ubuntu", "Helvetica Neue", "Helvetica", Arial, sans-serif;',
  '  text-transform: uppercase;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone {',
  '  padding: 10px 15px;',
  '  line-height: 20px;',
  '  font-size: 13px;',
  '}',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone .fa-list-user-item {',
  '  display: block;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone .fa-list-user-item .pm-link {',
  '  float: right;',
  '}'
]));

@Kyo Panda

Caraca kkk
Perfeito meu caro, obrigado. <3 <3 <3