fixes

src/components/InfobaseList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container-fluid">
     <h2>Список баз</h2>
     <div v-if="loading_error" class="text-danger m-4">
       <span class="fs-1">&#9940;</span><br />
@@ -21,17 +21,17 @@
     <table v-else class="table table-striped">
       <thead>
         <tr>
-          <th scope="col" class="col">#</th>
-          <th scope="col" class="col-lg-6">Имя</th>
-          <th scope="col" class="col">Ссылка</th>
-          <th scope="col" class="col">Действия</th>
+          <th scope="col" class="col text-end">#</th>
+          <th scope="col" class="col text-center">Имя</th>
+          <th scope="col" class="col text-start">Ссылка</th>
+          <th scope="col" class="col text-end">Действия</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(infobase, index) in infobases" :key="infobase.name">
-          <th scope="row">{{ index + 1 }}</th>
-          <td>{{ infobase.name }}</td>
-          <td>
+          <th class="text-end" scope="row">{{ index + 1 }}</th>
+          <td class="text-center">{{ infobase.name }}</td>
+          <td class="text-start">
             <template v-if="infobase.publicated">
               <InfobaseURLEditor
                 v-if="is_edit_url_active(infobase.name)"
@@ -41,12 +41,16 @@
                 @submit="apply_edit_url"
                 @cancel="cancel_edit_url"
               />
-              <a v-else v-bind:href="url_base + infobase.url" target="blank">{{
-                infobase.url
-              }}</a>
+              <a
+                class="text-break"
+                v-if="!is_edit_url_active(infobase.name)"
+                v-bind:href="url_base + infobase.url"
+                target="blank"
+                >{{ infobase.url }}</a
+              >
             </template>
           </td>
-          <td>
+          <td class="text-end">
             <div
               v-if="!is_edit_url_active(infobase.name)"
               class="btn-group shadow"
@@ -57,7 +61,7 @@
                 type="button"
                 class="btn btn-warning"
                 @click="start_edit_url(infobase.name)"
-                hint="Изменить URL"
+                title="Изменить URL"
               >
                 Изменить
               </button>
@@ -66,16 +70,16 @@
                 type="button"
                 class="btn btn-danger"
                 @click="remove_publication(infobase.name)"
-                hint="Снять с публикации"
+                title="Снять с публикации"
               >
                 Отменить
               </button>
               <button
-                v-else
+                v-if="!infobase.publicated"
                 type="button"
                 class="btn btn-primary"
-                @click="publicate(infobase.name)"
-                hint="Опубликовать базу"
+                @click="add_publication(infobase.name)"
+                title="Опубликовать базу"
               >
                 Публиковать
               </button>
@@ -108,26 +112,29 @@ export default {
     url_editors: {},
   }),
   methods: {
-    publicate(name) {
-      let infobase = this.infobases.find((infobase) => name === infobase.name);
+    infobase(name) {
+      return this.infobases.find((infobase) => name === infobase.name);
+    },
+    add_publication(name) {
+      let infobase = this.infobase(name);
       if (infobase === undefined) return;
 
       infobase.publicated = true;
     },
     remove_publication(name) {
-      let infobase = this.infobases.find((infobase) => name === infobase.name);
+      let infobase = this.infobase(name);
       if (infobase === undefined) return;
 
       infobase.publicated = false;
     },
     set_url(name, url) {
-      let infobase = this.infobases.find((infobase) => name === infobase.name);
+      let infobase = this.infobase(name);
       if (infobase === undefined) return;
 
       infobase.url = url;
     },
     start_edit_url(name) {
-      let infobase = this.infobases.find((infobase) => name === infobase.name);
+      let infobase = this.infobase(name);
       if (infobase === undefined) return;
 
       this.url_editors[name] = true;

src/components/InfobaseURLEditor.vue

@@ -1,12 +1,12 @@
 <template>
   <form @submit.prevent="submit">
-    <div class="btn-group shadow rounded-start" role="group">
-      <input
-        type="text"
-        v-model="url"
-        class="rounded-start"
-      />
-      <button type="submit" class="btn btn-sm btn-primary" hint="Принять">
+    <div class="input-group shadow" role="group">
+      <input type="text" v-model="url" class="form-control" />
+      <button
+        type="submit"
+        class="btn btn-sm btn-outline-primary"
+        title="Принять"
+      >
         <svg width="16" height="16">
           <use xlink:href="#check-lg--sprite"></use>
         </svg>
@@ -15,7 +15,7 @@
         type="button"
         class="btn btn-sm btn-outline-secondary"
         @click="cancel"
-        hint="Отменить"
+        title="Отменить"
       >
         <svg width="16" height="16"><use xlink:href="#x-lg--sprite"></use></svg>
       </button>
@@ -58,7 +58,7 @@ export default {
   methods: {
     submit() {
       if (this.url === this.init_url) {
-          this.cancel()
+        this.cancel();
         return;
       }
       this.$emit("submit", { name: this.infobase_name, url: this.url });