Various design tweaks

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;

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">

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

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 %}" />