New Layout for parallel styling

Signed-off-by: Tobias O <tobias.olenyi@envipath.com>
This commit is contained in:
2025-10-17 20:25:50 +13:00
parent f76861a83f
commit f5889b270a
12 changed files with 859 additions and 1094 deletions

View File

@ -1,15 +1,16 @@
<!DOCTYPE html>
<html>
<html data-theme="envipath">
{% load static %}
<head>
<title>{{ title }}</title>
<style>
html, body {
height: 100%; /* ensure body fills viewport */
overflow-x: hidden; /* prevent horizontal scroll */
}
</style>
{# TODO use bundles from bootstrap 3.3.7 #}
<meta name="csrf-token" content="{{ csrf_token }}">
{# Favicon #}
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
{# Tailwind CSS Output - MUST load first for proper cascading #}
<link href="{% static 'css/output.css' %}" rel="stylesheet" type="text/css"/>
{# Legacy Bootstrap 3.3.7 - scoped to .legacy-bootstrap #}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
@ -20,7 +21,21 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
<script src="https://community.envipath.org/javascripts/embed-topics.js"></script>
<!-- CDN END -->
<meta name="csrf-token" content="{{ csrf_token }}">
{# Bootstrap compatibility styles #}
<style>
/* Isolate Bootstrap to legacy sections only */
.legacy-bootstrap {
/* Bootstrap can override Tailwind here */
}
/* Prevent Bootstrap from affecting Tailwind sections */
html, body {
height: 100%; /* ensure body fills viewport */
overflow-x: hidden; /* prevent horizontal scroll */
}
</style>
<script>
const csrftoken = document.querySelector('[name=csrf-token]').content;
@ -33,8 +48,7 @@
}
});
</script>
{# Favicon #}
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
<!-- {# C3 CSS #}-->
<!-- <link id="css-c3" href="{% static 'css/c3.css' %}" rel="stylesheet" type="text/css"/>-->
<!-- {# EP CSS #}-->
@ -68,6 +82,8 @@
</head>
<body>
<!-- Legacy Bootstrap navbar - isolated from Tailwind -->
<div class="legacy-bootstrap">
<nav class="navbar navbar-default navbar-inverse" style="border-radius:0px;" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
@ -177,6 +193,9 @@
</div>
</div>
</nav>
</div>
<!-- End legacy Bootstrap navbar -->
<div id="docContent" class="content container">
{% if breadcrumbs %}
<div id="bread">
@ -221,7 +240,8 @@
{% endif %}
</div>
<!-- FOOTER -->
<!-- FOOTER - Legacy Bootstrap -->
<div class="legacy-bootstrap">
<div class="container text-center">
<hr/>
<div class="row">
@ -256,6 +276,9 @@
</ul>
</div>
</div>
</div>
<!-- End legacy Bootstrap footer -->
<script>
$(function () {
// Hide actionsbutton if theres no action defined