Fossil SCM
Figured out how to make the new input area resizable via CSS.
Commit
91b653e845bfbb707f8d5021c245d6219f7e4096f2bb9e9b4de39692ec9367d8
Parent
7d6c07496ed3741…
1 file changed
+5
-3
+5
-3
| --- src/style.chat.css | ||
| +++ src/style.chat.css | ||
| @@ -183,12 +183,10 @@ | ||
| 183 | 183 | display: inline-block/*supposed workaround for Chrome weirdness*/; |
| 184 | 184 | padding: 0.2em; |
| 185 | 185 | flex: 50 1 85%; |
| 186 | 186 | background-color: rgba(156,156,156,0.3); |
| 187 | 187 | overflow: auto; |
| 188 | - max-height: 8rem /*arbitrary!*/; | |
| 189 | - /*white-space: pre-wrap;*/ | |
| 190 | 188 | } |
| 191 | 189 | #chat-input-field:empty::before { |
| 192 | 190 | content: attr(data-placeholder); |
| 193 | 191 | opacity: 0.6; |
| 194 | 192 | } |
| @@ -216,11 +214,12 @@ | ||
| 216 | 214 | } |
| 217 | 215 | /*body.chat #chat-input-line:not(.compact) { |
| 218 | 216 | flex-wrap: nowrap; |
| 219 | 217 | }*/ |
| 220 | 218 | body.chat #chat-input-line.compact #chat-input-field { |
| 221 | - max-height: 2rem /*arbitrary*/; | |
| 219 | + max-height: 2rem | |
| 220 | + /*enough space to see, after wrapping, that there's more text*/; | |
| 222 | 221 | } |
| 223 | 222 | |
| 224 | 223 | body.chat #chat-edit-buttons { |
| 225 | 224 | flex: 1 1 auto; |
| 226 | 225 | display: flex; |
| @@ -237,18 +236,21 @@ | ||
| 237 | 236 | flex: 1 1 auto; |
| 238 | 237 | padding: initial/*some skins mess this up for buttons*/; |
| 239 | 238 | } |
| 240 | 239 | body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * { |
| 241 | 240 | max-width: 4em; |
| 241 | + max-height: 4em; | |
| 242 | 242 | margin: 0.25em; |
| 243 | 243 | min-height: 2em; |
| 244 | 244 | } |
| 245 | 245 | body.chat #chat-input-line:not(.compact) #chat-input-field { |
| 246 | 246 | /*border-left-style: double; |
| 247 | 247 | border-left-width: 3px; |
| 248 | 248 | border-right-style: double; |
| 249 | 249 | border-right-width: 3px;*/ |
| 250 | + min-height: 4rem; | |
| 251 | + resize: both; | |
| 250 | 252 | } |
| 251 | 253 | |
| 252 | 254 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 253 | 255 | margin: 0 0.25em; |
| 254 | 256 | min-width: 2em; |
| 255 | 257 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -183,12 +183,10 @@ | |
| 183 | display: inline-block/*supposed workaround for Chrome weirdness*/; |
| 184 | padding: 0.2em; |
| 185 | flex: 50 1 85%; |
| 186 | background-color: rgba(156,156,156,0.3); |
| 187 | overflow: auto; |
| 188 | max-height: 8rem /*arbitrary!*/; |
| 189 | /*white-space: pre-wrap;*/ |
| 190 | } |
| 191 | #chat-input-field:empty::before { |
| 192 | content: attr(data-placeholder); |
| 193 | opacity: 0.6; |
| 194 | } |
| @@ -216,11 +214,12 @@ | |
| 216 | } |
| 217 | /*body.chat #chat-input-line:not(.compact) { |
| 218 | flex-wrap: nowrap; |
| 219 | }*/ |
| 220 | body.chat #chat-input-line.compact #chat-input-field { |
| 221 | max-height: 2rem /*arbitrary*/; |
| 222 | } |
| 223 | |
| 224 | body.chat #chat-edit-buttons { |
| 225 | flex: 1 1 auto; |
| 226 | display: flex; |
| @@ -237,18 +236,21 @@ | |
| 237 | flex: 1 1 auto; |
| 238 | padding: initial/*some skins mess this up for buttons*/; |
| 239 | } |
| 240 | body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * { |
| 241 | max-width: 4em; |
| 242 | margin: 0.25em; |
| 243 | min-height: 2em; |
| 244 | } |
| 245 | body.chat #chat-input-line:not(.compact) #chat-input-field { |
| 246 | /*border-left-style: double; |
| 247 | border-left-width: 3px; |
| 248 | border-right-style: double; |
| 249 | border-right-width: 3px;*/ |
| 250 | } |
| 251 | |
| 252 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 253 | margin: 0 0.25em; |
| 254 | min-width: 2em; |
| 255 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -183,12 +183,10 @@ | |
| 183 | display: inline-block/*supposed workaround for Chrome weirdness*/; |
| 184 | padding: 0.2em; |
| 185 | flex: 50 1 85%; |
| 186 | background-color: rgba(156,156,156,0.3); |
| 187 | overflow: auto; |
| 188 | } |
| 189 | #chat-input-field:empty::before { |
| 190 | content: attr(data-placeholder); |
| 191 | opacity: 0.6; |
| 192 | } |
| @@ -216,11 +214,12 @@ | |
| 214 | } |
| 215 | /*body.chat #chat-input-line:not(.compact) { |
| 216 | flex-wrap: nowrap; |
| 217 | }*/ |
| 218 | body.chat #chat-input-line.compact #chat-input-field { |
| 219 | max-height: 2rem |
| 220 | /*enough space to see, after wrapping, that there's more text*/; |
| 221 | } |
| 222 | |
| 223 | body.chat #chat-edit-buttons { |
| 224 | flex: 1 1 auto; |
| 225 | display: flex; |
| @@ -237,18 +236,21 @@ | |
| 236 | flex: 1 1 auto; |
| 237 | padding: initial/*some skins mess this up for buttons*/; |
| 238 | } |
| 239 | body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * { |
| 240 | max-width: 4em; |
| 241 | max-height: 4em; |
| 242 | margin: 0.25em; |
| 243 | min-height: 2em; |
| 244 | } |
| 245 | body.chat #chat-input-line:not(.compact) #chat-input-field { |
| 246 | /*border-left-style: double; |
| 247 | border-left-width: 3px; |
| 248 | border-right-style: double; |
| 249 | border-right-width: 3px;*/ |
| 250 | min-height: 4rem; |
| 251 | resize: both; |
| 252 | } |
| 253 | |
| 254 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 255 | margin: 0 0.25em; |
| 256 | min-width: 2em; |
| 257 |