Skip to content

Commit 20fea39

Browse files
rmusser01rmusser01
committed
scaling GUI
1 parent ac9c963 commit 20fea39

File tree

2 files changed

+224
-13
lines changed

2 files changed

+224
-13
lines changed

‎css/tldw_cli.tcss

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
2+
Screen { layout: vertical; }
3+
Header { dock: top; height: 1; background: $accent-darken-1; }
4+
Footer { dock: bottom; height: 1; background: $accent-darken-1; }
5+
#tabs { dock: top; height: 3; background: $background; padding: 0 1; }
6+
#tabs Button { width: 1fr; height: 100%; border: none; background: $panel; color: $text-muted; }
7+
#tabs Button:hover { background: $panel-lighten-1; color: $text; }
8+
#tabs Button.-active { background: $accent; color: $text; text-style: bold; border: none; }
9+
#content { height: 1fr; width: 100%; }
10+
11+
/* Base style for ALL windows. The watcher will set display: True/False */
12+
.window {
13+
height: 100%;
14+
width: 100%;
15+
layout: horizontal; /* Or vertical if needed by default */
16+
overflow: hidden;
17+
}
18+
19+
/* REMOVED .hidden class */
20+
21+
.placeholder-window { align: center middle; background: $panel; }
22+
23+
/* Sidebar Styling */
24+
.sidebar { width: 35; background: $boost; padding: 1 2; border-right: thick $background-darken-1; height: 100%; overflow-y: auto; overflow-x: hidden; }
25+
.sidebar-title { text-style: bold underline; margin-bottom: 1; width: 100%; text-align: center; }
26+
.sidebar-label { margin-top: 1; text-style: bold; }
27+
.sidebar-input { width: 100%; margin-bottom: 1; }
28+
.sidebar-textarea { width: 100%; height: 5; border: round $surface; margin-bottom: 1; }
29+
.sidebar Select { width: 100%; margin-bottom: 1; }
30+
31+
/* --- Chat Window specific layouts --- */
32+
#chat-main-content {
33+
layout: vertical;
34+
height: 100%;
35+
width: 1fr;
36+
}
37+
/* VerticalScroll for chat messages */
38+
#chat-log {
39+
height: 1fr; /* Takes remaining space */
40+
width: 100%;
41+
/* border: round $surface; Optional: Add border to scroll area */
42+
padding: 0 1; /* Padding around messages */
43+
}
44+
45+
/* Input area styling (shared by chat and character) */
46+
#chat-input-area, #character-input-area {
47+
height: auto; /* Allow height to adjust */
48+
max-height: 12; /* Limit growth */
49+
width: 100%;
50+
align: left top; /* Align children to top-left */
51+
padding: 1; /* Consistent padding */
52+
border-top: round $surface;
53+
}
54+
/* Input widget styling (shared) */
55+
.chat-input { /* Targets TextArea */
56+
width: 1fr;
57+
height: auto; /* Allow height to adjust */
58+
max-height: 100%; /* Don't overflow parent */
59+
margin-right: 1; /* Space before button */
60+
border: round $surface;
61+
}
62+
/* Send button styling (shared) */
63+
.send-button { /* Targets Button */
64+
width: 10;
65+
height: 3; /* Fixed height for consistency */
66+
/* align-self: stretch; REMOVED */
67+
margin-top: 0;
68+
}
69+
70+
/* --- Character Chat Window specific layouts --- */
71+
#character-main-content {
72+
layout: vertical;
73+
height: 100%;
74+
width: 1fr;
75+
}
76+
#character-top-area {
77+
height: 1fr; /* Top area takes remaining vertical space */
78+
width: 100%;
79+
layout: horizontal;
80+
margin-bottom: 1;
81+
}
82+
/* Log when next to portrait (Still RichLog here) */
83+
#character-top-area > #character-log { /* Target by ID is safer */
84+
margin: 0 1 0 0;
85+
height: 100%;
86+
margin-bottom: 0; /* Override base margin */
87+
border: round $surface; /* Added border back for RichLog */
88+
padding: 0 1; /* Added padding back for RichLog */
89+
width: 1fr; /* Ensure it takes space */
90+
}
91+
/* Portrait styling */
92+
#character-portrait {
93+
width: 25;
94+
height: 100%;
95+
border: round $surface;
96+
padding: 1;
97+
margin: 0;
98+
overflow: hidden;
99+
align: center top;
100+
}
101+
102+
/* Logs Window */
103+
#logs-window { padding: 0; border: none; height: 100%; width: 100%; }
104+
#app-log-display { border: none; height: 1fr; width: 1fr; margin: 0; padding: 1; }
105+
106+
/* --- ChatMessage Styling --- */
107+
ChatMessage {
108+
width: 100%;
109+
height: auto;
110+
margin-bottom: 1;
111+
}
112+
ChatMessage > Vertical {
113+
border: round $surface;
114+
background: $panel;
115+
padding: 0 1;
116+
width: 100%;
117+
height: auto;
118+
}
119+
ChatMessage.-user > Vertical {
120+
background: $boost; /* Different background for user */
121+
border: round $accent;
122+
}
123+
.message-header {
124+
width: 100%;
125+
padding: 0 1;
126+
background: $surface-darken-1;
127+
text-style: bold;
128+
height: 1; /* Ensure header is minimal height */
129+
}
130+
.message-text {
131+
padding: 1; /* Padding around the text itself */
132+
width: 100%;
133+
height: auto;
134+
}
135+
.message-actions {
136+
height: auto;
137+
width: 100%;
138+
padding: 1; /* Add padding around buttons */
139+
/* Use a VALID border type */
140+
border-top: solid $surface-lighten-1; /* CHANGED thin to solid */
141+
align: right middle; /* Align buttons to the right */
142+
display: block; /* Default display state */
143+
}
144+
.message-actions Button {
145+
min-width: 8;
146+
height: 1;
147+
margin: 0 0 0 1; /* Space between buttons */
148+
border: none;
149+
background: $surface-lighten-2;
150+
color: $text-muted;
151+
}
152+
.message-actions Button:hover {
153+
background: $surface;
154+
color: $text;
155+
}
156+
/* Initially hide AI actions until generation is complete */
157+
ChatMessage.-ai .message-actions.-generating {
158+
display: none;
159+
}
160+
/* microphone button � same box as Send but subdued colour */
161+
.mic-button {
162+
width: 3;
163+
height: 3;
164+
margin-right: 1; /* gap before Send */
165+
border: none;
166+
background: $surface-darken-1;
167+
color: $text-muted;
168+
}
169+
.mic-button:hover {
170+
background: $surface;
171+
color: $text;
172+
}
173+
.sidebar-toggle {
174+
width: 3;
175+
height: 3;
176+
margin-right: 1;
177+
border: none;
178+
background: $surface-darken-1;
179+
color: $text;
180+
}
181+
.sidebar-toggle:hover {
182+
background: $surface;
183+
}
184+
185+
/* collapsed side-bar; width zero and no border */
186+
.sidebar.collapsed {
187+
width: 0 !important;
188+
border-right: none !important;
189+
padding: 0 !important;
190+
overflow: hidden !important;
191+
display: none; /* ensures it doesn�t grab focus */
192+
}
193+
#app-titlebar {
194+
dock: top;
195+
height: 1; /* single line */
196+
background: $accent; /* or any colour */
197+
color: $text;
198+
text-align: center;
199+
text-style: bold;
200+
padding: 0 1;
201+
}
202+

