# Ok, I have to Build a Website. -with a timeline

**URL:** <https://forum.pinegrow.com/t/ok-i-have-to-build-a-website-with-a-timeline/2779>\
**Category:** Design\
**Created:** [February 23, 2019, 9:17pm UTC](https://forum.pinegrow.com/t/ok-i-have-to-build-a-website-with-a-timeline/2779 "2019-02-23T21:17:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 23, 2019, 9:17pm UTC](https://forum.pinegrow.com/t/ok-i-have-to-build-a-website-with-a-timeline/2779/1 "2019-02-23T21:17:03Z")

</div>

Well I dont have to use A timeline, but that is how I am seeing it in my head.

This is Saturday.  
To have the majority of it up and running by Monday would be good.

… !

I have to present 24 years of Legal Paperwork to a Legal Bod, asap  
And contant a local authority to let them know that Stuff is now being done by legal people.

I have got someone to finance the legal stuff, so I had better get started on the paperwork side of things.

I HATE this BS… its corrupt.

but anyway

I visualise it as a scrolling Vertical timeline, where I can make additions, drop in docs that can be downloaded etc, visuals of the docs in a preview,  
Quick rundown of the docs, so you can see what. your downloading first

and hey! in the future (end of the week? :S )

A search function and maybe the ability to group items by …some grouping system.  
ie, tags, _Council_ _contract_ , _evidence of. fraud_ etc etc.

so , with that in mind I have been looking at several things for inspiration

and currently am looking at this as my starting off point

> **[Building a Vertical Timeline With CSS and a Touch of JavaScript](https://webdesign.tutsplus.com/tutorials/building-a-vertical-timeline-with-css-and-a-touch-of-javascript--cms-26528)**
>
> In this tutorial, we’ll learn how to build a responsive vertical timeline from scratch. First, we’ll create the basic structure with minimal markup and the power of CSS pseudo-elements. Then, we’ll...

which has been sexily pimped here

https://codepen.io/joshyfrancis/embed/preview/KePdEN?height=300&slug-hash=KePdEN&default-tabs=css,result&host=https://codepen.io

and whilst sniffing around I see that one of the commenters on the main, instructional videos above  
as re worked this as a **React** plugin for _NPM_

…so since this is such a sexy little thing, and PineGrow uses Node (waves hands in the air, as If I know what I am talking about…) would this react plugin make a Fine Contribution to the Pinegrow Blocks Library?

its here

> **[react-dual-timeline](https://www.npmjs.com/package/react-dual-timeline)**
>
> Timeline Component for React

caveat… I have NO idea of the relevance of React to NPM/ELECTRON, Pinegrow etc.

and in hindsight, Im about to check out our PG blocks now too as I have not seen them for a long time.  
Or Benhannas tbh.  
I have changed PG versions so much that tis one has nothing installed.

And I need to get my Productivity rolling and find my love for web stuff again as tbh, its taken a pasting lately.

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [February 23, 2019, 11:08pm UTC](https://forum.pinegrow.com/t/ok-i-have-to-build-a-website-with-a-timeline/2779/2 "2019-02-23T23:08:29Z")

</div>

Building the timeline with the sliding panels is easy. Even the animations can be done with that plug in that was recently updates. Making it all responsive is more of a challenge, because this kind of two-column layout isn’t going to fit into a cell phone display.

The search, tags, etc is another story. Now you’re talking a database.

All in two days. I don’t envy you.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 23, 2019, 11:21pm UTC](https://forum.pinegrow.com/t/ok-i-have-to-build-a-website-with-a-timeline/2779/3 "2019-02-23T23:21:37Z")

</div>

thanks… it might run to 3…maybe 4… but heading for 2  
and someone seems to have a fix there to make it responsive.  
Oh well.  
SO hello to you across the pond 😉

maybe you missed it… or had _scroll fatigue_ ie, couldn’t. be arsed to look down and process the info 😛  
hee hee

```auto
Going Responsive

We’re almost ready! The last thing we have to do is to make our timeline responsive. 

First, on what we’ll refer to as “medium screens” (>600px and ≤900px), we only make one small modification. Specifically, we decrease the width of the divs. 

Here are the rules that we have to change:

@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px; /*250+45-6*/
  }
}

```

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/3f307ffd2cead1507ff473ab97431492d066d217.png)

ta da!!  
one column.

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [February 23, 2019, 11:44pm UTC](https://forum.pinegrow.com/t/ok-i-have-to-build-a-website-with-a-timeline/2779/4 "2019-02-23T23:44:33Z")

</div>

> [@schpengle](#):
>
> scroll fatigue

Actually, it’s just general fatigue. I’ve been working 16-18 hour days the last week.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 23, 2019, 11:46pm UTC](https://forum.pinegrow.com/t/ok-i-have-to-build-a-website-with-a-timeline/2779/5 "2019-02-23T23:46:42Z")

</div>

Yeah that’s a bit rough.  
I’ve been doing the same sort of hours, not working, getting to bed around 8am etc  
just trying to get stuff done here.  
I’ve had a bit of a sense of humour failure/frustration overload, lots going on, not much of it nice.  
so, here we all go again\>  
and maybe it was the full moooooooon tooooooo.

---

<div class="post-metadata">

**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\
**Post date:** [February 24, 2019, 1:31pm UTC](https://forum.pinegrow.com/t/ok-i-have-to-build-a-website-with-a-timeline/2779/6 "2019-02-24T13:31:53Z")

</div>

Hi Ian,  
I was wondering the following (also because it looks like this are your own personal documents and not something you have to do for a client or friend).

How important or necessary is it to put it all in a “fancy and shiny” overview…??  
It all sounds **VERY** important, then the contents of the documents and that it all is organized is way more important than the presentation.You don’t have to proof or show them you can do a bit of webdesign! Don’t make it too difficult for yourself and focus on the right things.

I would start to put all these documents in a clear directory and file structure (by year, or category and date). So that everything is named correctly and well organized. Don’t know if you got this “organized structure” already, and maybe this is also enough to present and hand over to those people (on a USB stick or a zip file by mail).

If you want to put those documents also in a “html overview”, you can use that well organized directory and file structure as a solid base to make and build that “html overview”. And again, if you decide to do this, it don’t have to be “fancy and shiny”. A normal table structure is maybe the best and easier way to go for and is for the purpose maybe more than enough.

And about “responsive”, they probably going to view it on a wide enough screen on their office desktop or laptop. So I would not spend time on that and bother about smaller screen sizes.

And keep in mind if you present it only in such an online “html overview”, they have to click, download and save every file **seperatly** themselves. Which can take a long time for them, which is probably not very handy for them, because their time is valuable and also their hourly rate is high and expensive.

Then it is more “user friendly” and less time consuming for them (and also for you) to have a normal directory and file structure with all documents on a USB stick or in a zip file by mail.

* * *

Sorry for maybe being critical, but it is to help you and to see if you have your priorities right, to prevent that you spent too much time on a “shiny overview” that is not needed. To discover at the end of the week that you have to rush things and are having stress and maybe need to fall back and use a “normal” solution because you don’t have enough time left to get it all done before the deadline.

I would first take care of a normal and simple solution (which is probably more than enough) and that you have done that task and that you are able to have all the documents sorted out and that you can hand them over to them. And when that is done and ready and you still have time left. You can see if you are able to make a “fancy and shiny” overview as a nice exercise for yourself without a ticking clock because you have a deadline and to get it all done in time.

Just my thoughts!

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 24, 2019, 1:44pm UTC](https://forum.pinegrow.com/t/ok-i-have-to-build-a-website-with-a-timeline/2779/7 "2019-02-24T13:44:37Z")

</div>

All good and I have already had exactly the same thoughts and that is what I will be doing.

🙂

there, that was quick from me for a change.  
BUT (as always)

Every solicitor/Barrister I have dealt with has also been incompetent / corrupt

-including sitting on my papers for 4 years, ignoring all requests for them , until the _Statute of Limitations_ time period had expired - and the guilty people could NOT be taken to court.

So… I wil also be making this a PUBLIC repository, on the off chance that I can FIND SOMEONE, with some morality who HASNT sold their soul to prostitute themselves out to the highest bidder and finds my situation as REDICULOUS as everyone else but can DO SOMETHING about it.

Website wont be shiny.  
and there are other things.  
including the police doing nothing when I got Shot at whilst in my motorhome last July  
the Health service doing nothing, screwing up and then just abandoning me, for permanently paralysed when I broke my neck in 2003 (I’m fine now! - The world works in weird ways when your determined enough)

etc etc.

So, I shall be collecting all of this into one site

[http://corruptandinept.info](http://corruptandinept.info)

but this solicitor wants to see _the papers_  
after 24 years and 4 solicitors, 4 local authorities (changed ownership that many times over the period) and barristers.

Thats a lot of paper.  
So the purpose of the timeline is to give a general overview of timespan and the ability to cherry pic documents

this Solicitor is 28, she was 2 when I started this…

She is just over half my age and charges £150 and hour.

At her Age I was a _RoughNeck_ on the oil Rigs in the North Atlantic, nearly being killed everyday  
for £13 an hour… the most I have ever earned…

It makes one think

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [March 22, 2021, 8:41am UTC](https://forum.pinegrow.com/t/ok-i-have-to-build-a-website-with-a-timeline/2779/8 "2021-03-22T08:41:38Z")

</div>

Right, just updating this topic, with a link to a fine

**Timeline Tutorial**

For when I get back to this topic, or if others follow along with the thread in the future.

> [@Tutorial - Creating Timelines in Pinegrow](https://forum.pinegrow.com/t/tutorial-creating-timelines-in-pinegrow/4648):
>
> Hi All, Here is a link to the new tutorial. Feel free to question or comment! Cheers, Bob

And this is along the same lines, but wrt Wordpress implimentation, and has more of a _sorting_ function within it too, for sorting the order of articles into chronological order in WP.

> [@Grouping Posts by Year and Month](https://forum.pinegrow.com/t/grouping-posts-by-year-and-month/4718/2):
>
> @HoWin I’m still learning a lot about WordPress in Pinegrow, but here is how I did it. For the year Place an \<h1\> where you want your Year to appear on the page Select the element and add an If Option from the WordPress Actions For the condition enter $old\_year !== $current\_year Next add a PHP Code block from the WP Actions For the function add echo $current\_year and replace the Content Add a PHP Code 2 block from the WP Actions For the function add $old\_year = $current\_year and for replace s…