My life css timeline

[web148]

So far I have a timeline of my life. It is a lifetime in php, and from a mysql table. And it somehow works. But I’d like to make several enhancements.
It is a page only for me, to be shown on my PC monitor, so no problem for responsivness on small screens.

I’d like to put different kind of events in different “columns” (not with a table, of course, but using grid or flex). As different kind of events I mean: studies, job, health, holydays, and so on.
And this because every event should have an height matching with is duration. And so, unless every kind of event has its own "column, there would be “overlapping” events.

I don’t know if it is relevant give you my present css code. Or it would be enough to say that any item of my mysql table ha a column (“typology”) from which I should get a class to determine where that kind of event should be positioned (in what of 5 columns should appear).

I guess that I have give you too less information. Let me know what other ones I should provide.
Thank you!

EDIT

This afternoon I will add some further info. Please wait. Thank you!

[PaulOB]

It all depends what you want it to look like but I did a graph in an old post on the forums that converted table data into a graph effect.

It may be that you could do something similar.

@web148

This afternoon I will add some further info. Please wait. Thank

Ok, probably better to see what you have in mind

[web148]

I wish something like this

                            ## 2001

health1                                 
jan 09                                  money1
                                        feb 23
                                                            
            job1                                                
            mar 02                                          family1
                                                            mar 10
                                         










                   
                            ## 2002
                                                            family2
                                                            jan 14

           job2
           feb 08
health2
feb 17





                                        money2
                                        apr 02

Of course the above is a skeleton. I wish every item with the correct distance from the beginning (my birth), years (with a specific class, from mysql table) at the center of the page, and other items positioned in their respective “column” (depending of their class).

[PaulOB]

If I’m understanding correctly then that looks more or less like the graph I posted except without the coloured columns (which are just background colors and borders).

e.g.

If that’s correct then the table approach would work that I have shown and you just start a new tr for each year as required.

I also assume that the max number of column will be known otherwise you couldn’t line it up properly.

Or did I misunderstand the example

[web148]

Uhm… I don’t know.
So far I managed to do something quite right with this css:

.timeline-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
  grid-column-gap: 10px;
}

.holydays {
  grid-column: 1 / 1;
}

.family {
  grid-column: 2 / 2;
}

.job {
  grid-column: 4 / 4;
}

.health {
  grid-column: 5 / 5;  
}

h1, h2, .crono {
  grid-column: 3 / span 3;
}

And every item has the following code to calculate his distance from the beginning

style="top: calc(its-year-month cm - my-birth-year cm);

Every item has this structure:

<div class="modaldivcontainer studi" style="top: calc(year.month cm - mybirthyear cm); "> 
<h1>something</h1> **or** <h2>something</h2> **or** <h3>something</h3>
 <details class="modaltextdiv"><summary>[more]</summary> <p>some text</p> 
 </details> 
</div>

Can I resolve with css, so that items that have <h1> (as years, or main titles) have a real span 5 (all the space)?
Or at this point maybe arises a php/mysql problem?

[PaulOB]

@web148

So far I managed to do something quite right with this css:

Can you put that into a working codepen so I can see what it’s doing as there is some code missing.

I pulled out a lot of code from my demo just to see if I have understood what you are trying to do.

Is that demo above roughly what you are trying to achieve?

@web148

And every item has the following code to calculate his distance from the beginning

style="top: calc(its-year-month cm - my-birth-year cm);

Assuming the backend is going to add those variables then it would make sense to work it out in the php and then in the html just put the value you need. If you like at my example the inline styles is used.

style="top: 55%);

In order to place items absolutely you will need to create a fixed height for each year or have some other basis to work on.

[web148]

@PaulOB

Is that demo above roughly what you are trying to achieve?

yes, it is.

@PaulOB

In order to place items absolutely you will need to create a fixed height for each year or have some other basis to work on.

I think so, yes.

But should I now speak of php code? In this thread?

[PaulOB]

@web148

But should I now speak of php code? In this thread?

The first thing is to get the layout displaying as you want it and then once you have done that then you can move to PHP to generate the html that’s needed. In my example the php could generate the html with the value required and then the css does the rest. If you can get your demo working with hard coded (logical) values in the html then the backend will have something solid to work with.

