What is the best approach in Ruby for managing an unordered list with split columns and counting each

Question

What is the best approach in Ruby for managing an unordered list with split columns and counting each

I am currently in the process of strategizing the layout for a webpage utilizing Bootstrap 4 within Ruby on Rails. Specifically, I need to create a sidebar submenu that can expand and collapse, feature bullet points, and include a counter.

The desired outcome should resemble the following:

Alpha             4000
 * Major One      2000
    Minor One     500
    Minor Two     1500
 * Major Two      1000

At this point, my approach involves using HTML/CSS to structure an unordered list as follows:

<ul>
 <li><a href="menu1" data-toggle="collapse">Major One</a></li>
  <ul class="collapse" id="menu1">
    <li>Minor One</li>
    <li>Minor Two</li>
  </ul>
 </li>
 <li>Major Two</li>
</ul>

Upon further reflection, I realized the necessity of implementing a counter within the unordered list and potentially dividing the columns within the ul li tags. This made me consider if there is a more streamlined way in Ruby to accomplish this task. Is there a more efficient Ruby method for generating a two-column unordered list with collapse functionality and a count?

html css ruby-on-rails

Answer 1

Answer №1

To begin, start by establishing a simple data structure:

@objects = [
  {
    name: "First",
    quantity: 4000,
    details: [
      {
        title: "Important One",
        amount: 2000,
        subdetails: [
          { title: "Minor A", count: 500 },
          { title: "Minor B", count: 1500 }
        ]
      },
      {
        title: "Important Two",
        amount: 1500
      }
    ]
  }
]

Then utilize a partial to recursively generate nested lists:

# layouts/application.html.erb
<ul>
  <%= render partial: 'list_item', collection: @objects, as: :item, locals: { level: 1 } %>
</ul>

# app/views/objects/_list_item.html.erb
<li class="<%= "level-#{level} n-#{item_counter}" %>">
  <a href="#"><%= item[:name] %></a>
  <% if item[:details] %>
  <ul class="collapse">
    <%= render partial: 'list_item',
        collection: item[:details],
        as: :item,
        locals: { level: level + 1 }
    %>
  </ul>
  <% end %>
</li>

class: "level-#{level} n-#{item_counter}"

is simply an illustration of how you can monitor the current level and index.

The resulting output is:

<ul>
  <li class="level-1 n-0">
    <a href="#">First</a>
    <ul>
      <li class="level-2 n-0">
        <a href="#">Important One</a>
        <ul>
          <li class="level-3 n-0">
            <a href="#">Minor A</a>
          </li>
          <li class="level-3 n-1">
            <a href="#">Minor B</a>
          </li>
        </ul>
      </li>
      <li class="level-2 n-1">
        <a href="#">Important Two</a>
      </li>
    </ul>
  </li>
</ul>

You have the option to include additional keys in the hash structure for adding links, wrapper classes, and link styles, among other things.

Answer 2

To begin, start by establishing a simple data structure:

@objects = [
  {
    name: "First",
    quantity: 4000,
    details: [
      {
        title: "Important One",
        amount: 2000,
        subdetails: [
          { title: "Minor A", count: 500 },
          { title: "Minor B", count: 1500 }
        ]
      },
      {
        title: "Important Two",
        amount: 1500
      }
    ]
  }
]

Then utilize a partial to recursively generate nested lists:

# layouts/application.html.erb
<ul>
  <%= render partial: 'list_item', collection: @objects, as: :item, locals: { level: 1 } %>
</ul>

# app/views/objects/_list_item.html.erb
<li class="<%= "level-#{level} n-#{item_counter}" %>">
  <a href="#"><%= item[:name] %></a>
  <% if item[:details] %>
  <ul class="collapse">
    <%= render partial: 'list_item',
        collection: item[:details],
        as: :item,
        locals: { level: level + 1 }
    %>
  </ul>
  <% end %>
</li>

class: "level-#{level} n-#{item_counter}"

is simply an illustration of how you can monitor the current level and index.

The resulting output is:

<ul>
  <li class="level-1 n-0">
    <a href="#">First</a>
    <ul>
      <li class="level-2 n-0">
        <a href="#">Important One</a>
        <ul>
          <li class="level-3 n-0">
            <a href="#">Minor A</a>
          </li>
          <li class="level-3 n-1">
            <a href="#">Minor B</a>
          </li>
        </ul>
      </li>
      <li class="level-2 n-1">
        <a href="#">Important Two</a>
      </li>
    </ul>
  </li>
</ul>

You have the option to include additional keys in the hash structure for adding links, wrapper classes, and link styles, among other things.

What is the best approach in Ruby for managing an unordered list with split columns and counting each

Answer №1

Similar questions

The Bootsrap 5.3 navbar is not fully extending to the width of the page

Unexpected behavior observed with Bootstrap popover

Issues with z-index in a multi-column menu using React-Router are causing unexpected behavior

The slides on my Bootstrap carousel are failing to display

When a label is clicked, the ng-change event is not triggered on the corresponding radio button

A layout featuring nested buttons and links within a card element, utilizing the power of Link in NextJs

Create a layout that includes options with checkboxes and divs styled inline

What is the best way to divide widgets in a Wordpress Sidebar?

Python is the way to go for clicking on a link

Is it possible to scroll the grid horizontally?

Is there a way to show a fallback message for unsupported video file formats?

In order to ensure JavaScript can be universally applied to all images, it needs to be made more generic

Seamless border that flows through several elements

Steps to switch the displayed ionicon when the menu is toggled

Set a variable to represent a color for the background styling in CSS

How can I assign a true or false value to an input variable in HTML using AngularTS?

Why is applying CSS on an li element using .css() in JQuery not functioning?

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

Displaying Bootstrap 5 Cards in a Vertical Layout

What is the best way to position a box in the center using CSS?