From 0db201bc0d88efb347235fbcaa783792227b5410 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 19 May 2026 17:47:53 +0200 Subject: [PATCH] Fix: Dashboard layout + css --- .../view/widgets/dashboard/DashBoardView.java | 25 +-- src/main/resources/styles.css | 165 ++++++++++++++++-- 2 files changed, 159 insertions(+), 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 index 5c2a711..6ba9bb8 100644 --- 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 index d967597..3b73285 100644 --- 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 {