Bruce1138 Bruce1138 - 5 months ago 8
CSS Question

How can I keep duplicate elements from displaying?

I have a timeline page that has dates displayed based on time stamps from activities I have created. The activities are made with the Public Activity Rails gem. Example:

Example Picture of Timeline

As seen in the example there are multiple dates that are displayed on the left in green. These dates are taken from the created_at time stamps for the activities and displayed in a user friendly format.

What is the best way to keep the duplicates from displaying. For example there are multiple June 3rd dates that I would like to display only once.

HTML for date elements (displayed in a loop):

<li class="time-label">
<span class="bg-red">
<%= activity_date(activity) %>
</span>
</li>


Ruby Method to format the date:

def activity_date(activity)
local_date(activity.created_at)
end


I was thinking of maybe having a conditional in Ruby or Javascript to limit the duplicates from displaying. Any suggestions?

Answer

This might be a way.

Based on the code used to generate this in the first place, you might be able to loop in such a way that only one style could be generated instead of one per element group.

<style>.time-label[data-actdate="<%= activity_date(activity) %>"] ~ .time-label[data-actdate="<%= activity_date(activity) %>"] { display: none; }</style>
<li class="time-label" data-actdate="<%= activity_date(activity) %>">
  <span class="bg-red">
   <%= activity_date(activity) %>
  </span>
</li>

Sample snippet

<style>.time-label[data-actdate="3 June"] ~ .time-label[data-actdate="3 June"] { display: none; }</style>
<li class="time-label" data-actdate="3 June">
  <span class="bg-red">
   3 June
  </span>
</li>

<style>.time-label[data-actdate="3 June"] ~ .time-label[data-actdate="3 June"] { display: none; }</style>
<li class="time-label" data-actdate="3 June">
  <span class="bg-red">
   3 June
  </span>
</li>

<style>.time-label[data-actdate="3 June"] ~ .time-label[data-actdate="3 June"] { display: none; }</style>
<li class="time-label" data-actdate="3 June">
  <span class="bg-red">
   3 June
  </span>
</li>