buzzcode2007/ShopAI-Extension
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adjust settings page interface to support OLED

Browse source 
add navbar and remove FAB
This commit is contained in:
buzz-lightsnack-2007 2024-04-23 16:27:59 +08:00
parent 6aef461d0d
commit 1627cbbf3b
10 changed files with 88 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

38
pages/settings.htm
View file

@ -7,12 +7,16 @@
</head> </head>
<body> <body>
<nav class="nav-wrapper" data-result-linked="filters">
<span class="brand-logo left"><img src="/media/icons/logo.png" alt="Logo"/><span for="extension_name"></span></span>
<ul class="right">
<li><a data-icon="help" href="help.html"></a></li>
</ul>
</nav>
<main class="container"> <main class="container">
<ul class="collapsible" data-collapsible="accordion"> <ul class="collapsible" data-collapsible="accordion">
<li> <li>
<header <header class="collapsible-header waves-effect flow-text" accesskey="1" for="general" data-icon="cog"></header>
class="collapsible-header waves-effect flow-text" accesskey="1" for="general" data-icon="cog"
></header>
<section class="collapsible-body"> <section class="collapsible-body">
<section class="input-group"> <section class="input-group">
<legend for="general" class="flow-text"></legend> <legend for="general" class="flow-text"></legend>
@ -91,18 +95,10 @@
</section> </section>
</li> </li>
<li> <li>
<header <header class="collapsible-header waves-effect flow-text" for="storage" accesskey="3" data-icon="database"></header>
class="collapsible-header waves-effect flow-text"
for="storage"
accesskey="3"
data-icon="database"
></header>
<section class="collapsible-body"> <section class="collapsible-body">
<section class="input-group"> <section class="input-group">
<label <label for="settings_storage_description" class="input-description"></label>
for="settings_storage_description"
class="input-description"
></label>
<div class="input-field"> <div class="input-field">
<button <button
title-for="settings_storage_clear" title-for="settings_storage_clear"
@ -128,15 +124,8 @@
<img src="/media/icons/logo.png" alt="Logo" class="responsive-img" /> <img src="/media/icons/logo.png" alt="Logo" class="responsive-img" />
</side> </side>
<article class="s9"> <article class="s9">
<p <p class="flow-text" style="font-weight: bold" for="extension_name"></p>
class="flow-text" <p for="extension_version" style="font-style: italic"></p>
style="font-weight: bold"
for="extension_name"
></p>
<p
for="extension_version"
style="font-style: italic"
></p>
<p for="extension_description"></p> <p for="extension_description"></p>
</article> </article>
</div> </div>
@ -144,10 +133,5 @@
</li> </li>
</ul> </ul>
</main> </main>
<side class="fixed-action-btn">
<button
href="help" tab-height="607.5" tab-width="1080" class="btn-floating btn-large" title-for="help" data-icon="help"
></button>
</side>
</body> </body>
</html> </html>

7
pages/settings/filters.htm
View file

@ -41,12 +41,7 @@
<ul class="input-field"> <ul class="input-field">
<li> <li>
<label> <label>
<input <input type="checkbox" data-result-store=",settings,filters" data-result-store-parameter="enabled" class="filled-in" data-store-location="1" />
type="checkbox"
data-result-store=",settings,filters"
data-result-store-parameter="enabled"
class="filled-in" data-store-location="1"
/>
<span for="enable"></span> <span for="enable"></span>
</label> </label>
</li> </li>

27
styles/colors/all.backgrounds.collapsible.css
View file

@ -1,22 +1,25 @@
.collapsible {
border: none;
}
.collapsible .collapsible-header, .collapsible .collapsible-body { .collapsible .collapsible-header, .collapsible .collapsible-body {
background-color: var(--background-color-card); background-color: var(--background-color-card);
}; };
.collapsible > li {
border-color: var(--separator-color) !important;
};
/* Active events */ /* Active events */
.collapsible .collapsible-header:focus, .collapsible .collapsible-header:active { .collapsible .collapsible-header:focus, .collapsible .collapsible-header:active {
background-color: var(--surface-color); background-color: var(--surface-color);
} }
.collapsible .active .collapsible-header { .collapsible .collapsible-header:hover {
background-color: none; background-color: var(--hover-color);
background: linear-gradient(
25deg, }
var(--primary-color-dark) 0%,
var(--primary-color) 62%, .collapsible .active .collapsible-header {
var(--primary-color-raised-hover-solid) 100% background: var(--primary-color-gradient) !important;
) !important; }
.collapsible > li:has(.collapsible-header:hover) {
border: 1px solid var(--hover-color);
} }

11
styles/colors/all.forms.css
View file

