Fix: Dashboard layout + css

Team-40-IDATT2003 · May 19, 2026 · 0db201b · 0db201b
1 parent 0628441
commit 0db201b
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 31 deletions.
diff --git a/src/main/java/edu/ntnu/idi/idatt2003/g40/mappe/view/widgets/dashboard/DashBoardView.java b/src/main/java/edu/ntnu/idi/idatt2003/g40/mappe/view/widgets/dashboard/DashBoardView.java
@@ -346,20 +346,20 @@ private ColumnConstraints makeCol(final float w) {
 
   @Override
   protected void initStyling() {
-    completeSideBar.getStyleClass().add("complete-market-sidebar");
-    sidebar.getStyleClass().add("market-sidebar");
-    selectedStockLabel.getStyleClass().add("selected-stock-pill");
-    selectedStockPriceLabel.getStyleClass().add("selected-stock-pill");
-    shareQuantityInputField.getStyleClass().add("qtyTextField");
+    completeSideBar.getStyleClass().add("dashboard-complete-sidebar");
+    sidebar.getStyleClass().add("dashboard-sidebar-content");
+    selectedStockLabel.getStyleClass().add("dashboard-selected-stock-pill");
+    selectedStockPriceLabel.getStyleClass().add("dashboard-selected-stock-pill");
+    shareQuantityInputField.getStyleClass().add("dashboard-qtyTextField");
     chart.getStyleClass().add("dashboard-chart");
     scrollPane.getStyleClass().add("dashboard-sidebar-scrollPane");
     mainContent.getStyleClass().add("dashboard-mainContent-VBox");
-    m5QtyBtn.getStyleClass().add("qtyBtn");
-    m1QtyBtn.getStyleClass().add("qtyBtn");
-    p1QtyBtn.getStyleClass().add("qtyBtn");
-    p5QtyBtn.getStyleClass().add("qtyBtn");
-    buySharesBtn.getStyleClass().add("buy-button");
-    sellSharesBtn.getStyleClass().add("sell-button");
+    m5QtyBtn.getStyleClass().add("dashboard-qtyBtn");
+    m1QtyBtn.getStyleClass().add("dashboard-qtyBtn");
+    p1QtyBtn.getStyleClass().add("dashboard-qtyBtn");
+    p5QtyBtn.getStyleClass().add("dashboard-qtyBtn");
+    buySharesBtn.getStyleClass().add("dashboard-buy-button");
+    sellSharesBtn.getStyleClass().add("dashboard-sell-button");
     header.getStyleClass().add("dashboard-header");
     stockIdentity.getStyleClass().add("dashboard-stockIdentity");
     priceStats.getStyleClass().add("dashboard-priceStats");
@@ -369,6 +369,7 @@ protected void initStyling() {
     rightQty.getStyleClass().add("dashboard-rightQty");
     qtySection.getStyleClass().add("dashboard-qtySection");
     tradeBtns.getStyleClass().add("dashboard-tradeBtns");
+    timeRangeSelector.getStyleClass().add("dashboard-combo-box");
   }
 
   /**
@@ -405,7 +406,7 @@ public void addOwnedShares(final float val) {
   public Button createStockButton(final String text) {
     Button button = new Button(text);
     sidebar.getChildren().add(button);
-    button.getStyleClass().add("stock-button");
+    button.getStyleClass().add("dashboard-stock-button");
     return button;
   }
 

diff --git a/src/main/resources/styles.css b/src/main/resources/styles.css
@@ -236,35 +236,52 @@
 }
 
 
-/* --------------- IN GAME VIEW ------------- */
-.market-sidebar {
+/* --------------- Dashboard widget ------------- */
+.dashboard-complete-sidebar {
+    -fx-border-color: #000000;
+    -fx-border-width: 0 2 0 0;
+    -fx-border-style: solid;
     -fx-padding: 20;
+    -fx-spacing: 10;
 }
 
-.stock-button {
+.dashboard-sidebar-content {
+    -fx-padding: 10;
+    -fx-spacing: 10;
+    -fx-alignment: TOP_CENTER;
+
+    -fx-min-width: 150;
+    -fx-pref-width: 150;
+
+}
+
+.dashboard-stock-button {
     -fx-background-color: #e0e0e0;
+    -fx-alignment: CENTER_LEFT;
+    -fx-padding: 10 15 10 15;
     -fx-font-weight: bold;
     -fx-font-style: italic;
     -fx-text-fill: black;
-    -fx-font-size: 24;
+    -fx-font-size: 13;
+
 }
 
-.stock-button : hover {
+.dashboard-stock-button:hover {
     -fx-cursor: hand;
     -fx-scale-x: 1.05;
     -fx-scale-y: 1.05;
 }
 
-.selected-stock-pill {
+.dashboard-selected-stock-pill {
     -fx-background-color: #e0e0e0;
     -fx-background-radius: 10;
     -fx-padding: 10 40;
     -fx-font-size: 24;
     -fx-font-weight: bold;
-    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.2), 5, 0, 0, 2);
+    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.2), 5, 0, 0, 2);
 }
 
-.buy-button {
+.dashboard-buy-button {
     -fx-graphic: url('Icons/plus2.png');
     -fx-content-display: left;
     -fx-graphic-text-gap: 10;
@@ -273,32 +290,142 @@
     -fx-text-fill: black;
     -fx-font-style: italic;
     -fx-font-weight: bold;
-    -fx-min-height: 60;
-    -fx-pref-height: 80;
-    -fx-min-width: 150;
-    -fx-max-width: 250;
+
+    -fx-min-height: 30;
+    -fx-pref-height: 45;
+    -fx-max-height: 60;
+
+    -fx-min-width: 60;
+    -fx-pref-width: 80;
+    -fx-max-width: 200;
 }
 
-.sell-button {
+.dashboard-sell-button {
     -fx-graphic: url('Icons/minus2.png');
     -fx-background-color: #d50000;
     -fx-background-radius: 30;
     -fx-text-fill: black;
     -fx-font-style: italic;
     -fx-font-weight: bold;
-    -fx-min-height: 60;
-    -fx-pref-height: 80;
-    -fx-min-width: 150;
-    -fx-max-width: 250;
+
+    -fx-min-height: 30;
+    -fx-pref-height: 45;
+    -fx-max-height: 60;
+
+    -fx-min-width: 60;
+    -fx-pref-width: 80;
+    -fx-max-width: 200;
+}
+
+.dashboard-buy-button:hover, .dashboard-sell-button:hover {
+    -fx-cursor: hand;
+    -fx-scale-x: 1.05;
+    -fx-scale-y: 1.05;
+}
+.dashboard-qtyBtn {
+    -fx-background-color: rgba(140, 140, 140, 0.6);
+
+    -fx-background-radius: 50;
+
+    -fx-text-fill: white;
+    -fx-font-weight: bold;
+    -fx-font-size: 14px;
+
+    -fx-min-width: 60;
+    -fx-pref-width: 75;
+    -fx-max-width: 90;
+
+    -fx-min-height: 20;
+    -fx-pref-height: 30;
+    -fx-max-height: 40;
 }
 
-.buy-button:hover,
-.sell-button:hover {
+.dashboard-qtyBtn:hover {
     -fx-cursor: hand;
     -fx-scale-x: 1.05;
     -fx-scale-y: 1.05;
 }
 
+.dashboard-qtyTextField {
+    -fx-alignment: CENTER;
+
+    -fx-min-width: 50;
+    -fx-pref-width: 75;
+    -fx-max-width: 100;
+
+    -fx-min-height: 30;
+    -fx-pref-height: 45;
+    -fx-max-height: 60;
+}
+
+.dashboard-combo-box {
+    -fx-background-color: #f4f4f4;
+    -fx-border-color: #d1d1d1;
+    -fx-border-radius: 5;
+    -fx-background-radius: 5;
+}
+
+.dashboard-combo-box .list-cell {
+    -fx-text-fill: #333333;
+}
+
+.dashboard-sidebar-scrollPane {
+    -fx-min-width: 150;
+    -fx-background-color: transparent;
+    -fx-border-color: transparent;
+    -fx-padding: 0;
+}
+
+.dashboard-sidebar-scrollPane > .viewport {
+    -fx-background-color: transparent;
+}
+
+.dashboard-mainContent-VBox {
+    -fx-padding: 30;
+    -fx-spacing: 20;
+    -fx-alignment: TOP_LEFT;
+}
+
+.dashboard-chart {
+    -fx-min-height: 200;
+    -fx-pref-height: 650;
+}
+
+.dashboard-header {
+    -fx-spacing: 20;
+}
+
+.dashboard-stockIdentity {
+    -fx-spacing: 5;
+}
+
+.dashboard-priceStats {
+    -fx-spacing: 5;
+}
+
+.dashboard-lowhigh {
+    -fx-spacing: 10;
+}
+
+.dashboard-grid {
+    -fx-alignment: CENTER;
+}
+
+.dashboard-leftQty {
+    -fx-alignment: CENTER_RIGHT;
+}
+
+.dashboard-rightQty {
+    -fx-alignment: CENTER_LEFT;
+}
+
+.dashboard-qtySection {
+    -fx-alignment: CENTER;
+}
+
+.dashboard-tradeBtns {
+    -fx-alignment: CENTER;
+}
 /* ------------- MARKET VIEW ------------- */
 /* Root pane fills the center area with a light translucent background. */
 .market-container {