smecontribs/smeserver-mailstats
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sort out css and html for subtables

Browse Source
This commit is contained in:
Brian Read 2025-01-12 16:38:56 +00:00
parent eff56815da
commit fce93e1dcd
2 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
root/opt/mailstats/css/mailstats.css
View File

@ -125,7 +125,7 @@ p.cssvalid,p.htmlvalid {float:left;margin-right:20px}
} }
.subtables > div { .subtables > div {
flex: 1; /* Equal width tables, remove or adjust based on your preference */ flex: 1; /* Equal width tables, remove or adjust based on your preference */
margin-left:10px; margin-left:0px;
} }
.footer {} .footer {}
@ -147,6 +147,41 @@ p.cssvalid,p.htmlvalid {float:left;margin-right:20px}
color: grey; color: grey;
} }
.subtables {
display: flex;
flex-wrap: wrap; /* Allows the items to wrap onto the next line */
justify-content: space-between; /* Distributes space between the tables */
margin: -10px; /* Negative margin to offset the table margins */
}
.table-container {
display: flex;
flex-wrap: wrap; /* Allowing wrapping of the tables */
width: 100%; /* Makes the container full width */
box-sizing: border-box; /* Adjust size calculations to include padding and borders */
}
.Incoming.email.recipients, .Junk.mail.counts, .Geoip.results, .Qpsmtpd.codes.league.table, .Viruses.found {
flex: 0 1 calc(25% - 20px); /* Each table will take 25% of the width minus margins */
margin: 10px; /* Margin for spacing */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
/* Ensure tables adapt on smaller screens */
@media (max-width: 1024px) {
.Incoming.email.recipients, .Junk.mail.counts, .Geoip.results, .Qpsmtpd.codes.league.table, .Viruses.found {
flex: 0 1 calc(33% - 20px); /* 33% width for medium screens (3 columns)*/
}
}
@media (max-width: 768px) {
.Incoming.email.recipients, .Junk.mail.counts, .Geoip.results, .Qpsmtpd.codes.league.table, .Viruses.found {
flex: 0 1 calc(50% - 20px); /* 50% width for smaller screens (2 columns)*/
}
}
@media (max-width: 480px) {
.Incoming.email.recipients, .Junk.mail.counts, .Geoip.results, .Qpsmtpd.codes.league.table, .Viruses.found {
flex: 0 1 100%; /* 100% width for mobile screens (1 column) */
}
}

2
root/opt/mailstats/templates/mailstats.html.pt
View File

@ -116,8 +116,10 @@
</div> </div>
<div class = "subtables"> <div class = "subtables">
<div class="table-container">
<!---Add in sub tables here --> <!---Add in sub tables here -->
</div> </div>
</div>
<br /> <br />
<footer class="footer">${version}</footer> <footer class="footer">${version}</footer>