From 9de619e4a51672f1da3fe28a88fb3d9dec0143df Mon Sep 17 00:00:00 2001
From: nhertz <nhertz@nrao.edu>
Date: Tue, 3 Aug 2021 14:48:10 -0600
Subject: [PATCH] Debuttonized the capability step sequence and adjusted the
way the font is displayed slightly and the proportions of the container
---
.../capability-request.component.html | 4 ++--
.../capability-definition.component.html | 19 +++++++------------
.../capability-definition.component.scss | 4 ++++
3 files changed, 13 insertions(+), 14 deletions(-)
diff --git a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
index 29ba2736a..64bce7fcf 100644
--- a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
+++ b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
@@ -4,7 +4,7 @@
</header>
<div id="definition-parameters-and-versions" class="container-fluid">
<div class="row">
- <div id="capability-definition-container" class="col">
+ <div id="capability-definition-container" class="col-5">
<span id="capability-label">Capability</span>
<app-capability-definition
*ngIf="capability !== undefined"
@@ -40,7 +40,7 @@
>
</div>
</div>
- <div id="parameters-files-container" class="col">
+ <div id="parameters-files-container" class="col-7">
<span id="parameters-label">Parameters</span>
<app-parameters
id="parameters"
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html
index b5d5a7f7f..23db6c981 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html
+++ b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html
@@ -1,17 +1,12 @@
<div id="definition-container">
- <h5 id="capability-name">{{ capability.name }}</h5>
+ <h5 id="capability-name"><strong>{{ capability.name.toUpperCase() }}</strong></h5>
- <div id="step-sequence">
- <div class="container-fluid">
- <div
- class="row bg-primary rounded rounded-lg mb-1 text-white py-2 align-items-center"
- *ngFor="let step of capabilityStepList"
- >
- <div class="col">{{ step[0].toUpperCase() }} {{ step[1] }}</div>
- <div class="col-auto">
- <span class="fas fa-play-circle fa-2x"></span>
- </div>
- </div>
+ <div id="step-sequence" class="container-fluid">
+ <div
+ class="capability-step row rounded rounded-lg mb-1 py-2 align-items-center"
+ *ngFor="let step of capabilityStepList"
+ >
+ <span class="col text-left px-3">{{ step[0].toUpperCase() }} <strong *ngIf="step[1] !== undefined">{{ step[1].toUpperCase() }}</strong></span>
</div>
</div>
</div>
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss
index 06e53bc6f..690233c44 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss
+++ b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss
@@ -1,5 +1,9 @@
@import "src/variables";
+.capability-step {
+ background-color: $parameters-pill-color;
+}
+
#definition-container {
background-color: white;
border-radius: 10px;
--
GitLab