chg: [website] sidebar

main
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;
}
@media (min-width: 991.98px) {
/* @media (min-width: 991.98px) {
main {
padding-left: 200px;
}
}
} */
span#goTop, span#project-version{
position: fixed;
@ -164,8 +164,8 @@ span#status {
right: calc(var(--bs-gutter-x) * .5);
}
@media (min-width: 992px) {
/* @media (min-width: 992px) {
.side-panel-config {
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,45 +39,48 @@
</head>
<body>
{% include 'sidebar.html' %}
<div class="container-fluid">
<div class="row flex-nowrap">
{% include 'sidebar.html' %}
<!--Main layout-->
<main>
<div class="container pt-4" style="max-width: 100%;">
{% include 'macros/_flashes.html' %}
<div aria-live="polite" aria-atomic="true" class="">
<div class="toast-container start-50 translate-middle-x top-0 p-3" style="position: fixed;">
<template v-if="message_list">
<template v-for="message in message_list" v-key="message.id">
<div :id="`liveToast-${message.id}`" :class="`toast bg-${message.toast_class}`" role="alert" aria-live="assertive" data-bs-delay="5000" aria-atomic="true" style="--bs-toast-spacing: 0.5rem;">
<div class="d-flex">
<div class="toast-body">
<template v-if="message.message">
[[message.message]]
</template>
<!--Main layout-->
<main class="col ps-md-4 pt-2">
{% include 'macros/_flashes.html' %}
<div aria-live="polite" aria-atomic="true" class="">
<div class="toast-container start-50 translate-middle-x top-0 p-3" style="position: fixed;">
<template v-if="message_list">
<template v-for="message in message_list" v-key="message.id">
<div :id="`liveToast-${message.id}`" :class="`toast bg-${message.toast_class}`" role="alert" aria-live="assertive" data-bs-delay="5000" aria-atomic="true" style="--bs-toast-spacing: 0.5rem;">
<div class="d-flex">
<div class="toast-body">
<template v-if="message.message">
[[message.message]]
</template>
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</template>
</template>
</template>
</div>
</div>
</div>
{# When extended, the content block contains all the html of the webpage #}
{% block content %}
{% endblock %}
<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 #}
{% block content %}
{% endblock %}
</main>
<!--Main layout-->
{# Implement CSRF protection for site #}
{% if csrf_token()|safe %}
<div style="visibility: hidden; display: none">
<input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token()|safe }}">
</div>
{% endif %}
</div>
</main>
<!--Main layout-->
{# Implement CSRF protection for site #}
{% if csrf_token()|safe %}
<div style="visibility: hidden; display: none">
<input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token()|safe }}">
</div>
{% endif %}
</div>
{% block script %}
<script type="module">
@ -86,7 +89,7 @@
createApp({
delimiters: ['[[', ']]'],
setup() {}
}).mount('.container')
}).mount('.container-fluid')
</script>
{% endblock %}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,36 +1,31 @@
<!--Main Navigation-->
<header>
<!-- Sidebar -->
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-white">
<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" />
</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="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="/">
<img src="{{ url_for('static',filename='image/misp.png') }}" height="55" alt="Misp Logo" loading="lazy" />
</a>
<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>
</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>
</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>
</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>
</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>
</a>
</div>
</div>
</nav>
<!-- Sidebar -->
</div>
</div>
</header>
<!--Main Navigation-->