Merge branch 'main' of https://github.com/iwokonl/Kantor

iwokonl · May 20, 2024 · fd454c2 · fd454c2
2 parents c991053 + 7bda351
commit fd454c2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/Front/kantor-angular/src/app/currency-detail/currency-detail.component.html b/Front/kantor-angular/src/app/currency-detail/currency-detail.component.html
@@ -12,11 +12,13 @@ <h3>{{ currencyDetails.currency +' ' + currencyFlags[currencyDetails.code] }}</h
     <div class="chart-container"><canvas id="chart" width="80vw" height="60vh"></canvas></div>
 
     <div class="chart-buttons-container">
-      <button class="chart-buttons" (click)="changeDateRange(7)">1 T</button>
-      <button class="chart-buttons" (click)="changeDateRange(14)">2 T</button>
-      <button class="chart-buttons" (click)="changeDateRange(30)">1 M</button>
-      <button class="chart-buttons" (click)="changeDateRange(90)">3 M</button>
-      <button class="chart-buttons" (click)="changeDateRange(365)">1 R</button>
+      <div class="chart-buttons-inner-container">
+        <button class="chart-buttons" (click)="changeDateRange(7)">1 T</button>
+        <button class="chart-buttons" (click)="changeDateRange(14)">2 T</button>
+        <button class="chart-buttons" (click)="changeDateRange(30)">1 M</button>
+        <button class="chart-buttons" (click)="changeDateRange(90)">3 M</button>
+        <button class="chart-buttons" (click)="changeDateRange(365)">1 R</button>
+      </div>
     </div>
 
   </div>

diff --git a/Front/kantor-angular/src/app/currency-detail/currency-detail.component.scss b/Front/kantor-angular/src/app/currency-detail/currency-detail.component.scss
@@ -17,7 +17,7 @@
   color: #DBDBDB;
   display: flex;
   flex-direction: column;
-  width: 80vh;
+  width: 75vh;
   //margin: 50px auto 50px 120px;
   padding: 1vh;
   //border: 1px solid #ccc;
@@ -52,13 +52,23 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 2vw;
+  padding: 1%;
   width: 100%;
   height: 10%;
+  gap: 1%;
+}
+.chart-buttons-inner-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
 }
 .chart-buttons{
+  width: 10%;
+  height: 100%;
   background: none;
-  border: none;
+  border: 1px solid transparent;
   color: rgba(228, 228, 228, 0.80);
   &:hover{
     border-radius: 10px;