JaViLuMa
JaViLuMa
PostsComments
KPCKevin Powell - Community
Created by JaViLuMa on 6/4/2024 in #front-end
Achieve scrollable content where other content needs to stay in view upon expanding
Thank you a lot!!! This definitely helps a lot 😄 I had the same idea to use JS for basically the same reason so I am glad to see you did the same 🙂
4 replies
KPCKevin Powell - Community
Created by JaViLuMa on 6/4/2024 in #front-end
Achieve scrollable content where other content needs to stay in view upon expanding
Small bump
4 replies
KPCKevin Powell - Community
Created by JaViLuMa on 9/5/2023 in #front-end
How can I achieve this collapsible timeline/tree
I noticed that, it's definitely a really cool solution actually, might just steal that one 🙂
18 replies
KPCKevin Powell - Community
Created by JaViLuMa on 9/5/2023 in #front-end
How can I achieve this collapsible timeline/tree
Hahaha I noticed, don't worry, it makes me feel a bit better for my first solution because that one also involved magic numbers 😄
18 replies
KPCKevin Powell - Community
Created by JaViLuMa on 9/5/2023 in #front-end
How can I achieve this collapsible timeline/tree
It's DEFINITELY good enough, thank you so much!!!
18 replies
KPCKevin Powell - Community
Created by JaViLuMa on 9/5/2023 in #front-end
How can I achieve this collapsible timeline/tree
No description
18 replies
KPCKevin Powell - Community
Created by JaViLuMa on 9/5/2023 in #front-end
How can I achieve this collapsible timeline/tree
No worries and I actually managed to do it 😄
18 replies
KPCKevin Powell - Community
Created by JaViLuMa on 9/5/2023 in #front-end
How can I achieve this collapsible timeline/tree
@13eck sorry for small nudge but could you maybe confirm my guesses/points?
18 replies
KPCKevin Powell - Community
Created by JaViLuMa on 9/5/2023 in #front-end
How can I achieve this collapsible timeline/tree
Hmmm, good idea for the before suggestion! But wouldn't still that face me with the issue of the horizontal lines disconnecting from the border? Or am I understanding something wrong? Soo this for the third point, I guess I would use a pseudo element to achieve that rounded corner/border radius?
18 replies
KPCKevin Powell - Community
Created by JaViLuMa on 9/5/2023 in #front-end
How can I achieve this collapsible timeline/tree
I remember trying with that but it still had that issue with the last item extending the left border
18 replies
KPCKevin Powell - Community
Created by JaViLuMa on 9/5/2023 in #front-end
How can I achieve this collapsible timeline/tree
@13eck https://codepen.io/MatejR/pen/rNoWeaE should be enough 😄 sorry it took a bit, I had to rewrite all Tailwind classes and whatnot
18 replies
KPCKevin Powell - Community
Created by JaViLuMa on 9/5/2023 in #front-end
How can I achieve this collapsible timeline/tree
@13eck let me make one quickly! Also sorry for late response, had to go do something quickly
18 replies
KPCKevin Powell - Community
Created by Moni on 8/14/2023 in #front-end
Background images
Don't you miss / in front of images inside url? /images/...
10 replies
KPCKevin Powell - Community
Created by JaViLuMa on 8/14/2023 in #front-end
Need help implementing the following design
@Chris thank you a lot!!! 😄 this will definitely help!!!
4 replies
KPCKevin Powell - Community
Created by JaViLuMa on 8/14/2023 in #front-end
Need help implementing the following design
So far, I managed to do the following (it's not per design yet, I am just experimenting): 
<ul class="timeline">
  <li>
    <details><summary>Descripton 1</summary><p>Title 1</p></details>
  </li>
  <li>
    <details><summary>Descripton 2</summary><p>Title 2</p></details>
  </li>
  <li>
    <details><summary>Descripton 3</summary><p>Title 3</p></details>
  </li>
  <li>
    <details><summary>Descripton 4</summary><p>Title 4</p></details>
  </li>
</ul>
<ul class="timeline">
  <li>
    <details><summary>Descripton 1</summary><p>Title 1</p></details>
  </li>
  <li>
    <details><summary>Descripton 2</summary><p>Title 2</p></details>
  </li>
  <li>
    <details><summary>Descripton 3</summary><p>Title 3</p></details>
  </li>
  <li>
    <details><summary>Descripton 4</summary><p>Title 4</p></details>
  </li>
</ul>
With the following CSS: 
$border: #666E98;
$border-hover: #aaa;
$bg-hover: #eee;
$text: #888;
$text-hover: #000;
$ident: 50px;
$left: -($ident);

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  padding:50px;
  font-family:helvetica, arial,sans-serif;
}
ul {
  margin-left:$ident;
}

.timeline {
  li {
    list-style-type: none;
    margin:10px 0 10px 10px;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top:-10px;
      left:$left;
      border-left: 2px solid $border;
      border-bottom:2px solid $border;
      width:$ident;
      height:20px;
    }
    &:first-child:before {
      display: none;
    }
    &:last-child:before {
      border-radius: 0 0 0 10px;
    }
    &:after {
      position:absolute;
      content:"";
      top:10px;
      left:$left;
      border-left: 2px solid $border;
      border-top:2px solid $border;
      width:$ident;
      height:100%;
    }
    &:first-child:after {
      border-radius: 10px 0 0 0;
    }
    &:last-child:after {
      display:none;
    }
    details {
      display:block;
      border: 1px solid $border;
      color:$text;
      text-decoration:none;
      margin-left: 2px;
    }
  }
}
$border: #666E98;
$border-hover: #aaa;
$bg-hover: #eee;
$text: #888;
$text-hover: #000;
$ident: 50px;
$left: -($ident);

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  padding:50px;
  font-family:helvetica, arial,sans-serif;
}
ul {
  margin-left:$ident;
}

.timeline {
  li {
    list-style-type: none;
    margin:10px 0 10px 10px;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top:-10px;
      left:$left;
      border-left: 2px solid $border;
      border-bottom:2px solid $border;
      width:$ident;
      height:20px;
    }
    &:first-child:before {
      display: none;
    }
    &:last-child:before {
      border-radius: 0 0 0 10px;
    }
    &:after {
      position:absolute;
      content:"";
      top:10px;
      left:$left;
      border-left: 2px solid $border;
      border-top:2px solid $border;
      width:$ident;
      height:100%;
    }
    &:first-child:after {
      border-radius: 10px 0 0 0;
    }
    &:last-child:after {
      display:none;
    }
    details {
      display:block;
      border: 1px solid $border;
      color:$text;
      text-decoration:none;
      margin-left: 2px;
    }
  }
}
But there is a slight gradient that is hard to see on the image on the horizontal lines that goes from left to right, how can I achieve that? I know how I would add the little circle at the end, but if there is a way to make the current CSS better/more robust, I would appreciate it a lot
4 replies