Comments (3)
Hey @Schweinepriester!
Thanks for the kind words, it's much appreciated 😄
This seems to be the trickiest use case to deal with 😕
I think the issue is trying to make it play nicely responsively. And that's even after solving how to render things in the correct order in the DOM. As this is aiming to be pure CSS, it's a little out of scope. But with some JavaScript, you could modify the structure slightly once the request for images has been made.
As for the pure CSS approach. I may be overlooking something simple with the flexbox/multi column layout specification but I haven't come up with a solution yet and not sure if there is a simple one.
Approach 1: jsbin.com/kozirih...
The solution I propose in the post was a quick one off the top of my head without any time to truly explore it. My idea was something along the following. If we say have items 1 through 7 going where 1 is the newest and seven oldest, we could populate columns in that order filling one column at a time. Consider;
<div class="layout">
<div class="column">
<div class="panel panel--1">1</div>
<div class="panel panel--4">4</div>
<div class="panel panel--7">7</div>
</div>
<div class="column">
<div class="panel panel--2">2</div>
<div class="panel panel--5">5</div>
</div>
<div class="column">
<div class="panel panel--3">3</div>
<div class="panel panel--6">6</div>
</div>
</div>
We could set our layout block to display: flex
and ensure that each column was equal width. This would display fine and as intended... almost. But what about when we want it to act responsive?
When we scale down to mobile, the assumption is that we would want them all to stack nicely on top of each other in order. I had thought there might be some way to use the order
property on flex items that are nested by applying it to the panels ensuring they were ordered correctly on the lower viewport. However, the assumption was that this wouldn't work because we are hoping that display: flex
elements will almost overlook the column elements altogether and just look at the panels beneath. This is a behaviour similar to how absolutely positioned elements behave within the nearest relatively positioned element.
Approach 2: jsbin.com/zoxiwe...
Alternatively, we could discard the column elements altogether and develop mobile first so that they are all stacked by default. When we scale up to larger viewport we can define an order
for them to move into and using defined height on the panels and the layout, try to get it all to layout nicely. The issue with this approach is that it just doesn't seem to be flexible enough. It also will most likely remove any of the staggered masonry aesthetic that we are striving for because of how flex items will stretch to align etc. and leave gaps when wrapping.
Not ideal but would work
It may not be ideal. However, a work around could be to duplicate the markup and show/hide appropriately. Have one set of panels columned and another just stacked in order. At set breakpoints show/hide whichever is appropriate at that viewport size.
Hope that elaborates things a little. It may be a little out of pure CSS scope at the moment.
from driveway.
Update:: I updated the implementation of clusters and segments to make use of separate columns/rows. This still won't solve the issue out of the box though. For date ordered going left to right, it will require some logic either for server side rendering or using JavaScript to modify the ordering/structure of the DOM.
from driveway.
Closing as dormant. Addressed timeline ordering in README update.
from driveway.
Related Issues (11)
- Implement chronological ordering HOT 1
- Published to npm? HOT 6
- Request/Question: Getting content to span across two columns HOT 1
- Edge Vertical Clustering doesn't work HOT 1
- Does not work for images only HOT 2
- PLEASE add info about browser compatibility HOT 1
- Whats the deal with the class names?
- Direction HOT 2
- Reduce class definitions for nested layouts HOT 1
- Order columns items HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from driveway.