chg: [website] sidebar

pull/659/head
David Cruciani 2024-02-19 14:01:06 +01:00
parent e0310b7511
commit b412dfd115
No known key found for this signature in database
GPG Key ID: 8690CDE1E3994B9B
9 changed files with 61 additions and 93 deletions

View File

@ -3,11 +3,11 @@ body {
background-color: #fbfbfb; background-color: #fbfbfb;
} }
@media (min-width: 991.98px) { /* @media (min-width: 991.98px) {
main { main {
padding-left: 200px; padding-left: 200px;
} }
} } */
span#goTop, span#project-version{ span#goTop, span#project-version{
position: fixed; position: fixed;
@ -164,8 +164,8 @@ span#status {
right: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5);
} }
@media (min-width: 992px) { /* @media (min-width: 992px) {
.side-panel-config { .side-panel-config {
max-width: calc((100% - 200px) / 2 - 1*var(--bs-gutter-x) * .5); max-width: calc((100% - 200px) / 2 - 1*var(--bs-gutter-x) * .5);
} }
} } */

View File

@ -1,30 +0,0 @@
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
/* padding: 65px 0 0; */
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
width: 200px;
z-index: 600;
}
.sidebar .active {
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}
#search-form{
margin-left: auto;
}
.container{
margin-left: 0;
}
.fa-circle {
font-size: 40%;
margin-right: 3px;
vertical-align: middle;
}

View File

@ -39,11 +39,12 @@
</head> </head>
<body> <body>
<div class="container-fluid">
<div class="row flex-nowrap">
{% include 'sidebar.html' %} {% include 'sidebar.html' %}
<!--Main layout--> <!--Main layout-->
<main> <main class="col ps-md-4 pt-2">
<div class="container pt-4" style="max-width: 100%;">
{% include 'macros/_flashes.html' %} {% include 'macros/_flashes.html' %}
<div aria-live="polite" aria-atomic="true" class=""> <div aria-live="polite" aria-atomic="true" class="">
@ -64,11 +65,10 @@
</template> </template>
</div> </div>
</div> </div>
<a href="#" data-bs-target="#sidebar" data-bs-toggle="collapse" class="border rounded-3 p-1 text-decoration-none"><i class="fa-solid fa-bars-staggered"></i> Menu</a>
{# When extended, the content block contains all the html of the webpage #} {# When extended, the content block contains all the html of the webpage #}
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div>
</main> </main>
<!--Main layout--> <!--Main layout-->
@ -78,6 +78,9 @@
<input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token()|safe }}"> <input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token()|safe }}">
</div> </div>
{% endif %} {% endif %}
</div>
</div>
{% block script %} {% block script %}
<script type="module"> <script type="module">
@ -86,7 +89,7 @@
createApp({ createApp({
delimiters: ['[[', ']]'], delimiters: ['[[', ']]'],
setup() {} setup() {}
}).mount('.container') }).mount('.container-fluid')
</script> </script>
{% endblock %} {% endblock %}

View File

@ -100,7 +100,7 @@
get_history get_history
} }
} }
}).mount('.container') }).mount('.container-fluid')
</script> </script>
{% endblock %} {% endblock %}

View File

@ -145,7 +145,7 @@
change_tree change_tree
} }
} }
}).mount('.container') }).mount('.container-fluid')
</script> </script>
{% endblock %} {% endblock %}

View File

@ -235,7 +235,7 @@
generateCoreFormatUI generateCoreFormatUI
} }
} }
}).mount('.container') }).mount('.container-fluid')
</script> </script>
{% endblock %} {% endblock %}

View File

@ -178,7 +178,7 @@
onInput onInput
} }
} }
}).mount('.container') }).mount('.container-fluid')
</script> </script>
{% endblock %} {% endblock %}

View File

@ -273,7 +273,7 @@
active_tab active_tab
} }
} }
}).mount('.container') }).mount('.container-fluid')
</script> </script>
{% endblock %} {% endblock %}

View File

@ -1,36 +1,31 @@
<!--Main Navigation--> <!--Main Navigation-->
<header>
<!-- Sidebar -->
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-white">
<div class="col-auto px-0">
<div id="sidebar" class="collapse collapse-horizontal show border-end">
<div id="sidebar-nav" class="rounded-0 text-sm-start min-vh-100">
<a class="navbar-brand" style="margin-left: 20px;" href="/"> <a class="navbar-brand" style="margin-left: 20px;" href="/">
<img src="{{ url_for('static',filename='image/misp.png') }}" height="55" alt="Misp Logo" loading="lazy" /> <img src="{{ url_for('static',filename='image/misp.png') }}" height="55" alt="Misp Logo" loading="lazy" />
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="position-sticky">
<div class="list-group list-group-flush mx-3 mt-4"> <div class="list-group list-group-flush mx-3 mt-4">
<a href="/" class="list-group-item list-group-item-action py-2 ripple" aria-current="true"> <a href="/" class="list-group-item list-group-item-action text-nowrap" aria-current="true">
<i class="fa-solid fa-house fa-fw me-3"></i><span>Home</span> <i class="fa-solid fa-house fa-fw me-3"></i><span>Home</span>
</a> </a>
<a style="margin-top: 30px;" href="/history" class="list-group-item list-group-item-action py-2 ripple"> <a style="margin-top: 30px;" href="/history" class="list-group-item list-group-item-action text-nowrap">
<i class="fa-solid fa-clock-rotate-left fa-fw me-3"></i><span>History</span> <i class="fa-solid fa-clock-rotate-left fa-fw me-3"></i><span>History</span>
</a> </a>
<a style="margin-top: 30px;" href="/history_session" class="list-group-item list-group-item-action py-2 ripple"> <a style="margin-top: 30px;" href="/history_session" class="list-group-item list-group-item-action text-nowrap">
<i class="fa-solid fa-clock fa-fw me-3"></i><span>History Session</span> <i class="fa-solid fa-clock fa-fw me-3"></i><span>History Session</span>
</a> </a>
<a style="margin-top: 30px;" href="/history_tree" class="list-group-item list-group-item-action py-2 ripple"> <a style="margin-top: 30px;" href="/history_tree" class="list-group-item list-group-item-action text-nowrap">
<i class="fa-solid fa-timeline fa-fw me-3"></i><span>History Tree</span> <i class="fa-solid fa-timeline fa-fw me-3"></i><span>History Tree</span>
</a> </a>
<a style="margin-top: 30px;" href="/modules_config" class="list-group-item list-group-item-action py-2 ripple"> <a style="margin-top: 30px;" href="/modules_config" class="list-group-item list-group-item-action text-nowrap">
<i class="fa-solid fa-gear fa-fw me-3"></i><span>Config</span> <i class="fa-solid fa-gear fa-fw me-3"></i><span>Config</span>
</a> </a>
</div> </div>
</div> </div>
</nav> </div>
<!-- Sidebar --> </div>
</header>
<!--Main Navigation--> <!--Main Navigation-->