Merge branch 'master' of github.com:NBTX/postwoman-vue

This commit is contained in:
NBTX
2019-08-25 00:50:23 +01:00
2 changed files with 11 additions and 8 deletions

View File

@@ -65,6 +65,7 @@ footer {
justify-content: space-between; justify-content: space-between;
} }
@media(max-width: $responsiveWidth){ @media(max-width: $responsiveWidth){
header { header {
display: block; display: block;
@@ -77,6 +78,7 @@ footer {
} }
} }
nav { nav {
a:not(:last-of-type) { a:not(:last-of-type) {
margin-right: 15px; margin-right: 15px;

View File

@@ -5,10 +5,10 @@
<ul> <ul>
<li> <li>
<label for="url">URL</label> <label for="url">URL</label>
<input type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection"> <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
</li> </li>
<li class="no-grow"> <li class="no-grow">
<label for="action">&nbsp;</label> <label>&nbsp;</label>
<button class="action" :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button> <button class="action" :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
</li> </li>
</ul> </ul>
@@ -17,8 +17,8 @@
<pw-section class="purple" label="Communication" id="response" ref="response"> <pw-section class="purple" label="Communication" id="response" ref="response">
<ul> <ul>
<li> <li>
<label for="body">Log</label> <label for="log">Log</label>
<div name="body" class="body" readonly> <div id="log" name="log" class="log" readonly>
<span v-if="communication.log"> <span v-if="communication.log">
<span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span> <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span> </span>
@@ -29,16 +29,17 @@
<ul> <ul>
<li> <li>
<label for="status">Message</label> <label for="message">Message</label>
<input name="status" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage"> <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
</li> </li>
<li class="no-grow"> <li class="no-grow">
<label for="send">&nbsp;</label> <label>&nbsp;</label>
<button class="action" name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button> <button class="action" name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
</div> </div>
</template> </template>
@@ -50,7 +51,7 @@
width: 150px; width: 150px;
} }
div.body { div.log {
margin: 4px; margin: 4px;
padding: 8px 16px; padding: 8px 16px;
width: calc(100% - 8px); width: calc(100% - 8px);