0

I created a newsfeed on my Drupal 8 site. How to display the news thread in staggered rows?

I want the first to be on the left and the dry one to be on the right, same for others. Actually, I add the class .right to do that and it works.

But how to add this class automatically (I have a hundred blocks to display in the thread)?

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 home-page-footer">
            <div class="col-md-12 timelines">
              <div class="main-timeline">
                <div class="timeline">
                  <div class="timeline-icon">
                    <i class="fas fa-globe-americas"></i>
                  </div>
                  <div class="timeline-content">
                    <h3 class="title">Communautaire</h3>
                    <p class="description">
                    Grâce aux groupes et aux contenus que vous publierez dedans, vous pourrez rencontrer de nouvelles personnes partageant les mêmes centres d’intérêt que vous et y inviter vos amis. Vous pouvez aussi suivre des groupes et des boutiques.
                    </p>
                  </div>
                </div>
                <div class="timeline">
                  <div class="timeline-icon">
                    <i class="fas fa-thumbs-up"></i>
                  </div>
                  <div class="timeline-content right">
                    <h3 class="title">Simple</h3>
                    <p class="description">
                    S1BIOSE est simple d'utilisation et accessible à tous. De plus il est en responsive design, c'est-à-dire qu'il s'adapte à tout type d'appareils (téléphones, tablettes, liseuses, ordinateurs et tv) et ses gros boutons le rendent utilisable sur écran tactile.
                    </p>
                  </div>
                </div>
                <div class="timeline">
                  <div class="timeline-icon">
                    <i class="fas fa-cookie-bite"></i>
                  </div>
                  <div class="timeline-content">
                    <h3 class="title">Respectueux</h3>
                    <p class="description">
                    S1BIOSE est hébergé par une entreprise française sur des serveurs situés en France et est déclaré à la commission nationale de l'informatique et des libertés (CNIL). Vous pouvez supprimer votre compte utilisateur et vos publications à tout moment.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

CSS:

.main-timeline .timeline-content {
    width: 45%;
    padding: 20px;
    border-radius: 5px;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
}

.main-timeline .timeline-content:before {
    content: "";
    border-left: 7px solid #ffffff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    left: 45%;
    top: 20px;
}

.main-timeline .timeline-content.right {
    float: right;
}

.main-timeline .timeline-content.right:before {
    content: "";
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #ffffff;
}

When I manually add the .right class to .timeline-content it works perfectly:

enter image description here

Now when I create a view with Drupal, how to add the .right class automatically to any even-numbered line?

enter image description here

In my JS file, which code should I enter to add the .right class to the even-numbered line?

  $('.timelines').on('even', function () {
       $('timeline-content').addClass('right');
  });


 $('.timeline:nth-child(even) .timeline-content').addClass('right');
.main-timeline {
    position: relative;
}

.main-timeline:before {
    z-index: -1;
    content: "";
    width: 3px;
    height: 100%;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
    position: absolute;
    top: 0;
    left: 49.9%;
}

.main-timeline .timeline {
    margin-top: 50px;
    position: relative;
}

.main-timeline .timeline:before,
.main-timeline .timeline:after {
    content: "";
    display: block;
    width: 100%;
    clear: both;
}

.main-timeline .timeline-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
    overflow: hidden;
    margin-left: -26px;
    position: absolute;
    top: 0;
    left: 50%;
    text-align: center;
}

.main-timeline .timeline-icon img {
    width: 50px;
    height: 50px;
}

.main-timeline .timeline-content {
    width: 45%;
    padding: 20px;
    border-radius: 5px;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
}

.main-timeline .timeline-content:before {
    content: "";
    border-left: 7px solid #ffffff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    left: 45%;
    top: 20px;
}

.main-timeline .timeline-content.right {
    float: right;
}

.main-timeline .timeline-content.right:before {
    content: "";
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #ffffff;
}

.timeline:nth-child(even) .timeline-content {
    float: right;
}

.timeline:nth-child(even) .timeline-content:before {
    content: "";
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #ffffff;
}

.main-timeline .timeline-title {
    color: #000000;
    padding: 10px;
    background: #ffffff;
    border-bottom: 1px solid #cccccc;
    border-radius: 3px 3px 0 0;
    margin: -20px -20px 0px -20px;
}

.main-timeline .timeline-title h3 {
    font-size: 30px;
    font-weight: 300;
    margin-top: 0;
}

.main-timeline .timeline-title h6 {
    margin-bottom: 0;
}

.main-timeline .timeline-description {
    margin-top: 10px;
}

@media only screen and (max-width: 990px) {
    .main-timeline .timeline-title h3 {
        font-size: 25px;
    }
    .main-timeline .timeline-content::before {
        top: 16px;
    }
}

@media only screen and (max-width: 767px) {
    .main-timeline {
        margin-left: 20px;
    }
    .main-timeline:before {
        left: 0;
    }
    .main-timeline .timeline-content {
        width: 90%;
        float: right;
    }
    .main-timeline .timeline-content:before,
    .main-timeline .timeline-content.right:before {
        left: 10%;
        right: inherit;
        margin-left: -6px;
        border-left: 0;
        border-right: 7px solid #ffffff;
    }
    .main-timeline .timeline-icon {
        left: 0;
    }
}

