Main Action Center + Hero's page redesign/CMS

Web Developers
, , ,
1

Here’s an initial draft of the main action.focallocal.org page to discuss and improve on

this could be hard coded from what we have, but is probably easier to drop into a CMS. we should consider whether we want users to have to sign in again - would wordpress, meteor or discourse support this?

Action Center Draft (2016).png1349×1701 1.58 MB

changes:

  1. Filter searching by skills and causes
  2. Expandable cards
  3. Photos in cards to improve visual appeal
  4. Backend to allow easier card creation and link adding
  5. Performance/Current State Measurements

Note: we also want to have a second page using an identical system which will become our Hero’s page, where people can search and hire …or just appreciate those who have given their time and positivity to building Focallocal (different filters. links to pages they wish to promote. linkedin. webpage. youtube channel. etc)

linked to: http://discuss.focallocal.org/t/designing-the-action-center/22?u=andyatfocallocal

2

the current Action Center is a template of the basic functionality we expect to add and a suggested layout

As a user i want to be able to quickly browse all the projects, flash-mobs and teams i can join using filters which make them relevant to me. i want to have access to the three main tools for collaboration (chat, discuss, missions).

I want to be able to see relevant details about each project including: % complete, number of hero’s active, current activity level - and be able to join it.

I also want to have easy access to all resources related to it, including: calling and setting up a team video meeting (via zoom). google drive files. road map.

the cards should expand when i click them so i can quickly browse and see more when i want more info. they should include photos so it visually appeals to me.

The idea is not fully developed and suggestions are welcome. The main challenge right now is finding which CMS would be best for creating this functionality

here’s a working example i hacked together to show the function and movement of the cards

3

Is the website currently built using a CMS?

1 Like
4

we use some.

news.focallocal.org is wordpress
shop.focallocal.org will be Magento
gather.focallocal.org is a Meteor development we’ve created from the ground up

Meteor could probably do this very easily and well, but i’m hesitant as developers tend to blow hot and cold, and i can’t edit the code - so if something breaks or needs updating it might be a struggle to get it fixed

1 Like
5

@sreeram the Action Center and Hero’s sections will be two pages of the same system. they are the same just with different titles and content.

It’d be great if you could have a look at how we can engage people with a card (in the Action Center), and funnel them through the process of joining discussion here, choosing a card in Missions, and Chatting with team mates in Chat.

The current system i’m utilising can be seen in http://action.focallocal.org > Movement tab > Video Production and Editing card

6

i was thinking that users will want to visually reserve the cards they’ve chosen to join so as to feel more connected to them, and find them easier. the initial solution that comes to mind is something like making cards sticky at the top of the list when a user has joined them.

7

suggested working filters: http://jsfiddle.net/D4V1D/8obf6vye/

8

@henrik can you give @sreeram an overview of what you’ve built so far and what he can help with. he’d like to join in the build :slight_smile: (best make sure he doesn’t re-do the same work).

Henrik’s idea was to pull stats from trello, so the cards would show Missions Complete. Missions being worked on, and Missions remaining. this sounds perfect to me!

p.s. i was thinking, and i was mistaken to say we might need upto 12 tags, as that fuction would be covered by the tags in the forum and the specific group cards in the action center
(i.e. the video editing card would have a link to the tag ‘video editing’ in the forum. no need to build anything for that, the functionality already exists i just need to add the link once the trello link up is live :slight_smile: )

am i right in saying that you are also skilled in css/design Sree?

9

Hey - yeah it would help if he takes care of the UI. We’re using materialcss and I’m filling a mustache template via async javascript. So the task would be: take this mustache html template and make it look nice and usable.

if you’re interested I’ll share the files via github

1 Like
10

after you guys have a chat, could we break this into milestones with dates to work towards.

for example, the cards could be linked to trello 1st

next we could add the filter system

third we could add stats into the cards

that’d be a big help for me in knowing how many people to push across to the forum and trello. it will become unmanageable quickly as numbers grow, without the action center main page to tie it together

11

@henrik @sreeram i just realised that one line of filter buttons is not needed, which should make the build easier

we don’t need to have all skills listed in the tabs, we just need to have one button ‘search by skill’, because the discuss forum allows search by filter.

all the skills, Web Development, Writing, Graphic Design, etc will have their own cards in the main Action Center page. These cards will have links in them leading to tags on the forum, so in the Web Dev card i would add links to tags in the forum like ‘html’ ‘css’ ‘meteor’ ‘wordpress’ ‘seo’

note: the tag buttons should be fairly easy to edit as they’ll be different in the Hero’s Wall, where we list people like yourselves who have given their love and support to our community (those will be listed by skill) xXx

12

Hey guys, I was kind of hoping we would work on a JS framework like react with redux because thats what i’m currently focussing on. Anyway, i can help with css, but not design (if that means UX design).
So if there is a repo, maybe i can look into it and help with a few tasks as well.

1 Like
13

i just stumbled across this Wordpress Plugin, which has many of the features we’re looking for. just posting it as a suggestion, in case it would be a good idea to modify it, or use some of the code to save time.

it provides the functionality we require, minus the filters and needing a little redesign and more entry fields: https://wordpress.org/plugins/team-members/

i think @henrikhas already built this half of the functionality anyway, and how it’d perform with 200 - 2000 members listed is def worse considering.

14

here are the files for the Action Center rebuild on Githiub: https://github.com/focallocal/fl-intro

@henrik was having issues centering the modals

15

@henrik

SUCCESS!!! …almost :yum:

the Megamenu is now loading icons correctly in news.focallocal/wordpress except that the shop and action icons wont load at all. i suspect that is due to something i hacked ages ago when changing the icons that showed up, although i’m not sure.

if so it’s probably a very simple fix

16

this code is in the header of action.focallocal.org (where all the icons load perfectly)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Action Centre</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" type="text/css" media="all" href="http://focallocal.org/assets/css/front-page.css" />
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="http://focallocal.org/fl-menu.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {

    var cutCount = 1;

     $("#Intro p").each(function (i) {
        i++;
         if(i == cutCount) {
             $(this).append(' <a href="javascript:void(1)" onclick="$(\'#Intro p\').show(); $(this).hide()"><br>
<br>read more</a>')   
        }
        if(i > cutCount) {
           $(this).hide();
        }
    });

});

i think (not sure) that i added this link here: src=“https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js”

when i wasn’t able to get the icons i wanted to show up. i also think this link is not loaded in news/wordpress.

so, i believe that a few icons are loading from an external source, and others are loading as you intended from the assets file. and if that’s the case, then simply uploading those icons into ‘assets’ would solve the issue.

what are your thoughts? and if that is what’s going on can you give me some guidance on how to put more icons into the assets file?

17

This is now going to be rebuilt inside Discourse (Ruby on Rails).