Single project view

[joshdarby]

Changes

This pull request makes the following changes:

• Adds a way to link to single post by using a project_id=ID query param
• Pulls in single project data via AJAX and displays it in the single project holder partial

Why

For #125

Testing/Questions

Features that this PR affects:

• Single project view
• Functionality for linking to a specific project

Questions that need to be answered before merging:

• Is this PR targeting the correct branch in this repository?
• Does anything need to be sanitized better?
• Any safety check conditionals missing?
• Is there a better way to do any of this?
• When do we get to style this?
• What issue pertains to the mobile version?

Steps to test this PR:

1. Create a project with all possible meta fields filled out
2. View the project on the frontend and make sure everything displays without issue
3. Make sure the unique project link works and isn't broken

[benlk]

There's a duplication of divs when loading a post via AJAX

[benlk]

Thanks for the catch. 👍

[benlk]

Consider https://current.test/ltw-test-page/ and the per-project page https://current.test/ltw-test-page/?project_id=3251741:

On page load, https://current.test/ltw-test-page/ displays in the single-project area the final post from the queue, which is the last item in the post list.

The DOM looks like this:

<div class="projects-single-holder">
	<h1 class="projects-single-title">Youth Reporting Institute</h1>
	....
</div>

Styles on .projects-single-holder give the project a single black outline.

Clicking on the last item in the list loads the post:

<div class="projects-single-holder">
	<div class="projects-single-holder">
		<h1 class="projects-single-title">Youth Reporting Institute</h1>
		....
	</div>
</div>

The post now has a double black outline.

Loading the project-specific URL https://current.test/ltw-test-page/?project_id=3251741 means that that project is, upon page load, queried for by JS and then loaded by JS:

<div class="projects-single-holder">
	<div class="projects-single-holder">
		<h1 class="projects-single-title">Youth Reporting Institute</h1>
		....
	</div>
</div>

The post now has a double black outline.

In conclusion: loading the project via JS means that we get an extra div.projects-single-holder.

• should we have separate divs for inner and outer, so that the AJAX response can reply with only the inner div to be appended to the outer? This might require splitting partials/project-single-holder.php into two files: the holder and the held.

[joshdarby]

@benlk I noticed that too and wanted to hear your opinion on what you think would be best. I think splitting up the "holder" and the "held" sounds like a viable solution.

[benlk]

#140 (comment) explores a little more the holder/held distinction; I think what we'd end up with is:

div.project-single-layout
    button.project-single-close
    div.project-single-holder
         article.project-single-held

[joshdarby]

@benlk 8a616c2 starts the implementation of that structure

[benlk]

This needs to be sanitized; since post IDs are always integers we could do abs(intval( $post_id ))

[joshdarby]

Updated in 554eded

[benlk]

When do we get to style this?

Not sure, but we should plan for attempted content overflow. Right now, iframes come in with width="771px", and that's distorting the grid:

max-width: 100% on iframes and pictures would fix this.

What issue pertains to the mobile version?

I don't think there's a separate item for this. At 770px and below, we could:

• add a "close" button to the held partial
• in partials/project-base.php, move the holder before the list, so that on slow connections the loaded project displays first, before the list
• on mobile with html:not(.no-js), hide the holder
• when a new held partial is rendered, add a CSS open class or jQuery .show() to unhide the holder and reveal both the held and the "close" button

[benlk]

Hold/held looks good 👍

We can do the mobile styles and other work in a later pass, I guess?