From e9641b03bd7a3c7ec2706f8e75eb1262aa662e39 Mon Sep 17 00:00:00 2001
From: Mcat12 <newtoncat12@yahoo.com>
Date: Sat, 18 Aug 2018 14:02:43 -0400
Subject: [PATCH] Improve version cards with general version and detailed
 version info

The versions page is more responsive as well.

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>
---
 src/components/settings/VersionCard.js | 72 ++++++++++++++++++--------
 src/components/settings/VersionInfo.js |  8 +--
 2 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/src/components/settings/VersionCard.js b/src/components/settings/VersionCard.js
index 666f059..b2530fc 100644
--- a/src/components/settings/VersionCard.js
+++ b/src/components/settings/VersionCard.js
@@ -8,28 +8,58 @@
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */
 
-import React from 'react';
-import { translate } from 'react-i18next';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import { translate } from "react-i18next";
+import PropTypes from "prop-types";
+import { Collapse } from "reactstrap";
 
-const VersionCard = props => (
-  <div className="card border-0 bg-primary stat-mid-height-lock">
-    <div className="card-block">
-      <div className="card-icon">
-         <i className={props.icon}/>
+class VersionCard extends Component {
+  state = {
+    collapsed: true
+  };
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <div className="card border-0 bg-primary">
+        <div className="card-block">
+          <div className="card-icon">
+            <i className={this.props.icon}/>
+          </div>
+        </div>
+        <div className="card-body">
+          <h3>{this.props.name}</h3>
+          <p>
+            {t("Version")}: {this.props.branch === "master" ? this.props.tag : "vDev"}
+          </p>
+          <button className="btn btn-secondary"
+                  type="button"
+                  onClick={() => this.setState({ collapsed: !this.state.collapsed })}>
+            {t("Details")}
+          </button>
+          <Collapse isOpen={!this.state.collapsed}>
+            <table className="table table-borderless table-sm table-condensed"
+                   style={{ marginTop: "1rem", marginBottom: "0" }}>
+              <tr>
+                <td>{t("Branch")}</td>
+                <td>{this.props.branch}</td>
+              </tr>
+              <tr>
+                <td>{t("Tag")}</td>
+                <td>{this.props.tag}</td>
+              </tr>
+              <tr>
+                <td>{t("Hash")}</td>
+                <td>{this.props.hash}</td>
+              </tr>
+            </table>
+          </Collapse>
+        </div>
       </div>
-    </div>
-    <div className="card-img-overlay">
-      <h3>{props.name}</h3>
-      <pre>
-        <br/>
-        {props.t("Branch")}: {props.branch}<br/>
-        {props.t("Hash")}:   {props.hash}<br/>
-        {props.t("Tag")}:    {props.tag}<br/>
-      </pre>
-    </div>
-  </div>
-);
+    );
+  }
+}
 
 VersionCard.propTypes = {
   branch: PropTypes.string.isRequired,
@@ -38,4 +68,4 @@ VersionCard.propTypes = {
   tag: PropTypes.string.isRequired
 };
 
-export default translate(['settings'])(VersionCard);
+export default translate(["common", "settings"])(VersionCard);
diff --git a/src/components/settings/VersionInfo.js b/src/components/settings/VersionInfo.js
index bd9f3d3..cf27e51 100644
--- a/src/components/settings/VersionInfo.js
+++ b/src/components/settings/VersionInfo.js
@@ -87,19 +87,19 @@ class VersionInfo extends Component {
 
     return (
       <div className="row">
-        <div className="col-lg-3 col-xs-12">
+        <div className="col-xl-3 col-md-6 col-xs-12">
           <VersionCard name={t("Core")} icon="fa fa-dot-circle-o fa-2x"
                        branch={this.state.core.branch} hash={this.state.core.hash} tag={this.state.core.tag} t={t}/>
         </div>
-        <div className="col-lg-3 col-xs-12">
+        <div className="col-xl-3 col-md-6 col-xs-12">
           <VersionCard name={t("FTL")} icon="fa fa-industry fa-2x"
                        branch={this.state.ftl.branch} hash={this.state.ftl.hash} tag={this.state.ftl.tag} t={t}/>
         </div>
-        <div className="col-lg-3 col-xs-12">
+        <div className="col-xl-3 col-md-6 col-xs-12">
           <VersionCard name={t("API")} icon="fa fa-bullseye fa-2x"
                        branch={this.state.api.branch} hash={this.state.api.hash} tag={this.state.api.tag} t={t}/>
         </div>
-        <div className="col-lg-3 col-xs-12">
+        <div className="col-xl-3 col-md-6 col-xs-12">
           <VersionCard name={t("Web")} icon="fa fa-list-alt fa-2x"
                        branch={this.state.web.branch} hash={this.state.web.hash} tag={this.state.web.tag} t={t}/>
         </div>