Skip to content

Commit

Permalink
Migrate to Bootstrap v5 (#8)
Browse files Browse the repository at this point in the history
  • Loading branch information
@toehead2001
toehead2001 authored Mar 17, 2024
1 parent 93bf749 commit c43d1f1
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 110 deletions.
9 changes: 4 additions & 5 deletions css/bootstrap.min.css
View file

Large diffs are not rendered by default.

19 changes: 12 additions & 7 deletions css/pdnpi-v2.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,13 @@
@mixin row() {
display: flex !important;
flex-wrap: wrap !important;
display: -ms-flexbox !important;
-ms-flex-wrap: wrap !important;
}

@mixin flex-column() {
flex-direction: column !important;
}

@mixin d-flex() {
display: -ms-flexbox !important;
display: flex !important;
}

Expand Down Expand Up @@ -65,6 +62,14 @@ body {
font-family: 'Open Sans', sans-serif;
padding-top: 56px;

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

nav {
border-top: 1px solid #a3a7a9;
}
Expand Down Expand Up @@ -108,9 +113,6 @@ body {
height: 50px;
background-color: #3498db;
text-indent: -9999px;
display: none;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
z-index: 1000;

Expand All @@ -127,11 +129,14 @@ body {
}
}

#scroll:not(.show) {
display: none;
}

#scroll:hover {
background-color: #e74c3c;
opacity: 1;
filter: "alpha(opacity=100)";
-ms-filter: "alpha(opacity=100)";
}

#search-menu {
Expand Down
167 changes: 85 additions & 82 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,28 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/pdnpi-v2.css?v={{ site.time | date_to_xmlschema }}" />
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script async src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script async src="js/pdnpi-v3.js?v={{ site.time | date_to_xmlschema }}" type="text/javascript"></script>

<!-- Analytics -->
<script defer data-domain="mattw.io" src="https://plausible.io/js/plausible.js"></script>
</head>
<body>
<a href="#" id="scroll" style="display: none;"><span></span></a>
<a href="#" id="scroll" class="fade"><span></span></a>
<nav style="background-color: #375476!important;top: -1px!important;"
class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/icon-small.png" width="30" height="30" class="d-inline-block align-top" alt="Icon" />
<span id="brand-lg">{{ page.title_lg }}</span>
<span id="brand-sm">{{ page.title_sm }}</span>
</a>
<ul class="navbar-nav ml-auto">
<ul class="navbar-nav ms-auto">
<li class="navbar-text">
<small>Revision Date: {{ page.revision }}</small>
</li>
</ul>
</div>
</nav>
<div id="about" class="col">
This application simplifies locating Paint.NET plugins by searching the Plugin Index.
Expand All @@ -52,107 +53,107 @@
<div class="container-fluid justify-content-center">
<div class="row">
<div id="search-menu" class="col-md-3" style="margin:0;">
<label class="block-title" for="keywords">Search Options</label>
<div class="control input-group mb-2 mr-sm-2 mb-sm-0">
<label class="form-label block-title" for="keywords">Search Options</label>
<div class="control input-group mb-2 me-sm-2 mb-sm-0">
<input type="text" class="form-control" id="keywords" placeholder="Keywords" value="">
</div>

<div class="selector">
<label class="menu-label" for="author">Author</label>
<select id="author" class="control custom-select">
<label class="form-label" for="author">Author</label>
<select id="author" class="form-select">
<option value="0" selected>All Authors</option>
</select>
</div>

<label class="menu-label">Plugin Type</label>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkAll">
<label class="custom-control-label" for="checkAll">All Types</label>
<label class="form-label">Plugin Type</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkAll">
<label class="form-check-label" for="checkAll">All Types</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkEffect">
<label class="custom-control-label" for="checkEffect">Effect</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkEffect">
<label class="form-check-label" for="checkEffect">Effect</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkAdjustment">
<label class="custom-control-label" for="checkAdjustment">Adjustment</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkAdjustment">
<label class="form-check-label" for="checkAdjustment">Adjustment</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkFiletype">
<label class="custom-control-label" for="checkFiletype">Filetype</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkFiletype">
<label class="form-check-label" for="checkFiletype">Filetype</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkExternal">
<label class="custom-control-label" for="checkExternal">External</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkExternal">
<label class="form-check-label" for="checkExternal">External</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkPack">
<label class="custom-control-label" for="checkPack">Plugin Pack</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkPack">
<label class="form-check-label" for="checkPack">Plugin Pack</label>
</div>

