Add date to download buttons

app.css

@@ -82,14 +82,18 @@ a {
     max-width: 300px;
 }
 
+.button-container {
+    display: inline-block;
+}
+
 .button {
-    width: 100%;
-    max-width: 300px;
+    max-width: 100%;
+    width: 300px;
     margin: 10px 0;
     background: rgb(112, 50, 50);
     border-radius: 3px;
     color: #eee;
-    display: inline-block;
+    display: block;
     font-size: 20px;
     padding: 15px 25px;
     text-align: left;
@@ -97,6 +101,13 @@ a {
     transition: background 0.3s;
 }
 
+.button__info {
+    padding: 0;
+    margin: 5px 0 0;
+    display: flex;
+    justify-content: space-between;
+}
+
 .button:hover, .button:focus, .button:active {
     background: rgb(90, 45, 45);
 }
@@ -119,8 +130,10 @@ a {
     opacity: 0.7;
 }
 
-[id$="version"] {
+.button span {
     font-size: small;
+    display: flex;
+    justify-content: space-between;
 }
 
 .footer {

app.js

@@ -1,16 +1,17 @@
 var disableClick = function(e) {e.preventDefault()};
 
-var addButtonInfo = function(url, button, version, cb) {
-    var buttonElement = document.querySelector(button);
+var addButtonInfo = function(url, prefix, cb) {
+    var buttonElement = document.querySelector("#" + prefix + "-button");
     buttonElement.addEventListener("click", disableClick);
-    var versionElement = document.querySelector(version);
+    var versionElement = document.querySelector("#" + prefix + "-version");
     versionElement.innerHTML = "Ładowanie…";
+    var dateElement = document.querySelector("#" + prefix + "-date");
 
     var res = new XMLHttpRequest();
     res.open("GET", url, true);
     res.onloadend = function () {
         if(res.status === 200) {
-            cb(buttonElement, versionElement, res);
+            cb(res, buttonElement, versionElement, dateElement);
         } else {
             versionElement.innerHTML = "wersja nieznana";
         }
@@ -19,19 +20,21 @@ var addButtonInfo = function(url, button, version, cb) {
     res.send(null);
 };
 
-addButtonInfo("https://api.github.com/repos/wulkanowy/wulkanowy/releases/latest", "#beta-button", "#beta-version",
-    function(button, version, res) {
+addButtonInfo("https://api.github.com/repos/wulkanowy/wulkanowy/releases/latest", "beta",
+    function(res, button, version, date) {
         var json = JSON.parse(res.responseText);
         button.href = json.assets[0].browser_download_url;
         version.innerHTML = "v" + json.name;
+        date.innerHTML = new Date(json.published_at).toLocaleString("pl-PL");
     }
 );
 
-addButtonInfo("https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/master/artifacts/app-debug-bitrise-signed.apk/info", "#dev-button", "#dev-version",
-    function(button, version, res) {
+addButtonInfo("https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/master/artifacts/app-debug-bitrise-signed.apk/info", "dev",
+    function(res, button, version, date) {
         var json = JSON.parse(res.responseText);
         button.href = json.expiring_download_url;
         version.innerHTML = "Build " + json.build_number;
+        date.innerHTML = new Date(json.finished_at).toLocaleString("pl-PL");
 
         setTimeout(function() {
             button.href = json.public_install_page_url;

index.html

@@ -32,17 +32,27 @@
             </a>
             <section class="section">
                 <h3 class="section__header">Więcej opcji</h3>
+                <div class="button-container">
                     <a class="button button--beta" id="beta-button" title="Pobierz wersję beta" href="https://github.com/wulkanowy/wulkanowy/releases">
-                    Pobierz wersję beta<br>
+                        Pobierz wersję beta
+                        <p class="button__info">
                             <span id="beta-version">v0.0.0</span>
+                            <span id="beta-date"></span>
+                        </p>
                     </a>
+                </div>
+                <div class="button-container">
                     <a class="button button--dev"
                        id="dev-button"
                        title="Pobierz wersję DEV"
                        href="https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/master/artifacts/app-debug-bitrise-signed.apk">
-                    Pobierz wersję DEV<br>
+                        Pobierz wersję DEV
+                        <p class="button__info">
                             <span id="dev-version">Build 0000</span>
+                            <span id="dev-date"></span>
+                        </p>
                     </a>
+                </div>
             </section>
         </main>
         <footer id="footer" class="footer">