chg: [website] sidebar

pull/592/merge
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,45 +39,48 @@
</head> </head>
<body> <body>
{% include 'sidebar.html' %} <div class="container-fluid">
<div class="row flex-nowrap">
{% 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=""> <div class="toast-container start-50 translate-middle-x top-0 p-3" style="position: fixed;">
<div class="toast-container start-50 translate-middle-x top-0 p-3" style="position: fixed;"> <template v-if="message_list">
<template v-if="message_list"> <template v-for="message in message_list" v-key="message.id">
<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 :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="d-flex"> <div class="toast-body">
<div class="toast-body"> <template v-if="message.message">
<template v-if="message.message"> [[message.message]]
[[message.message]] </template>
</template> </div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
</div> </template>
</template> </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 %} </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> </div>
</main> </div>
<!--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 %}
{% 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 --> <div class="col-auto px-0">
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-white"> <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-->