@ -1,11 +1,16 @@
.input-field input, .input-field textarea { .input-field input, .input-field textarea {
background-color: var(--input-color); background-color: var(--input-color) !important;
} }
.btn { .btn:not([disabled]) {
background-color: var(--secondary-color) !important; background-color: var(--secondary-color) !important;
} }
.btn[role="primary"], .btn-floating { .btn[role="primary"]:not([disabled]), .btn-floating:not([disabled]) {
background-color: var(--primary-color) !important; background-color: var(--primary-color) !important;
} }
nav ul:not(.dropdown-content) > li > a:hover:not(.active) {
background-color: var(--hover-color) !important;
}

13
styles/colors/defaults.css
View file

@ -42,15 +42,24 @@
--primary-color-numeric: 255, 134, 57 !important; --primary-color-numeric: 255, 134, 57 !important;
--primary-color-raised-hover-solid: rgba(252, 162, 133) !important; --primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
--primary-color-raised-focus-solid: rgba(221, 106, 59) !important; --primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
--primary-color-gradient: linear-gradient(
43deg,
var(--primary-color-dark) 0%,
var(--primary-color) 62%,
var(--primary-color-raised-hover-solid) 100%
) !important;
--secondary-color-lighter: rgba(221, 106, 59) !important;
--secondary-color: rgba(190, 80, 1) !important; --secondary-color: rgba(190, 80, 1) !important;
--secondary-color-dark: rgba(159, 55, 0) !important;
--secondary-color-hover-solid: rgba(252, 162, 133) !important; --secondary-color-hover-solid: rgba(252, 162, 133) !important;
--secondary-color-focus-solid: rgba(159, 55, 0) !important; --secondary-color-focus-solid: rgba(159, 55, 0) !important;
--font-on-secondary-container-color: rgba(255, 255, 255) !important; --font-on-secondary-container-color: rgba(255, 255, 255) !important;
--hover-color: rgba(255, 255, 255, 0.04) !important; --hover-color: rgba(255, 255, 255, 0.3) !important;
--focus-color: rgba(255, 134, 57,.4) !important; --focus-color: rgba(255, 134, 57,.4) !important;
--focus-color-solid: #424242 !important; --focus-color-solid: #424242 !important;
--active-color: rgba(255, 134, 57,.7) !important;
--background-color-disabled: rgba(255, 255, 255, 0.12) !important; --background-color-disabled: rgba(255, 255, 255, 0.12) !important;
--background-color-level-4dp: rgba(255, 255, 255, 0.09) !important; --background-color-level-4dp: rgba(255, 255, 255, 0.09) !important;
@ -65,8 +74,6 @@
--slider-track-color: rgba(255, 255, 255, 0.26) !important; --slider-track-color: rgba(255, 255, 255, 0.26) !important;
--switch-thumb-off-color: #bababa !important; --switch-thumb-off-color: #bababa !important;
--secondary-container-color: rgba(221, 106, 59) !important; --secondary-container-color: rgba(221, 106, 59) !important;
--md_sys_color_on-surface: 230, 225, 229 !important; --md_sys_color_on-surface: 230, 225, 229 !important;

1
styles/fonts/all.css
View file

@ -1,4 +1,5 @@
@import url("/styles/fonts/all.article.css"); @import url("/styles/fonts/all.article.css");
@import url("/styles/fonts/all.navbar.css");
.collapsible > li > header { .collapsible > li > header {
font-weight: bold; font-weight: bold;

4
styles/fonts/all.navbar.css Normal file
View file

@ -0,0 +1,4 @@
nav .brand-logo {
font-size: 1.25rem !important;
font-weight: bold;
}

13
styles/layouts/all.collapsible.css Normal file
View file

@ -0,0 +1,13 @@
.collapsible {
border: none !important;
}
.collapsible > li {
border: 1px solid var(--separator-color);
border-bottom-width: 0px;
}
.collapsible > li:last-child {
border-bottom-width: 1px;
}

2
styles/layouts/all.css
View file

@ -1,4 +1,6 @@
@import url("/styles/layouts/all.inputs.css"); @import url("/styles/layouts/all.inputs.css");
@import url("/styles/layouts/all.collapsible.css");
@import url("/styles/layouts/all.navbar.css");
fieldset { fieldset {
padding: 2em !important; padding: 2em !important;

24
styles/layouts/all.navbar.css Normal file
View file

@ -0,0 +1,24 @@
nav .brand-logo {
position: relative !important;
margin-top: auto !important;
margin-bottom: auto !important;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
nav .brand-logo > * {
margin-top: auto !important;
margin-bottom: auto !important;
}
nav .brand-logo > * {
margin-left: .5em !important;
}
nav .brand-logo img {
--dimension: 1.5rem;
height: var(--dimension) !important;
width: var(--dimension) !important;
}