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> |