Merge pull request #524 from WebTools-NG/#521-Inconsistent-Font-sizing-and-spacing

#521 inconsistent font sizing and spacing

public/locales/en.json

@@ -502,9 +502,9 @@
             },
             "FindMedia": {
                 "Name": "Find Media",
-                "Description": "@:Modules.PMS.FindMedia.Name module allows you search both filesystem and Plex database to locate medias missing from either of them",
+                "Description": "@:Modules.PMS.FindMedia.Name module allows you search both filesystem and Plex database to locate media missing from either of them",
                 "RunTask": "Run",
-                "TTSelectLibrary": "Select library to check for missing medias",
+                "TTSelectLibrary": "Select library to check for missing media",
                 "MissingMapTitle": "Missing a mapped path",
                 "MissingMapDesc": "One or more defined paths for library is not defined. Goto '@:Common.Menu.Sidebar.Settings.NavTitle' and select '@:Common.Settings.LibMapping.Name' to correct",
                 "ttSettings": "Settings for @:Modules.PMS.FindMedia.Name module",

src/components/modules/ExportTools/Settings/settings.vue

@@ -6,48 +6,48 @@
       </h2>
       <h5>{{ $t(`Modules.ET.Settings.Description`) }}</h5>
     </div>
-        <b-link id="general" :to="{ path: '/settings/export', query: { return: 'exportsettings' } }">{{ $t("Modules.ET.Settings.Note") }} </b-link>
-        <br>
-        <b-input-group id="PosterGrp" :prepend="$t('Modules.ET.Settings.Posters_Dimensions')" class="mt-3">
-            <b-tooltip target="PosterGrp" triggers="hover">
-                {{ $t('Modules.ET.Settings.Posters_Dimensions_TT') }}
-            </b-tooltip>
-            <b-form-input id="PosterDim" name="PosterDim" type="text" class="form-control" v-model="PosterDim" :disabled=false @change="setPosters_Dimensions()"></b-form-input>
-        </b-input-group>
-        <b-input-group id="ArtGrp" :prepend="$t('Modules.ET.Settings.Art_Dimensions')" class="mt-3">
-            <b-tooltip target="ArtGrp" triggers="hover">
-                {{ $t('Modules.ET.Settings.Art_Dimensions_TT') }}
-            </b-tooltip>
-            <b-form-input id="ArtDim" name="ArtDim" type="text" class="form-control" v-model="ArtDim" :disabled=false @change="setArt_Dimensions()"></b-form-input>
-        </b-input-group>
-        <b-form-group id="b-form-group">
-        <b-form-checkbox-group
-            stacked
-            :options="cbOptions"
-            v-model="cbSelected"
-            @change.native="filterTable">
-        </b-form-checkbox-group>
-        </b-form-group>
-        <b-form-group id="etSugMovieID" v-bind:label="$t('Modules.ET.Settings.MoviesUseId')" label-size="lg" label-class="font-weight-bold pt-0" v-b-tooltip.hover="$t('Modules.ET.Settings.ttMoviesUseId')">
-                <b-form-select
-                    class="form-control"
-                    v-model="SelectedMoviesID"
-                    id="SelectedMoviesID"
-                    :options="SelectedMoviesIDOptions"
-                    @change="SelectedMoviesIDChanged"
-                    style="width: 50%"
-                    name="SugMovieID">
-                </b-form-select>
-        </b-form-group>
+    <b-link id="general" :to="{ path: '/settings/export', query: { return: 'exportsettings' } }">{{ $t("Modules.ET.Settings.Note") }} </b-link>
+    <br>
+    <b-input-group id="PosterGrp" :prepend="$t('Modules.ET.Settings.Posters_Dimensions')" class="mt-3">
+        <b-tooltip target="PosterGrp" triggers="hover">
+            {{ $t('Modules.ET.Settings.Posters_Dimensions_TT') }}
+        </b-tooltip>
+        <b-form-input id="PosterDim" name="PosterDim" type="text" class="form-control" v-model="PosterDim" :disabled=false @change="setPosters_Dimensions()"></b-form-input>
+    </b-input-group>
+    <b-input-group id="ArtGrp" :prepend="$t('Modules.ET.Settings.Art_Dimensions')" class="mt-3">
+        <b-tooltip target="ArtGrp" triggers="hover">
+            {{ $t('Modules.ET.Settings.Art_Dimensions_TT') }}
+        </b-tooltip>
+        <b-form-input id="ArtDim" name="ArtDim" type="text" class="form-control" v-model="ArtDim" :disabled=false @change="setArt_Dimensions()"></b-form-input>
+    </b-input-group>
+    <b-form-group id="b-form-group">
+    <b-form-checkbox-group
+        stacked
+        :options="cbOptions"
+        v-model="cbSelected"
+        @change.native="filterTable">
+    </b-form-checkbox-group>
+    </b-form-group>
+    <b-form-group id="etSugMovieID" v-bind:label="$t('Modules.ET.Settings.MoviesUseId')" label-size="lg" label-class="font-weight-bold pt-0" v-b-tooltip.hover="$t('Modules.ET.Settings.ttMoviesUseId')">
+            <b-form-select
+                class="form-control"
+                v-model="SelectedMoviesID"
+                id="SelectedMoviesID"
+                :options="SelectedMoviesIDOptions"
+                @change="SelectedMoviesIDChanged"
+                style="width: 50%"
+                name="SugMovieID">
+            </b-form-select>
+    </b-form-group>
+    <!-- Buttons -->
+    <div class="buttons">
         <!-- Buttons -->
-        <div class="buttons">
-            <!-- Buttons -->
-            <div id="buttons" class="text-center">
-                <b-button-group >
-                    <b-button variant="success" class="mr-1" @click="jumpToET"> {{ $t('Modules.ET.Settings.Return') }} </b-button>
-                </b-button-group>
-            </div>
+        <div id="buttons" class="text-center">
+            <b-button-group >
+                <b-button variant="success" class="mr-1" @click="jumpToET"> {{ $t('Modules.ET.Settings.Return') }} </b-button>
+            </b-button-group>
         </div>
+    </div>
   </b-container>
 </template>
 

src/components/modules/Main/Language.vue

@@ -1,29 +1,27 @@
 <template>
-  <b-container fluid>
-        <div class="col-lg-9 col-md-12 col-xs-12">
-
-    <h2>
-      {{ $t("Common.Language.Name") }}<br>
-      <small>{{ $t("Common.Language.Description") }}</small>
-    </h2>
-    <br>
-
+    <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Common.Language.Name`) }}
+      </h2>
+      <h5>{{ $t(`Common.Language.Description`) }}</h5>
+    </div>
     <div class="control has-icons-left">
-      <div class="locale-changer select is-dark is-medium" >
+      <div class="locale-changer select is-dark is-medium" > <!-- Select Lang -->
         <b-input-group>
         <b-input-group-prepend is-text>
         <b-icon icon="globe2"></b-icon>
-      </b-input-group-prepend>
-        <b-form-select id="langselect" @change.native="onChange($event)" v-model="$i18n.locale" :options="olLangs"></b-form-select>
+        </b-input-group-prepend>
+          <b-form-select id="langselect" @change.native="onChange($event)" v-model="$i18n.locale" :options="olLangs" style="width: 50%"></b-form-select>
         </b-input-group>
       </div>
       <p />
-      <b-button id="btnDownload" variant="success" v-on:click="forcedownload">{{ $t("Common.Language.btnForce") }}</b-button>
+      <div class="text-center">
+        <b-button id="btnDownload" variant="success" v-on:click="forcedownload">{{ $t("Common.Language.btnForce") }}</b-button>
+      </div>
     </div>
     <br/>
-
     <h5>F.A.Q</h5>
-
     <div>
       <ul class="list-unstyled">
         <li><strong>{{ $t("Common.Language.LangMissing") }}</strong>
@@ -55,10 +53,9 @@
         </li>
       </ul>
     </div>
-    <div>
+    <div class="text-center">
       <b-button variant="success" v-on:click="joinPOE">{{ $t("Common.Language.Join") }}</b-button>
     </div>
-    </div>
   </b-container>
 </template>
 

src/components/modules/Main/Settings/Settings.vue

@@ -1,41 +1,42 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-10 col-md-12 col-xs-12">
-        <h1>{{ $t("Modules.GlobalSettings.Title") }}</h1>
-        <p>{{ $t("Modules.GlobalSettings.Description") }}</p>
-        <p>{{ $t("Common.Settings.Global.Info") }}</p>
-        <br>
-        <!-- Link menu -->
-        <div class="text-center">
-            <h5>
-                <b-link id="general" v-b-tooltip.hover.right="$t('Common.Settings.Global.ttGeneral')" to="/settings/settingsgeneral">* {{ $t("Common.Settings.General.Name") }} </b-link>
-                <br>
-                <br>
-                <b-link id="export" v-b-tooltip.hover.right="$t('Common.Settings.Global.ttExport')" to="/settings/export">* {{ $t("Common.Settings.Export.Name") }} </b-link>
-                <br>
-                <br>
-                <b-link id="pms" v-b-tooltip.hover.right="$t('Common.Settings.Global.ttPMS')" to="/settings/settingspms">*  {{ $t("Common.Settings.PMS.Name") }} </b-link>
-                <br>
-                <br>
-                <b-link id="libmap" v-b-tooltip.hover.right="$t('Common.Settings.Global.ttLibmap')" to="/settings/libmapping">* {{ $t("Common.Settings.LibMapping.Name") }}</b-link>
-            </h5>
-        </div>
-        <!-- Factory Reset -->
-        <b-modal ref="confirmFactoryReset" hide-footer v-bind:title="$t('Modules.GlobalSettings.FactoryResetConfirmTitle')" >
-          <div class="d-block text-center">
-              {{ $t('Modules.GlobalSettings.FactoryResetConfirmBody') }}
-              {{ $t('Modules.GlobalSettings.FactoryResetConfirmBody2', [$t('Common.AppName')]) }}
-          </div>
-          <b-button class="mt-3" variant="info" block @click="factoryResetClose">{{ $t('Modules.GlobalSettings.FactoryResetBtnCancel') }}</b-button>
-          <b-button class="mt-3" variant="danger" block @click="factoryReset">{{ $t('Modules.GlobalSettings.FactoryResetBtnOk') }}</b-button>
-        </b-modal>
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Modules.GlobalSettings.Title`) }}
+      </h2>
+      <h5>{{ $t(`Modules.GlobalSettings.Description`) }}</h5>
+      <p>{{ $t("Common.Settings.Global.Info") }}</p>
+    </div>
+    <br>
+    <div class="text-center">    <!-- Link menu -->
+      <h5>
+        <b-link id="general" v-b-tooltip.hover.right="$t('Common.Settings.Global.ttGeneral')" to="/settings/settingsgeneral">* {{ $t("Common.Settings.General.Name") }} </b-link>
         <br>
         <br>
