Make debug log as big as possible

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

View file

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

View file

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

View file

@ -410,19 +410,29 @@ $avatar-size: 44px;
}
.debug-log {
&.modal .content {
max-width: 90%;
&.modal {
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 {
background: rgba(0,0,0,0.15);
}
textarea {
width: 100%;
resize: vertical;
}
button, input[type=submit] {
border-radius: 4px;
border: solid 1px #ccc;

View file

@ -324,13 +324,21 @@ img.emoji {
@keyframes rotate {
to {
transform: rotate(360deg); } }
.debug-log.modal .content {
max-width: 90%; }
.debug-log.modal {
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 {
background: rgba(0, 0, 0, 0.15); }
.debug-log textarea {
width: 100%;
resize: vertical; }
.debug-log button, .debug-log input[type=submit] {
border-radius: 4px;
border: solid 1px #ccc;