Adjust sidebar and visualization styling

TAMULib · Sep 25, 2023 · 82d89d8 · 82d89d8
1 parent 4736ba9
commit 82d89d8
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 15 deletions.
diff --git a/src/app/+data-and-analytics/academic-age-group/academic-age-group.component.html b/src/app/+data-and-analytics/academic-age-group/academic-age-group.component.html
@@ -1,7 +1,7 @@
 <div class="container mb-1">
   <div class="text-center h2">{{organization.name}}</div>
   <div class="row">
-    <div class="col-xs-6">
+    <div class="col-6">
       <div class="card shadow bg-white rounded m-1">
         <div class="card-body">
           <div class="card-text">
@@ -17,7 +17,7 @@
         </div>
       </div>
     </div>
-    <div class="col-xs-6">
+    <div class="col-6">
       <div class="card shadow bg-white rounded m-1">
         <div class="card-body">
           <div class="card-text">
@@ -28,7 +28,7 @@
       </div>
       <div class="card shadow bg-white rounded m-1">
         <div class="card-body">
-          <div class="h5 text-truncate">{{ 'DATA_AND_ANALYTICS.ACADEMIC_AGE_GROUP.AVERAGE_PUBLICATIONS' | translate }}</div>
+          <div class="h5">{{ 'DATA_AND_ANALYTICS.ACADEMIC_AGE_GROUP.AVERAGE_PUBLICATIONS' | translate }}</div>
           <scholars-barplot id="averagePubRateAcademicAgeBarplot" scale="1" [input]="averagePubRateAcademicAge" maxOverride="{{maxOverride | async}}"></scholars-barplot>
         </div>
       </div>

diff --git a/src/app/+data-and-analytics/academic-age-group/academic-age-group.component.scss b/src/app/+data-and-analytics/academic-age-group/academic-age-group.component.scss
@@ -0,0 +1,5 @@
+:host {
+  .col-6 {
+    padding: 0px;
+  }
+}
diff --git a/src/app/+data-and-analytics/quantity-distribution/quantity-distribution.component.html b/src/app/+data-and-analytics/quantity-distribution/quantity-distribution.component.html
@@ -1,5 +1,3 @@
-<div class="container mb-1">
-  <div class="d-flex justify-content-center flex-nowrap">
-    <figure id="{{id}}"></figure>
-  </div>
+<div class="d-flex justify-content-center flex-nowrap">
+  <figure id="{{id}}"></figure>
 </div>
diff --git a/src/app/+data-and-analytics/quantity-distribution/quantity-distribution.component.ts b/src/app/+data-and-analytics/quantity-distribution/quantity-distribution.component.ts
@@ -43,10 +43,10 @@ export class QuantityDistributionComponent implements OnChanges, OnDestroy, OnIn
   public defaultId: string;
 
   @Input()
-  public height = 394;
+  public height = 586;
 
   @Input()
-  public width = 986;
+  public width = 896;
 
   @Output()
   public labelEvent: EventEmitter<string>;
@@ -104,10 +104,10 @@ export class QuantityDistributionComponent implements OnChanges, OnDestroy, OnIn
         setTimeout(() => {
           // set the dimensions and margins of the graph
           const margin = {
-            top: 100,
-            bottom: 100,
-            left: 100,
-            right: 50,
+            top: 25,
+            bottom: 25,
+            left: 25,
+            right: 25,
           };
 
           const width = this.width - margin.left - margin.right;

diff --git a/src/app/shared/sidebar/sidebar.component.scss b/src/app/shared/sidebar/sidebar.component.scss
@@ -4,8 +4,8 @@
     width: 100%;
     padding: 10px;
     .sidebar {
-      min-width: 250px;
-      max-width: 250px;
+      min-width: 200px;
+      max-width: 200px;
       @media (max-width: 575.98px) {
         min-width: 100%;
         max-width: 100%;