Fixed Navbar und Neuer Dev-Branch

This commit is contained in:
holger.trampe 2020-02-02 21:47:38 +01:00
parent 281dc1cb54
commit c0a8925eec
11 changed files with 146 additions and 66 deletions

View File

@ -32,6 +32,7 @@ ALLOWED_HOSTS = ['digitale-agentur.com', 'www.digitale-agentur.com', 'localhost'
# Application definition
INSTALLED_APPS = [
'users.apps.UsersConfig',
'settings.apps.SettingsConfig',
'areas.apps.AreasConfig',
'orga.apps.OrgaConfig',
'cloud.apps.CloudConfig',

View File

@ -27,6 +27,7 @@ urlpatterns = [
path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name='login'),
path('', include('users.urls'), name="dashboard-first"),
path('admin/', admin.site.urls),
path('settings/', include('settings.urls'), name="settings"),
path('dashboard/', include('users.urls'), name="dashboard"),
path('areas/', include('areas.urls'), name="areas-management"),
path('tasks/', include('tasks.urls'), name="tasks-management"),

View File

@ -59,6 +59,20 @@ body{
width: 200px;
height: 200px;
}
.navbar{
min-height: 50px;
margin-bottom: 20px;
}
body {
padding-top: 70px;
}
.default_content_style {
margin-left: 212px !important;
}
/*
PAGINATION
*/
@ -67,6 +81,9 @@ body{
font-size: 2em;
}
/*
FOR TREE ORGA
@ -177,3 +194,4 @@ right connector from last child*/
/*Thats all. I hope you enjoyed it.
Thanks :)*/

View File

@ -9571,6 +9571,7 @@ a:focus {
background-color: #f8f9fc;
width: 100%;
overflow-x: hidden;
}
#wrapper #content-wrapper #content {
@ -10996,3 +10997,10 @@ footer.sticky-footer .copyright {
body.sidebar-toggled footer.sticky-footer {
width: 100%;
}
.navbar-default{
position: fixed;
width: 100%;
margin: 0 0 405px 0;
}

View File

@ -39,10 +39,7 @@
// Smooth scrolling using jQuery easing
$(document).on('click', 'a.scroll-to-top', function(e) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top)
}, 1000, 'easeInOutExpo');
window.scrollTo({top: 0, behavior: 'smooth'});
e.preventDefault();
});

View File

