some visual rearrangements

src/components/ShowManager.vue

@@ -88,7 +88,7 @@
 
           <b-col lg="6">
             <p>
-              <b>E-Mail:</b>
+              <b-badge variant="light">E-Mail:</b-badge>
               <span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
               <span v-else>{{ shows[currentShow].email }}</span>
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
@@ -97,7 +97,7 @@
 
           <b-col lg="6">
             <p>
-              <b>Website:</b>
+              <b-badge variant="light">Website:</b-badge>
               <span v-if="shows[currentShow].website === null"><small><i>(none set)</i></small></span>
               <span v-else><a :href="shows[currentShow].website">{{ shows[currentShow].website }}</a></span>
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
@@ -106,11 +106,12 @@
 
           <b-col lg="6">
             <p>
-              <b>Show type: <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
+              <b-badge variant="light">Show type:</b-badge>
               <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
               <span v-if="loaded.type">
                 <span v-if="current.type.length === 0"><small><i>(none set)</i></small></span>
                 <span v-else>{{ current.type[0].type }}</span>
+                <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
               </span>
               <span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
             </p>
@@ -118,11 +119,12 @@
 
           <b-col lg="6">
             <p>
-              <b>Funding category (eg. for RTR) <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
+              <b-badge variant="light">Funding category (eg. for RTR):</b-badge>
               <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
               <span v-if="loaded.rtrcategory">
                 <span v-if="current.rtrcategory.length === 0"><small><i>(none set)</i></small></span>
                 <span v-else>{{ current.rtrcategory[0].rtrcategory }}</span>
+                <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
               </span>
               <span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
             </p>
@@ -132,7 +134,7 @@
             <p>
               <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
               <!-- TODO: fetch name for predecessor_id from steering api -->
-              <b>Predecessor:</b>
+              <b-badge variant="light">Predecessor:</b-badge>
               <span v-if="shows[currentShow].predecessor_id === null"><small><i>This show has no predecessor show.</i></small></span>
               <span v-else>{{ shows[currentShow].predecessor_id }}</span>
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
@@ -141,7 +143,7 @@
 
           <b-col lg="6">
             <p>
-              <b>CBA Series ID:</b>
+              <b-badge variant="light">CBA Series ID:</b-badge>
               <span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span>
               <span v-else>{{ shows[currentShow].cba_series_id }}</span>
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
@@ -150,7 +152,7 @@
 
           <b-col lg="6">
             <p>
-              <b>Fallback List/Pool:</b>
+              <b-badge variant="light">Fallback List/Pool:</b-badge>
               <span v-if="shows[currentShow].fallback_id === ''"><small><i>(none set)</i></small></span>
               <span v-else>ID: {{ shows[currentShow].fallback_id }}</span>
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
@@ -162,7 +164,7 @@
         <b-row>
 
           <b-col lg="2">
-            <b>Categories <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
+            <b-badge style="width:80%;">Categories:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
           </b-col>
           <b-col lg="4">
             <div v-if="loaded.categories">
@@ -179,16 +181,16 @@
           </b-col>
 
           <b-col lg="2">
-            <b>Languages <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
+            <b-badge style="width:80%;">Topics:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
           </b-col>
           <b-col lg="4">
-            <div v-if="loaded.categories">
-              <p v-if="shows[currentShow].language.length === 0">
+            <div v-if="loaded.topics">
+              <p v-if="shows[currentShow].topic.length === 0">
                 <small><i>(none set)</i></small>
               </p>
               <p v-else>
                 <ul>
-                  <li v-for="lang in current.languages">{{ lang.name }}</li>
+                  <li v-for="topic in current.topics">{{ topic.topic }}</li>
                 </ul>
               </p>
             </div>
@@ -196,16 +198,16 @@
           </b-col>
 
           <b-col lg="2">
-            <b>Topics <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
+            <b-badge style="width:80%;">Musicfocus:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
           </b-col>
           <b-col lg="4">
-            <div v-if="loaded.topics">
-              <p v-if="shows[currentShow].topic.length === 0">
+            <div v-if="loaded.musicfocus">
+              <p v-if="shows[currentShow].musicfocus.length === 0">
                 <small><i>(none set)</i></small>
               </p>
               <p v-else>
                 <ul>
-                  <li v-for="topic in current.topics">{{ topic.topic }}</li>
+                  <li v-for="focus in current.musicfocus">{{ focus.focus }}</li>
                 </ul>
               </p>
             </div>
@@ -213,16 +215,16 @@
           </b-col>
 
           <b-col lg="2">
-            <b>Musicfocus <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
+            <b-badge style="width:80%;">Languages:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
           </b-col>
           <b-col lg="4">
-            <div v-if="loaded.musicfocus">
-              <p v-if="shows[currentShow].musicfocus.length === 0">
+            <div v-if="loaded.languages">
+              <p v-if="shows[currentShow].language.length === 0">
                 <small><i>(none set)</i></small>
               </p>
               <p v-else>
                 <ul>
-                  <li v-for="focus in current.musicfocus">{{ focus.focus }}</li>
+                  <li v-for="lang in current.languages">{{ lang.name }}</li>
                 </ul>
               </p>
             </div>
@@ -230,9 +232,8 @@
           </b-col>
 
           <b-col lg="2">
-            <b>Hosts <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
+            <b-badge style="width:80%;">Hosts:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
           </b-col>
-
           <b-col lg="4">
             <div v-if="loaded.hosts">
               <p v-if="shows[currentShow].hosts.length === 0">
@@ -436,7 +437,7 @@ export default {
             alert('There was an error fetching languages from the server: ' + error)
           })
         }
-        if (!loadingError) this.loaded.categories = true
+        if (!loadingError) this.loaded.languages = true
       }
     },
     getTopics: function () {