-        <div id="buttons" class="text-center">
-            <b-button-group >
-                <b-button variant="danger" class="mr-1" @click="confirmFactoryReset">{{ $t('Modules.GlobalSettings.FactoryReset') }}</b-button>
-            </b-button-group>
-        </div>
+        <b-link id="export" v-b-tooltip.hover.right="$t('Common.Settings.Global.ttExport')" to="/settings/export">* {{ $t("Common.Settings.Export.Name") }} </b-link>
+        <br>
+        <br>
+        <b-link id="pms" v-b-tooltip.hover.right="$t('Common.Settings.Global.ttPMS')" to="/settings/settingspms">*  {{ $t("Common.Settings.PMS.Name") }} </b-link>
+        <br>
+        <br>
+        <b-link id="libmap" v-b-tooltip.hover.right="$t('Common.Settings.Global.ttLibmap')" to="/settings/libmapping">* {{ $t("Common.Settings.LibMapping.Name") }}</b-link>
+      </h5>
+    </div>
+    <!-- Factory Reset -->
+    <b-modal ref="confirmFactoryReset" hide-footer v-bind:title="$t('Modules.GlobalSettings.FactoryResetConfirmTitle')" >
+      <div class="d-block text-center">
+          {{ $t('Modules.GlobalSettings.FactoryResetConfirmBody') }}
+          {{ $t('Modules.GlobalSettings.FactoryResetConfirmBody2', [$t('Common.AppName')]) }}
+      </div>
+      <b-button class="mt-3" variant="info" block @click="factoryResetClose">{{ $t('Modules.GlobalSettings.FactoryResetBtnCancel') }}</b-button>
+      <b-button class="mt-3" variant="danger" block @click="factoryReset">{{ $t('Modules.GlobalSettings.FactoryResetBtnOk') }}</b-button>
+    </b-modal>
+    <br>
+    <br>
+    <div id="buttons" class="text-center">
+        <b-button-group >
+            <b-button variant="danger" class="mr-1" @click="confirmFactoryReset">{{ $t('Modules.GlobalSettings.FactoryReset') }}</b-button>
+        </b-button-group>
     </div>
   </b-container>
 </template>

src/components/modules/Main/Settings/SettingsExport.vue

