mirror of
				https://github.com/advplyr/audiobookshelf.git
				synced 2025-10-27 11:18:14 +01:00 
			
		
		
		
	update html formatting
This commit is contained in:
		
							parent
							
								
									033b7ece28
								
							
						
					
					
						commit
						f6702d299d
					
				| @ -1,23 +1,21 @@ | ||||
| <template> | ||||
|   <div> | ||||
|     <!-- <div class="h-0.5 bg-primary bg-opacity-50 w-full" /> --> | ||||
|      | ||||
|     <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8" style="background-color: "> | ||||
|     <div class="" style="background-color: "> | ||||
|       <h1 class="text-xl mb-2">Settings</h1> | ||||
|     </div> | ||||
|     <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-2"> | ||||
|       <div class="mb-2"> | ||||
|         <h1 class="text-xl">Settings</h1> | ||||
|       </div> | ||||
| 
 | ||||
|     <div class="sm:flex"> | ||||
|       <div id="firstcolumn" class="flex-1" style="background-color: "> | ||||
|         <div class=""> | ||||
|           <h2 class="font-semibold">General</h2> | ||||
|         </div> | ||||
|           <div class="flex items-center py-2"> | ||||
|       <div class="sm:flex"> | ||||
|         <div id="firstcolumn" class="flex-1"> | ||||
|           <div> | ||||
|             <h2 class="font-semibold">General</h2> | ||||
|           </div> | ||||
|           <div class="flex items-end py-2"> | ||||
|             <ui-toggle-switch v-model="newServerSettings.storeCoverWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeCoverWithItem', val)" /> | ||||
|             <ui-tooltip :text="tooltips.storeCoverWithItem"> | ||||
|               <p class="pl-4"> | ||||
|                 Store covers with item | ||||
|                 <span class="material-icons icon-text">info_outlined</span> | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| @ -27,7 +25,7 @@ | ||||
|             <ui-tooltip :text="tooltips.storeMetadataWithItem"> | ||||
|               <p class="pl-4"> | ||||
|                 Store metadata with item | ||||
|                 <span class="material-icons icon-text">info_outlined</span> | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| @ -37,7 +35,7 @@ | ||||
|             <ui-tooltip :text="tooltips.sortingIgnorePrefix"> | ||||
|               <p class="pl-4"> | ||||
|                 Ignore prefixes when sorting title and series | ||||
|                 <span class="material-icons icon-text">info_outlined</span> | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| @ -47,147 +45,147 @@ | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="newServerSettings.chromecastEnabled" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('chromecastEnabled', val)" /> | ||||
|             <p class="pl-4">Enable Chromecast</p> | ||||
|             <p class="pl-4">Chromecast support</p> | ||||
|           </div> | ||||
| 
 | ||||
|         <div class="mt-4"> | ||||
|           <h2 class="font-semibold">Display</h2> | ||||
|         </div> | ||||
|           <div class="mt-4"> | ||||
|             <h2 class="font-semibold">Display</h2> | ||||
|           </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" /> | ||||
|           <ui-tooltip :text="tooltips.coverAspectRatio"> | ||||
|             <p class="pl-4"> | ||||
|               Use square book covers | ||||
|               <span class="material-icons icon-text">info_outlined</span> | ||||
|             </p> | ||||
|           </ui-tooltip> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" /> | ||||
|           <ui-tooltip :text="tooltips.bookshelfView"> | ||||
|             <p class="pl-4"> | ||||
|               Use alternative bookshelf view | ||||
|               <span class="material-icons icon-text">info_outlined</span> | ||||
|             </p> | ||||
|           </ui-tooltip> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <p class="pr-4 ">Date Format</p> | ||||
|           <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-40" @input="(val) => updateSettingsKey('dateFormat', val)" /> | ||||
|         </div> | ||||
|       </div> | ||||
| 
 | ||||
