From 1a456f7e9c584483f311aa67c68c94782186daf7 Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Wed, 20 Jan 2021 22:02:29 +0100
Subject: [PATCH] Various design tweaks
---
uhepp-js/src/common.scss | 13 +++++
uhepp-js/src/components/UheppHistUI.jsx | 57 +++++++++++--------
.../templates/registration/login.html | 4 +-
.../templates/uhepp_vault/plot_detail.html | 4 +-
4 files changed, 51 insertions(+), 27 deletions(-)
diff --git a/uhepp-js/src/common.scss b/uhepp-js/src/common.scss
index 75bda6f..c5668a1 100644
--- a/uhepp-js/src/common.scss
+++ b/uhepp-js/src/common.scss
@@ -54,21 +54,34 @@ dd {
margin-left: 1rem;
}
+.badge-container {
+ line-break: anywhere;
+}
+.badge-container .badge-pair {
+ white-space: nowrap;
+}
+
.badge-pair {
.badge, .badge-pill {
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
+ border-left: none;
padding-left: 0.3em;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding-right: 0.3em;
+ border-right: none;
}
}
}
+.badge-outline-primary {
+ border: 2px solid theme-color("primary");
+}
+
.controls-head {
display: flex;
justify-content: space-between;
diff --git a/uhepp-js/src/components/UheppHistUI.jsx b/uhepp-js/src/components/UheppHistUI.jsx
index b9ca21d..524d918 100644
--- a/uhepp-js/src/components/UheppHistUI.jsx
+++ b/uhepp-js/src/components/UheppHistUI.jsx
@@ -68,6 +68,26 @@ const useFetch = (url) => {
return data;
};
+const SingleBadge = ({tag}) => (<>
+ <span className="badge badge-pill badge-primary mx-1">{tag}</span>
+ { ' ' }
+</>)
+
+const BadgePair = ({tag, value}) => (<>
+ <span className="badge-pair mx-1">
+ <span className="badge badge-pill badge-primary badge-outline-primary">{tag}</span>
+ <span className="badge badge-pill badge-outline-primary text-dark">{value}</span>
+ </span>
+ { ' ' }
+</>)
+
+const BadgeList = ({tags}) => (
+ Object.entries(tags).map(([key, value], i) =>
+ value == null ?
+ <SingleBadge key={i} /> : <BadgePair key={i} tag={key} value={value} />
+ )
+)
+
const UheppHistUIWithSyst = ({
width,
height,
@@ -198,56 +218,50 @@ const UheppHistUIWithSyst = ({
}
return <>
- <div>{ Object.entries(uhepp.metadata.tags).map(([key, value], i) =>
- value == null ?
- <span key={i} className="badge badge-pill badge-primary mx-1">{key}</span> :
- <span key={i} className="badge-pair mx-1">
- <span className="badge badge-pill badge-primary">{key}</span>
- <span className="badge badge-pill badge-secondary">{value}</span>
- </span>
- ) }</div>
+ <div className="badge-container"><BadgeList tags={uhepp.metadata.tags} /></div>
+
<UheppHist width={width} height={height} uhepp={uhepp_derived} />
<ul className="nav nav-tabs" id="view-options" role="tablist">
<li className="nav-item">
<a className="nav-link active" id="info-tab" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="true">
- <i className="fas fa-info-circle mr-1"></i>
+ <i className="d-none d-lg-inline fas fa-info-circle mr-1"></i>
Info
</a>
</li>
<li className="nav-item">
<a className="nav-link" id="binning-tab" data-toggle="tab" href="#binning" role="tab" aria-controls="binning" aria-selected="true">
- <i className="fas fa-chart-bar mr-1"></i>
+ <i className="d-none d-lg-inline fas fa-chart-bar mr-1"></i>
Binning
</a>
</li>
<li className="nav-item">
<a className="nav-link" id="stacks-tab" data-toggle="tab" href="#stacks" role="tab" aria-controls="stacks" aria-selected="false">
- <i className="fas fa-layer-group mr-1"></i>
+ <i className="d-none d-lg-inline fas fa-layer-group mr-1"></i>
Stacks
</a>
</li>
<li className="nav-item">
<a className="nav-link" id="ratio-tab" data-toggle="tab" href="#ratio" role="tab" aria-controls="ratio" aria-selected="false">
- <i className="fas fa-percentage mr-1"></i>
+ <i className="d-none d-lg-inline fas fa-percentage mr-1"></i>
Ratio
</a>
</li>
<li className="nav-item">
<a className="nav-link" id="variations-tab" data-toggle="tab" href="#variations" role="tab" aria-controls="variations" aria-selected="false">
- <i className="fas fa-envelope mr-1"></i>
+ <i className="d-none d-lg-inline fas fa-envelope mr-1"></i>
Variations
</a>
</li>
<li className="nav-item">
<a className="nav-link" id="reset-tab" data-toggle="tab" href="#reset" role="tab" aria-controls="reset" aria-selected="false">
- <i className="fas fa-trash-restore mr-1"></i>
+ <i className="d-none d-lg-inline fas fa-trash-restore mr-1"></i>
Restore
</a>
</li>
<li className="nav-item">
<a className="nav-link" id="save-tab" data-toggle="tab" href="#save" role="tab" aria-controls="save" aria-selected="false">
- <i className="fas fa-code-branch mr-1"></i>
+ <i className="d-none d-lg-inline fas fa-code-branch mr-1"></i>
Fork/Save
</a>
</li>
@@ -273,14 +287,9 @@ const UheppHistUIWithSyst = ({
<dd>{ uhepp.metadata.Ecm_TeV ?
uhepp.metadata.Ecm_TeV + " TeV" : <i>None</i>}</dd>
<dt>Tags</dt>
- <dd>{ Object.entries(uhepp.metadata.tags).map(([key, value], i) =>
- value == null ?
- <span key={i} className="badge badge-pill badge-primary mx-1">{key}</span> :
- <span key={i} className="badge-pair mx-1">
- <span className="badge badge-pill badge-primary">{key}</span>
- <span className="badge badge-pill badge-secondary">{value}</span>
- </span>
- ) }</dd>
+ <dd className="badge-container">
+ <BadgeList tags={uhepp.metadata.tags} />
+ </dd>
</dl>
</div>
<div className="tab-pane p-3" id="binning" role="tabpanel" aria-labelledby="binning-tab">
@@ -557,7 +566,7 @@ const UheppHistUIWithSyst = ({
</button>
</p>
{saveStatus == 'loading' &&
- <p style={{fontSize: "smaller"}} className="text-muted">Depending on the size of the data, this might take some time.</p>
+ <small className="text-muted">Depending on the size of the data, this might take some time.</small>
}
{saveStatus == 'error' &&
<p className="alert alert-danger">
diff --git a/uhepp_org/uhepp_vault/templates/registration/login.html b/uhepp_org/uhepp_vault/templates/registration/login.html
index 2f3d86f..4b94b9d 100644
--- a/uhepp_org/uhepp_vault/templates/registration/login.html
+++ b/uhepp_org/uhepp_vault/templates/registration/login.html
@@ -13,14 +13,14 @@
<h1>Login</h1>
<div class="row">
- <div class="col-md-6 p-4 card bg-light border-primary">
+ <div class="col-md-6 d-flex"><div class="card p-4 bg-light border-primary">
<h2 class="mt-2">
CERN Single Sign-On
<small class="text-muted">preferred</small>
</h2>
<p>Use your CERN account to sign in or create a new account.</p>
<p><a tabindex="0" class="btn btn-primary" href="{% url 'oidc_authentication_init' %}{% if request.GET.next %}?next={{ request.GET.next }}{% endif %}">Sign in with CERN SSO</a></p>
- </div>
+ </div></div>
<div class="col-md-6 px-4">
<h2 class="mt-2">Uhepp hub account</h2>
<p>You can only use this option if you have received a special
diff --git a/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html b/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
index 3f7fdd6..d144fec 100644
--- a/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
+++ b/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
@@ -42,7 +42,9 @@
<form>
<p>Download the uhepp data directly as a JSON file.</p>
<p>
- <a class="btn btn-primary" href="{% url 'uhepp_vault:plot-download' plot.uuid %}">Download JSON</a>
+ <a class="btn btn-primary" href="{% url 'uhepp_vault:plot-download' plot.uuid %}">
+ <i class="fas fa-download mr-1"></i>
+ Download JSON</a>
</p>
<p>Copy the download URL</p>
<input type="text" value="{{ request.scheme }}://{{ request.get_host }}{% url 'uhepp_vault:plot-download' plot.uuid %}" />
--
GitLab