rewrite in materialize CSS
It looks much better here.
This commit is contained in:
buzz-lightsnack-2007
parent
bd325f11b0
commit
794f75ecb7
1 changed files with 193 additions and 92 deletions
|
|
@ -1,92 +1,193 @@
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="../scripts/pages/settings.js"></script>
|
||||||
|
<script src="../styles/external/materialize/js/materialize.js"></script>
|
||||||
|
|
||||||
<head>
|
<title for="term_preferences"></title>
|
||||||
<script type="module" src="../scripts/external/jquery.js"></script>
|
</head>
|
||||||
<script type="module" src="../scripts/pages/settings.js"></script>
|
|
||||||
|
|
||||||
<title data-text="term_preferences"></title>
|
<body>
|
||||||
</head>
|
<main class="container">
|
||||||
|
<ul class="collapsible" data-collapsible="accordion">
|
||||||
<body>
|
<li>
|
||||||
<main class="window-body has-space">
|
<header
|
||||||
<menu role="tablist" for="settings_content">
|
class="collapsible-header waves-effect flow-text"
|
||||||
<button role="tab" for="settings" data-text="general" tab="0"></button>
|
accesskey="1"
|
||||||
<button role="tab" for="filters" data-text="filters" tab="1"></button>
|
for="general"
|
||||||
<button role="tab" for="storage" data-text="storage" tab="2"></button>
|
data-icon="cog"
|
||||||
<button role="tab" for="about" data-text="about" tab="3"></button>
|
></header>
|
||||||
</menu>
|
<section class="collapsible-body">
|
||||||
<section class="view_main" id="settings_content">
|
<section class="input-group">
|
||||||
<section role="tabpanel" id="settings">
|
<legend for="general" class="flow-text"></legend>
|
||||||
<fieldset>
|
<ul class="input-field">
|
||||||
<legend data-text="general"></legend>
|
<li>
|
||||||
<form class="field-row">
|
<label>
|
||||||
<input type="checkbox" id="settings_general_showApplicable"
|
<input
|
||||||
data-store="settings,general,showApplicable">
|
type="checkbox"
|
||||||
<label for="settings_general_showApplicable"
|
data-store="settings,general,showApplicable"
|
||||||
data-text="settings_general_showApplicable"></label>
|
class="filled-in"
|
||||||
</form>
|
/>
|
||||||
<form class="field-row">
|
<span
|
||||||
<input type="checkbox" id="settings_general_injectToPage"
|
for="settings_general_showApplicable"
|
||||||
data-store="settings,general,injectToPage">
|
></span>
|
||||||
<label for="settings_general_injectToPage" data-text="settings_general_injectToPage"></label>
|
</label>
|
||||||
</form>
|
</li>
|
||||||
</fieldset>
|
<li>
|
||||||
<fieldset>
|
<label>
|
||||||
<legend data-text="behavior"></legend>
|
<input
|
||||||
<form class="field-row">
|
type="checkbox"
|
||||||
<input type="checkbox" id="settings_behavior_autoRun" data-store="settings,behavior,autoRun">
|
data-store="settings,general,injectToPage"
|
||||||
<label for="settings_behavior_autoRun" data-text="settings_behavior_autoRun"></label>
|
class="filled-in"
|
||||||
</form>
|
/>
|
||||||
</fielset>
|
<span
|
||||||
|
for="settings_general_injectToPage"
|
||||||
|
></span>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section role="tabpanel" id="filters">
|
<section class="input-group">
|
||||||
<fieldset>
|
<legend for="behavior" class="flow-text"></legend>
|
||||||
<legend data-text="filters"></legend>
|
<ul class="input-field">
|
||||||
<label data-text="settings_filters_description"></label>
|
<li>
|
||||||
<div class="field-row action-buttons">
|
<label>
|
||||||
<button data-action="filters,update" data-text="settings_filters_update"
|
<input
|
||||||
data-enable="filters"></button>
|
type="checkbox"
|
||||||
<button href="settings/filters" tab-height="607.5" tab-width="1080"
|
data-store="settings,behavior,autoRun"
|
||||||
data-text="settings_filters_open"></button>
|
class="filled-in"
|
||||||
</div>
|
/>
|
||||||
</fieldset>
|
<span
|
||||||
<fieldset>
|
for="settings_behavior_autoRun"
|
||||||
<legend data-text="analysis"></legend>
|
></span>
|
||||||
<p data-text="settings_analysis_description"></p>
|
</label>
|
||||||
<div class="field-row">
|
</li>
|
||||||
<label for="settings_analysis_api" data-text="API_Key"></label>
|
</ul>
|
||||||
<input type="password" id="settings_analysis_api" data-store="settings,analysis,api,key" />
|
|
||||||
</div>
|
|
||||||
<div class="field-row action-buttons">
|
|
||||||
<button data-text="help" href="help" tab-height="607.5" tab-width="1080"></button>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</section>
|
|
||||||
<section role="tabpanel" id="storage">
|
|
||||||
<fieldset>
|
|
||||||
<legend data-text="storage"></legend>
|
|
||||||
<label data-text="settings_storage_description"></label>
|
|
||||||
<div class="field-row action-buttons">
|
|
||||||
<button data-text="settings_storage_clear" data-enable="sites"
|
|
||||||
data-action="storage,clear"></button>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</section>
|
|
||||||
<section role="tabpanel" id="about">
|
|
||||||
<fieldset>
|
|
||||||
<legend data-text="about"></legend>
|
|
||||||
<img src="../icons/logo.png" height=128 style="float:left" />
|
|
||||||
<h2 data-text="extension_name"></h2>
|
|
||||||
<p data-text="extension_version" style="font-style: italic;"></p>
|
|
||||||
<p data-text="extension_description"></p>
|
|
||||||
<div class="field-row action-buttons">
|
|
||||||
<button data-text="help" href="help" tab-height="607.5" tab-width="1080"></button>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<header
|
||||||
|
class="collapsible-header waves-effect flow-text"
|
||||||
|
for="filters"
|
||||||
|
accesskey="2"
|
||||||
|
data-icon="filter"
|
||||||
|
></header>
|
||||||
|
<section class="collapsible-body">
|
||||||
|
<section class="input-group row">
|
||||||
|
<label class="input-description">
|
||||||
|
<legend
|
||||||
|
for="filters"
|
||||||
|
class="flow-text"
|
||||||
|
></legend>
|
||||||
|
<label
|
||||||
|
for="settings_filters_description"
|
||||||
|
></label>
|
||||||
|
</label>
|
||||||
|
<side class="input-field">
|
||||||
|
<button
|
||||||
|
data-action="filters,update"
|
||||||
|
title-for="settings_filters_update"
|
||||||
|
data-enable="filters"
|
||||||
|
data-icon="refresh"
|
||||||
|
class="btn waves-effect"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
href="settings/filters.htm"
|
||||||
|
tab-height="607.5"
|
||||||
|
tab-width="1080"
|
||||||
|
data-icon="pencil"
|
||||||
|
title-for="settings_filters_open"
|
||||||
|
class="btn waves-effect"
|
||||||
|
></button>
|
||||||
|
</side>
|
||||||
|
</section>
|
||||||
|
<section class="input-group">
|
||||||
|
<label class="input-description">
|
||||||
|
<legend
|
||||||
|
for="analysis"
|
||||||
|
class="flow-text"
|
||||||
|
></legend>
|
||||||
|
<label
|
||||||
|
for="settings_analysis_description"
|
||||||
|
></label>
|
||||||
|
</label>
|
||||||
|
<div class="input-field">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
data-store="settings,analysis,api,key"
|
||||||
|
/>
|
||||||
|
<label for="API_Key"></label>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<header
|
||||||
|
class="collapsible-header waves-effect flow-text"
|
||||||
|
for="storage"
|
||||||
|
accesskey="3"
|
||||||
|
data-icon="database"
|
||||||
|
></header>
|
||||||
|
<section class="collapsible-body">
|
||||||
|
<section class="input-group">
|
||||||
|
<label
|
||||||
|
for="settings_storage_description"
|
||||||
|
class="input-description"
|
||||||
|
></label>
|
||||||
|
<div class="input-field">
|
||||||
|
<button
|
||||||
|
title-for="settings_storage_clear"
|
||||||
|
data-icon="delete"
|
||||||
|
data-enable="sites"
|
||||||
|
data-action="storage,clear"
|
||||||
|
class="btn waves-effect"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<header
|
||||||
|
class="collapsible-header waves-effect flow-text"
|
||||||
|
for="about"
|
||||||
|
accesskey="4"
|
||||||
|
data-icon="information"
|
||||||
|
></header>
|
||||||
|
<section class="collapsible-body">
|
||||||
|
<div class="row">
|
||||||
|
<side class="s3">
|
||||||
|
<img
|
||||||
|
src="../icons/logo.png"
|
||||||
|
alt="Logo"
|
||||||
|
class="responsive-img"
|
||||||
|
/>
|
||||||
|
</side>
|
||||||
|
<article class="s9">
|
||||||
|
<p
|
||||||
|
class="flow-text"
|
||||||
|
style="font-weight: bold"
|
||||||
|
for="extension_name"
|
||||||
|
></p>
|
||||||
|
<p
|
||||||
|
for="extension_version"
|
||||||
|
style="font-style: italic"
|
||||||
|
></p>
|
||||||
|
<p for="extension_description"></p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
<side class="fixed-action-btn">
|
||||||
</body>
|
<button
|
||||||
|
href="help"
|
||||||
|
tab-height="607.5"
|
||||||
|
tab-width="1080"
|
||||||
|
class="btn-floating btn-large waves-effect"
|
||||||
|
title-for="help"
|
||||||
|
data-icon="help"
|
||||||
|
></button>
|
||||||
|
</side>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue