Activities tabs

Tabs

Users can search and filter activities using the side bar, but tabs are a nice way to provide "shortcut" filters allowing them to see interesting content easily.

By default, users under 18 and users who didn't provide their birthday date when joining the website will have "Popular" as their default tab, and users over 18 will have "Hot" as their default tab.

The default tabs and their settings are listed in the user documentation.

Tabs can be fully customized.

Configure the tabs

In your Website settings, you can provide your own HOME_ACTIVITY_TABS:

${PROJECT}/settings.py:

from magi.default_settings import DEFAULT_HOME_ACTIVITY_TABS
from django.utils.translation import ugettext_lazy as _, string_concat

HOME_ACTIVITY_TABS = DEFAULT_HOME_ACTIVITY_TABS.copy()

# Change the icon of the "new" tab:
HOME_ACTIVITY_TABS['new']['icon'] = 'idolized'

# Add a tab:
HOME_ACTIVITY_TABS['top_all_time'] = {
    'title': string_concat(_('Most Popular'), ' (', _('All time'), ')'),
    'icon': 'trophy',
    'form_fields': {
        'ordering': '_cache_total_likes,creation',
    },
}

form_fields can take any field present in the activities filter form, including hidden fields, and your own fields if you configured your own form.

Final result after customizing tabs

⚠️ If you add, delete or edit an existing tab, make sure you reset the settings of users who were using that tab.

python manage.py shell

from magi import models
deleted_tab = 5 # 'top_all_time'
new_tab = 0 # 'popular'
models.UserPreferences.objects.filter(i_default_activities_tab=deleted_tab).update(i_default_activities_tab=new_tab)

Change the color of the tabs

Tabs look like this without art:

Tabs without art

And like this with art:

Tabs with art

You can force the use of colored tabs without art or customize the colors to something else using the CSS function homepage_navbar_colors. It takes the tabs' background color, text color, icon color, active tab's background color, text color and icon color.

${PROJECT}/static/less/style.less:

.current-activity_list[class*="shortcut-"], .current-index {
    .homepage_navbar_colors(@mainColor, white, @secondaryColor, white, inherit, @mainColor);
}