Revised grid structure
Grid Structure
The grid layout currently uses a masonry layout - when scrolling through long lists of content this becomes problemsome.
We will want to move away from masonry, and introduce a chessboard style grid structure. This means that the items must be a fixed height.
- Grid newsfeed example -> https://www.sketch.com/s/c8f38374-7520-4926-8635-22f06d9e97ce/a/Er8jmO
- Grid channel example -> https://www.sketch.com/s/c8f38374-7520-4926-8635-22f06d9e97ce/a/Lvz8wL
Note: There will be follow on tasks relating to the introduction of grid view within the newsfeed and introduction of a full/widescreen layout. For reference these tasks will be linked form here, as there may be a level of overlap.
- Related full screen issue - #4014
You can access a low-fi prototype of the grid structure here. Note how it reacts to the browsers being resized https://master.d1pujmsi8dp0ig.amplifyapp.com/channel/grid
General
https://www.sketch.com/s/c8f38374-7520-4926-8635-22f06d9e97ce/a/xGO2ZW
- Each grid item must be a fixed height
- The height corresponds to the width of the post. The content area as highlighted in red (see above URL) should maintain a 1:1 aspect ratio.
- There may be cases where the header and social controls can be hidden, so this should be configurable.
Pure Text
https://www.sketch.com/s/c8f38374-7520-4926-8635-22f06d9e97ce/a/eE7zpa
- Short text should be vertically positioned in the middle
- For longer text, any run-off should fade-out as the text exceeds the bounds. Clicking on the item will launch the post in its entirety, allowing the user to see all of the available content.
Video/Image Only
https://www.sketch.com/s/c8f38374-7520-4926-8635-22f06d9e97ce/a/WkA3ZK
- As the grid items are of a consistent height, letterboxing will need to occur in order to view the image/video in its entirety.
- Ideally the letterboxing colour should be inherited from the image/video thumb. Not sure how within grasp this is, but it would be a nice to have.
- Note that videos will not play within the grid view. Videos are indicated within a play icon. Tapping will launch the modal where the video will autoplay.
Video/Image with text
https://www.sketch.com/s/c8f38374-7520-4926-8635-22f06d9e97ce/a/GjMyVE
- When text (either a title or description is present) the total height of the corresponding image or video reduces.
- We are limited my the nature of the design how much text can be displayed. If title and text are present, we can only show the first two lines of the title, then fade out the remaining text.
Locked posts
https://www.sketch.com/s/c8f38374-7520-4926-8635-22f06d9e97ce/a/KJdjxD
- Pure text posts should be completely hidden (see first item in above URL)
- An image should be blurred (see send item above)
- A video would not need to be blurred or hidden in anyway. (see third item)
Reminds
https://www.sketch.com/s/c8f38374-7520-4926-8635-22f06d9e97ce/a/qdzWYk
- The only structural change is the addition of the remind bar at the top. This will reduce the height of the remaining post accordingly (see above URL)
Quoted posts
https://www.sketch.com/s/c8f38374-7520-4926-8635-22f06d9e97ce/a/YRlbv0
- Where the quote post text is long, it should only assume 50% of the available height. The remaining 50% should be for the post itself. (see 3rd example in the above URL)
- If the quoted post is too tall for the allowable area, the content should be hidden as it overflows the bounds. This will be quite a common occurrence given the tight area of grid post items.
Embedded content
https://www.sketch.com/s/c8f38374-7520-4926-8635-22f06d9e97ce/a/YRlPOd
- Functionally similar to text/video posts