@ -46,11 +46,12 @@
</head>
<body id="page-top">
<body>
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gray-900 sidebar sidebar-dark accordion" id="accordionSidebar">
<ul class=" bg-gray-900 sidebar sidebar-dark accordion fixed-top" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="{% url 'users-dashboard' %}">
@ -198,43 +199,73 @@
</li>
{%endif%}
<!-- Divider -->
<!-- Sidebar Toggler (Sidebar) -->
<!--
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
-->
<style scoped>
#bottom_info {
position: absolute;
bottom: 0;
}
</style>
<div id="bottom_info">
<hr class="sidebar-divider d-none d-md-block">
{% if active_link == 'settings' %}
<li class="nav-item active">
{% else%}
<li class="nav-item">
{%endif%}
<a class="nav-link " href="{% url 'settings' %}" aria-expanded="true" style="margin-top: -15px">
<i class="fas fa-cog"></i>
<span>Einstellungen</span>
</a>
</li>
{% if active_link == 'support' %}
<li class="nav-item active">
{% else%}
<li class="nav-item">
{%endif%}
<a class="nav-link " href="{% url 'supportda' %}" aria-expanded="true">
<a class="nav-link " href="{% url 'supportda' %}" aria-expanded="true" style="margin-top: -15px">
<i class="fas fa-question"></i>
<span>Support</span>
</a>
</li>
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
<div style="bottom: 10px; position: absolute;" class="sidebar-heading">
Version 0.7.4
</div>
<div style="bottom: 40px; position: absolute;" class="sidebar-heading">
<div style="" class="sidebar-heading">
<a style="color: #999; text-decoration: none;" href="{% url 'datenschutzda' %}">Datenschutz</a><br />
<a style="color: #999; text-decoration: none;" href="{% url 'impressumda' %}">Impressum</a>
</div>
<div style="margin-top: 10px; margin-bottom: 5px;" class="sidebar-heading">
Version 0.7.4
</div>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column ">
<style scoped>
#content-wrapper {
margin-left: 212px;
margin-top: -72px;
}
@media screen and (max-width: 768px) {
#content-wrapper {
margin-left: 105px;
}
}
</style>
<div id="content-wrapper">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3" onclick="javascript:toggleSidebar()">
<i class="fa fa-bars"></i>
</button>
@ -250,17 +281,12 @@
<i class="fas fa-times fa-sm"></i>
</button>
</div>
</div>
</form>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto ">
<div class="topbar-divider d-none d-sm-block"></div>
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@ -284,15 +310,11 @@
</a>
</div>
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid" >
<!-- MESSAGES -->
{% if messages %}
{% for message in messages %}
@ -311,18 +333,9 @@
{% endblock %}
</div>
</div>
<!-- End of Main Content -->
<!-- Footer -->
<!-- End of Footer -->
<br /><br />
</div>
</div> <!-- End of Main Content CONTAINER FLUID-->
<!-- End of Content Wrapper -->
</div>
</div>
<!-- End of Page Wrapper -->
<!--
@ -340,7 +353,6 @@
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript-->
<!--<script src="{%static 'users/vendor/jquery/jquery.min.js' %}"></script>-->
<script src="{%static 'users/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
@ -348,21 +360,14 @@
<!-- Core plugin JavaScript-->
<script src="{%static 'users/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- DATABLES JS -->
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="{%static 'users/js/sb-admin-2.min.js' %}"></script>
<script src="{%static 'users/js/sb-admin-2.js' %}"></script>
<!-- CUSTOM FONT -->
<link href="{% static 'users/css/custom.css' %}" rel="stylesheet">
<!-- TABLE SORT -->
<!--<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>-->
@ -372,10 +377,8 @@
<!-- Page level custom scripts -->
<!--<script src="js/demo/chart-area-demo.js"></script>-->
<!--<script src="js/demo/chart-pie-demo.js"></script>-->
</body>
</html>
<script type="text/javascript">
function clearSF(){
@ -385,10 +388,7 @@ function clearSF(){
$("#search_string").val("");
}
function startSearch(searchstring){
console.log(searchstring);
if(searchstring.length > 2){
$.ajax(
{
@ -411,4 +411,48 @@ function clearSF(){
$("#maincontent").show();
}
}
sidebar_toggled = false;
// Toggle the side navigation
function toggleSidebar(){
$("#accordionSidebar").toggleClass("sidebar-toggled");
if($("#accordionSidebar").hasClass("sidebar-toggled"))
{
$("#content-wrapper").css("margin-left" , "0px");
sidebar_toggled = true;
}
else{
$("#content-wrapper").css("margin-left" , "105px");
sidebar_toggled = false;
}
}
delay = 250;
throttled = false;
function getDimensions() {
width = window.innerWidth;
if(width >= 768){
$("#content-wrapper").css("margin-left" , "212px");
}
else{
$("#content-wrapper").css("margin-left" , "105px");
}
}
// window.resize event listener
window.addEventListener('resize', function() {
if (!throttled) { // nur wenn throttled nicht gesetzt ist
getDimensions(); // Callback-Aktion
throttled = true; // Jetzt wird wieder ausgebremst
setTimeout(function() { // Timeout
throttled = false;
}, delay);
}
});
getDimensions();
</script>

View File

@ -35,7 +35,7 @@
<!-- Sidebar -->
<!--<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">-->
<ul class="navbar-nav bg-gray-900 sidebar sidebar-dark accordion" id="accordionSidebar">
<ul class=" bg-gray-900 sidebar sidebar-dark accordion fixed-top" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="{% url 'users-dashboard' %}">
<i class="fas fa-laptop"></i>
@ -55,7 +55,18 @@
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<style scoped>
#content-wrapper {
margin-left: 212px;
margin-top: -72px;
}
@media screen and (max-width: 768px) {
#content-wrapper {
margin-left: 105px;
}
}
</style>
<div id="content-wrapper">
<!-- Main Content -->
<div id="content">