fix(css): кнопки выровнены по краям

README.md

@@ -17,6 +17,7 @@
 - Голосовой ввод через браузерный Speech API
 - Выбор из последних отправленных команд стрелками вниз-вверх
 - Вывод вопросов и ответов
+- Вывод в консоль JSON запросов и ответов в удобном формате
 - Вывод кнопок, отправка запросов с `type = 'ButtonPressed'`
 - `session.session_id` сбрасывается при каждом обновлении страницы или при завершении диалога из навыка
 - `session.user_id` хранится в localStorage, то есть каждый браузер считается новым юзером

components/Message.vue

@@ -7,7 +7,7 @@
 
  <div class="message__text" v-html="text"></div>
 
- <div class="bottom clearfix">
+ <div class="message__buttons">
  <MessageButton class="message__button" v-for="button in message.buttons" :key="button.title"
  :title="button.title" :value="button.value" :url="button.url" :payload="button.payload"></MessageButton>
  </div>
@@ -42,30 +42,35 @@
  &_my {
  float: right;
  }
- &_info{
+ &_info {
  border-left: 3px solid #17a2b8;
  }
- &_success{
- border-left: 3px solid #28a745
+ &_success {
+ border-left: 3px solid #28a745;
  }
- &_warning{
+ &_warning {
  border-left: 3px solid #ffc107;
  }
- &_error{
- border-left: 3px solid #dc3545
+ &_error {
+ border-left: 3px solid #dc3545;
  }
 
  &__date {
  margin-left: 10px;
  font-size: 0.8rem;
  }
 
- &__resend{
+ &__resend {
  margin-left: 10px;
  background: none;
  border: none;
  padding: 0;
  }
+
+ &__buttons {
+ margin-top: 3px;
+ margin-left: -3px;
+ }
 }
 </style>
 
@@ -88,7 +93,7 @@ export default {
  },
 
  methods: {
- resend(){
+ resend() {
  this.$store.commit(ADD_MESSAGE, {
  text: this.message.text,
  author: AUTHOR_NAME

components/Sidebar.vue

@@ -19,8 +19,12 @@
 
  <el-row v-if="webhookURLs">
  <div>Последние URL навыков:</div>
- <MessageButton v-for="webhookURL in webhookURLs" :key="webhookURL"
- :title="webhookURL" :value="'use ' + webhookURL"></MessageButton>
+ <ul class="webhooks-buttons">
+ <li v-for="webhookURL in webhookURLs" :key="webhookURL">
+ <MessageButton
+ :title="webhookURL" :value="'use ' + webhookURL"></MessageButton>
+ </li>
+ </ul>
  </el-row>
  </div>
 </template>
@@ -41,6 +45,14 @@
  color: #666;
  }
  }
+
+ .webhooks-buttons {
+ padding: 0;
+ margin-left: -3px;
+ li {
+ list-style: none;
+ }
+ }
 }
 </style>