Commit 8670f584 authored by Stephane Bouvry's avatar Stephane Bouvry
Browse files

Fix : La ligne de temps occupe toute la largeur

parent 69181972

ui/src/components/DateSlider.vue

+35 −27
Original line number Diff line number Diff line
@@ -3,6 +3,7 @@ 
    <button @click="scroll('gauche')" class="nav-btn left">◀</button>



    <div ref="scrollContainer" class="timeline-scroll">

      <div class="timeline-track">

        <div class="timeline-line"></div>



        <div
@@ -30,6 +31,7 @@ 
          </div>

        </div>

      </div>

    </div>



    <button @click="scroll('droite')" class="nav-btn right">▶</button>

  </div>
@@ -122,11 +124,9 @@ const formaterDate = (dateString) => { 


/* Zone de défilement masquant la scrollbar */

.timeline-scroll {

  display: flex;

  overflow-x: auto;

  scroll-behavior: smooth;

  width: 100%;

  padding: 20px 50px;

  position: relative;

  scrollbar-width: none; /* Firefox */

}
@@ -134,12 +134,20 @@ const formaterDate = (dateString) => { 
  display: none; /* Chrome, Safari, Opera */

}



.timeline-track {

  display: flex;

  position: relative;

  width: max-content;

  min-width: 100%;

  padding: 20px 50px;

}



/* La ligne horizontale */

.timeline-line {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  left: 50px;

  right: 50px;

  height: 4px;

  background: #ddd;

  transform: translateY(-50%);