50 lines
		
	
	
		
			No EOL
		
	
	
		
			1.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			50 lines
		
	
	
		
			No EOL
		
	
	
		
			1.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <:Head>
 | ||
|   <title>Pinafore – General Settings</title>
 | ||
| </:Head>
 | ||
| 
 | ||
| <Layout page='settings'>
 | ||
|   <SettingsLayout page='settings/general' label="General">
 | ||
|     <h1>General Settings</h1>
 | ||
| 
 | ||
|     <h2>UI Settings</h2>
 | ||
|     <form class="ui-settings" aria-label="UI settings">
 | ||
|       <div class="setting-group">
 | ||
|         <input type="checkbox" id="choice-autoplay-gif"
 | ||
|                bind:checked="$autoplayGifs" on:change="store.save()">
 | ||
|         <label for="choice-autoplay-gif">Autoplay GIFs</label>
 | ||
|       </div>
 | ||
|       <div class="setting-group">
 | ||
|         <input type="checkbox" id="choice-mark-media-sensitive"
 | ||
|                bind:checked="$markMediaAsSensitive" on:change="store.save()">
 | ||
|         <label for="choice-mark-media-sensitive">Always mark media as sensitive</label>
 | ||
|       </div>
 | ||
|     </form>
 | ||
| 
 | ||
|   </SettingsLayout>
 | ||
| </Layout>
 | ||
| 
 | ||
| <style>
 | ||
|   .ui-settings {
 | ||
|     background: var(--form-bg);
 | ||
|     border: 1px solid var(--main-border);
 | ||
|     border-radius: 4px;
 | ||
|     padding: 20px;
 | ||
|     line-height: 2em;
 | ||
|   }
 | ||
|   .setting-group {
 | ||
|     padding: 5px 0;
 | ||
|   }
 | ||
| </style>
 | ||
| <script>
 | ||
|   import Layout from '../_components/Layout.html';
 | ||
|   import SettingsLayout from './_components/SettingsLayout.html'
 | ||
|   import { store } from '../_store/store'
 | ||
| 
 | ||
|   export default {
 | ||
|     components: {
 | ||
|       Layout,
 | ||
|       SettingsLayout
 | ||
|     },
 | ||
|     store: () => store
 | ||
|   };
 | ||
| </script> |