@@ -1,12 +1,12 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-10 col-md-12 col-xs-12">
-        <h1>{{ $t("Common.Settings.Export.Name") }}</h1>
-        <p>{{ $t("Common.Settings.Export.Description") }}</p>
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Common.Settings.Export.Name`) }}
+      </h2>
+      <h5>{{ $t(`Common.Settings.Export.Description`) }}</h5>
     </div>
-    <div>Params {{ this.$route.query.return }}</div>
     <br>
-
     <b-input-group id="exportDir" :prepend="$t('Common.ExportDir')" class="mt-3">
       <b-form-input id="exportDirbox" type="text" name="exportDirbox" v-model="ExportDirVal" :disabled=true v-bind:placeholder="$t('Common.ExportDir')" />
       <b-input-group-append>

src/components/modules/Main/Settings/SettingsGeneral.vue

@@ -1,8 +1,10 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-10 col-md-12 col-xs-12">
-        <h1>{{ $t("Common.Settings.General.Name") }}</h1>
-        <p>{{ $t("Common.Settings.General.Description") }}</p>
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Common.Settings.General.Name`) }}
+      </h2>
+      <h5>{{ $t(`Common.Settings.General.Description`) }}</h5>
     </div>
     <br>
     <b-input-group id="LogLevelGrp" :prepend="$t('Modules.GlobalSettings.LogLevelFile')" class="mt-3">

src/components/modules/Main/Settings/SettingsLibraryMapping.vue

@@ -1,8 +1,10 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-10 col-md-12 col-xs-12">
-        <h1>{{ $t("Common.Settings.LibMapping.Name") }}</h1>
-        <p>{{ $t("Common.Settings.LibMapping.Description") }}</p>
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Common.Settings.LibMapping.Name`) }}
+      </h2>
+      <h5>{{ $t(`Common.Settings.LibMapping.Description`) }}</h5>
     </div>
     <br>
     <!-- Select Lib -->

src/components/modules/Main/Settings/SettingsPMS.vue

@@ -1,8 +1,10 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-10 col-md-12 col-xs-12">
-        <h1>{{ $t("Common.Settings.PMS.Name") }}</h1>
-        <p>{{ $t("Common.Settings.PMS.Description") }}</p>
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Common.Settings.PMS.Name`) }}
+      </h2>
+      <h5>{{ $t(`Common.Settings.PMS.Description`) }}</h5>
     </div>
     <br>
     <b-input-group id="TimeOutGrp" :prepend="$t('Modules.GlobalSettings.TimeOut')" class="mt-3">
@@ -79,7 +81,7 @@
             </b-button-group>
         </div>
     </div>
-
+    <br>
   </b-container>
 </template>
 

src/components/modules/PMS/Butler/butler.vue

@@ -1,33 +1,35 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-10 col-md-12 col-xs-12">
-        <h1>{{ $t("Modules.PMS.Butler.Name") }}</h1>
-        <p>{{ $t("Modules.PMS.Butler.Description") }}</p>
-    </div>
-
-    <div class="d-flex align-items-center">
-      <b-form-group id="ButlerGroup" v-bind:label="$t('Modules.PMS.Butler.SelectTask')" label-size="lg" label-class="font-weight-bold pt-0">
-        <b-tooltip target="ButlerGroup" triggers="hover">
-          {{ $t('Modules.PMS.Butler.TTSelectTask') }}
-        </b-tooltip>
-        <b-form-select
-          v-model="selTask"
-          id="selTask"
-          :options="selTaskOptions"
-          name="selTask">
-        </b-form-select>
-      </b-form-group>
-    </div>
-    <br>
-    <br>
-    <div class="buttons">
-        <!-- Buttons -->
-        <div id="buttons" class="text-center">
-            <b-button-group >
-                <b-button variant="success" class="mr-1" :disabled="this.selTask == ''" @click="executeButlerTask"> {{ $t('Modules.PMS.Butler.RunTask') }} </b-button>
-            </b-button-group>
+    <b-container class="m-2 mt-2">
+        <div>   <!-- Title and desc -->
+            <h2>
+                {{ $t(`Modules.PMS.Butler.Name`) }}
+            </h2>
+            <h5>{{ $t(`Modules.PMS.Butler.Description`) }}</h5>
+        </div>
+        <br>
+        <div class="d-flex align-items-center">
+        <b-form-group id="ButlerGroup" v-bind:label="$t('Modules.PMS.Butler.SelectTask')" label-size="lg" label-class="font-weight-bold pt-0">
+            <b-tooltip target="ButlerGroup" triggers="hover">
+            {{ $t('Modules.PMS.Butler.TTSelectTask') }}
+            </b-tooltip>
+            <b-form-select
+            v-model="selTask"
+            id="selTask"
+            :options="selTaskOptions"
+            name="selTask">
+            </b-form-select>
+        </b-form-group>
+        </div>
+        <br>
+        <br>
+        <div class="buttons">
+            <!-- Buttons -->
+            <div id="buttons" class="text-center">
+                <b-button-group >
+                    <b-button variant="success" class="mr-1" :disabled="this.selTask == ''" @click="executeButlerTask"> {{ $t('Modules.PMS.Butler.RunTask') }} </b-button>
+                </b-button-group>
+            </div>
         </div>
-    </div>
   </b-container>
 </template>
 

src/components/modules/PMS/DVR/DVR.vue

