Giter VIP home page Giter VIP logo

nicolassiver / nodebb-plugin-ns-awards Goto Github PK

View Code? Open in Web Editor NEW
30.0 9.0 24.0 3.03 MB

A system for rewarding forum users. The plugin allows admin to define set of awards that could be granted to users for special accomplishments.

Home Page: https://community.nodebb.org/topic/4397/nodebb-plugin-ns-awards-ns-awards-give-medals

License: MIT License

JavaScript 84.31% Smarty 1.17% CSS 7.28% SCSS 7.24%
awards profile nodebb plugin

nodebb-plugin-ns-awards's Introduction

NodeBB Awards

A system for rewarding forum users. The plugin allows admin to define set of awards that could be granted to users for special accomplishments.

Version Dependencies

How does it work?

Plugin introduces a new entity for your board: Award. It could be anything: ribbon, medal, special rank, etc.

  1. Visit Awards control panel in Admin Control Panel
  2. Create several awards, don't forget images.
  3. Reward users.
  4. If you want to list users' awards, you can augment Account or Post page templates.

Screenshots

Awards Overview Create New Award
Admin Panel View Create Award View
Give an Award User's Rewards Overview
Create Award View User's Rewards
Rewards Logs Settings
Logging Settings

Themes

Profile template

Use flex template - awards_profile_flex.tpl for Persona v4. Place it wherever you like.

<!-- IMPORT partials/awards_profile_flex.tpl -->

Topic template

Use topic partial to show awards for every post. Award's metadata is the same as for Profile template.

Example Persona Theme, edit node_modules/nodebb-theme-persona/templates/partials/topic/post.tpl:

<!-- IMPORT partials/awards_topic.tpl -->

Filters

The plugin injects rewards to the several places. It could be useful for theme enthusiasts. It's possible to configure a limit or disable a feature in the settings.

  • Posts. Every post will have a new property nsRewards with a list of rewards.
  • Account. Every account will have a new property nsRewards with a list of rewards.

Styling

Overview Page

The overview page is based on Flexbox with simple CSS class name set. Also, all layout is based on em values.

Key CSS Classes:

  • ns-awards-overview__item, container for the list item
  • ns-awards-overview__image, since award image is responsive, it's possible to adjust a width of image container
  • ns-awards-overview__users, list of the awarded users

Profile View

Account/Profile page can include awards.

Key CSS Classes:

  • ns-awards-profile, container, uses Flexbox
  • ns-awards-profile__image, image representation of the award

Topic View

Every post in the topic view can include awards.

Key CSS Classes:

  • ns-awards-topic, container, uses Flexbox
  • ns-awards-topic__item, holder for the award
  • ns-awards-topic__image, image representation of the award

API

The plugin provides external API via hooks. All API methods accept single object as a parameter. Every API request should be authenticated with a token. Tokens could be generated in the ACP.

Example of the request to get all available awards:

{
    auth: {
        token: '50bfa42d-31e2-434e-9634-505b973ee40e'
    }
}

filter:ns.awards.getAwards

Get all available awards.

Parameters:

  • {Object} payload
  • {Object} payload.auth - Authentication
  • {String} payload.auth.token - Authentication String

Returns:

  • {Object} result
  • {Array} result.awards, returns the list of Award objects

static:ns.awards.rewardUser

Give an award to the user. It's important to specify who will grant the award.

Parameters:

  • {Object} payload
  • {Number} awardId - Award Id
  • {Number} fromUserId - User Id who is giving the award
  • {Number} toUserId - User Id who is receiving the award
  • {String} reason - The message to explain why award was given
  • {Object} payload.auth - Authentication
  • {String} payload.auth.token - Authentication String

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.