Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Collapse stepper trees that are not current #695

Closed
miggol opened this issue Sep 4, 2024 · 0 comments
Closed

Collapse stepper trees that are not current #695

miggol opened this issue Sep 4, 2024 · 0 comments
Assignees
@miggol @EdoStorm96

Comments

@miggol
Copy link
Contributor

miggol commented Sep 4, 2024

Currently assigning this to myself, as I have some ideas on how to do it already. Though I will wait for the other stepper styling issues to be completed so that I can work off of that.

As a particular example, collapsed bubbles should be orange if one of their children has an error.

IMO this does not have to be dynamic at this stage. The stepper can simply expand on page load. Though Ty did some research on how to do this dynamically with JS/Bootstrap and it doesn't seem hard at all.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->

    <ul>
      <li>Top-level
        <span
          class="dropdown-toggle"
          type="button"
          data-bs-toggle="collapse"
          aria-expanded="false"
          data-bs-target="#collapseOne"
        >
        </button>
        <ul class="collapse" id="collapseOne">
          <li><a class="" href="#">Action</a></li>
          <li><a class="" href="#">Another action</a></li>
          <li><a class="" href="#">Something else here</a></li>
        </ul>
      </li>
      <li>Meep</li>
    </ul>

    <!-- End Example Code -->
  </body>
</html>

https://getbootstrap.com/docs/5.3/components/collapse/
@miggol miggol self-assigned this Sep 4, 2024
@EdoStorm96 EdoStorm96 self-assigned this Sep 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@miggol miggol

@EdoStorm96 EdoStorm96

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@miggol @EdoStorm96