@@ -1,10 +1,14 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-10 col-md-12 col-xs-12">
-        <h1>{{ $t("Modules.PMS.DVR.Name") }}</h1>
-        <p>{{ $t("Modules.PMS.DVR.Description") }}</p>
-    </div> 
-
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Modules.PMS.DVR.Name`) }}
+      </h2>
+      <h5>{{ $t(`Modules.PMS.DVR.Description`) }}</h5>
+    </div>
+    <b-link id="general" :to="{ path: '/settings/export', query: { return: 'dvr' } }">{{ $t("Modules.ET.Settings.Note") }} </b-link>
+    <br>
+    <br>
     <div class="d-flex align-items-center">
       <b-form-group id="dvrSelDVRGroup" v-bind:label="$t('Modules.PMS.DVR.selDVR')" label-size="lg" label-class="font-weight-bold pt-0" name="dvrSelDVRGroup">
         <b-tooltip target="dvrSelDVRGroup" triggers="hover">
@@ -13,44 +17,42 @@
         <b-form-select
           v-model="selDVR"
           id="selDVR"
-          :options="optSelDVR"        
+          :options="optSelDVR"
           name="selDVR">
         </b-form-select>
       </b-form-group>
     </div>
-    <br>  
+    <br>
     <br>
     <div class="buttons">
-        <!-- Buttons -->
-        <div id="buttons" class="text-center">
-            <b-button-group >
-                <b-button
-                  class="mr-2"
-                  type="is-primary"
-                  @click="dvrBackup"
-                  icon-left="fas fa-file-download"
-                  icon-pack="fas"
-                  :disabled="this.selDVR == ''"
-                  variant="success"
-                  > 
-                  {{ $t("Modules.PMS.DVR.lblBtnBackup") }}
-                </b-button>        
-                <b-button
-                  class="mr-2"
-                  type="is-primary"
-                  @click="dvrRestore"
-                  icon-left="fas fa-file-download"
-                  icon-pack="fas"
-                  :disabled=!this.serverIsSelected
-                  variant="success"
-                  > 
-                  {{ $t("Modules.PMS.DVR.lblBtnRestore") }}
-                </b-button>        
-            </b-button-group>
-        </div>
-    </div>     
-
-    
+      <!-- Buttons -->
+      <div id="buttons" class="text-center">
+        <b-button-group >
+          <b-button
+            class="mr-2"
+            type="is-primary"
+            @click="dvrBackup"
+            icon-left="fas fa-file-download"
+            icon-pack="fas"
+            :disabled="this.selDVR == ''"
+            variant="success"
+            >
+            {{ $t("Modules.PMS.DVR.lblBtnBackup") }}
+          </b-button>
+          <b-button
+            class="mr-2"
+            type="is-primary"
+            @click="dvrRestore"
+            icon-left="fas fa-file-download"
+            icon-pack="fas"
+            :disabled=!this.serverIsSelected
+            variant="success"
+            >
+            {{ $t("Modules.PMS.DVR.lblBtnRestore") }}
+          </b-button>
+        </b-button-group>
+      </div>
+    </div>
   </b-container>
 </template>
 
@@ -74,14 +76,14 @@
   created() {
     log.info("DVR Created");
     this.serverSelected();
-    this.optSelDVR = this.getDVRList();    
+    this.optSelDVR = this.getDVRList();
   },
   watch: {
     // Watch for when selected server address is updated
     selectedServerAddress: async function(){
       log.info("DVR Selected server changed");
       this.optSelDVR = this.getDVRList();
-      this.serverIsSelected = ( this.$store.getters.getSelectedServer != "none" );      
+      this.serverIsSelected = ( this.$store.getters.getSelectedServer != "none" );
     },
     doneDVRBackup: async function(){
       if (this.$store.getters.doneDVRBackup!='')
@@ -107,12 +109,12 @@
 
   },
   methods: {
-    async dvrRestore() {      
+    async dvrRestore() {
       log.info("DVR Restore started");
-      //dvr.backupDVR( {'dvrName': this.selDVR} );  
-      dvr.restoreDVR();    
+      //dvr.backupDVR( {'dvrName': this.selDVR} );
+      dvr.restoreDVR();
     },
-    async dvrBackup() {      
+    async dvrBackup() {
       log.info("DVR Backup started");
       dvr.backupDVR( {'dvrName': this.selDVR} );
     },
@@ -135,7 +137,7 @@
           variant: 'primary',
           toaster: 'b-toaster-bottom-right'
         });
-      }      
+      }
     }
   }
 };

src/components/modules/PMS/FindMedia/FindMedia.vue

@@ -1,60 +1,56 @@
 <template>
-  <div>
-    <!-- Settings button -->
-    <div class="text-right">
+  <b-container class="m-2 mt-2">
+    <div class="float-right">   <!-- Settings button hidden with d-none -->
       <div class="buttons">
         <!-- Buttons -->
-        <div id="buttons">
-            <b-button-group id="settings">
-              <b-tooltip target="settings" triggers="hover">
-                  {{ $t('Modules.PMS.FindMedia.ttSettings') }}
-              </b-tooltip>
-              <button class="btn btn-outline-success" @click="showSettings"><i class="fa fa-cog"></i></button>
-            </b-button-group>
-        </div>
+        <b-button-group id="settings">
+          <b-tooltip target="settings" triggers="hover">
+              {{ $t(`Modules.PMS.FindMedia.ttSettings`) }}
+          </b-tooltip>
+          <button class="btn btn-outline-success" @click="showSettings"><i class="fa fa-cog"></i></button>
+        </b-button-group>
       </div>
     </div>
-    <!-- Main view -->
-    <b-container fluid>
-      <div class="col-lg-10 col-md-12 col-xs-12">
-          <h1>{{ $t("Modules.PMS.FindMedia.Name") }}</h1>
-          <p>{{ $t("Modules.PMS.FindMedia.Description") }}</p>
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Modules.PMS.FindMedia.Name`) }}
+      </h2>
+      <h5>{{ $t(`Modules.PMS.FindMedia.Description`) }}</h5>
+    </div>
+    <br>
+  <div>
+    <div class="d-flex align-items-center">    <!-- Select Lib -->
+      <b-form-group id="SelLibGroup" v-bind:label="$t('Modules.ET.optExpType.lblSelectSelection')" label-size="lg" label-class="font-weight-bold pt-0">
+        <b-tooltip target="SelLibGroup" triggers="hover">
+          {{ $t('Modules.PMS.FindMedia.TTSelectLibrary') }}
+        </b-tooltip>
+        <b-form-select
+          v-model="selLib"
+          id="selLib"
+          :options="selLibOptions"
+          name="selLib">
+        </b-form-select>
+      </b-form-group>
+    </div>
+    <br>
+    <div class="buttons">  <!-- Buttons -->
+      <div id="buttons" class="text-center">
+        <b-button-group >
+          <b-button variant="success" class="mr-1" :disabled="this.selLib == ''" @click="runFM"> {{ $t('Modules.PMS.FindMedia.RunTask') }} </b-button>
+        </b-button-group>
       </div>
-      <!-- Select Lib -->
-      <div class="d-flex align-items-center">
-        <b-form-group id="SelLibGroup" v-bind:label="$t('Modules.ET.optExpType.lblSelectSelection')" label-size="lg" label-class="font-weight-bold pt-0">
-          <b-tooltip target="SelLibGroup" triggers="hover">
-            {{ $t('Modules.PMS.FindMedia.TTSelectLibrary') }}
-          </b-tooltip>
-          <b-form-select
-            v-model="selLib"
-            id="selLib"
-            :options="selLibOptions"
-            name="selLib">
-          </b-form-select>
-        </b-form-group>
-      </div>
-      <br>
-      <!-- Buttons -->
-      <div class="buttons">
-        <!-- Buttons -->
-        <div id="buttons" class="text-center">
-            <b-button-group >
-                <b-button variant="success" class="mr-1" :disabled="this.selLib == ''" @click="runFM"> {{ $t('Modules.PMS.FindMedia.RunTask') }} </b-button>
-            </b-button-group>
-        </div>
-      </div>
-      <br>
-      <br>
-      <br>
-      <br>
-      <br>
-      <br>
-      <br>
-      <br>
-      <statusDiv /> <!-- Status Div -->
-    </b-container>
+    </div>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <statusDiv /> <!-- Status Div -->
   </div>
