update css (#9)

bmlt-enabled · Feb 8, 2024 · fa01a93 · fa01a93
1 parent 350f8a6
commit fa01a93
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 15 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -7,9 +7,13 @@ h1 {
 }
 
 #export-form {
-	max-width: 600px;
+	max-width: 800px;
 	margin: 0 auto;
-	padding: 20px;
+	margin-top: 20px;
+	padding-top: 1px;
+	padding-left: 20px;
+	padding-right: 20px;
+	padding-bottom: 20px;
 	background-color: #f7f7f7;
 	border: 1px solid #ccc;
 	border-radius: 5px;
@@ -39,6 +43,7 @@ input[type="text"] {
 
 button {
 	background-color: #007bff;
+	width: 100%;
 	color: #fff;
 	border: none;
 	padding: 10px 20px;
@@ -50,14 +55,21 @@ button:hover {
 	background-color: #0056b3;
 }
 
-a {
-	display: block;
+a.download-links {
+	display: none;
 	margin-top: 10px;
 	text-align: center;
 	text-decoration: none;
 	color: #007bff;
 }
 
+a.footer-link {
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: #007bff;
+}
+
 a:hover {
 	text-decoration: underline;
 }
@@ -68,11 +80,21 @@ a:hover {
 	border: 1px solid #ddd;
 	border-radius: 3px;
 	box-sizing: border-box;
+	margin-bottom: 20px;
 }
 
 #description {
 	text-align: center;
-	margin-bottom: 20px;
+	margin-top: 20px;
 	font-size: 1em;
 	color: #333;
 }
+
+#footer {
+	padding: 10px;
+	background-color: #e0d8d8;
+	border: 1px solid #e0d8d8;
+	border-radius: 3px;
+	box-sizing: border-box;
+	text-align: center;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -85,9 +85,9 @@ class MeetingDataProcessor {
       convertedCSV,
       "text/csv"
     );
-    const downloadLink = document.getElementById("downloadLink");
-    downloadLink.href = csvContent;
-    downloadLink.style.display = "block";
+    const csvDownloadLink = document.getElementById("csvDownloadLink");
+    csvDownloadLink.href = csvContent;
+    csvDownloadLink.style.display = "block";
   }
 
   // KML export functionality
@@ -108,8 +108,8 @@ class MeetingDataProcessor {
   }
 
   static hideLinks() {
-    const downloadLink = document.getElementById("downloadLink");
-    downloadLink.style.display = "none";
+    const csvDownloadLink = document.getElementById("csvDownloadLink");
+    csvDownloadLink.style.display = "none";
     const kmlDownloadLink = document.getElementById("kmlDownloadLink");
     kmlDownloadLink.style.display = "none";
   }

diff --git a/index.html b/index.html
@@ -7,20 +7,22 @@
   <link rel="stylesheet" href="assets/css/main.css" />
 </head>
 <body>
-<h1>BMLT Data Converter</h1>
 <div id="export-form">
-  <div id="description">Converts BMLT JSON  meeting data to CSV or KML</div>
+  <h1>BMLT Data Converter</h1>
   <div id="inner-box">
     <label for="query">BMLT URL Query:</label>
     <input type="text" id="query" required>
     <br>
     <button onclick="exportData()">Generate Export Data</button>
-    <a id="downloadLink" style="display: none;" download="BMLT_data.csv">Download CSV</a>
-    <a id="kmlDownloadLink" style="display: none;" download="BMLT_data.kml">Download KML</a>
+    <a class="download-links" id="csvDownloadLink" download="BMLT_data.csv">Download CSV</a>
+    <a class="download-links" id="kmlDownloadLink" download="BMLT_data.kml">Download KML</a>
     <div id="errorMessages" style="display: none;"></div>
+    <div id="description">Converts BMLT JSON  meeting data to CSV or KML</div>
+  </div>
+  <div id="footer">
+    <a class="footer-link" href="https://github.com/bmlt-enabled/bmlt-data-converter/issues" target="_blank">Issues?</a>
   </div>
 </div>
-
 <script src="assets/js/main.js"></script>
 </body>
 </html>