Notable Alumni - Area of Study filter

[ushenoyuog]

CBE would like to have a filter for area of study as they used to on their old Notable alumni page . It doesnt seem like there is a ready field available that we could use. May need further discussion with Kate before this is implemented.

[bdavey07]

The area of study element is currently in the body of a profile section. To implement this, instead of having a filter in the style of the Search for people by role filter on PP1, we could add buttons above the faces view that link to the view filtered by a keyword.

[bdavey07]

First Draft

What I Did

A first mockup can be found at https://aoda-web.uoguelph.ca/business/notable-alumni to make this work, I;

• Added the following taxonomy tags to correspond with the areas of study indicated in the profiles
  • Economics/Finance (211)
  • Hospitality Food and Tourism (212)
  • Real Estate (213)
  • Marketing (214)
• Added the keywords to the profiles
• Added the following URL aliases in the same style as the /business/notable-alumni alias
  • people/faces/211 -> notable-alumni/economics-finance
  • people/faces/212 -> notable-alumni/hospitality-food-tourism
  • people/faces/213 -> notable-alumni/real-estate
  • people/faces/214 -> notable-alumni/marketing
• Changed the Override title option in the view's contextual filter from %1 to Notable Alumni
• Created a Mini Panel for the buttons
  • Buttons are in a 1x5 table linking to each of the URL aliases outlined above
  • They have the classes btn btn-primary btn-lg btn-block
  • Also a button that takes you back to the notable alumni grid

Notes

• I messed around with the different styles on every possible area in the mini panel configuration but can't seem to make the gap between the buttons and the faces view go away

Would love to hear feedback and suggestions on this, especially if you know how to make that pesky gap go away

[bdavey07]

Second Draft

What I Changed

The work in progress site can still be found at https://aoda-web.uoguelph.ca/business/notable-alumni

• Made the buttons smaller and less intrusive
  • Removed the btn-lg class from them
  • Changed the column width from 12 to 8
• Changed the label on the filter button from Area of Study in an h2 element to Sort by area of study in a strong element to match the other filters found in the different people listing pages
• Made the same changes to the view that I made in branch iss650 to show how this will look with the last name search added

Notes

• Still haven't figured out how to remove the gap below the buttons

Would love to hear feedback and suggestions on this, especially if you know how to make that pesky gap go away

[bdavey07]

Third Draft

What I Changed

The work in progress site can still be found at https://aoda-web.uoguelph.ca/business/notable-alumni

• Buttons are now formatted via a inline list rather than a table

Notes

• Still haven't figured out how to remove the gap below the buttons

Would still love to hear feedback and suggestions on this, especially if you know how to make that pesky gap go away

[bdavey07]

Fourth Draft

What I Changed

The work in progress site can still be found at https://aoda-web.uoguelph.ca/business/notable-alumni

• Removed the btn-block class from the buttons to make them look nicer

Notes

• Still haven't figured out how to remove the gap below the buttons

Would still love to hear feedback and suggestions on this, especially if you know how to make that pesky gap go away

[bdavey07]

Notes on Integrating this Feature with Search by Last Name

• If you click one of the buttons to filter the view by area of study, then search by last name, the view will display the people that match the last name search in that area of study.
• If you search by last name and then click one of the buttons, the view will reset the search by last name filter and show all people in that area of study.
• This is unavoidable with this implementation because the buttons to filter by area of study link to a page with the keyword arguments and cannot accommodate for the existing last name filter

[bdavey07]

Change sort by area of study to filter by area of study

[bdavey07]

Page title needs to change to represent the area of study

[bdavey07]

Made the suggested changes from friday's demo

[bdavey07]

https://aoda-web.uoguelph.ca/business/notable-alumni

[nevantan]

base.css:99

[mmafe]

If you remove the paragraph element from each list item, we can get rid of the slight dip that happens when you hover over the buttons.

Instead of:

<li>
    <p><a class="btn btn-primary" href="/business/notable-alumni">All</a></p>
</li>

We go with:

<li>
    <a class="btn btn-primary" href="/business/notable-alumni">All</a>
</li>