Slide to compare feature

[maurahoward]

To accommodate for the panel and stay current with iOS 5, I think we should implement the slide feature on the results page. And then if we're doing the slide feature, I think we may as well put the option to bookmark via the results page too. This way a user can bookmark a college and come back to it later and see that college's details. And then this design feature is very similar to how the iPhone's email app works too -- once a user slides, the panel icon turns into the word "compare."

Here are two storyboards -- one staying with our current design and another utilizing a blurred background image (wouldn't be that one; we would need to get another photo). I think the background image\ on the results page makes it a little more visually interesting/pretty. I've seen other apps use a blurred background image, but never for a long list of results.

Anyway, we talk about this more next time we meet. For now just implement the slide feature if/when you get a chance.

[maurahoward]

Oh and then the colleges that are highlighted in gray are the ones that have been selected to be compared.

[JMV2112]

what about the search bar on the results page?

Thanks, Josh Valdivieso

Bachelor of Science: Information Technology, 2014 Minor: Computer Science and Psychology University of Missouri - Columbia Jmv8t2@mail.missouri.edu Mobile: 816-517-0648

---

From: maurahoward notifications@github.com Sent: Tuesday, January 21, 2014 11:06 PM To: forsythetony/CollegeComparison Subject: Re: [CollegeComparison] Slide to compare feature (#40)

Oh and then the colleges that are highlighted in gray are the ones that have been selected to be compared.

Reply to this email directly or view it on GitHubhttps://github.com/forsythetony/CollegeComparison/issues/40#issuecomment-32993826.

[maurahoward]

What do you think about putting the search bar in the panel? That's what the Facebook app does, and that way users can search for a specific college no matter what page they're on.

[forsythetony]

I think that'd be a good idea. Just a general "Search Colleges" function that would return the detail page for that college.

[forsythetony]

Also, I still think that the "x Colleges Returned" header shouldn't follow the user down the page. I don't think the user will care all that much about it and even if they do they only have to see it once, it shouldn't be taking up screen real estate wherever the user goes.

[maurahoward]

I agree.

[forsythetony]

[forsythetony]

Been working on it.

[forsythetony]

So this is the compare function.

[forsythetony]

And here's an example of what bookmarking might look like

[maurahoward]

That looks awesome! I like that the compared college turns that coral color and I like the popup notification as well -- looks really good!

The only tweaks I would have is to change the bookmark color to either a lighter shade or the blue we've used a few times. Icons may also look better than words, but that could be too confusing for the user. Once we have three lines for each result box, I think it will look more balanced too.

Also, keep your eye out for a code that could implement bookmark folders when a user wanted to bookmark a college. If we did folders, we could just keep the notification box you have now, and the folder box would come before it.

[forsythetony]

Alright these are the colors I'm using now. If you could get me the hex code for that blue we we're using I'll throw it in there. Currently I'm using the colors on this page so if there are any you want to use let me know because it makes the whole process super easy and they're not bad looking. But again, a hex code would be just as easy.

[maurahoward]

Looks great! Try using this color for the blue -- #69AEEF

[maurahoward]

This is off topic from the current thread, but quick question: how hard would it be to do a font change? Would it be easy for me to mess with the fonts in my own branch and then implement if I got it to work?

[forsythetony]

I've just pushed some changes up that should make configuring the layout pretty easy. Currently in both CCPanelViewViewController.m and FilteredCollegesViewController.m, the files that handle the panel view and search results view respectively, you'll see a function at the bottom called -(void)aestheticsConfiguration which makes it pretty easy to modify the fonts, colors, and padding around various labels and views. Pull down the latest code, make a new branch and play around with it. I'll try to add it to more view controllers and if there's any other setting you'd want to mess around with let me know and I might be able to add it in there.

-(void)aestheticsConfiguration
{
    //The View's background color

        UIColor *mainViewBackgroundColor    =   [UIColor whiteColor];

    //Table view background configuration.

        UIColor *panelViewBackgroundColor   =   [UIColor colorWithPatternImage:[UIImage imageNamed:@"pixel_weave.png"]];

    //The color for the seperator lines between cells

        UIColor *separatorLineColor         =   [UIColor black50PercentColor];

    //Panel View Header Configuration

        UIColor *headerViewBackgroundColor  =   [UIColor colorWithWhite:0.15 alpha:1.0];

        UIColor *headerLabelBackgroundColor =   [UIColor yellowColor];

        UIColor *colorForHeaderText         =   CORALCOLOR;

        NSString *fontNameForHeaderText     =   @"Avenir-Heavy";
        float fontSizeForHeaderText         =   20.0;

        //Configure padding for header label

    //Panel view cell configuration

        UIColor *cellBackgroundColor        =   [UIColor colorWithWhite:0.2 alpha:1.0];

        UIColor *cellLabelBackgroundColor   =   [UIColor yellowColor];

        UIColor *colorForCellText           =   CORALCOLOR;

        NSString *fontNameForCellText       =   @"Avenir-Heavy";
        float fontSizeForCellText           =   20.0;

        //Configure padding for header and cell

        float headerLeftPadding             =   5.0;
        float headerBottomPadding           =   -3.0;
        float headerWidth                   =   200.0;
        float headerHeight                  =   30.0;

        float cellLeftPadding               =   7.0;
        float cellBottomPadding             =   7.0;
        float cellWidth                     =   200.0;
        float cellHeight                    =   30.0;

    //Panel view configuration

        //Set the width of the panel

        float panelWidth                    =   150.0;

        //Set the Displacement

        float panelDisplacement             =   0.0;

        //Set the overdraw

        float panelOverdraw                 =   40.0;

        //Set the time duration (in seconds) for the toggle close animation

        float toggleCloseAnimationDuration  =   0.18;

        //Should the panel bounce back on left overdraw?

        BOOL bounceBackOnLeftOverdraw = NO;

    //------------DON'T MESS WITH ANYTHING BELOW THIS LINE UNLESS YOU'RE SURE YOU KNOW WHAT YOU'RE DOING-----------------------

    NSArray *colorsKeys = [NSArray arrayWithObjects:
                                                   @"hBackground",
                                                   @"hText",
                                                   @"hFont",
                                                   @"hLabelBackground",
                                                   @"cBackground",
                                                   @"cText",
                                                   @"cFont",
                                                   @"cLabelBackground", nil];

    NSArray *colorsObjects = [NSArray arrayWithObjects:
                                                      headerViewBackgroundColor,
                                                      colorForHeaderText,
                                                      [UIFont fontWithName:fontNameForHeaderText size:fontSizeForHeaderText],
                                                      headerLabelBackgroundColor,
                                                      cellBackgroundColor,
                                                      colorForCellText,
                                                      [UIFont fontWithName:fontNameForCellText size:fontSizeForCellText],
                                                      cellLabelBackgroundColor, nil];

    CGRect cPad = CGRectMake(cellLeftPadding, cellBottomPadding, cellWidth, cellHeight);

    CGRect hPad = CGRectMake(headerLeftPadding, headerBottomPadding, headerWidth, headerHeight);

    NSDictionary *colorsDictionary = [NSDictionary dictionaryWithObjects:colorsObjects forKeys:colorsKeys];

    NSDictionary *paddingDictionary = [NSDictionary dictionaryWithObjectsAndKeys:
                                                                                   [NSValue valueWithCGRect:cPad],
                                                                                   @"cPadding",
                                                                                   [NSValue valueWithCGRect:hPad],
                                                                                   @"hPadding", nil];

    theLook = [NSDictionary dictionaryWithObjectsAndKeys:
                                                           colorsDictionary,
                                                           @"colors",
                                                           paddingDictionary,
                                                           @"padding", nil];

    [self.revealViewController setRightViewController:self];
    self.revealViewController.rightViewRevealWidth = panelWidth;

    self.revealViewController.rightViewRevealDisplacement = panelDisplacement;
    self.revealViewController.rightViewRevealOverdraw = panelOverdraw;
    self.revealViewController.bounceBackOnLeftOverdraw = bounceBackOnLeftOverdraw;
    self.revealViewController.toggleCloseAnimationDuration = toggleCloseAnimationDuration;

    self.view.backgroundColor = mainViewBackgroundColor;
    self.tableView.backgroundColor = panelViewBackgroundColor;
    self.tableView.separatorColor = separatorLineColor;
}

[forsythetony]

A couple sites you might find useful

• www.iosfonts.com
  • Lists all the available fonts compatible with iOS
• http://subtlepatterns.com/
  • Has a bunch of really nice textures. To use them in the project drag and drop them into the the CollegeComparison folder using Finder, then in Xcode right click on one of the folders to the left (whichever would make the most sense based on what view controller you're modifying, it's not super important I just like to keep it organized) and click Add files to "College Comparison", look for the image you added and select it (make sure that copy items to destination folder is unchecked), now in Xcode right click on the image you just added and rename it to something that makes sense, then to use it as a background you're basically going to turn it into a color by using this method

UIColor *newBackgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"MaurasTexture.png"]]

[forsythetony]

Just added the function to CCAppDelegate.m which is where you'd wanna go if you want to change the color and font of the Navigation bar.

[forsythetony]

Just added it to CCBookmarksPage.m

[maurahoward]

Awesome, thank you for looking into/adding all of that! I have a really busy week this week, but will start looking at those functions and working with them ASAP -- probably this weekend.