+  </b-container>
 </template>
 
 <script>

src/components/modules/PMS/FindMedia/Settings/FindMediaSettings.vue

@@ -1,71 +1,71 @@
 <template>
-    <b-container fluid>
-        <div class="col-lg-10 col-md-12 col-xs-12">
-            <br>
-            <br>
-            <h1>{{ $t("Modules.PMS.FindMedia.Settings.Name") }}</h1>
-            <p>{{ $t("Modules.PMS.FindMedia.Settings.Description") }}</p>
-            <b-link id="general" :to="{ path: '/settings/export', query: { return: 'FindMediaSettings' } }">{{ $t("Modules.ET.Settings.Note") }} </b-link>
-            <br>
-            <p>{{ $t("Modules.PMS.FindMedia.Settings.Note") }}</p>
-        </div>
-        <b-input-group id="ExtGrp" :prepend="$t('Modules.PMS.FindMedia.Settings.Ext')" class="mt-3">
-            <b-form-textarea
-                id="Ext" name="Ext" type="text" class="form-control" v-model="Ext" @change="setExt"
-                rows="3"
-                max-rows="3"
-                >
-            </b-form-textarea>
-        </b-input-group>
-        <b-input-group id="ignoreDirsGrp" :prepend="$t('Modules.PMS.FindMedia.Settings.ignoreDirs')" class="mt-3">
-            <b-form-textarea
-                id="ignoreDirs" name="ignoreDirs" type="text" class="form-control" v-model="ignoreDirs" @change="setIgnoreDirs"
-                rows="3"
-                max-rows="3"
-                >
-            </b-form-textarea>
-        </b-input-group>
-        <br>
-        <div>
-            <b-form-checkbox
-                id="IgnoreHidden"
-                v-model="IgnoreHidden"
-                name="IgnoreHidden"
-                value=true
-                unchecked-value=false
-                @change="setIgnoreHidden"
-                >
-                {{ $t('Modules.PMS.FindMedia.Settings.IgnoreHidden') }}
-            </b-form-checkbox>
-        </div>
-        <!-- Disabled for now, since req a call for each media in lib
-        <div>
-            <b-form-checkbox
-                id="IgnoreExtras"
-                v-model="IgnoreExtras"
-                name="IgnoreExtras"
-                value=true
-                unchecked-value=false
-                @change="setIgnoreExtras"
-                >
-                {{ $t('Modules.PMS.FindMedia.Settings.IgnoreExtras') }}
-            </b-form-checkbox>
-        </div>
-        -->
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Modules.PMS.FindMedia.Settings.Name`) }}
+      </h2>
+      <h5>{{ $t(`Modules.PMS.FindMedia.Settings.Description`) }}</h5>
+    </div>
+    <b-link id="general" :to="{ path: '/settings/export', query: { return: 'FindMediaSettings' } }">{{ $t("Modules.ET.Settings.Note") }} </b-link>
+    <p>{{ $t("Modules.PMS.FindMedia.Settings.Note") }}</p>
+    <br>
+    <b-input-group id="ExtGrp" :prepend="$t('Modules.PMS.FindMedia.Settings.Ext')" class="mt-3">
+        <b-form-textarea
+            id="Ext" name="Ext" type="text" class="form-control" v-model="Ext" @change="setExt"
+            rows="3"
+            max-rows="3"
+            >
+        </b-form-textarea>
+    </b-input-group>
+    <b-input-group id="ignoreDirsGrp" :prepend="$t('Modules.PMS.FindMedia.Settings.ignoreDirs')" class="mt-3">
+        <b-form-textarea
+            id="ignoreDirs" name="ignoreDirs" type="text" class="form-control" v-model="ignoreDirs" @change="setIgnoreDirs"
+            rows="3"
+            max-rows="3"
+            >
+        </b-form-textarea>
+    </b-input-group>
+    <br>
+    <div>
+        <b-form-checkbox
+            id="IgnoreHidden"
+            v-model="IgnoreHidden"
+            name="IgnoreHidden"
+            value=true
+            unchecked-value=false
+            @change="setIgnoreHidden"
+            >
+            {{ $t('Modules.PMS.FindMedia.Settings.IgnoreHidden') }}
+        </b-form-checkbox>
+    </div>
+    <!-- Disabled for now, since req a call for each media in lib
+    <div>
+        <b-form-checkbox
+            id="IgnoreExtras"
+            v-model="IgnoreExtras"
+            name="IgnoreExtras"
+            value=true
+            unchecked-value=false
+            @change="setIgnoreExtras"
+            >
+            {{ $t('Modules.PMS.FindMedia.Settings.IgnoreExtras') }}
+        </b-form-checkbox>
+    </div>
+    -->
 
-        <br>
-        <br>
+    <br>
+    <br>
+    <!-- Buttons -->
+    <div class="buttons">
         <!-- Buttons -->
-        <div class="buttons">
-            <!-- Buttons -->
-            <div id="buttons" class="text-center">
-                <b-button-group >
-                    <b-button variant="danger" class="mr-1" @click="reset"> {{ $t('Modules.PMS.FindMedia.Settings.Reset') }} </b-button>
-                    <b-button variant="success" class="mr-1" @click="jumpToFM"> {{ $t('Modules.PMS.FindMedia.Settings.Return') }} </b-button>
-                </b-button-group>
-            </div>
+        <div id="buttons" class="text-center">
+            <b-button-group >
+                <b-button variant="danger" class="mr-1" @click="reset"> {{ $t('Modules.PMS.FindMedia.Settings.Reset') }} </b-button>
+                <b-button variant="success" class="mr-1" @click="jumpToFM"> {{ $t('Modules.PMS.FindMedia.Settings.Return') }} </b-button>
+            </b-button-group>
         </div>
-    </b-container>
+    </div>
+  </b-container>
 </template>
 
 <script>

src/components/modules/PMS/PMS.vue

@@ -1,41 +1,40 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-9 col-md-12 col-xs-12">
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
       <h2>
-        {{ $t("Modules.PMS.Name") }}
-        <br />
-        <h5>{{ $t("Modules.PMS.Description") }}</h5>
+        {{ $t(`Modules.PMS.Name`) }}
       </h2>
+      <h5>{{ $t(`Modules.PMS.Description`) }}</h5>
+    </div>
+    <br />
+    {{ $t("Modules.PMS.Select") }}
+    <br />
+    <br />
+    <h5>{{ $t("Common.Home.Modules") }}</h5>
+    <div v-if="showButler">
+      <p><b>{{ $t("Modules.PMS.Butler.Name") }}</b>
       <br />
-      {{ $t("Modules.PMS.Select") }}
+      * {{ $t("Modules.PMS.Butler.Description") }}</p>
+    </div>
+    <div v-if="showDVR">
+      <p><b>{{ $t("Modules.PMS.DVR.Name") }}</b>
       <br />
+      * {{ $t("Modules.PMS.DVR.Description") }}</p>
+    </div>
+    <div v-if="showFindMedia">
+      <p><b>{{ $t("Modules.PMS.FindMedia.Name") }}</b>
       <br />
-      <h3>{{ $t("Common.Home.Modules") }}</h3>
-      <div v-if="showButler">
-        <p><b>{{ $t("Modules.PMS.Butler.Name") }}</b>
-        <br />
-        * {{ $t("Modules.PMS.Butler.Description") }}</p>
-      </div>
-      <div v-if="showDVR">
-        <p><b>{{ $t("Modules.PMS.DVR.Name") }}</b>
-        <br />
-        * {{ $t("Modules.PMS.DVR.Description") }}</p>
-      </div>
-      <div v-if="showFindMedia">
-        <p><b>{{ $t("Modules.PMS.FindMedia.Name") }}</b>
-        <br />
-        * {{ $t("Modules.PMS.FindMedia.Description") }}</p>
-      </div>
-      <div v-if="showSettings">
-        <p><b>{{ $t("Modules.PMS.Settings.Name") }}</b>
-        <br />
-        * {{ $t("Modules.PMS.Settings.Description") }}</p>
-      </div>
-      <div v-if="showViewState">
-        <p><b>{{ $t("Modules.PMS.ViewState.Name") }}</b>
-        <br />
-        * {{ $t("Modules.PMS.ViewState.Description") }}</p>
-      </div>
+      * {{ $t("Modules.PMS.FindMedia.Description") }}</p>
+    </div>
+    <div v-if="showSettings">
+      <p><b>{{ $t("Modules.PMS.Settings.Name") }}</b>
+      <br />
+      * {{ $t("Modules.PMS.Settings.Description") }}</p>
+    </div>
+    <div v-if="showViewState">
+      <p><b>{{ $t("Modules.PMS.ViewState.Name") }}</b>
+      <br />
+      * {{ $t("Modules.PMS.ViewState.Description") }}</p>
     </div>
   </b-container>
 </template>

src/components/modules/PMS/Settings/settings.vue

@@ -1,86 +1,91 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-10 col-md-12 col-xs-12">
-        <h1>{{ $t("Modules.PMS.Settings.Name") }}</h1>
-        <p>{{ $t("Modules.PMS.Settings.Description") }}</p>
-        <p>{{ $t("Modules.PMS.Settings.Notice") }}</p>
-    </div>
-
-    <div> <!-- Settings to show -->
-      <b-form-group id="FilterSettingsGroup" v-bind:label="$t('Modules.PMS.Settings.SettingsFilter')" label-size="lg" label-class="font-weight-bold pt-0">
-        <b-tooltip target="FilterSettingsGroup" triggers="hover">
-          {{ $t('Modules.PMS.Settings.TTSettingsFilter') }}
-        </b-tooltip>
-        <b-form-radio-group
-          id="FilterSettings"
-          v-model="selFilterSetting"
-          @change.native="changeFilterSetting()"
-          :options="FilterSettingsOptions"
-          name="FilterSettings"
-        ></b-form-radio-group>
-      </b-form-group>
-    </div>
-
-    <div class="d-flex align-items-center">
-      <b-form-group id="etLibraryGroup" v-bind:label="$t('Modules.PMS.Settings.SelectSettingsSelection')" label-size="lg" label-class="font-weight-bold pt-0">
-        <b-tooltip target="etLibraryGroup" triggers="hover">
-          {{ $t('Modules.PMS.Settings.TTSelectSettingsSelection') }}
-        </b-tooltip>
-        <b-form-select
-          v-model="selSection"
-          id="selSection"
-          v-on:change="getGroupSelectedItem"
-          :options="selSectionOptions"
-          name="selSection">
-        </b-form-select>
-      </b-form-group>
-    </div>
-    <div> <!-- Modal popup -->
-        <b-modal ref="edtSetting" hide-footer v-bind:title=this.newSettingTitle >
-            <div class="d-block text-center">
-                <b-alert variant="danger" show>{{ $t('Modules.PMS.Settings.varning') }}</b-alert>
-                <b-container fluid>
-                    <b-row>
-                        <b-col sm="2">
-                        <label for="textarea-curSetting">{{ $t('Modules.PMS.Settings.curSetting') }}:</label>
-                        </b-col>
-                        <b-col sm="10">
-                        <b-form-textarea
-                            id="textarea-curSetting"
-                            plaintext
-                            size="sm"
-                            v-model=this.curSetting
-                            rows="1"
-                            max-rows="8"
-                        ></b-form-textarea>
-                        </b-col>
-                    </b-row>
-                    <br>
-                    <b-row>
-                        <b-col sm="2">
-                        <label for="textarea-defSetting">{{ $t('Modules.PMS.Settings.defSetting') }}:</label>
-                        </b-col>
-                        <b-col sm="10">
-                        <b-form-textarea
-                            id="textarea-defSetting"
-                            plaintext
-                            size="sm"
-                            v-model=this.defSetting
-                            rows="1"
-                            max-rows="8"
-                        ></b-form-textarea>
-                        </b-col>
-                    </b-row>
-                </b-container>
-                <br>
-                <b-form-input
-                    v-model="newSettingValue"
-                    v-bind:placeholder=this.newSettingValueTXT >
-                </b-form-input>
-            </div>
-            <b-button class="mt-3" variant="outline-primary" block @click="saveNewSetting">{{ this.newSettingSaveTxt }}</b-button>
-        </b-modal>
-    </div>
+  <b-container class="m-2 mt-2">
+  <div>   <!-- Title and desc -->
+    <h2>
+      {{ $t(`Modules.PMS.Settings.Name`) }}
+    </h2>
+    <h5>{{ $t(`Modules.PMS.Settings.Description`) }}</h5>
+  </div>
+  <b-link id="general" :to="{ path: '/settings/export', query: { return: 'pmssettings' } }">{{ $t("Modules.ET.Settings.Note") }} </b-link>
+  <br>
+  <p>{{ $t("Modules.PMS.Settings.Notice") }}</p>
+  <br>
+  <div> <!-- Settings to show -->
+    <b-form-group id="FilterSettingsGroup" v-bind:label="$t('Modules.PMS.Settings.SettingsFilter')" label-size="lg" label-class="font-weight-bold pt-0">
+      <b-tooltip target="FilterSettingsGroup" triggers="hover">
+        {{ $t('Modules.PMS.Settings.TTSettingsFilter') }}
+      </b-tooltip>
+      <b-form-radio-group
+        id="FilterSettings"
+        v-model="selFilterSetting"
+        @change.native="changeFilterSetting()"
+        :options="FilterSettingsOptions"
+        name="FilterSettings"
+      ></b-form-radio-group>
+    </b-form-group>
+  </div>
+  <div class="d-flex align-items-center">
+    <b-form-group id="etLibraryGroup" v-bind:label="$t('Modules.PMS.Settings.SelectSettingsSelection')" label-size="lg" label-class="font-weight-bold pt-0">
+      <b-tooltip target="etLibraryGroup" triggers="hover">
+        {{ $t('Modules.PMS.Settings.TTSelectSettingsSelection') }}
+      </b-tooltip>
+      <b-form-select
+        v-model="selSection"
+        id="selSection"
+        v-on:change="getGroupSelectedItem"
+        :options="selSectionOptions"
+        name="selSection">
+      </b-form-select>
+    </b-form-group>
+  </div>
+  <div> <!-- Modal popup -->
+    <b-modal ref="edtSetting" hide-footer v-bind:title=this.newSettingTitle >
+      <div class="d-block text-center">
+        <b-alert variant="danger" show>{{ $t('Modules.PMS.Settings.varning') }}</b-alert>
+        <b-container fluid>
+          <b-row>
+            <b-col sm="2">
+            <label for="textarea-curSetting">{{ $t('Modules.PMS.Settings.curSetting') }}:</label>
+            </b-col>
+            <b-col sm="10">
+              <b-form-textarea
+                id="textarea-curSetting"
+                plaintext
+                size="sm"
+                v-model=this.curSetting
+                rows="1"
+                max-rows="8"
+              >
+              </b-form-textarea>
+            </b-col>
+          </b-row>
+          <br>
+          <b-row>
+              <b-col sm="2">
+                <label for="textarea-defSetting">{{ $t('Modules.PMS.Settings.defSetting') }}:</label>
+                </b-col>
+                <b-col sm="10">
+                <b-form-textarea
+                  id="textarea-defSetting"
+                  plaintext
+                  size="sm"
+                  v-model=this.defSetting
+                  rows="1"
+                  max-rows="8"
+                >
+                </b-form-textarea>
+              </b-col>
+          </b-row>
+        </b-container>
+        <br>
+        <b-form-input
+            v-model="newSettingValue"
+            v-bind:placeholder=this.newSettingValueTXT >
+        </b-form-input>
+      </div>
+      <b-button class="mt-3" variant="outline-primary" block @click="saveNewSetting">{{ this.newSettingSaveTxt }}</b-button>
+    </b-modal>
+  </div>
     <div>
         <b-table
             striped
@@ -95,8 +100,7 @@
         </b-table>
     </div>
     <br>
-    <div class="buttons">
-        <!-- Buttons -->
+    <div class="buttons">   <!-- Buttons -->
         <div id="buttons" class="text-center">
             <b-button-group >
                 <b-button variant="success" class="mr-1" :disabled="this.selSection == ''" @click="exportSettings"> {{ $t('Modules.PMS.Settings.ExportGroupSettings') }} </b-button>
@@ -105,7 +109,6 @@
         </div>
     </div>
     <br>
-    <p class="text-center">{{ $t('Modules.PlexTV.Settings') }}</p>
   </b-container>
 </template>
 
@@ -149,7 +152,7 @@
             log.info("PMS Settings Created");
             this.serverSelected();
             this.getFilterSettings();
-            this.getServerSettings();            
+            this.getServerSettings();
         },
         computed: {
             selectedServerAddress: function(){

src/components/modules/PMS/ViewState/ViewState.vue

@@ -1,10 +1,11 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-10 col-md-12 col-xs-12">
-        <h1>{{ $t("Modules.PMS.ViewState.Name") }}</h1>
-        <p>{{ $t("Modules.PMS.ViewState.Description") }}</p>
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Modules.PMS.ViewState.Name`) }}
+      </h2>
+      <h5>{{ $t(`Modules.PMS.ViewState.Description`) }}</h5>
     </div>
