TreeView v1
This commit is contained in:
parent
d1294c2fc4
commit
e9743cd00c
6 changed files with 148 additions and 50 deletions
|
|
@ -72,6 +72,14 @@
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
@mixin toggle-off-icon($color) {
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a5 5 0 0 0 2-4 5 5 0 0 0-2-4zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8M0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5"/></svg>')
|
||||
}
|
||||
|
||||
@mixin toggle-on-icon($color) {
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8" /> </svg>')
|
||||
}
|
||||
|
||||
.page_nav nav ul {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
|
|
@ -83,56 +91,126 @@
|
|||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
// text-decoration: underline;
|
||||
}
|
||||
|
||||
ul {
|
||||
// padding-left: 1.5rem;
|
||||
padding-left: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
details.switch {
|
||||
>summary {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
summary,
|
||||
summary a {
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
>summary::after {
|
||||
@include toggle-off-icon(to-rgb(map-get($theme-colors, "dark")));
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
float: inline-end;
|
||||
transition: 0.4s;
|
||||
content: '';
|
||||
margin-top: 0.25rem;
|
||||
margin-right: 0;
|
||||
margin-left: 0.5rem
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
display: flex;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
summary::before {
|
||||
@include details-icon(to-rgb(map-get($theme-colors, "dark")));
|
||||
content: '';
|
||||
float: inline-end;
|
||||
width: 0.7rem;
|
||||
height: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 6px;
|
||||
// background: url('chevron-right.svg');
|
||||
// background-size: cover;
|
||||
margin-left: 0;
|
||||
transition: 0.2s;
|
||||
details.switch[open]>summary::after {
|
||||
@include toggle-on-icon(to-rgb(map-get($theme-colors, "dark")));
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
summary::before {
|
||||
@include details-icon(to-rgb(map-get($theme-colors, "light")));
|
||||
// content: '';
|
||||
// float: inline-end;
|
||||
// width: 0.7rem;
|
||||
// height: 1rem;
|
||||
// margin-top: 0.5rem;
|
||||
// margin-right: 6px;
|
||||
// // background: url('chevron-right.svg');
|
||||
// // background-size: cover;
|
||||
// margin-left: 0;
|
||||
// transition: 0.2s;
|
||||
details.switch summary::after {
|
||||
@include toggle-off-icon(to-rgb(map-get($theme-colors, "light")));
|
||||
}
|
||||
}
|
||||
|
||||
details[open]>summary::before {
|
||||
@include color-mode(dark) {
|
||||
details.switch[open]>summary::after {
|
||||
@include toggle-on-icon(to-rgb(map-get($theme-colors, "light")));
|
||||
}
|
||||
}
|
||||
|
||||
// details.tree[open]:has(summary.active) {
|
||||
// border: solid 1px $primary;
|
||||
|
||||
// }
|
||||
|
||||
details.tree {
|
||||
|
||||
>summary,
|
||||
>summary a {
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
>summary {
|
||||
display: flex;
|
||||
line-height: 2rem;
|
||||
padding-left: 12px;
|
||||
// padding-top: 8px;
|
||||
// padding-bottom: 8px;
|
||||
}
|
||||
|
||||
>summary.active {
|
||||
border-left: solid 8px $primary;
|
||||
border-right: solid 8px $primary;
|
||||
// border: solid 1px $primary;
|
||||
// background-color: $gray-800;
|
||||
padding-left: 8px;
|
||||
// padding-top: 8px;
|
||||
}
|
||||
|
||||
>summary::before {
|
||||
@include details-icon(to-rgb(map-get($theme-colors, "dark")));
|
||||
content: '';
|
||||
float: inline-end;
|
||||
width: 0.7rem;
|
||||
height: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 6px;
|
||||
// background: url('chevron-right.svg');
|
||||
// background-size: cover;
|
||||
margin-left: 0px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
ul {
|
||||
// li:hover {
|
||||
// border-left: solid 2px $white;
|
||||
// padding-left: 36px;
|
||||
// }
|
||||
|
||||
li {
|
||||
padding-left: 38px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
li:has(a.active) {
|
||||
border-left: solid 2px $primary;
|
||||
padding-left: 36px;
|
||||
// background-color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
details.tree summary::before {
|
||||
@include details-icon(to-rgb(map-get($theme-colors, "light")));
|
||||
}
|
||||
}
|
||||
|
||||
details.tree[open]>summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// summary.active::before {
|
||||
// @include details-icon(to-rgb($primary));
|
||||
// }
|
||||
13
app/javascript/controllers/bs_scrollspy_controller.js
Normal file
13
app/javascript/controllers/bs_scrollspy_controller.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { Controller } from "@hotwired/stimulus"
|
||||
import * as bootstrap from 'bootstrap'
|
||||
|
||||
// Connects to data-controller="bs-scrollspy"
|
||||
export default class extends Controller {
|
||||
connect() {
|
||||
// console.log(this.element)
|
||||
const target = this.element.getAttribute("data-bs-scrollspy-target")
|
||||
const scrollSpy = new bootstrap.ScrollSpy(this.element, {
|
||||
target: target
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,9 @@ import { application } from "./application"
|
|||
import AutosubmitController from "./autosubmit_controller"
|
||||
application.register("autosubmit", AutosubmitController)
|
||||
|
||||
import BsScrollspyController from "./bs_scrollspy_controller"
|
||||
application.register("bs-scrollspy", BsScrollspyController)
|
||||
|
||||
import CheckLinkController from "./check_link_controller"
|
||||
application.register("check-link", CheckLinkController)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="<%= dom_id page %>" class="mb-3">
|
||||
<div id="<%= dom_id page %>" class="mb-3"data-bs-scrollspy-target="#<%= dom_id(page.report, :page_nav) %>" data-controller="bs-scrollspy">
|
||||
<h2>
|
||||
<i class="bi bi-file-earmark-check"></i>
|
||||
<%= page.position %> <%= page.path %></h2>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,30 @@
|
|||
div id=dom_id(report, :page_nav)
|
||||
- if report.pages.any?
|
||||
details open=true
|
||||
summary Struktur
|
||||
details.switch open=true
|
||||
summary.justify-content-end
|
||||
span Pfade
|
||||
nav
|
||||
ul
|
||||
- report.pages.each do |page|
|
||||
- is_current = current_page == page
|
||||
li
|
||||
details open=current_page_displayed(page) class=""
|
||||
summary
|
||||
i.bi.me-1 class="bi-file-earmark-check#{is_current ? "-fill" : "" }"
|
||||
details.tree open=current_page_displayed(page) class=""
|
||||
summary class=(is_current ? "active" : nil)
|
||||
i.bi.me-1 class="bi-file-earmark-check#{is_current ? "" : "" }"
|
||||
- if is_current
|
||||
=< "#{page.position} #{page.path}"
|
||||
=< "#{page.position} #{page.path}"
|
||||
- else
|
||||
=< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), class: "#{is_current ? " active text-decoration-underline" : nil }", data: { "turbo-frame": :_top })
|
||||
=< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), data: { "turbo-frame": :_top })
|
||||
ul id=dom_id(page, :page_nav_elements)
|
||||
- page.elements.each do |element|
|
||||
li
|
||||
i.bi.bi-boxes.me-1
|
||||
- if current_page == page
|
||||
=< link_to("#{element.number} #{element.title}", "##{dom_id(element)}", data: { "turbo": false })
|
||||
=< link_to("##{dom_id(element)}", data: { "turbo": false }) do
|
||||
i.bi.bi-boxes.me-1
|
||||
=< "#{element.number} #{element.title}"
|
||||
- else
|
||||
=< link_to("#{element.number} #{element.title}", report_path(report, page_id: page.id, anchor: dom_id(element)), data: { "turbo": false })
|
||||
=< link_to(report_path(report, page_id: page.id, anchor: dom_id(element)), data: { "turbo": false }) do
|
||||
i.bi.bi-boxes.me-1
|
||||
=< "#{element.number} #{element.title}"
|
||||
= turbo_frame_tag "new_page_frame" do
|
||||
= render partial: "reports/new_page_button", locals: { report: report }
|
||||
|
|
@ -11,13 +11,13 @@ h1
|
|||
.smb-4.lead.mb-3
|
||||
= @report.comment
|
||||
.row
|
||||
.col-lg-3.col-md-6.col-sm-12
|
||||
.col-lg-4.col-md-6.col-sm-12
|
||||
.page_nav.sticky-top
|
||||
= render partial: "reports/page_nav", locals: { report: @report, current_page: @current_page }
|
||||
- if @current_page
|
||||
= turbo_frame_tag(dom_id(@current_page, :notes)) do
|
||||
= render partial: "pages/notes", locals: { page: @current_page }
|
||||
.col-lg-9.col-md-6.col-sm-12
|
||||
.col-lg-8.col-md-6.col-sm-12
|
||||
- if @current_page
|
||||
= render @current_page
|
||||
- else
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue