thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Make debug log as big as possible

Browse source 
Tweak style to make the modal reasonably wide/tall, and use flexbox
to automatically expand the textarea.

// FREEBIE
This commit is contained in:
lilia 2016-02-22 12:17:54 -08:00
parent de745c3ba0
commit 7f8c76faca
4 changed files with 40 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
background.html
View file

@ -310,14 +310,16 @@
</script> </script>
<script type='text/x-tmpl-mustache' id='debug-log'> <script type='text/x-tmpl-mustache' id='debug-log'>
<div class='content'> <div class='content'>
<a class='x close'>&times;</a> <div>
<h1>{{ title }}</h1> <a class='x close'>&times;</a>
<p> {{ debugLogExplanation }}</p> <h1> {{ title }} </h1>
<form> <p> {{ debugLogExplanation }}</p>
<textarea rows='5'></textarea> </div>
<input class='submit' type='submit' value='{{ submit }}' /> <textarea rows='5'></textarea>
<div class='buttons'>
<button class='submit'>{{ submit }}</button>
<button class='close'>{{ cancel }}</button> <button class='close'>{{ cancel }}</button>
</form> </div>
<div class='result'> <div class='result'>
<a target='_blank'></a> <a target='_blank'></a>
<div><button class='close'>{{ close }}</button></div> <div><button class='close'>{{ close }}</button></div>

2
js/views/debug_log_view.js
View file

@ -13,7 +13,7 @@
this.$('textarea').val(console.get()); this.$('textarea').val(console.get());
}, },
events: { events: {
'submit': 'submit', 'click .submit': 'submit',
'click .close': 'close' 'click .close': 'close'
}, },
render_attributes: { render_attributes: {

24
stylesheets/_global.scss
View file

@ -410,19 +410,29 @@ $avatar-size: 44px;
} }
.debug-log { .debug-log {
&.modal .content { &.modal {
max-width: 90%; padding: 50px;
.content {
margin: 0;
max-width: 100%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
textarea {
flex-grow: 1;
width: 100%;
resize: none;
}
}
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15); background: rgba(0,0,0,0.15);
} }
textarea {
width: 100%;
resize: vertical;
}
button, input[type=submit] { button, input[type=submit] {
border-radius: 4px; border-radius: 4px;
border: solid 1px #ccc; border: solid 1px #ccc;

18
stylesheets/manifest.css
View file

@ -324,13 +324,21 @@ img.emoji {
@keyframes rotate { @keyframes rotate {
to { to {
transform: rotate(360deg); } } transform: rotate(360deg); } }
.debug-log.modal .content { .debug-log.modal {
max-width: 90%; } padding: 50px; }
.debug-log.modal .content {
margin: 0;
max-width: 100%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column; }
.debug-log.modal .content textarea {
flex-grow: 1;
width: 100%;
resize: none; }
.debug-log ::-webkit-scrollbar-thumb { .debug-log ::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15); } background: rgba(0, 0, 0, 0.15); }
.debug-log textarea {
width: 100%;
resize: vertical; }
.debug-log button, .debug-log input[type=submit] { .debug-log button, .debug-log input[type=submit] {
border-radius: 4px; border-radius: 4px;
border: solid 1px #ccc; border: solid 1px #ccc;