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

rework sidebar

Browse source 
It now works out of the box! No special tinkering required!
This commit is contained in:
buzzcode2007 2024-04-02 23:21:38 +08:00
parent 20da1c32b7
commit 4cebf541c0
3 changed files with 432 additions and 488 deletions
Download patch file Download diff file Expand all files Collapse all files

27
gui/pages/settings/filters.htm
View file

@ -9,26 +9,33 @@
<body> <body>
<main class="dual"> <main class="dual">
<side class="side sidebar"> <ul id="slide-out" class="sidenav sidenav-fixed" name="control">
<nav class="nav-wrapper"> <li>
<ul class="left">
<li for="extension_name" class="flow-text"></li> <li for="extension_name" class="flow-text"></li>
</li>
<li>
<div class="input-field">
<input type="search" data-result="filters" data-results-filters="name,url" placeholder=" "></input>
<label for="settings_filters_search_prompt"></label>
</div>
</li>
<div data-results-target="filters">
</div>
</ul> </ul>
<ul class="hide-on-med-and-up right"> <!--
<li><a data-icon="chevron-left" data-action="ui,close,navbar"></a></li> <side class="side sidebar">
</ul>
</nav>
<div class="input-field outlined"> <div class="input-field outlined">
<input type="search" data-result="filters" placeholder=" "></input> <input type="search" data-result="filters" placeholder=" "></input>
<label for="settings_filters_search_prompt"></label> <label for="settings_filters_search_prompt"></label>
</div> </div>
<div class="collection" data-results-target="filters" data-results-filters="url"> <div class="collection" data-results-target="filters" >
</div> </div>
</side> </side>-->
<section> <section>
<nav class="nav-wrapper"> <nav class="nav-wrapper">
<ul class="left"> <ul class="left">
<li><a class="hide-on-med-and-up" data-icon="menu" data-action="ui,open,navbar"></a></li> <li><a class="hide-on-med-and-up" data-icon="menu" works-sidebar="control"></a></li>
</ul> </ul>
<ul class="right"> <ul class="right">
<li><a data-icon="trash-can" data-action="filters,delete,one"></a></li> <li><a data-icon="trash-can" data-action="filters,delete,one"></a></li>

51
gui/scripts/windowman.JS
View file

@ -383,55 +383,28 @@ export default class windowman {
// Responsiveness to different screen sizes. // Responsiveness to different screen sizes.
function resize() { function resize() {
function sidebar() { function sidebar() {
if (document.querySelector(`.sidebar`)) {
if (window.innerWidth < 600) { if (document.querySelector(`.sidenav`)) {
document (document.querySelectorAll(`.sidenav`)).forEach(function (sidebar_element) {
.querySelector(`.sidebar`) if (sidebar_element.getAttribute(`name`)) {
.style.setProperty(`display`, `none`); document.querySelector(`[works-sidebar="${sidebar_element.getAttribute(`name`)}"]`)
document
.querySelector(`.sidebar`)
.style.setProperty(`position`, `fixed`);
} else {
document
.querySelector(`.sidebar`)
.style.removeProperty(`display`);
document
.querySelector(`.sidebar`)
.style.removeProperty(`position`);
}
if (document.querySelector(`[data-action="ui,close,navbar"]`)) {
document
.querySelector(`[data-action="ui,close,navbar"]`)
.addEventListener(`click`, function () { .addEventListener(`click`, function () {
if (document.querySelector(`.sidebar`)) { M.Sidenav.getInstance(sidebar_element).open();
document });
.querySelector(`.sidebar`) } else if (document.querySelector(`[data-action="ui,open,navbar"]`)) {
.style.removeProperty("display"); document.querySelector(`[data-action="ui,open,navbar"]`).forEach(function (button_element) {
document button_element.addEventListener(`click`, function() {
.querySelector(`.sidebar`) M.Sidenav.getInstance(sidebar).open();
.style.removeProperty("position"); });
}
}); });
} }
if (document.querySelector(`[data-action="ui,open,navbar"]`)) {
document
.querySelector(`[data-action="ui,open,navbar"]`)
.addEventListener(`click`, function () {
document
.querySelector(`.sidebar`)
.style.setProperty("display", "block");
document
.querySelector(`.sidebar`)
.style.setProperty("position", "fixed");
}); });
} }
} }
}
sidebar(); sidebar();
} }
window.addEventListener("resize", resize);
resize(); resize();
search(); search();
links(); links();

38
gui/styles/ui.css
View file

@ -24,7 +24,7 @@
--surface-color: #000000 !important; --surface-color: #000000 !important;
--font-color-main: rgba(255, 255, 255) !important; --font-color-main: rgba(255, 255, 255) !important;
--font-color-medium: rgba(255, 255, 255) !important; --font-color-medium: rgba(200, 200, 200) !important;
--font-color-disabled: rgba(255, 255, 255) !important; --font-color-disabled: rgba(255, 255, 255) !important;
--font-on-primary-color-main: rgba(255, 255, 255) !important; --font-on-primary-color-main: rgba(255, 255, 255) !important;
@ -164,42 +164,6 @@ nav .input-field label {
position: sticky; position: sticky;
z-index: 10; z-index: 10;
} }
@media screen and (min-width: 600px) {
.dual {
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.dual .side {
width: 37%;
}
.dual > *:not(.side) {
flex-grow: 1;
}
}
@media screen and (min-width: 1000px) {
.dual > * {
transition: 0.1s ease-in-out;
}
.dual .side {
width: 25%;
}
}
.author { .author {
font-weight: italic; font-weight: italic;
} }
@media screen and (max-width: 600px) {
.sidebar {
display: none;
z-index: 20;
width: 100%;
}
}