|       <div id="secondcolumn" class="flex-1" style="background-color: "> | ||||
|         <div class=""> | ||||
|           <h2 class="font-semibold">Scanner</h2> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <ui-toggle-switch v-model="newServerSettings.scannerParseSubtitle" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerParseSubtitle', val)" /> | ||||
|           <ui-tooltip :text="tooltips.scannerParseSubtitle"> | ||||
|             <p class="pl-4"> | ||||
|               Scanner parse subtitles | ||||
|               <span class="material-icons icon-text">info_outlined</span> | ||||
|             </p> | ||||
|           </ui-tooltip> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <ui-toggle-switch v-model="newServerSettings.scannerFindCovers" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerFindCovers', val)" /> | ||||
|           <ui-tooltip :text="tooltips.scannerFindCovers"> | ||||
|             <p class="pl-4"> | ||||
|               Scanner find covers | ||||
|               <span class="material-icons icon-text">info_outlined</span> | ||||
|             </p> | ||||
|           </ui-tooltip> | ||||
|           <div class="flex-grow" /> | ||||
|         </div> | ||||
|         <div v-if="newServerSettings.scannerFindCovers" class="w-44 ml-14 mb-2"> | ||||
|           <ui-dropdown v-model="newServerSettings.scannerCoverProvider" small :items="providers" label="Cover Provider" @input="updateScannerCoverProvider" :disabled="updatingServerSettings" /> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <ui-toggle-switch v-model="newServerSettings.scannerPreferAudioMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferAudioMetadata', val)" /> | ||||
|           <ui-tooltip :text="tooltips.scannerPreferAudioMetadata"> | ||||
|             <p class="pl-4"> | ||||
|               Scanner prefer audio metadata | ||||
|               <span class="material-icons icon-text">info_outlined</span> | ||||
|             </p> | ||||
|           </ui-tooltip> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <ui-toggle-switch v-model="newServerSettings.scannerPreferOverdriveMediaMarker" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOverdriveMediaMarker', val)" /> | ||||
|           <ui-tooltip :text="tooltips.scannerPreferOverdriveMediaMarker"> | ||||
|             <p class="pl-4"> | ||||
|               Scanner prefer Overdrive Media Markers for chapters | ||||
|               <span class="material-icons icon-text">info_outlined</span> | ||||
|             </p> | ||||
|           </ui-tooltip> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <ui-toggle-switch v-model="newServerSettings.scannerPreferOpfMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOpfMetadata', val)" /> | ||||
|           <ui-tooltip :text="tooltips.scannerPreferOpfMetadata"> | ||||
|             <p class="pl-4"> | ||||
|               Scanner prefer OPF metadata | ||||
|               <span class="material-icons icon-text">info_outlined</span> | ||||
|             </p> | ||||
|           </ui-tooltip> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <ui-toggle-switch v-model="newServerSettings.scannerPreferMatchedMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferMatchedMetadata', val)" /> | ||||
|           <ui-tooltip :text="tooltips.scannerPreferMatchedMetadata"> | ||||
|             <p class="pl-4"> | ||||
|               Scanner prefer matched metadata | ||||
|               <span class="material-icons icon-text">info_outlined</span> | ||||
|             </p> | ||||
|           </ui-tooltip> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <ui-toggle-switch v-model="newServerSettings.scannerDisableWatcher" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerDisableWatcher', val)" /> | ||||
|           <ui-tooltip :text="tooltips.scannerDisableWatcher"> | ||||
|             <p class="pl-4"> | ||||
|               Disable Watcher | ||||
|               <span class="material-icons icon-text">info_outlined</span> | ||||
|             </p> | ||||
|           </ui-tooltip> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="mt-4"> | ||||
|           <h2 class="font-semibold">Experimental Features</h2> | ||||
|         </div> | ||||
| 
 | ||||
|         <div> | ||||
|           <div class="flex items-center"> | ||||
|             <ui-toggle-switch v-model="showExperimentalFeatures" /> | ||||
|             <ui-tooltip :text="tooltips.experimentalFeatures"> | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" /> | ||||
|             <ui-tooltip :text="tooltips.coverAspectRatio"> | ||||
|               <p class="pl-4"> | ||||
|                 Experimental Features | ||||
|                 <a href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank"> | ||||
|                   <span class="material-icons icon-text">info_outlined</span> | ||||
|                 </a> | ||||
|                 Square book covers | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" /> | ||||
|             <ui-tooltip :text="tooltips.bookshelfView"> | ||||
|               <p class="pl-4"> | ||||
|                 Alternative bookshelf view | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <p class="pr-4 ">Date Format</p> | ||||
|             <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-40" @input="(val) => updateSettingsKey('dateFormat', val)" /> | ||||
|           </div> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center py-2"> | ||||
|           <ui-toggle-switch v-model="newServerSettings.enableEReader" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('enableEReader', val)" /> | ||||
|           <ui-tooltip :text="tooltips.enableEReader"> | ||||
|             <p class="pl-4"> | ||||
|               Enable e-reader for all users | ||||
|               <span class="material-icons icon-text">info_outlined</span> | ||||
|             </p> | ||||
|           </ui-tooltip> | ||||
|         </div> | ||||
|         <div id="secondcolumn" class="flex-1"> | ||||
|           <div> | ||||
|             <h2 class="font-semibold">Scanner</h2> | ||||
|           </div> | ||||
| 
 | ||||
