From 8dbc082b37c3cd5db4ddb8a894fe0ad5a53ed46b Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Wed, 2 Apr 2025 15:32:54 +0200
Subject: [PATCH] print tweaks

---
 show.php  | 19 ++++++++++---------
 style.css | 39 +++++++++++++++++----------------------
 2 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/show.php b/show.php
index 0f65c4f..053a581 100644
--- a/show.php
+++ b/show.php
@@ -11,17 +11,17 @@ $conf = file_get_contents($path);
 preg_match("/ sysname ([\w-]+)/", $conf, $sysname);
 preg_match("/ip address ([\d.]+)/", $conf, $address);
 $startPattern           = "(?<=\n)";
-$NLPattern              = "[\r\n]+";
-$vlanPvidPattern        = "vlan (?P<pvid>\d+)$NLPattern";
-$vlanNamePattern        = " name (?P<name>.+)$NLPattern";
-$vlanDescriptionPattern = " description (?P<description>.+)$NLPattern";
-$otherPattern           = " .*$NLPattern";
+$NLP                    = "[\r\n]+";
+$vlanPvidPattern        = "vlan (?P<pvid>\d+)$NLP";
+$vlanNamePattern        = " name (?P<name>.+)$NLP";
+$vlanDescriptionPattern = " description (?P<description>.+)$NLP";
+$otherPattern           = " .*$NLP";
 $endPattern             = "(?<!#)";
 preg_match_all("/$startPattern$vlanPvidPattern(?:$vlanNamePattern|$vlanDescriptionPattern|$otherPattern)*$endPattern/", $conf, $vlans, PREG_SET_ORDER);
-$interfaceAddressPattern = "interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)$NLPattern";
-$portHybridPattern       = " port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+)(?: [0-9a-z ]*)? tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NLPattern";
-$portAccessPattern       = " port (?:access |trunk |hybrid |pvid |vlan )*(?P<pvid>\d+)$NLPattern";
-$voiceVlanPattern        = " voice-vlan (?P<voice_vlan>\d+) enable$NLPattern";
+$interfaceAddressPattern = "interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)$NLP";
+$portHybridPattern       = " port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+)(?: [0-9a-z ]*)? tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NLP";
+$portAccessPattern       = " port (?:access |trunk |hybrid |pvid |vlan )*(?P<pvid>\d+)$NLP";
+$voiceVlanPattern        = " voice-vlan (?P<voice_vlan>\d+) enable$NLP";
 preg_match_all("/$startPattern$interfaceAddressPattern(?:$portHybridPattern|$portAccessPattern|$voiceVlanPattern|$otherPattern)*$endPattern/", $conf, $interfaces, PREG_SET_ORDER);
 $stack = array();
 foreach ($interfaces as $interface) {
@@ -60,6 +60,7 @@ foreach ($interfaces as $interface) {
             foreach ($stack as $member_id => $lines) {
                 echo "<div class='member'>\n<span class='member-id'>$member_id</span>\n<table class='interfaces'>\n<tbody>\n";
                 foreach ($lines as $interfaces) {
+                    ksort($interfaces);
                     echo "<tr>\n";
                     foreach ($interfaces as $interface) {
                         echo "<td class='{$interface[0]}" . (isset($interface["voice_vlan"]) ? " voice_vlan" : "") . "' title='{$interface[0]}' style='{$interface["style"]}'>{$interface["port"]}</td>\n";
diff --git a/style.css b/style.css
index 9b62e06..690c147 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
 :root {
   --hue: 58.3;
-  --saturation: 80%;
+  --saturation: 90%;
   --lightness: 65%;
 }
 
@@ -12,7 +12,6 @@
 }
 
 body {
-  max-width: 1200px;
   margin: 2rem auto;
   padding: 0 1rem;
   font-family: Arial, sans-serif;
@@ -29,6 +28,7 @@ h1 {
 
 h2 {
   color: #34495e;
+  text-align: center;
   margin-bottom: 0.5rem;
 }
 
@@ -96,29 +96,16 @@ main {
   display: flex;
   flex-flow: wrap;
   align-items: center;
-  justify-content: space-between;
-  row-gap: 1rem;
+  justify-content: space-evenly;
+  gap: 1rem;
   margin-bottom: 2rem;
-  width: 100%;
-}
-
-ul {
-  list-style: none;
-}
-
-details {
-  cursor: pointer;
-}
-
-td {
-  text-align: left;
 }
 
 .member {
   display: flex;
   align-items: center;
-  border: 8px outset #476079;
-  border-radius: 6px;
+  border: 6px outset #476079;
+  border-radius: 4px;
   background-color: #34495e;
   margin-bottom: 0.5rem;
   print-color-adjust: exact;
@@ -183,7 +170,7 @@ td {
 
 .trunk:not(.shutdown) {
   font-weight: bold;
-  border: 3px solid;
+  border: 4px solid;
   border-image-slice: 1 !important;
   border-image-source: linear-gradient(
     127deg,
@@ -227,8 +214,8 @@ td {
 .voice_vlan::after {
   content: "📞";
   position: absolute;
-  bottom: -0.4em;
-  left: -0.3em;
+  bottom: -0.5em;
+  left: -0.4em;
 }
 
 .legend {
@@ -237,6 +224,8 @@ td {
 
 .legend td:not(.interface) {
   border: 1px solid #2c3e50;
+  text-align: left;
+  padding: 0 0.3em;
 }
 
 footer {
@@ -250,6 +239,12 @@ footer {
 }
 
 @media print {
+  body {
+    margin: auto;
+    padding: 0;
+    background-color: unset;
+  }
+
   .no-print {
     display: none;
   }