Template:File Summary: Difference between revisions

Revision as of 23:13, 3 December 2024

Summary

@@ Line 2: / Line 2: @@
 <head>
    <style>
-     .infobox {
+     table {
        border: 1px solid #aaa;
        background-color: #f9f9f9;
        border-collapse: collapse;
-       width: 300px; /* Adjust width for infobox */
+       width: 100%;
        font-size: 90%;
-       margin: 1em 0;
+       margin-bottom: 1em;
-      float: right; /* Align to the right like a typical infobox */
      }
-     .infobox th {
+     th {
        background-color: #e6e6e6;
        border-bottom: 1px solid #aaa;
@@ Line 17: / Line 16: @@
        padding: 5px 10px;
      }
-     .infobox td {
+     td {
        padding: 5px 10px;
        border-bottom: 1px solid #ddd;
@@ Line 24: / Line 23: @@
 </head>
 <body>
-  <!-- Infobox Container -->
+   <table id="dynamicTable">
-   <table class="infobox" id="dynamicInfobox">
      <tr>
-       <th colspan="2">Infobox Title</th> <!-- Replace with dynamic title if needed -->
+       <th colspan="2">Summary</th>
      </tr>
    </table>
    <script>
-     // Infobox data (Add only fields you want to display)
+     // Data (add only fields you want to show)
-     const infoboxData = {
+     const data = {
        Description: "Custom description for Bhikitia",
        Date: "16 September 2023",
        Source: "Own work",
        Author: "Chabe01",
-      Location: "48° 53′ 25.22″ N, 2° 15′ 07.72″ E",
-      "Custom Field 1": "Special Value",
-      "Custom Field 2": "" // Empty fields will not appear
      };
-     // Dynamic rendering
+     // Render the table dynamically
-     const infobox = document.getElementById("dynamicInfobox");
+     const table = document.getElementById("dynamicTable");
-     for (const [key, value] of Object.entries(infoboxData)) {
+     for (const [key, value] of Object.entries(data)) {
-       if (value) { // Only include rows where value is not empty
+       if (value) { // Only include rows where the value is not empty
          const row = document.createElement("tr");
          const cellKey = document.createElement("td");
@@ Line 55: / Line 50: @@
          row.appendChild(cellKey);
          row.appendChild(cellValue);
-         infobox.appendChild(row);
+         table.appendChild(row);
        }
      }