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>
<main class="dual">
<side class="side sidebar">
<nav class="nav-wrapper">
<ul class="left">
<ul id="slide-out" class="sidenav sidenav-fixed" name="control">
<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 class="hide-on-med-and-up right">
<li><a data-icon="chevron-left" data-action="ui,close,navbar"></a></li>
</ul>
</nav>
<!--
<side class="side sidebar">
<div class="input-field outlined">
<input type="search" data-result="filters" placeholder=" "></input>
<label for="settings_filters_search_prompt"></label>
</div>
<div class="collection" data-results-target="filters" data-results-filters="url">
<div class="collection" data-results-target="filters" >
</div>
</side>
</side>-->
<section>
<nav class="nav-wrapper">
<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 class="right">
<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.
function resize() {
function sidebar() {
if (document.querySelector(`.sidebar`)) {
if (window.innerWidth < 600) {
document
.querySelector(`.sidebar`)
.style.setProperty(`display`, `none`);
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"]`)
if (document.querySelector(`.sidenav`)) {
(document.querySelectorAll(`.sidenav`)).forEach(function (sidebar_element) {
if (sidebar_element.getAttribute(`name`)) {
document.querySelector(`[works-sidebar="${sidebar_element.getAttribute(`name`)}"]`)
.addEventListener(`click`, function () {
if (document.querySelector(`.sidebar`)) {
document
.querySelector(`.sidebar`)
.style.removeProperty("display");
document
.querySelector(`.sidebar`)
.style.removeProperty("position");
}
M.Sidenav.getInstance(sidebar_element).open();
});
} else if (document.querySelector(`[data-action="ui,open,navbar"]`)) {
document.querySelector(`[data-action="ui,open,navbar"]`).forEach(function (button_element) {
button_element.addEventListener(`click`, function() {
M.Sidenav.getInstance(sidebar).open();
});
});
}
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();
}
window.addEventListener("resize", resize);
resize();
search();
links();

38
gui/styles/ui.css
View file

@ -24,7 +24,7 @@
--surface-color: #000000 !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-on-primary-color-main: rgba(255, 255, 255) !important;
@ -164,42 +164,6 @@ nav .input-field label {
position: sticky;
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 {
font-weight: italic;
}
@media screen and (max-width: 600px) {
.sidebar {
display: none;
z-index: 20;
width: 100%;
}
}