forked from ScoDoc/ScoDoc
remove bootstrap : rework navbar
This commit is contained in:
parent
cf174cdc18
commit
1e7038a968
@ -496,6 +496,138 @@ fieldset {
|
||||
/* #endregion pagination */
|
||||
|
||||
/* #region navbar */
|
||||
/* Navbar container */
|
||||
.navbar {
|
||||
background-color: #f8f9fa;
|
||||
padding: 8px 2px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.navbar>.container.container-fluid {
|
||||
margin: 4px 2px;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Brand/logo */
|
||||
.navbar-brand {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Navigation links container */
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Navigation links */
|
||||
.nav-item {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* Responsive toggle button */
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
/* Media query for responsive design */
|
||||
@media (max-width: 767px) {
|
||||
.navbar-collapse {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-collapse.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Specific styles for your layout */
|
||||
.navbar-nav.justify-content-center {
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar-nav.ms-auto {
|
||||
justify-content: flex-end;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.logout .nav-link {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.logout .nav-link:hover {
|
||||
color: #a71d2a;
|
||||
}
|
||||
|
||||
|
||||
/* #endregion navbar */
|
||||
|
||||
/* #endregion bootstrap ==> */
|
@ -22,7 +22,7 @@
|
||||
|
||||
{# NAVBAR CONTENT #}
|
||||
<div class="collapse navbar-collapse justify-content-center align-items-center" id="index-nav">
|
||||
<ul class="navbar-nav justify-content-center">
|
||||
<ul class="navbar-nav">
|
||||
{% if current_user.is_administrator() %}
|
||||
<li class="nav-item"><a class="nav-link" href="{{ url_for('scodoc.configuration') }}">Configuration</a></li>
|
||||
{% endif %}
|
||||
@ -89,5 +89,9 @@
|
||||
<script>
|
||||
const SCO_URL = "{% if g.scodoc_dept %}{{
|
||||
url_for('scolar.index_html', scodoc_dept=g.scodoc_dept)}}{% endif %}";
|
||||
|
||||
document.querySelector('.navbar-toggler').addEventListener('click', function() {
|
||||
document.querySelector('.navbar-collapse').classList.toggle('show');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
Loading…
Reference in New Issue
Block a user