<label class="menu-label">Plugin Status</label>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkAny">
<label class="custom-control-label" for="checkAny">Any Status</label>
<label class="form-label">Plugin Status</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkAny">
<label class="form-check-label" for="checkAny">Any Status</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkActive">
<label class="custom-control-label" for="checkActive">Active</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkActive">
<label class="form-check-label" for="checkActive">Active</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkNew">
<label class="custom-control-label" for="checkNew">Active (New)</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkNew">
<label class="form-check-label" for="checkNew">Active (New)</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkBundled">
<label class="custom-control-label" for="checkBundled">Active (Bundled)</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkBundled">
<label class="form-check-label" for="checkBundled">Active (Bundled)</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkDeprecated">
<label class="custom-control-label" for="checkDeprecated">Deprecated</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkDeprecated">
<label class="form-check-label" for="checkDeprecated">Deprecated</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkObsolete">
<label class="custom-control-label" for="checkObsolete">Obsolete</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkObsolete">
<label class="form-check-label" for="checkObsolete">Obsolete</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkIncompatible">
<label class="custom-control-label" for="checkIncompatible">Incompatible</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkIncompatible">
<label class="form-check-label" for="checkIncompatible">Incompatible</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkUnsupported">
<label class="custom-control-label" for="checkUnsupported">Unsupported</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkUnsupported">
<label class="form-check-label" for="checkUnsupported">Unsupported</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkIntegrated">
<label class="custom-control-label" for="checkIntegrated">Integrated</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkIntegrated">
<label class="form-check-label" for="checkIntegrated">Integrated</label>
</div>

<label class="menu-label">Plugin Compatibility</label>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkAnyVersion">
<label class="custom-control-label" for="checkAnyVersion">Any Version</label>
<label class="form-label">Plugin Compatibility</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkAnyVersion">
<label class="form-check-label" for="checkAnyVersion">Any Version</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="check5x">
<label class="custom-control-label" for="check5x">Current Version (5.x)</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="check5x">
<label class="form-check-label" for="check5x">Current Version (5.x)</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="check4x">
<label class="custom-control-label" for="check4x">Legacy (4.x)</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="check4x">
<label class="form-check-label" for="check4x">Legacy (4.x)</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="check3x">
<label class="custom-control-label" for="check3x">Legacy (3.5x)</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="check3x">
<label class="form-check-label" for="check3x">Legacy (3.5x)</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkUntested">
<label class="custom-control-label" for="checkUntested">Untested</label>
<div class=form-check>
<input type="checkbox" class="form-check-input" id="checkUntested">
<label class="form-check-label" for="checkUntested">Untested</label>
</div>

<div class="selector">
<label class="menu-label" for="order">Order</label>
<select id="order" class="control custom-select">
<label class="form-label" for="order">Order</label>
<select id="order" class="form-select">
<option value="title" selected>By Title</option>
<option value="release">By Release</option>
<option value="author">By Author</option>
Expand All @@ -161,14 +162,14 @@
</select>
</div>
<div class="selector">
<label class="menu-label" for="menu-list">Menu</label>
<select id="menu-list" class="control custom-select">
<label class="form-label" for="menu-list">Menu</label>
<select id="menu-list" class="form-select">
<option value="0" selected>All Menus</option>
</select>
</div>
<div class="selector">
<label class="menu-label" for="release">Release</label>
<select id="release" class="control custom-select">
<label class="form-label" for="release">Release</label>
<select id="release" class="form-select">
<option value="0" selected>Any Time</option>
<option value="1">Past 6 Months</option>
<option value="2">Past Year</option>
Expand All @@ -177,7 +178,7 @@
</div>
<button id="permalink-button" type="button" class="btn btn-primary btn-md">Copy Permanent Link</button>
<div class="position-fixed bottom-0 left-0 p-3" style="z-index: 5; left: 0; bottom: 0;">
<div id="copiedToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<div id="copiedToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
<div class="toast-body">
</div>
</div>
Expand All @@ -188,16 +189,18 @@
<div class="col" style="padding-right: 0;padding-left: 0;">
<div class="row justify-content-between">
<div class="col">
<label class="block-title">Plugin Listing</label>
<label class="form-label block-title">Plugin Listing</label>
<!--
<span id="spinner" class="text-center">
<span class="spinner-border text-primary" role="status"
style="width: 1.35rem; height: 1.35rem;">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</span>
</span>
-->
</div>
<div class="col-auto">
<span id="count" class="badge badge-light">0 / 0</span>
<span id="count" class="badge bg-secondary">0 / 0</span>
</div>
</div>

Expand All @@ -212,8 +215,8 @@
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">
mattwright324 / Sigillatus | 2023 |
<span class="text-body-secondary">
mattwright324 / Sigillatus / toehead2001 | 2024 |
<a target="_blank" href="https://mattw.io">home</a> |
<a target="_blank" href="https://github.com/mattwright324/pdn-plugin-index">pdn-plugin-index</a> |
<a target="_blank" href="https://forums.getpaint.net/topic/15260-plugin-index/">forum post</a>
Expand Down
6 changes: 3 additions & 3 deletions js/bootstrap.bundle.min.js
View file

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions js/jquery-3.6.0.min.js
View file

This file was deleted.

Loading

0 comments on commit c43d1f1

Please sign in to comment.