Prototype a Project Home Page

[thekaveman]

Overview

We want to start prototyping a dedicated page for each Project. These are already being rendered by Jekyll, but we need to add more details. This task will eventually roll up into #14.

Action Items

1. Edit the existing Project layout under _layouts/project.html
2. Fill out details, assets, etc.
3. Render links as cards.

[sarL3y]

Here's a v1 for the Project-specific page. I'll take a stab at the Projects Page in the other issue next.

Edit: Found a better wireframe tool.

Project-Specific Page Prototype v1 (Desktop).pdf

[KianBadie]

First iteration of project page made around Oct 21st

[KianBadie]

Second iteration of project page based off of wire frame made by @sarL3y

[ysjiang18]

I made some minor changes, the overall page looks great.

[KianBadie]

Here is a current work in progress of the prototype for the project page

[KianBadie]

Current state of the page:

Accepting any kind of feedback. The place I have most in mind right now is the banner, and how to make it look nice.

[ExperimentsInHonesty]

I think the challenge with the banner is that we are trying to make something work for the banner that is only designed to work for the cards. Why don't we just request a different image from the projects for the project specific page. it allows them to come up with something that is more narrative.

[ExperimentsInHonesty]

This screenshot was taken from the hellogov.org website. What about using it as a placeholder for a second image, that is not the card image

[KianBadie]

I like that idea @ExperimentsInHonesty, and I think that would also be a great image for the banner. I think in order for that to be implemented, we would have to create a banner property on the project cards. Because currently, the project page is a layout that jekyll is using, so I wouldn't be able to hard-code this in for this specific page, but would have to check for a variable that is part of the project yaml.

[ExperimentsInHonesty]

@KianBadie in order to add a second image to the project's md file, we need to decide what to rename the current image field and a host of other questions. I am going to open an issue for this discussion and I will get back to you with his answer.

[KianBadie]

@ExperimentsInHonesty Sounds good!

[thekaveman]

@ExperimentsInHonesty

And then a month from now, we decide that we want to link to the the project's slack channel as well (just an example), we add that to the _/includes/project-homepage.html as something to render at that top part of the project home page, if the name exists in the list of names of links (not the url itself)

Thanks for the explanation, I understand now. I'm often wary of making logic choices like this based on string matching, since it is so easy to introduce casing/spelling errors. On the other hand, it removes the need to update each project.md when a new "required" link comes online. On the other other hand, it also somewhat removes the distributed content editing nature of updates and requires a dev to come in and edit a template. Trade-offs!

[ExperimentsInHonesty]

Answer 1. Created new issue #297 to change the project.md file format, and add logic to the project homepage include to render specific links at top.
Answer 2. Issue is created to implement our decision on how to reform the looking for in project.md #291
Answer 3. We decided we should provide details about where icons on the site came from in the wiki resources section. Issue to assemble that info and display it #292, and its dependency #293
Answer 4. We created an issue to have someone improve the social icons #296
Answer 5. We decided we should try to make a gradient around the image so that it doesn't distort the image when the screen size changes. #295
Answer 6. I created a wiki page that has a link to the template we are currently using. We will update when we change the standard.

[ExperimentsInHonesty]

Currently waiting details about how to render the contributors and Languages of projects.

[KianBadie]

Added logic to display prioritized links at the top:


The actual logic itself is not pretty. I had simpler/prettier logic, but formatting issues arose specifically with adding commas. For now, the logic for this functionality looks like this:

                            {% assign counter = 0 %}
                            {% for item in page.links %}
                                {% if item.name == 'Github' or item.name == 'Test Site' or item.name == 'Launch Site' %}
                                    {% assign counter = counter | plus:1 %}
                                {% endif %}
                            {% endfor %}
                            {% for item in page.links %}
                                {% if item.name == 'Github' or item.name == 'Test Site' or item.name == 'Launch Site' %}
                                    {% if counter > 1 %}
                                        <a href='{{ item.url }}'> {{ item.name }}</a>,
                                        {% assign counter = counter | minus:1 %}
                                    {% elsif counter <= 1 %}
                                        <a href='{{ item.url }}'> {{ item.name }}</a>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}

[KianBadie]

@ExperimentsInHonesty @harishlingam
In regards to last nights discussion with wanting icons with color before deciding what resource cards would look like, I mocked up what the page/resource card options would look like with icons with color if you were still interested at looking at them. I threw a facebook icon in there for more examples:

1. (Original)

2.

3.

[harishlingam]

@ysjiang18 We are taking a second look at the Project Home Page to improve its UI. Our question at the moment: how best can we display the contributors on the project? For instance, if a project has 20 contributors, do we show all of them on page-load, or a select portion? If a select portion, how can one view the remaining contributors if they so choose?

