Aggiunta Bootstrap 5.3.3 (CSS, JS, RTL, mappe) al progetto
Sono stati aggiunti tutti i file principali di Bootstrap 5.3.3, inclusi CSS, JavaScript (bundle, ESM, UMD, minificati), versioni RTL, utility, reboot, griglia e relative mappe delle sorgenti. Questi file abilitano un sistema di design moderno, responsive e accessibile, con supporto per layout LTR e RTL, debugging avanzato tramite source map e tutte le funzionalità di Bootstrap per lo sviluppo dell’interfaccia utente. Nessuna modifica ai file esistenti.
This commit is contained in:
271
TradingBot/SIDEBAR_TOGGLE_DEBUG.md
Normal file
271
TradingBot/SIDEBAR_TOGGLE_DEBUG.md
Normal file
@@ -0,0 +1,271 @@
|
||||
# ?? DEBUG - Sidebar Collapse Toggle
|
||||
|
||||
## Problema Riportato
|
||||
Il pulsante per ridurre la sidebar a sole icone non funziona.
|
||||
|
||||
## Modifiche Applicate
|
||||
|
||||
### 1. **MainLayout.razor** - Migliorato Toggle
|
||||
```csharp
|
||||
private void ToggleSidebar()
|
||||
{
|
||||
sidebarCollapsed = !sidebarCollapsed;
|
||||
SettingsService.UpdateSetting(nameof(AppSettings.SidebarCollapsed), sidebarCollapsed);
|
||||
StateHasChanged(); // ? AGGIUNTO: Force immediate UI update
|
||||
Console.WriteLine($"Sidebar toggled: collapsed={sidebarCollapsed}"); // ? AGGIUNTO: Debug log
|
||||
}
|
||||
```
|
||||
|
||||
**Cosa fa**:
|
||||
- ? Forza il re-render immediato con `StateHasChanged()`
|
||||
- ? Log nella console per debug
|
||||
- ? Salva lo stato nelle impostazioni
|
||||
|
||||
### 2. **MainLayout.razor.css** - CSS Collapsed State
|
||||
```css
|
||||
::deep .trading-bot-layout.collapsed .sidebar-brand {
|
||||
padding: 1.5rem 0.75rem !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
::deep .trading-bot-layout.collapsed .brand-logo {
|
||||
width: 3rem !important;
|
||||
height: 3rem !important;
|
||||
}
|
||||
```
|
||||
|
||||
**Cosa fa**:
|
||||
- ? Riduce padding quando collapsed
|
||||
- ? Centra il logo
|
||||
- ? Riduce dimensione logo
|
||||
|
||||
## Come Testare
|
||||
|
||||
### 1. **Riavvia l'Applicazione**
|
||||
```sh
|
||||
# Stop server
|
||||
Ctrl + C
|
||||
|
||||
# Clean build
|
||||
dotnet clean
|
||||
dotnet build
|
||||
|
||||
# Run
|
||||
dotnet run
|
||||
```
|
||||
|
||||
### 2. **Forza Cache Refresh**
|
||||
```
|
||||
Ctrl + Shift + R (o Ctrl + F5)
|
||||
```
|
||||
|
||||
### 3. **Test del Button**
|
||||
1. Apri l'applicazione
|
||||
2. Click sul pulsante `[?]` in alto a destra nella sidebar
|
||||
3. Verifica che:
|
||||
- La sidebar si riduca a ~80px
|
||||
- Rimangano solo le icone
|
||||
- Il logo si ridimensioni
|
||||
- L'area contenuto si espanda
|
||||
|
||||
### 4. **Verifica Console**
|
||||
Apri DevTools (F12) ? Console
|
||||
|
||||
Dovresti vedere:
|
||||
```
|
||||
Sidebar toggled: collapsed=true (quando minimizzi)
|
||||
Sidebar toggled: collapsed=false (quando espandi)
|
||||
```
|
||||
|
||||
## Comportamento Atteso
|
||||
|
||||
### Expanded (280px)
|
||||
```
|
||||
????????????????????????????
|
||||
? [??] TradingBot [?] ? ? Button qui
|
||||
? ? ATTIVO ?
|
||||
????????????????????????????
|
||||
? ?? Dashboard ?
|
||||
? ?? Strategie ?
|
||||
? ?? Asset ?
|
||||
? ... ?
|
||||
????????????????????????????
|
||||
```
|
||||
|
||||
### Collapsed (80px)
|
||||
```
|
||||
???????
|
||||
? [??]? ? Logo centrato
|
||||
? ?
|
||||
???????
|
||||
? ?? ? ? Solo icone
|
||||
? ?? ? centrate
|
||||
? ?? ?
|
||||
? ... ?
|
||||
???????
|
||||
```
|
||||
|
||||
## Debug Checklist
|
||||
|
||||
Se il button ancora non funziona:
|
||||
|
||||
- [ ] Build riuscito senza errori?
|
||||
- [ ] Cache browser pulita (Ctrl+Shift+R)?
|
||||
- [ ] Console mostra i log "Sidebar toggled"?
|
||||
- [ ] Ispeziona elemento: classe "collapsed" viene applicata al container?
|
||||
- [ ] CSS caricato correttamente (verifica in Network tab)?
|
||||
|
||||
## Verifica con DevTools
|
||||
|
||||
### 1. Ispeziona il Container
|
||||
```
|
||||
F12 ? Elements tab
|
||||
Cerca: <div class="trading-bot-layout ...">
|
||||
```
|
||||
|
||||
**Quando Expanded**:
|
||||
```html
|
||||
<div class="trading-bot-layout expanded">
|
||||
```
|
||||
|
||||
**Quando Collapsed**:
|
||||
```html
|
||||
<div class="trading-bot-layout collapsed">
|
||||
```
|
||||
|
||||
### 2. Verifica CSS Applicato
|
||||
```
|
||||
Click su .modern-sidebar
|
||||
Guarda tab "Computed" ? width
|
||||
```
|
||||
|
||||
**Expanded**: `width: 280px`
|
||||
**Collapsed**: `width: 80px`
|
||||
|
||||
### 3. Verifica Button Click
|
||||
```
|
||||
Console tab
|
||||
Click sul button [?]
|
||||
```
|
||||
|
||||
**Output atteso**:
|
||||
```
|
||||
Sidebar toggled: collapsed=true
|
||||
```
|
||||
|
||||
## Possibili Cause se Non Funziona
|
||||
|
||||
### 1. CSS Non Caricato
|
||||
**Sintomo**: Button visibile ma sidebar non cambia dimensione
|
||||
|
||||
**Soluzione**:
|
||||
```sh
|
||||
dotnet clean
|
||||
dotnet build
|
||||
Ctrl + Shift + R nel browser
|
||||
```
|
||||
|
||||
### 2. JavaScript/SignalR Bloccato
|
||||
**Sintomo**: Click non produce effetto, nessun log
|
||||
|
||||
**Soluzione**:
|
||||
```
|
||||
F12 ? Console ? Cerca errori
|
||||
Riavvia server Blazor
|
||||
```
|
||||
|
||||
### 3. Settings Service Non Salva
|
||||
**Sintomo**: Toggle funziona ma non persiste al reload
|
||||
|
||||
**Soluzione**:
|
||||
Verifica file:
|
||||
```
|
||||
%LocalAppData%/TradingBot/appsettings.json
|
||||
```
|
||||
|
||||
Cerca proprietà:
|
||||
```json
|
||||
{
|
||||
"SidebarCollapsed": true/false
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Binding Non Aggiornato
|
||||
**Sintomo**: Classe non cambia nel DOM
|
||||
|
||||
**Soluzione**:
|
||||
Aggiungi nel code block:
|
||||
```csharp
|
||||
protected override void OnAfterRender(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
Console.WriteLine($"Initial collapsed state: {sidebarCollapsed}");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## File Modificati
|
||||
|
||||
1. ? `Components/Layout/MainLayout.razor`
|
||||
- Aggiunto `StateHasChanged()`
|
||||
- Aggiunto debug log
|
||||
|
||||
2. ? `Components/Layout/MainLayout.razor.css`
|
||||
- CSS specifico per collapsed state
|
||||
- Riduzione dimensioni logo
|
||||
|
||||
## Test Manuale Step-by-Step
|
||||
|
||||
1. ? Avvia app: `dotnet run`
|
||||
2. ? Apri browser: `https://localhost:[PORT]`
|
||||
3. ? Hard refresh: `Ctrl + Shift + R`
|
||||
4. ? Apri DevTools: `F12`
|
||||
5. ? Vai su Console tab
|
||||
6. ? Click sul button `[?]`
|
||||
7. ? Verifica log: "Sidebar toggled: collapsed=true"
|
||||
8. ? Verifica visuale: Sidebar si riduce
|
||||
9. ? Click di nuovo: "Sidebar toggled: collapsed=false"
|
||||
10. ? Verifica visuale: Sidebar si espande
|
||||
|
||||
## Expected Log Output
|
||||
|
||||
```
|
||||
// Al caricamento
|
||||
Initial collapsed state: false
|
||||
|
||||
// Click 1 (Minimize)
|
||||
Sidebar toggled: collapsed=true
|
||||
|
||||
// Click 2 (Expand)
|
||||
Sidebar toggled: collapsed=false
|
||||
|
||||
// Click 3 (Minimize)
|
||||
Sidebar toggled: collapsed=true
|
||||
```
|
||||
|
||||
## CSS Transitions
|
||||
|
||||
Con le modifiche applicate, le transizioni dovrebbero essere smooth:
|
||||
|
||||
```css
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
```
|
||||
|
||||
**Durata**: 300ms
|
||||
**Easing**: Smooth cubic-bezier
|
||||
|
||||
## Support
|
||||
|
||||
Se dopo questi passaggi il button ancora non funziona:
|
||||
|
||||
1. ?? Screenshot della sidebar
|
||||
2. ?? Log della Console (F12)
|
||||
3. ?? Ispeziona elemento HTML del container
|
||||
4. ?? Contenuto di appsettings.json
|
||||
|
||||
---
|
||||
|
||||
**Status**: ? Fix Applicato
|
||||
**Build**: ? Successful
|
||||
**Test**: ? Pending User Verification
|
||||
Reference in New Issue
Block a user