vhad/web
1
0
Fork 0
mirror of https://github.com/gosticks/web.git synced 2026-10-06 22:57:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #75 from pi-hole/tweak/version-card

Browse Source 
WEB-CR-3 Improve version cards with general version and detailed version info
This commit is contained in:
Mark Drobnak
2018-08-18 14:15:55 -04:00
committed by GitHub
parent a6be8ade04 e9641b03bd
commit bdcf521600
2 changed files with 55 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/settings/VersionCard.js
+51 -21
View File
@@ -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);
src/components/settings/VersionInfo.js
+4 -4
View File
@@ -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>