progress bar, styling and flexboxines.

KevinJump · Dec 9, 2019 · aede815 · aede815
1 parent 9baacf6
commit aede815
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 18 deletions.
diff --git a/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncProgressView.html b/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncProgressView.html
@@ -12,16 +12,14 @@
             </div>
         </div>
     </div>
-    <div class="flex justify-center">
-        <div class="text-center">
-            <h4 class="usync-action-message">{{vm.status.Message}}</h4>
-            <small>{{vm.update.Message}}</small>
-            <div class="progress usync-not-animated" style="height: 3px;">
-                <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.update)}}%;" aria-valuenow="{{vm.calcPercentage(vm.update)}}" aria-valuemin="0" aria-valuemax="100"></div>
-            </div>
+    <div class="flex items-center flex-column">
+        <h4 class="usync-action-message">{{vm.status.Message}}</h4>
+        <small>{{vm.update.Message}}</small>
+        <div class="progress usync-not-animated" style="height: 3px; width: 160px">
+            <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.update)}}%;" aria-valuenow="{{vm.calcPercentage(vm.update)}}" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
     </div>
-    <div class="progress" style="height: 1px;">
+    <div class="progress usync-main-progress" style="height: 1px;">
         <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.status)}}%;" aria-valuenow="{{vm.calcPercentage(vm.status)}}" aria-valuemin="0" aria-valuemax="100"></div>
     </div>
 </div>
diff --git a/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncReportView.html b/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncReportView.html
@@ -81,7 +81,9 @@
                 </div>
             </div>
             <div class="flex justify-center items-center padded" ng-if="vm.countChanges(vm.results) == 0 && !vm.showAll">
-                <localize key="usync_nochange"></localize>
+                <div>
+                    <localize key="usync_nochange"></localize>
+                </div>
             </div>
     </umb-box>
 </div>
diff --git a/uSync8.BackOffice/App_Plugins/uSync8/usync.css b/uSync8.BackOffice/App_Plugins/uSync8/usync.css
@@ -302,4 +302,8 @@
 
 .usync-detail-link-cell .btn {
     padding: 6px;
+}
+
+.usync-main-progress {
+    margin: 0 -20px -20px -20px;
 }
diff --git a/uSync8.Site/App_Plugins/uSync8/components/uSyncProgressView.html b/uSync8.Site/App_Plugins/uSync8/components/uSyncProgressView.html
@@ -12,16 +12,14 @@
             </div>
         </div>
     </div>
-    <div class="flex justify-center">
-        <div class="text-center">
-            <h4 class="usync-action-message">{{vm.status.Message}}</h4>
-            <small>{{vm.update.Message}}</small>
-            <div class="progress usync-not-animated" style="height: 3px;">
-                <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.update)}}%;" aria-valuenow="{{vm.calcPercentage(vm.update)}}" aria-valuemin="0" aria-valuemax="100"></div>
-            </div>
+    <div class="flex items-center flex-column">
+        <h4 class="usync-action-message">{{vm.status.Message}}</h4>
+        <small>{{vm.update.Message}}</small>
+        <div class="progress usync-not-animated" style="height: 3px; width: 160px">
+            <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.update)}}%;" aria-valuenow="{{vm.calcPercentage(vm.update)}}" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
     </div>
-    <div class="progress" style="height: 1px;">
+    <div class="progress usync-main-progress" style="height: 1px;">
         <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.status)}}%;" aria-valuenow="{{vm.calcPercentage(vm.status)}}" aria-valuemin="0" aria-valuemax="100"></div>
     </div>
 </div>
diff --git a/uSync8.Site/App_Plugins/uSync8/components/uSyncReportView.html b/uSync8.Site/App_Plugins/uSync8/components/uSyncReportView.html
@@ -81,7 +81,9 @@
                 </div>
             </div>
             <div class="flex justify-center items-center padded" ng-if="vm.countChanges(vm.results) == 0 && !vm.showAll">
-                <localize key="usync_nochange"></localize>
+                <div>
+                    <localize key="usync_nochange"></localize>
+                </div>
             </div>
     </umb-box>
 </div>
diff --git a/uSync8.Site/App_Plugins/uSync8/usync.css b/uSync8.Site/App_Plugins/uSync8/usync.css
@@ -302,4 +302,8 @@
 
 .usync-detail-link-cell .btn {
     padding: 6px;
+}
+
+.usync-main-progress {
+    margin: 0 -20px -20px -20px;
 }