Suggestions for the new Pamac layout, based on v.10.0.2-1.
No I’m not suggesting the color #yellow ^^
Layout
The idea is to:
- have a unique responsive layout for desktop/mobile
- keep a consistent layout (no disappearing nav bar)
- keep a consistent left alignment within the package section
- keep a consistent placement of buttons:
- navigation buttons into the navigation bar
- action buttons to the right of the Package section (in desktop view)
For each screen that needed retouching you’ll find:
- a screenshot comparing side by side a mobile (vertical) view and a desktop (hozirontal) view
- the sourcecode (to be saved as a standalone
*.html
file and opened in a browser for testing).
It contains HTML, CSS and javascript for the Filters bar toggle function, no external file is called. I don’t know how to develop UI for GTK. Only tested on Firefox, other browsers might display inconsistencies in sizes, margin, padding etc.
The main (browse) screen and the Installed screen
Sourcecode (save as a *.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<title>pamac v10 - Browse / Installed</title>
<style>
body {
background-color: black;
color: yellow;
}
h1, h2, hr, p, label, 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;
}
p {
font-size: 120%;
}
label {
font-size: 120%;
}
select {
margin: 5px 5px 5px 0;
}
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-bar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #1b2224;
}
.nav {
text-align: center;
width: 100%;
}
#filters-container {
display: none;
background-color: #222b2e;
}
.filter-wrapper {
padding: 5px 10px;
display: inline-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;
}
</style>
</head>
<body>
<div class="titlebar">
<h2>Title bar</h2>
</div>
<div class="nav-bar">
<div class="btn-filter-wrapper">
<button class="btn btn-pkg-active" onclick="ToggleFilters();">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 id="filters-container">
<div class="filter-wrapper">
<label for="BrowseBy">Browse by...</label><br />
<select id="BrowseBy">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="filter-wrapper">
<label for="View">View...</label><br />
<select id="View">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="filter-wrapper">
<label for="SortBy">Sort by...</label><br />
<select id="SortBy">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
</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-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-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-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-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
</div>
<div class="footer">
<button class="btn btn-inactive">Cancel</button>
<button class="btn btn-inactive">Apply</button>
<button class="btn btn-inactive">></button>
</div>
<script>
function ToggleFilters() {
var x = document.getElementById("filters-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
The title bar doesn’t contain nav buttons anymore. They have been moved to the nav bar. I think it’s just weird to have nav buttons in a title bar.
The navigation bar contains two elements:
- to the left, a button to toggle the display of the Filters bar
- in the middle, navigation buttons.
About the toggable Filters bar
- With Pamac v9, the filters options were directly visible. A single click allowed to select an option. Cost a big chunk of screen space.
- With Pamac v10, the filters options are not directly visible anymore. We need two clicks to select an option (first click to open the drop-down menu, second click to select the option). Lower usability, but also lower screen space cost.
- With a toggable Filters bar, we now need three clicks to select an option (first to toggle the Filters bar visibility, second to open the drop-down menu, third to select the option).
I thought about using a radio buttons list rather than a drop down menu, to save one click, but this would take quite a bit of screen space.
So even though the usability is worse, the idea is that we don’t use the filters often enough to justify their permanent display. The screen space cost is mininal.
Updates screen (up to date)
Sourcecode (save as *.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pamac v10 - Updates (up to date)</title>
<style>
body {
background-color: black;
color: yellow;
}
h1, h2, hr, p, label, table, tr, td {
font-family: sans-serif;
color: yellow;
}
h1 {
text-align: center;
margin: 300px 0;
}
h2 {
text-align: left;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
hr {
border: 1px dashed yellow;
margin: 10px 0;
}
p {
font-size: 120%;
}
label {
font-size: 120%;
}
select {
margin: 5px 5px 5px 0;
}
table, tr, td {
margin: 0;
padding: 0;
}
td {
padding: 5px;
}
.titlebar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #141a1b;
}
.nav-bar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #1b2224;
}
.nav {
text-align: center;
width: 100%;
}
#filters-container {
display: none;
background-color: #222b2e;
}
.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;
}
.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 {
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;
}
</style>
</head>
<body>
<div class="titlebar">
<h2>Title bar</h2>
</div>
<div class="nav-bar">
<div class="btn-filter-wrapper">
<button class="btn btn-inactive">Y</button>
</div>
<div class="nav">
<button class="btn btn-inactive">Browse</button><button class="btn btn-inactive">Installed</button><button class="btn btn-nav-active">Updates</button>
</div>
</div>
<div class="pkg-section">
<div class="refresh">Last refresh: 12:34 <button class="btn btn-pkg-active">Refresh</button></div>
<h1>Your system is up to date</h1>
</div>
<div class="footer">
<button class="btn btn-inactive">Cancel</button>
<button class="btn btn-inactive">Apply</button>
<button class="btn btn-inactive">></button>
</div>
<script>
function ToggleFilters() {
var x = document.getElementById("filters-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
- The Filters bar toggle button is disabled here (because there is no data to filter) but still visible, on purpose.
- The “Refresh” stuff moves to top right of the Package section.
- The “Refresh” button background-color becomes “active” (trying to keep a consistent color-code, grey/black means “inactive”).
Package Details screen
Sourcecode (save as a *.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pamac v10 - Package details</title>
<style>
body {
background-color: black;
color: yellow;
}
h1, h2, hr, p, label, 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;
}
p {
font-size: 120%;
}
label {
font-size: 120%;
}
select {
margin: 5px 5px 5px 0;
}
table, tr, td {
margin: 0;
padding: 0;
}
td {
padding: 5px;
}
.bold {
font-weight: bold;
}
.titlebar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #141a1b;
}
.nav-bar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #1b2224;
}
.nav {
text-align: center;
width: 100%;
}
#filters-container {
display: none;
background-color: #222b2e;
}
.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;
}
</style>
</head>
<body>
<div class="titlebar">
<h2>Title bar</h2>
</div>
<div class="nav-bar">
<div class="btn-filter-wrapper">
<button class="btn btn-inactive">Y</button>
</div>
<div class="nav">
<button class="btn btn-pkg-active">Details</button><button class="btn btn-pkg-inactive">Dependencies</button><button class="btn btn-pkg-inactive">Files</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-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-details">
<div class="pkg-image">
<h1>Package<br />image</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#">https://manjaro.org</a></p>
<p><span class="bold">Licenses:</span> Lorem ipsum</p>
<p><span class="bold">Repository:</span> Lorem ipsum</p>
<p><span class="bold">Packager:</span> Lorem ipsum</p>
<p><span class="bold">Build date:</span> Lorem ipsum</p>
<p><span class="bold">Install date:</span> Lorem ipsum</p>
<p><span class="bold">Install reason:</span> Lorem ipsum</p>
<p><span class="bold">Signature:</span> Lorem ipsum</p>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<button class="btn btn-inactive">Cancel</button>
<button class="btn btn-inactive">Apply</button>
<button class="btn btn-inactive">></button>
</div>
<script>
function ToggleFilters() {
var x = document.getElementById("filters-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
- Changed alignments
- Moved buttons
Package Dependencies screen
Sourcecode (save as a *.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pamac v10 - Package Dependencies</title>
<style>
body {
background-color: black;
color: yellow;
}
h1, h2, hr, p, label, 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;
}
p {
font-size: 120%;
}
label {
font-size: 120%;
}
select {
margin: 5px 5px 5px 0;
}
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-bar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #1b2224;
}
.nav {
text-align: center;
width: 100%;
}
#filters-container {
display: none;
background-color: #222b2e;
}
.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;
}
</style>
</head>
<body>
<div class="titlebar">
<h2>Title bar</h2>
</div>
<div class="nav-bar">
<div class="btn-filter-wrapper">
<button class="btn btn-inactive">Y</button>
</div>
<div class="nav">
<button class="btn btn-pkg-inactive">Details</button><button class="btn btn-pkg-active">Dependencies</button><button class="btn btn-pkg-inactive">Files</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-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-details">
<table>
<tbody>
<tr>
<td class="bold" rowspan="4">Depends on:</td>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td class="bold" rowspan="4">Optional Dependencies:</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><button class="btn btn-pkg-active">Install</button></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><button class="btn btn-pkg-active">Install</button></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><button class="btn btn-pkg-active">Install</button></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><button class="btn btn-pkg-active">Install</button></td>
</tr>
<tr>
<td class="bold" rowspan="4">Make Dependencies:</td>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td class="bold" rowspan="4">Required By:</td>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<button class="btn btn-inactive">Cancel</button>
<button class="btn btn-inactive">Apply</button>
<button class="btn btn-inactive">></button>
</div>
<script>
function ToggleFilters() {
var x = document.getElementById("filters-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
- Changed alignments
- Moved buttons
- Changed the Optional dependencies Install button background color to “active”.
Package Files screen
Sourcecode (save as a *.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pamac v10 - Package Files</title>
<style>
body {
background-color: black;
color: yellow;
}
h1, h2, hr, p, label, 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;
}
p {
font-size: 120%;
}
label {
font-size: 120%;
}
select {
margin: 5px 5px 5px 0;
}
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-bar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #1b2224;
}
.nav {
text-align: center;
width: 100%;
}
#filters-container {
display: none;
background-color: #222b2e;
}
.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;
}
</style>
</head>
<body>
<div class="titlebar">
<h2>Title bar</h2>
</div>
<div class="nav-bar">
<div class="btn-filter-wrapper">
<button class="btn btn-inactive">Y</button>
</div>
<div class="nav">
<button class="btn btn-pkg-inactive">Details</button><button class="btn btn-pkg-inactive">Dependencies</button><button class="btn btn-pkg-active">Files</button>
</div>
</div>
<div class="pkg-section">
<!-- pkg row starts -->
<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-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-details">
<p>/usr/bin/firefox</p>
<p>/usr/lib/firefox/Throbber-small.gif</p>
<p>/usr/lib/firefox/browser/chrome/icons/default/default128.png</p>
<p>/usr/lib/firefox/browser/chrome/icons/default/default16.png</p>
<p>/usr/lib/firefox/browser/chrome/icons/default/default32.png</p>
<p>/usr/lib/firefox/browser/chrome/icons/default/default48.png</p>
<p>/usr/lib/firefox/browser/chrome/icons/default/default64.png</p>
<p>/usr/lib/firefox/browser/crashreporter-override.ini</p>
<p>/usr/lib/firefox/browser/defaults/preferences/vendor.js</p>
<p>/usr/lib/firefox/browser/features/doh-rollout@mozilla.org.xpi</p>
<p>/usr/lib/firefox/browser/features/formautofill@mozilla.org.xpi</p>
<p>/usr/lib/firefox/browser/features/screenshots@mozilla.org.xpi</p>
<p>/usr/lib/firefox/browser/features/webcompat-reporter@mozilla.org.xpi</p>
<p>/usr/lib/firefox/browser/features/webcompat@mozilla.org.xpi</p>
<p>/usr/lib/firefox/browser/omni.ja</p>
<p>/usr/lib/firefox/crashreporter</p>
<p>/usr/lib/firefox/crashreporter.ini</p>
<p>/usr/lib/firefox/defaults/pref/channel-prefs.js</p>
<p>/usr/lib/firefox/dependentlibs.list</p>
<p>/usr/lib/firefox/distribution/distribution.ini</p>
<p>/usr/lib/firefox/firefox</p>
<p>/usr/lib/firefox/firefox-bin</p>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<button class="btn btn-inactive">Cancel</button>
<button class="btn btn-inactive">Apply</button>
<button class="btn btn-inactive">></button>
</div>
<script>
function ToggleFilters() {
var x = document.getElementById("filters-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
- Changed alignments
- Moved buttons
Feedback welcome.