Suggestion of a Collapsible Filters Sidebar for pamac, based on v.10.0.3-4.
I previously suggested a toggable horizontal filters bar, but this is better 
.
I saw this on Manjaro Gitlab, look at that neat collapsible menu sidebar Applications / pamac-qt · GitLab
It has three states, auto-toggling based on screen width (from left to right on the screenshot):
- Collapsed (displaying a trigram)
- Iconified
- Extended
For Pamac, two states would probably be enough.
Having all filters options directly visible (not “hidden” in a drop-down menu) provides a better experience for desktop users (comparable to pamac v.9) and is compatible with mobile users (here the sidebar is about 250px width).
I’m wary of the automatic toggle though, might be preferable to allow users to set a preference to override.
To test the HTML/CSS/javascript mockup, save this to a *.html file and open in a web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>pamac v10.0.3-4 - Collapsible Filters Sidebar</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
color: yellow;
padding: 10px;
}
h1, h2, hr, p, fieldset, legend, table, tr, td {
font-family: sans-serif;
color: yellow;
}
h1 {
text-align: center;
}
h2 {
text-align: left;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
hr {
border: 1px dashed yellow;
margin: 10px 0;
}
a {
color: #31b396;
font-size: 120%;
}
p {
font-size: 120%;
}
fieldset {
border: 1px dashed yellow;
padding: 5px 10px 5px 10px;
background-color: #222b2e;
}
legend {
font-size: 120%;
padding: 0 10px;
white-space: nowrap;
}
table, tr, td {
margin: 0;
padding: 0;
}
td {
padding: 5px;
font-size: 120%;
height: 2em;
vertical-align: top;
border: 0 solid white;
}
.bold {
font-weight: bold;
}
.titlebar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #141a1b;
}
.nav {
text-align: center;
width: 100%;
}
.filter-wrapper {
padding: 5px 10px;
display: block;
}
.pkg-section {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #222b2e;
}
.pkg-icon {
float:left;
}
.pkg-infos {
float: left;
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-details {
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-image {
float: right;
width: 400px;
height: 400px;
border: 1px dashed yellow;
}
.refresh {
float: right;
}
.btn-container {
float: right;
border: 0 solid white;
}
.btn-filter-wrapper {
float: left;
border: 0 solid white;
}
.btn {
padding: 5px 10px;
margin: 5px;
display: inline-block;
cursor: pointer;
border: none;
border-radius: 5px;
}
.btn-nav-active {
background-color: #31b396;
color: white;
font-weight: bold;
}
.btn-pkg-active {
background-color: #48cc80;
color: white;
font-weight: bold;
}
.btn-pkg-red {
background-color: #dc5c5c;
color: white;
font-weight: bold;
}
.btn-inactive,
.btn-pkg-inactive,
.btn-nav-inactive {
background-color: #111a1b;
color: white;
font-weight: bold;
}
.clear {
clear: both;
}
.footer {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
text-align: right;
background-color: #1b2224;
}
/* Sidebar */
.sidebar {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - controlled with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 10px;
left: 10px;
background-color: #1b2224;
overflow-x: hidden; /* Disable horizontal scroll */
border: 1px solid yellow;
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
/* Sidebar links */
.sidebar a {
padding: 10px;
text-decoration: none;
display: block;
transition: 0.3s;
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 5px;
white-space: nowrap;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#right-wrapper {
transition: margin-left .5s;
background-color: red;
}
</style>
</head>
<body>
<div id="Sidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><< Collapse sidebar</a>
<div class="filter-wrapper">
<fieldset>
<legend>Browse by...</legend>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
</fieldset>
</div>
<div class="filter-wrapper">
<fieldset>
<legend>View...</legend>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
</fieldset>
</div>
<div class="filter-wrapper">
<fieldset>
<legend>Sort by...</legend>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
</fieldset>
</div>
</div>
<div id="right-wrapper">
<div class="titlebar">
<div class="btn-filter-wrapper">
<button class="btn btn-pkg-active" onclick="openNav()">Y</button>
</div>
<div class="nav">
<button class="btn btn-nav-active">Browse</button><button class="btn btn-nav-inactive">Installed</button><button class="btn btn-nav-inactive">Updates</button>
</div>
</div>
<div class="pkg-section">
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
</div>
<div class="footer">
<button class="btn btn-pkg-inactive">Cancel</button>
<button class="btn btn-pkg-inactive">Apply</button>
<button class="btn btn-nav-inactive">></button>
</div>
</div>
<script>
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("Sidebar").style.width = "250px";
document.getElementById("right-wrapper").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("Sidebar").style.width = "0";
document.getElementById("right-wrapper").style.marginLeft = "0";
}
</script>
</body>
</html>
Tested on Firefox only. Other browsers might display inconsistencies.