|       </div> | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="newServerSettings.scannerParseSubtitle" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerParseSubtitle', val)" /> | ||||
|             <ui-tooltip :text="tooltips.scannerParseSubtitle"> | ||||
|               <p class="pl-4"> | ||||
|                 Parse subtitles | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="newServerSettings.scannerFindCovers" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerFindCovers', val)" /> | ||||
|             <ui-tooltip :text="tooltips.scannerFindCovers"> | ||||
|               <p class="pl-4"> | ||||
|                 Find covers | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|             <div class="flex-grow" /> | ||||
|           </div> | ||||
|           <div v-if="newServerSettings.scannerFindCovers" class="w-44 ml-14 mb-2"> | ||||
|             <ui-dropdown v-model="newServerSettings.scannerCoverProvider" small :items="providers" label="Cover Provider" @input="updateScannerCoverProvider" :disabled="updatingServerSettings" /> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="newServerSettings.scannerPreferAudioMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferAudioMetadata', val)" /> | ||||
|             <ui-tooltip :text="tooltips.scannerPreferAudioMetadata"> | ||||
|               <p class="pl-4"> | ||||
|                 Prefer audio metadata | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="newServerSettings.scannerPreferOverdriveMediaMarker" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOverdriveMediaMarker', val)" /> | ||||
|             <ui-tooltip :text="tooltips.scannerPreferOverdriveMediaMarker"> | ||||
|               <p class="pl-4"> | ||||
|                 Prefer Overdrive Media Markers for chapters | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="newServerSettings.scannerPreferOpfMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOpfMetadata', val)" /> | ||||
|             <ui-tooltip :text="tooltips.scannerPreferOpfMetadata"> | ||||
|               <p class="pl-4"> | ||||
|                 Prefer OPF metadata | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="newServerSettings.scannerPreferMatchedMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferMatchedMetadata', val)" /> | ||||
|             <ui-tooltip :text="tooltips.scannerPreferMatchedMetadata"> | ||||
|               <p class="pl-4"> | ||||
|                 Prefer matched metadata | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="newServerSettings.scannerDisableWatcher" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerDisableWatcher', val)" /> | ||||
|             <ui-tooltip :text="tooltips.scannerDisableWatcher"> | ||||
|               <p class="pl-4"> | ||||
|                 Disable Watcher | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="mt-4"> | ||||
|             <h2 class="font-semibold">Experimental Features</h2> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <div class="flex items-center"> | ||||
|               <ui-toggle-switch v-model="showExperimentalFeatures" /> | ||||
|               <ui-tooltip :text="tooltips.experimentalFeatures"> | ||||
|                 <p class="pl-4"> | ||||
|                   Experimental Features | ||||
|                   <a href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank"> | ||||
|                     <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|                   </a> | ||||
|                 </p> | ||||
|               </ui-tooltip> | ||||
|             </div> | ||||
|           </div> | ||||
| 
 | ||||
|           <div class="flex items-center py-2"> | ||||
|             <ui-toggle-switch v-model="newServerSettings.enableEReader" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('enableEReader', val)" /> | ||||
|             <ui-tooltip :text="tooltips.enableEReader"> | ||||
|               <p class="pl-4"> | ||||
|                 Enable e-reader for all users | ||||
|                 <span class="material-icons icon-text text-sm">info_outlined</span> | ||||
|               </p> | ||||
|             </ui-tooltip> | ||||
|           </div> | ||||
| 
 | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
| 
 | ||||
| @ -231,7 +229,6 @@ | ||||
| 
 | ||||
|     <div class="h-0.5 bg-primary bg-opacity-30 w-full" /> | ||||
| 
 | ||||
| 
 | ||||
|     <prompt-dialog v-model="showConfirmPurgeCache" :width="675"> | ||||
|       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300"> | ||||
|         <p class="text-error  font-semibold">Important Notice!</p> | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user