Boxed layout

This commit is contained in:
Eduardo Silva 2025-02-24 16:01:09 -03:00
parent 8c780d297c
commit ea9596b4bc
2 changed files with 50 additions and 35 deletions

View File

@ -1,47 +1,62 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% if page_title %}{{page_title}} | {% endif %}wireguard-webadmin</title> <title>{% if page_title %}{{page_title}} | {% endif %}wireguard-webadmin</title>
<!-- Google Font: Source Sans Pro --> <!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome --> <!-- Font Awesome -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons --> <!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 --> <!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css"> <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck --> <!-- iCheck -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/icheck-bootstrap/icheck-bootstrap.min.css"> <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- JQVMap --> <!-- JQVMap -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/jqvmap/jqvmap.min.css"> <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/jqvmap/jqvmap.min.css">
<!-- Theme style --> <!-- Theme style -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/dist/css/adminlte.min.css"> <link rel="stylesheet" href="/static/AdminLTE-3.2.0/dist/css/adminlte.min.css">
<!-- overlayScrollbars --> <!-- overlayScrollbars -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/overlayScrollbars/css/OverlayScrollbars.min.css"> <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker --> <!-- Daterange picker -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/daterangepicker/daterangepicker.css"> <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/daterangepicker/daterangepicker.css">
<!-- summernote --> <!-- summernote -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/summernote/summernote-bs4.min.css"> <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/summernote/summernote-bs4.min.css">
<style> <style>
.min-width { .min-width {
width: 1%; width: 1%;
white-space: nowrap; white-space: nowrap;
} }
.preloader{ .preloader{
display: none; display: none;
} }
</style> </style>
<style>
.wrapper {
max-width: 1400px !important;
margin: 0 auto;
}
{% block page_custom_head %}{% endblock%} body.layout-boxed {
background: radial-gradient(circle at center, #444 0%, #ccc 80%, #fff 100%);
}
body.layout-boxed .wrapper {
background-color: #fff;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
</style>
{% block page_custom_head %}{% endblock%}
</head> </head>
{% load custom_tags %} {% load custom_tags %}
{% tag_webadmin_version as webadmin_version %} {% tag_webadmin_version as webadmin_version %}
<body class="hold-transition sidebar-mini layout-fixed {% if request.COOKIES.sidebarState == 'collapsed' %}sidebar-collapse{% endif %}"> <body class="hold-transition sidebar-mini layout-boxed {% if request.COOKIES.sidebarState == 'collapsed' %}sidebar-collapse{% endif %}">
<div class="wrapper"> <div class="wrapper">
<!-- Preloader --> <!-- Preloader -->

View File

@ -23,7 +23,7 @@
<div class='col-md-12'> <div class='col-md-12'>
<div class="row" style="padding-bottom: 20px"> <div class="row" style="padding-bottom: 20px">
{% for wireguard_instance in wireguard_instances %} {% for wireguard_instance in wireguard_instances %}
<div class="col-md-12"> <div class="col-md-6">
<h3>wg{{ wireguard_instance.instance_id }} {% if wireguard_instance.name %}({{ wireguard_instance.name }}){% endif %}</h3> <h3>wg{{ wireguard_instance.instance_id }} {% if wireguard_instance.name %}({{ wireguard_instance.name }}){% endif %}</h3>
<p><b><i class="fas fa-chart-area nav-icon"></i> Instance Traffic</b></p> <p><b><i class="fas fa-chart-area nav-icon"></i> Instance Traffic</b></p>
<img id="graphImg" src="/rrd/graph/?instance={{ wireguard_instance.uuid }}{% if request.GET.period %}&period={{ request.GET.period }}{% endif %}" class="img-fluid" alt="No traffic history, please wait a few minutes" onerror="this.onerror=null; this.style.display='none'; this.insertAdjacentHTML('afterend', this.alt);"> <img id="graphImg" src="/rrd/graph/?instance={{ wireguard_instance.uuid }}{% if request.GET.period %}&period={{ request.GET.period }}{% endif %}" class="img-fluid" alt="No traffic history, please wait a few minutes" onerror="this.onerror=null; this.style.display='none'; this.insertAdjacentHTML('afterend', this.alt);">