You do need a logical structure so that you have something to work with. For example if you want to place something at a timeline of say Jun 01 then the area it sits in needs to be 12 months tall and then the entry needs to be converted to a percentage of the current timeline (assuming 12 months) so it would need to be placed at 50%.

[PaulOB]

Here’s a similar grid example that only needs one measurement plugged in.

It’s not perfect but I doubt the difference will be noticed.

[web148]

Thank you, Paul! But in that way I would have a php problem (very probably).
I prefer something like this (somehow working):

<div id="cronos">

<div id=year>

</div>

<div id="timeline"> 

</div>
</div>

The content of timeline div is quite correct.
But with this css I cannot get the expected result:

#cronos {
  width: 100vw; 
  display: grid; 
  grid-template-columns: 10% 90%; 
  }

I’d like to show the years as vertical text as in your above (#7) example, so that your div can be very “slim”. Instead with that css code I get years all above

EDIT

fixed (that error, but not solved the whole problem) ! I removed a grid-column: 1/1; in #years

[PaulOB]

@web148

But with this css I cannot get the expected result:

You haven’t posted enough for me to work out what you are doing. I can’t see that that will work in any usable way. If you can flesh it out or put it into a codepen then I can check if you are doing something else. However the html is very similar to my post 10 anyway.

The example I posted in post 10 using CSS grid is doing exactly what you wanted (I believe) and is a very simple html structure. It will expand and contract as required.

The only thing the backend needs to do is to put a px value in here.

 <div style="--height:0px" class="entry">

I made the default height 365px so you just need to put a value in there that matches your date. e.g. 1st Feb would be style="--height:32px". To be honest I don’t think it can be simpler than that

Alternatively you just put a date in there from the back end and then you use JS to convert that into a value to be used in the css.

[web148]

OK, thank you. Tomorrow I will try.

EDIT

But some code I can provide even now:

html

<div id="cronos">
<div id="year">
[...]
<h2 class='year' style='top: calc(1992.01px * 300)'>1992</h2>
<h2 class='year' style='top: calc(1993.01px * 300)'>1993</h2>
<h2 class='year' style='top: calc(1994.01px * 300)'>1994</h2>
<h2 class='year' style='top: calc(1995.01px * 300)'>1995</h2>
[...]
</div>
<div id="timeline">
[...]
</div>
</div>

and so on

css

#cronos {
  width: 100vw; 
  display: grid; 
  grid-template-columns: 10% 90%; 
  }

#year h2 {transform: rotate(-90deg);
  height: 1cm;
  width: 3vw !important;
}

result

As you can see the h2 are too close each other.

EDIT

Forgotten to add display: grid !
Nor I have to play with these values:

#year {
 display: grid;
  grid-template-rows: 250px 
}

[Archibald]

@web148

I’d like to put different kind of events in different “columns” (not with a table, of course, but using grid or flex).

I suggest you consider generating an <svg>, or possibly a <canvas> element from your mysql data. I am assuming you want something like a Gantt chart but with the timeline drawn vertically.

You could draw a grid with horizontal lines every month (say) and draw five columns for your five types of “events”. Then for example if you have a winter holiday from 14th December to 5th February you would be able to draw a rectangle in one column stretching from one year into the next. A text label could be added.

[web148]

Thank you, Archibald. I will see.
But now I’m quite near a solution with this code:

#timeline {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-column-gap: 5px;
}

.family {
  grid-column: 1 / 1; 
}

.job {
  grid-column: 2 / 2; 
}

.year {
  grid-column: 3 / span 6; 
}

.health {
  grid-column: 5 / 5; 
}

.holydays {
  grid-column: 6 / 6;
}

The only problem is that year row is not covering all columns, but only 60% or so (at right).

Fixed:

.year {
  grid-column: 1 / span 6; 
}

[PaulOB]

@web148

Fixed:

Glad you fixed it

Unfortunately I can’t confirm whether you will have problems later on or not as you have never posted any fully working code (like a codepen perhaps). I tried all the code you posted above but it just renders as nonsense as there are obviously bits missing

As long as it’s working for you then I guess it doesn’t matter anyway but it would have been nice to see the finished product