Skip to content

Commit 223b0da

Browse files
nigelhornenigelhorne
committed
Nicer layout of the meta data
1 parent 4f6eeb1 commit 223b0da

File tree

1 file changed

+103
-20
lines changed

1 file changed

+103
-20
lines changed

‎templates/default/web/VWF/Display/meta_data.tmpl‎

Lines changed: 103 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,81 @@
1010
<meta name="object" content="Index">
1111
<meta name="owner" content="Nigel Horne">
1212
<meta name="Author" content="Nigel Horne">
13-
<meta name="Copyright" content="Copyright (C) 2025 Nigel Hornne, all rights reserved">
14-
<title>[% SiteTitle %]: Meta Data</title>
13+
<meta name="Copyright" content="Copyright (C) 2025 NJH Music, all rights reserved">
14+
<title>[% SiteTitle.English %]: Meta Data</title>
1515
[% IF keywords %]
1616
<meta name="keywords" content="[% keywords %]" />
1717
[% END %]
1818
<link rel="stylesheet" type="text/css" href="/css/style.css" />
19+
<!-- https://www.geeksforgeeks.org/how-to-create-three-boxes-in-the-same-div-using-html-and-css/ -->
20+
<style>
21+
* {
22+
margin: 0;
23+
padding: 0;
24+
box-sizing: border-box;
25+
}
26+
27+
body {
28+
margin: 2%;
29+
// justify-content: center;
30+
overflow: hidden;
31+
}
32+
33+
.box-wrapper {
34+
height: 95vh;
35+
width: 100%;
36+
display: flex;
37+
flex-direction: column;
38+
// text-align: center;
39+
}
40+
41+
#box1 {
42+
padding: 10px;
43+
justify-content: center;
44+
// border: solid 1px green
45+
}
46+
47+
#box2 {
48+
padding: 8px;
49+
// border: solid 1px blue
50+
}
51+
52+
#box3 {
53+
padding: 10px;
54+
flex-grow: 1;
55+
display: flex;
56+
flex-direction: row;
57+
// border: solid 1px green
58+
}
59+
60+
#box4 {
61+
// flex-grow: 2;
62+
flex-grow: 1;
63+
// border: solid 1px orange
64+
}
65+
66+
.middle-column {
67+
// flex-grow: 1;
68+
flex-grow: 2;
69+
display: flex;
70+
flex-direction: column;
71+
}
72+
73+
.middle-column div {
74+
flex-grow: 1;
75+
margin: 0 8px;
76+
// border: solid 1px red;
77+
}
78+
79+
.middle-column div+div {
80+
margin-top: 8px
81+
}
82+
83+
#box8 {
84+
flex-grow: 1;
85+
// border: solid 1px black
86+
}
87+
</style>
1988
[% IF datapoints %]
2089
<script>
2190
window.onload = function() {
@@ -44,23 +113,37 @@
44113
</head>
45114

46115
<body>
47-
<!-- Show basic information about this site -->
48-
[% IF info %]
49-
<H1>Info</H1>
50-
domain_name: [% info.domain_name() %]<br>
51-
browser_type: [% info.browser_type() %]
52-
[% END %]
53-
[% IF lingua %]
54-
<H1>Lingua</H1>
55-
country: [% lingua.country() %]<br>
56-
requested_language: [% lingua.requested_language() %]<br>
57-
language_code_alpha2: [% lingua.language_code_alpha2() %]
58-
[% END %]
59-
<!-- Show information about visitors to the site -->
60-
<!-- Browser type -->
61-
[% IF datapoints %]
62-
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
63-
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
64-
[% END %]
116+
<div class="box-wrapper">
117+
<div id="box1">
118+
<h1>[% SiteTitle.English %]: Meta Data</h1>
119+
</div>
120+
<!--
121+
<div id="box2">
122+
</div>
123+
-->
124+
<div id="box3">
125+
<div id="box4">
126+
[% IF info %]
127+
<H1>Info</H1>
128+
domain_name: [% info.domain_name() %]<br>
129+
browser_type: [% info.browser_type() %]
130+
[% END %]
131+
[% IF lingua %]
132+
<H1>Lingua</H1>
133+
country: [% lingua.country() %]<br>
134+
requested_language: [% lingua.requested_language() %]<br>
135+
language_code_alpha2: [% lingua.language_code_alpha2() %]
136+
[% END %]
137+
</div>
138+
<div class="middle-column">
139+
<div id="box5">
140+
[% IF datapoints %]
141+
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
142+
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
143+
[% END %]
144+
</div>
145+
</div>
146+
</div>
147+
</div>
65148
</body>
66149
</html>

0 commit comments

Comments
 (0)