-
     <div class="d-flex align-items-center">
       <b-form-group id="ViewStateSelSourceUsrGroup" v-bind:label="$t('Modules.PMS.ViewState.selSourceUsr')" label-size="lg" label-class="font-weight-bold pt-0" name="ViewStateSelSourceUsrGroup">
         <b-tooltip target="ViewStateSelSourceUsrGroup" triggers="hover">
@@ -67,7 +68,6 @@
     <br>
     <statusDiv /> <!-- Status Div -->
   </b-container>
-
 </template>
 
 <script>

src/components/modules/PlexTV/PlexTV.vue

@@ -1,70 +1,62 @@
 <template>
-    <div class="col-lg-10 col-md-12 col-xs-12">
-      <h3>{{ $t("Modules.PlexTV.Name") }} <br>
-      </h3>
-      {{ $t("Modules.PlexTV.Description") }}
-
-      <br>
-      <br>
-      <!-- Select User -->
-      <div class="d-flex align-items-center">
-        <b-form-group id="plexTVUsers" v-bind:label="$t('Modules.PlexTV.SelUsr')" label-size="lg" label-class="font-weight-bold pt-0">
-          <div ref="libSpinner" id="libSpinner" :hidden="selUserWait">
-            <b-spinner id="libLoad" class="ml-auto text-danger"></b-spinner>
-          </div>
-          <b-tooltip target="plexTVUsers" triggers="hover">
-            {{ $t('Modules.PlexTV.TT-User') }}
-          </b-tooltip>
-          <b-form-select
-            v-model="selUser"
-            id="selUser"
-            :options="selUserOptions"
-            name="selLibrary">
-          </b-form-select>
-        </b-form-group>
-      </div>
-      <b-input-group id="UserIDGrp" :prepend="$t('Modules.PlexTV.UsrID')" class="mt-3">
-            <b-form-input id="usrID" name="usrID" type="text" class="form-control" v-model="usrID" :disabled=true></b-form-input>
-      </b-input-group>
-      <b-input-group id="UserNameGrp" :prepend="$t('Modules.PlexTV.UsrName')" class="mt-3">
-            <b-form-input id="usrName" name="usrName" type="text" class="form-control" v-model="usrName" :disabled=true></b-form-input>
-      </b-input-group>
-      <b-input-group id="UserNameGrp" :prepend="$t('Modules.PlexTV.UsrFriendlyName')" class="mt-3">
-            <b-form-input id="usrFriendlyName" name="usrFriendlyName" type="text" class="form-control" v-model="usrFriendlyName" :disabled=true></b-form-input>
-      </b-input-group>
-      <b-input-group id="UserEmailGrp" :prepend="$t('Modules.PlexTV.UsrEMail')" class="mt-3">
-            <b-form-input id="usrEmail" name="usrEmail" type="text" class="form-control" v-model="usrEmail" :disabled=true></b-form-input>
-      </b-input-group>
-      <b-input-group id="UserRestrictedGrp" :prepend="$t('Modules.PlexTV.UsrRestricted')" class="mt-3">
-            <b-form-input id="usrRestricted" name="usrRestricted"  class="form-control" v-model="usrRestricted" :disabled=true></b-form-input>
-      </b-input-group>
-      <b-input-group id="UserThumbGrp" :prepend="$t('Modules.PlexTV.UsrThumb')" class="mt-3">
-            <b-form-input id="usrThumb" name="usrThumb" type="text" class="form-control" v-model="usrThumb" :disabled=true></b-form-input>
-      </b-input-group>
-      <b-input-group id="UserHomeGrp" :prepend="$t('Modules.PlexTV.UsrHome')" class="mt-3">
-            <b-form-input id="usrHome" name="usrHome" class="form-control" v-model="usrHome" :disabled=true></b-form-input>
-      </b-input-group>
-      <b-input-group id="UserStatusGrp" :prepend="$t('Modules.PlexTV.UsrStatus')" class="mt-3">
-            <b-form-input id="usrStatus" name="usrStatus" type="text" class="form-control" v-model="usrStatus" :disabled=true></b-form-input>
-      </b-input-group>
-      <br>
-      <div class="buttons">
-        <br>
-        <!-- Buttons -->
-        <div id="buttons" class="text-center">
-            <b-button-group >
-                <b-button variant="success" class="mr-1" :disabled="this.selUser == ''" @click="exportUsr"> {{ $t('Modules.PlexTV.ExportUsr') }} </b-button>
-                <b-button variant="success" class="mr-1"  @click="exportAllUsr">{{ $t('Modules.PlexTV.ExportAllUsr') }}</b-button>
-            </b-button-group>
-        </div>
-      </div>
-      <br>
-      <div class="text-center">
-        <b-link id="general" :to="{ path: '/settings/export', query: { return: 'plextv' } }">{{ $t("Modules.ET.Settings.Note") }} </b-link>
-      </div>
-      <br>
-      <br>
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Modules.PlexTV.Name`) }}
+      </h2>
+      <h5>{{ $t(`Modules.PlexTV.Description`) }}</h5>
     </div>
+    <b-link id="general" :to="{ path: '/settings/export', query: { return: 'plextv' } }">{{ $t("Modules.ET.Settings.Note") }} </b-link>
+    <br>
+    <div class="d-flex align-items-center">   <!-- Select User -->
+      <b-form-group id="plexTVUsers" v-bind:label="$t('Modules.PlexTV.SelUsr')" label-size="lg" label-class="font-weight-bold pt-0">
+        <div ref="libSpinner" id="libSpinner" :hidden="selUserWait">
+          <b-spinner id="libLoad" class="ml-auto text-danger"></b-spinner>
+        </div>
+        <b-tooltip target="plexTVUsers" triggers="hover">
+          {{ $t('Modules.PlexTV.TT-User') }}
+        </b-tooltip>
+        <b-form-select
+          v-model="selUser"
+          id="selUser"
+          :options="selUserOptions"
+          name="selLibrary">
+        </b-form-select>
+      </b-form-group>
+    </div>
+    <b-input-group id="UserIDGrp" :prepend="$t('Modules.PlexTV.UsrID')" class="mt-3">
+          <b-form-input id="usrID" name="usrID" type="text" class="form-control" v-model="usrID" :disabled=true></b-form-input>
+    </b-input-group>
+    <b-input-group id="UserNameGrp" :prepend="$t('Modules.PlexTV.UsrName')" class="mt-3">
+          <b-form-input id="usrName" name="usrName" type="text" class="form-control" v-model="usrName" :disabled=true></b-form-input>
+    </b-input-group>
+    <b-input-group id="UserNameGrp" :prepend="$t('Modules.PlexTV.UsrFriendlyName')" class="mt-3">
+          <b-form-input id="usrFriendlyName" name="usrFriendlyName" type="text" class="form-control" v-model="usrFriendlyName" :disabled=true></b-form-input>
+    </b-input-group>
+    <b-input-group id="UserEmailGrp" :prepend="$t('Modules.PlexTV.UsrEMail')" class="mt-3">
+          <b-form-input id="usrEmail" name="usrEmail" type="text" class="form-control" v-model="usrEmail" :disabled=true></b-form-input>
+    </b-input-group>
+    <b-input-group id="UserRestrictedGrp" :prepend="$t('Modules.PlexTV.UsrRestricted')" class="mt-3">
+          <b-form-input id="usrRestricted" name="usrRestricted"  class="form-control" v-model="usrRestricted" :disabled=true></b-form-input>
+    </b-input-group>
+    <b-input-group id="UserThumbGrp" :prepend="$t('Modules.PlexTV.UsrThumb')" class="mt-3">
+          <b-form-input id="usrThumb" name="usrThumb" type="text" class="form-control" v-model="usrThumb" :disabled=true></b-form-input>
+    </b-input-group>
+    <b-input-group id="UserHomeGrp" :prepend="$t('Modules.PlexTV.UsrHome')" class="mt-3">
+          <b-form-input id="usrHome" name="usrHome" class="form-control" v-model="usrHome" :disabled=true></b-form-input>
+    </b-input-group>
+    <b-input-group id="UserStatusGrp" :prepend="$t('Modules.PlexTV.UsrStatus')" class="mt-3">
+          <b-form-input id="usrStatus" name="usrStatus" type="text" class="form-control" v-model="usrStatus" :disabled=true></b-form-input>
+    </b-input-group>
+    <br>
+    <br>
+    <div id="buttons" class="text-center"> <!-- Buttons -->
+      <b-button-group>
+          <b-button variant="success" class="mr-1" :disabled="this.selUser == ''" @click="exportUsr"> {{ $t('Modules.PlexTV.ExportUsr') }} </b-button>
+          <b-button variant="success" class="mr-1"  @click="exportAllUsr">{{ $t('Modules.PlexTV.ExportAllUsr') }}</b-button>
+      </b-button-group>
+    </div>
+  </b-container>
 </template>
 
 <script>