@media only screen and (max-width: 479px) {
    .main-timeline .timeline-content {
        width: 85%;
    }
    .main-timeline .timeline-content:before,
    .main-timeline .timeline-content.right:before {
        left: 15%;
    }
    .main-timeline .timeline-title h3 {
        font-size: 20px;
    }
    .main-timeline .timeline-content:before {
        top: 13px;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 home-page-footer">
            <div class="col-md-12 timelines">
              <div class="main-timeline">
                <div class="views-element-container form-group"><div class="view view-timeline-public view-id-timeline_public view-display-id-block_1 js-view-dom-id-38d0b8b38b7d1f7be5c3ba53e63939fd9979deb1ce7bd918a170a79832785389">
  
    
      
      <div class="view-content">
      <div data-drupal-views-infinite-scroll-content-wrapper="" class="views-infinite-scroll-content-wrapper clearfix form-group">    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-56">test 56</a></h3>
         <h6>jeu, 06/09/2018 - 12:57</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title] 
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-77">test 77</a></h3>
         <h6>jeu, 06/09/2018 - 12:56</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title] 
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-55">test 55</a></h3>
         <h6>jeu, 06/09/2018 - 12:56</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title] 
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-6">test 6</a></h3>
         <h6>jeu, 06/09/2018 - 12:08</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title] 
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      [message:author:user_picture:thumbnail]
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/user/11569">test</a></h3>
         <h6>jeu, 06/09/2018 - 01:18</h6>
      </div>
      <p class="timeline-description">
         Vient de s'inscrire
      </p>
   </div>
</div>
</div>
</div>
</div>

    </div>
  
      
<ul class="js-pager__items pager" data-drupal-views-infinite-scroll-pager="">
  <li class="pager__item">
    <a class="button" href="/node?page=1" title="Aller à la page suivante" rel="next">Afficher plus</a>
  </li>
</ul>

          </div>
</div>

              </div>
            </div>
          </div>
m1lbt
  • 57
  • 2
  • 7

1 Answers1

2

In order to be able to add a class to the rendered HTML of the view like that you would have to use a custom template.

You could do that by copying default twig file template core/themes/classy/templates/views/views-view-XXXX.html.twig to your theme folder and updating the code there.

See https://drupal.stackexchange.com/questions/203642/how-to-add-odd-or-even-class-in-each-row-of-a-views-table-output, that way you can completely control the Drupal view's render.

If you're not experienced in Drupal and according to your html structure, you could also achieve this with CSS:

.view-content .views-row:nth-child(even) .timeline .timeline-content {
       background: red;  // put here your 'right' properties.
}

By using the :nth-child() selector, that accepts the even and odd values that can be used for your purpose.

If you really need to add the class to that particular element, you could do jQuery like this:

 $('.view-content .views-row:nth-child(even) .timeline .timeline-content').addClass('right');

See codepen with both approaches, https://codepen.io/julia-cipriani-corvalan/pen/RYLPqy with CSS I'm setting the background as red and with JS I'm adding the right class that sets a blue border, both to timeline-content element with even timeline parent.

Let me know if it helps,

Uli
  • 311
  • 1
  • 11
  • Thank you for your reply. Is it possible to do this with a JS and addClass – m1lbt Sep 06 '18 at 02:18
  • `.main-timeline .timeline-content:nth-child(even) { background: red; }` I tested and the code applies a red background on all the blocks – m1lbt Sep 06 '18 at 02:26
  • Yes I applied it to `.timeline` not `.timeline-content`. – Uli Sep 06 '18 at 02:28
  • It is possible to load js that selects all of the `timeline-content` elements and with a function checks if they're odd or even and then apply the class accordingly, see this answer https://stackoverflow.com/questions/25130798/check-if-current-element-is-even-or-odd. I would just go with the css if you only need to style it though. – Uli Sep 06 '18 at 02:37
  • So no, because it has to be applied only to `timeline-content` – m1lbt Sep 06 '18 at 03:10
  • If I understand correctly, in my case the css nth-child will not work ? – m1lbt Sep 06 '18 at 03:28
  • The selector will work I believe,I updated both CSS and JS codes on my answer and added a codepen. – Uli Sep 06 '18 at 10:01
  • Here is my site, at the bottom of the page there is the timeline https://www.s1biose.com/ I applied with JS and CSS. But it does not work, I do not understand why – m1lbt Sep 06 '18 at 11:43
  • Because the HTML structure you posted and the rendered output on your website differs, inpect the code and check it, `.view-content .views-row:nth-child(even) .timeline .timeline-content {}` will select the even elements on CSS, `jQuery('.view-content .views-row:nth-child(even) .timeline .timeline-content').addClass('right');` will add the class on JS – Uli Sep 06 '18 at 11:51
  • Thank you, I will test. I added a code at the end of my question – m1lbt Sep 06 '18 at 12:00