‎tldw_app/css/tldw_cli.tcss

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@ Footer { dock: bottom; height: 1; background: $accent-darken-1; }
1515
overflow: hidden;
1616
}
1717

18-
/* REMOVED .hidden class */
19-
2018
.placeholder-window { align: center middle; background: $panel; }
2119

2220
/* Sidebar Styling */
23-
/* Existing left sidebar */
24-
.sidebar {
25-
width: 70;
21+
/* Generic .sidebar (used by #chat-sidebar and potentially others) */
22+
.sidebar {
23+
/* width: 70; <-- REMOVE fixed width */
24+
width: 25%; /* <-- CHANGE to percentage (adjust 20% to 35% as needed) */
25+
min-width: 20; /* <-- ADD a minimum width to prevent it becoming unusable */
26+
max-width: 80; /* <-- ADD a maximum width (optional) */
2627
background: $boost;
2728
padding: 1 2;
2829
border-right: thick $background-darken-1;
@@ -33,16 +34,20 @@ Footer { dock: bottom; height: 1; background: $accent-darken-1; }
3334
/* Collapsed state for the existing left sidebar */
3435
.sidebar.collapsed {
3536
width: 0 !important;
37+
min-width: 0 !important; /* Ensure min-width is also 0 */
3638
border-right: none !important;
3739
padding: 0 !important;
3840
overflow: hidden !important;
3941
display: none; /* ensures it doesn’t grab focus */
4042
}
4143

42-
/* New right sidebar (character-sidebar) */
44+
/* Right sidebar (character-sidebar) */
4345
#character-sidebar {
44-
dock: right; /* Position on the right */
45-
width: 70; /* Specific width for this sidebar */
46+
dock: right;
47+
/* width: 70; <-- REMOVE fixed width */
48+
width: 25%; /* <-- CHANGE to percentage (match .sidebar or use a different one) */
49+
min-width: 20; /* <-- ADD a minimum width */
50+
max-width: 80; /* <-- ADD a maximum width (optional) */
4651
background: $boost;
4752
padding: 1 2;
4853
border-left: thick $background-darken-1; /* Border on the left */
@@ -54,12 +59,14 @@ Footer { dock: bottom; height: 1; background: $accent-darken-1; }
5459
/* Collapsed state for the new right sidebar */
5560
#character-sidebar.collapsed {
5661
width: 0 !important;
57-
border-left: none !important; /* Ensure left border is removed */
62+
min-width: 0 !important; /* Ensure min-width is also 0 */
63+
border-left: none !important;
5864
padding: 0 !important;
5965
overflow: hidden !important;
6066
display: none; /* Ensures it doesn't take space or grab focus */
6167
}
6268

69+
/* Common sidebar elements */
6370
.sidebar-title { text-style: bold underline; margin-bottom: 1; width: 100%; text-align: center; }
6471
.sidebar-label { margin-top: 1; text-style: bold; }
6572
.sidebar-input { width: 100%; margin-bottom: 1; }
@@ -70,7 +77,7 @@ Footer { dock: bottom; height: 1; background: $accent-darken-1; }
7077
#chat-main-content {
7178
layout: vertical;
7279
height: 100%;
73-
width: 1fr;
80+
width: 1fr; /* This is KEY - it takes up the remaining horizontal space */
7481
}
7582
/* VerticalScroll for chat messages */
7683
#chat-log {
@@ -115,7 +122,8 @@ Footer { dock: bottom; height: 1; background: $accent-darken-1; }
115122

116123
/* Left Pane Styling */
117124
.cc-left-pane {
118-
width: 30%; /* Example width */
125+
width: 25%; /* Keep 25% or 30% - adjust as needed */
126+
min-width: 20; /* ADD a minimum width */
119127
height: 100%;
120128
background: $boost;
121129
padding: 1;
@@ -134,7 +142,8 @@ Footer { dock: bottom; height: 1; background: $accent-darken-1; }
134142

135143
/* Right Pane Styling */
136144
.cc-right-pane {
137-
width: 30%; /* Example width */
145+
width: 25%; /* Keep 25% or 30% - adjust as needed */
146+
min-width: 20; /* ADD a minimum width */
138147
height: 100%;
139148
background: $boost;
140149
padding: 1;
@@ -152,7 +161,7 @@ Footer { dock: bottom; height: 1; background: $accent-darken-1; }
152161
margin-bottom: 1;
153162
border: round $surface;
154163
}
155-
.cc-left-pane Button, .cc-right-pane Button {
164+
.cc-left-pane Button, .cc-right_pane Button { /* Typo Fixed */
156165
width: 100%;
157166
margin-bottom: 1;
158167
}

0 commit comments

Comments
 (0)