[KianBadie]

@ExperimentsInHonesty @harishlingam
Just added a first iteration of the Project Team card based off of mock data added to _data/github.json and record-clearance-projectt.md files. (Order of contributors/leadership is arbitrary).

Gif

Stills

The leadership card is built with mock data of what the expected github api calls will give us after it is parsed. The sources for all the images in the team seciton are the urls to the github profile pictures, so they were easy to obtain. Leadership section was hard coded into the project.md file (which from my understanding, is the way we plan to do it.) That will allow us to specify what role they play in the project as well as provide any links to forms of contact.

[harishlingam]

@KianBadie @ExperimentsInHonesty @ysjiang18 Thanks for putting this together Kian. It's really helpful to see this iteration of the Project Home Page with dummy data added in. A couple requests: (1) Can you increase the margins between each project resource box as we did on last call? (2) Now seeing the photos added in, I propose we split test the resource boxes Monday evening with: (a) red color tabs (b) gray line (c) light gray color tabs.

[harishlingam]

@ysjiang18 (Just copying my earlier message here): Basically, we are looking for a wireframe that iterates on the mockup we already have, specifically, improving the way contributors are shown beyond a certain number (drop down?carousel? etc.). Following that, how can we improve the look of the Getting Started carrot, which when clicked displays the content box immediately below?

[harishlingam]

@KianBadie My proposed UI edits to the current version:

• Beneath “Open roles”, make bullets flush left
• “Getting Started” centered horizontally with content box. Increase line space above “Getting Started” by 100%.
• Getting Started carrot: Remove bolding. Reduce size by 100%. Increase space between “Getting Started” text and carrot by 100%.
• (If possible) Light grey horizontal line between Project Overview box and Getting Started content box, such that the two boxes look "hinged" when the user has clicked the carrot.
• Left edge of first project leadership, contributors, and project resources to be aligned
• Increased spacing between Getting Started, Readme, and project resource boxes
• Light gray divider line in between logo and “GitHub”, “Slack” and “Readme” within resource boxes
• Light gray boxes around contributor pictures
• Red hyperlink to project leader names (but not to field title "Name")
• “Project Resources” to “Resources” at bottom
• Match font size of "GitHub, Slack, Readme" in resource boxes to font size of "Status, Partner, Location" under Project Overview
• Edit paragraph text within call-out boxes to left-justify

[ExperimentsInHonesty]

@KianBadie is currently working on the left right scroll problem identified by Joel, on this issue comment
ETA : Friday March 12th

[KianBadie]

Sorry for the lack of documentation. Here is an update

Current state of project home page on desktop (my local branch):

A project with all the data we need (linked github repo, readme/wiki, defined project leadership, etc)

Mobile iPhone 6/7/8

A project missing a lot of the data we need (linked github repo, readme/wiki, defined project leadership, etc)

Mobile iPhone 6/7/8

Using these 2 example to show the 2 "opposite" ends of the spectrum of what the pages can look like. I currently have a pull request open to have the project home page be up to date with my local branch. I think the main differences on that pull request might be mobile styling rules. To see what the mobile styling updates look like, I have provided many examples in the pull request #363, using screens that are small, medium, and large.

How to view the page on your desktop

The pages are actually currently integrated into the main site. Just type https://www.hackforla.org/projects/[INSERT_PROJECT_NAME]. The only caveat is that you need to type the [PROJECT_NAME] according to the file name on the website repo. For example, the "ArtWatcher" project url would be "https://www.hackforla.org/projects/adopt-civic-art". I am going to try to keep this comment readable, so I am going to avoid posting many screenshots and refer to the project page urls that are available now (however, they are not completely up to date to the gifs/pictures I have posted above. Those are currently on an open pull request).

Other

There are some things I wanted to talk about relating to the page.

• Some leaders for the leadership cards do not have slack or github links. So when a user clicks on the picture/name, it just opens a new tab of the project home page (rather than slack/github links).
• I currently have 3 separate pull request relating to the project home page Add access to project home page through current projects page. #366 Make hfla logo link to home #364 Update styling with mobile friendly rules and other touch ups #363. Add access to project home page through current projects page. #366 Makes the project home page accessible from the current projects page. Make hfla logo link to home #364 makes the hack for la logo a clickable link to the current projects page. Update styling with mobile friendly rules and other touch ups #363 adds the mobile friendly rules that I think @joelparkerhenderson mentioned.

Other than that I can't think of any other updates. My apologies for the information dump. If I think of more things I will edit this comment and add it.

[ExperimentsInHonesty]

Prototype complete!!!!