Re-structure in progress state to be uniform

posit-dev · Jan 14, 2025 · 34e62c8 · 34e62c8
1 parent cd04f46
commit 34e62c8
Showing 1 changed file with 32 additions and 27 deletions.
diff --git a/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue b/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
@@ -124,37 +124,42 @@
     >
       <vscode-divider class="home-view-divider" />
 
-      <div v-if="home.publishInProgress">
-        <div class="deployment-in-progress-container">
-          <div class="progress-container">
-            <vscode-progress-ring class="progress-ring" />
-            <div class="progress-desc">
-              <div data-automation="deployment-progress">
-                Deployment in Progress...
-              </div>
-              <p class="progress-log-anchor">
-                <a
-                  class="webview-link"
-                  role="button"
-                  @click="onViewPublishingLog"
-                  >View Log</a
+      <div
+        v-if="home.publishInProgress"
+        class="deployment-in-progress-container"
+      >
+        <vscode-progress-ring class="progress-ring" />
+        <div class="flex-grow">
+          <div class="deployment-summary-container">
+            <div class="progress-container">
+              <div class="progress-desc">
+                <h4
+                  data-automation="deployment-progress"
+                  class="deployment-summary-title"
                 >
-              </p>
+                  Deployment in Progress...
+                </h4>
+              </div>
             </div>
+            <ActionToolbar
+              title="Logs"
+              :actions="[]"
+              :context-menu="contextMenuVSCodeContext"
+            />
           </div>
-          <ActionToolbar
-            title="Logs"
-            :actions="[]"
-            :context-menu="contextMenuVSCodeContext"
-          />
+          <p class="progress-log-anchor">
+            <a class="webview-link" role="button" @click="onViewPublishingLog">
+              View Log
+            </a>
+          </p>
         </div>
       </div>
       <div v-else>
         <div
           class="deployment-summary-container"
           data-automation="deploy-status"
         >
-          <h4 class="deployment-summary">
+          <h4 class="deployment-summary-title">
             {{ lastStatusDescription }}
           </h4>
           <ActionToolbar
@@ -543,8 +548,6 @@ const viewContent = () => {
 
 .deployment-in-progress-container {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
 }
 
 .deployment-summary-container {
@@ -595,7 +598,8 @@ const viewContent = () => {
   margin-top: 1.33em;
 }
 
-.deployment-summary {
+.deployment-summary-title {
+  margin-block-start: 1.33em;
   margin-bottom: 5px;
 }
 
@@ -634,10 +638,11 @@ const viewContent = () => {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-top: 10px;
 }
 
 .progress-ring {
+  flex-grow: 0;
+  margin-top: 1.33em;
   margin-right: 10px;
 }
 
@@ -648,7 +653,7 @@ const viewContent = () => {
 }
 
 .progress-log-anchor {
-  margin-top: 5px;
-  margin-bottom: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 </style>