Skip to content

Commit e2e5e99

Browse files
smashedrsmashedr
authored
Tweaks (#50)
* Tweaks * Tweaks * Fix Order * Set Charset * Cleanup * Update Text Breaks
1 parent f56f395 commit e2e5e99

File tree

7 files changed

+39
-32
lines changed

7 files changed

+39
-32
lines changed

‎src/css/popup.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,9 @@ input::placeholder,
88
textarea::placeholder {
99
text-align: center;
1010
}
11+
12+
.dropdown-menu {
13+
max-width: 100vw;
14+
white-space: normal;
15+
overflow: hidden;
16+
}

‎src/html/links.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4+
<meta charset="utf-8">
45
<title>Link Extractor</title>
56
<link rel="icon" href="../images/logo16.png" sizes="any">
67
<link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">

‎src/html/options.html

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4+
<meta charset="utf-8">
45
<title>Link Extractor Options</title>
56
<link rel="icon" href="../images/logo16.png" sizes="any">
67
<link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
@@ -16,14 +17,15 @@
1617
<div class="col-xl-6 col-md-8 col-12 m-auto">
1718
<div class="card" >
1819
<div class="card-body">
19-
<div class="justify-content-center align-items-center d-flex">
20-
<img src="../images/logo48.png" class="img-fluid float-start me-2" title="Link Extractor" alt="Link Extractor" height="48" width="48">
21-
<h1 class="align-middle">Link Extractor</h1>
20+
<div class="d-flex justify-content-center align-items-center">
21+
<img src="../images/logo48.png" class="me-2" height="48" width="48"
22+
alt="Link Extractor" title="Link Extractor">
23+
<h1>Link Extractor</h1>
2224
</div>
2325
<div class="clearfix"></div>
2426
<p class="text-center lead">v<span id="version"></span></p>
2527

26-
<table class="table table-sm table-borderless ">
28+
<table class="table table-sm table-borderless">
2729
<caption class="visually-hidden">Keyboard Shortcuts</caption>
2830
<thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
2931
<tbody>
@@ -38,10 +40,10 @@ <h1 class="align-middle">Link Extractor</h1>
3840
</tbody>
3941
</table>
4042

41-
<form id="options-form">
43+
<form id="options-form" class="mb-3">
4244
<label for="flags" class="form-label">Regex Flags</label>
4345
<a id="reset-default" class="float-end align-bottom small" role="button">Reset to Default</a>
44-
<input type="text" id="flags" class="form-control" aria-describedby="flagsHelp">
46+
<input type="text" id="flags" class="form-control form-control-sm" aria-describedby="flagsHelp">
4547
<div id="flagsInvalid" class="invalid-feedback">Invalid Regex Flags.</div>
4648
<div id="flagsHelp" class="form-text mb-3">
4749
Flags used when using a filter.
@@ -77,8 +79,6 @@ <h1 class="align-middle">Link Extractor</h1>
7779
</div>
7880
</form>
7981

80-
<hr>
81-
8282
<form id="filters-form">
8383
<div class="input-group mb-3">
8484
<input type="text" class="form-control" placeholder="Add Filter" aria-label="Filter" id="add-filter" aria-describedby="add-filter-btn">
@@ -87,18 +87,16 @@ <h1 class="align-middle">Link Extractor</h1>
8787
</button>
8888
</div>
8989
</form>
90-
<div class="table-responsive">
91-
<table id="filters-table" class="table table-sm table-hover bg-transparent">
92-
<caption>Saved Filters</caption>
93-
<thead><tr>
94-
<th scope="col" class="text-center" style="width: 36px;">
95-
<i class="fa-solid fa-trash-can"></i>
96-
</th>
97-
<th scope="col">Filter</th>
98-
</tr></thead>
99-
<tbody></tbody>
100-
</table>
101-
</div>
90+
<table id="filters-table" class="table table-sm table-hover bg-transparent">
91+
<caption>Saved Filters</caption>
92+
<thead><tr>
93+
<th scope="col" class="text-center" style="width: 36px;">
94+
<i class="fa-solid fa-trash-can"></i>
95+
</th>
96+
<th scope="col">Filter</th>
97+
</tr></thead>
98+
<tbody></tbody>
99+
</table>
102100

103101
<div class="text-center mb-3">
104102
<a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"

‎src/html/popup.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4+
<meta charset="utf-8">
45
<title>Link Extractor</title>
56
<link rel="icon" href="../images/logo16.png" sizes="any">
67
<link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
@@ -14,11 +15,11 @@
1415
<div class="container-fluid p-3">
1516
<div class="d-grid g-2 gap-2">
1617
<div class="btn-group btn-group-sm" role="group" aria-label="Button group with nested dropdown">
17-
<a role="button" class="btn btn-success btn-sm" data-filter="">
18+
<a role="button" class="btn btn-sm btn-success" data-filter="">
1819
<i class="fa-solid fa-link me-1"></i> All Links</a>
1920
<div class="btn-group" role="group">
20-
<a role="button" class="btn btn-outline-success btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Filters</a>
21-
<ul id="filters-ul" class="dropdown-menu small">
21+
<a role="button" class="btn btn-sm btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Filters</a>
22+
<ul id="filters-ul" class="dropdown-menu">
2223
<li id="no-filters"><a class="dropdown-item" href="../html/options.html">Add Saved Filters</a></li>
2324
</ul>
2425
</div>
@@ -56,10 +57,10 @@
5657
</form>
5758
</div>
5859

59-
<a class="btn btn-outline-info btn-sm" role="button" href="../html/options.html">
60+
<a class="btn btn-sm btn-outline-info" role="button" href="../html/options.html">
6061
<i class="fa-solid fa-sliders me-1"></i> Options</a>
61-
<div class=" d-flex justify-content-center align-items-center text-center small">
62-
<img class="" src="../images/logo16.png" alt="Link Extractor" width="16" height="16">
62+
<div class="d-flex justify-content-center align-items-center text-center small">
63+
<img class="" src="../images/logo16.png" width="16" height="16" alt="Link Extractor" title="Link Extractor">
6364
<a class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover mx-2" type="button" rel="noopener"
6465
id="homepage_url" href="">Link Extractor</a> v<span id="version"></span>
6566
</div>

‎src/js/links.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const dtOptions = {
2525
processing: true,
2626
saveState: true,
2727
bSort: true,
28-
order: [0, 'desc'],
28+
order: [[0, 'asc']],
2929
pageLength: -1,
3030
lengthMenu: [
3131
[10, 25, 50, 100, 250, -1],

‎src/js/options.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ function updateTable(data) {
110110
button.setAttribute('role', 'button')
111111
button.addEventListener('click', deleteHost)
112112
const cell1 = row.insertCell()
113-
cell1.classList.add('text-center')
113+
cell1.classList.add('text-center', 'align-middle')
114114
cell1.appendChild(button)
115115

116116
const link = document.createElement('a')
@@ -125,6 +125,7 @@ function updateTable(data) {
125125
)
126126
link.setAttribute('role', 'button')
127127
const cell2 = row.insertCell()
128+
cell2.classList.add('text-break')
128129
cell2.appendChild(link)
129130
})
130131
}

‎src/js/popup.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ document.getElementById('filter-form').addEventListener('submit', filterForm)
77
document.getElementById('links-form').addEventListener('submit', linksForm)
88
document.getElementById('links-text').addEventListener('input', updateLinks)
99

10-
document
11-
.querySelectorAll('[data-filter]')
12-
.forEach((el) => el.addEventListener('click', filterForm))
1310
document
1411
.querySelectorAll('a[href]')
1512
.forEach((el) => el.addEventListener('click', popupLinks))
13+
document
14+
.querySelectorAll('[data-filter]')
15+
.forEach((el) => el.addEventListener('click', filterForm))
1616
document
1717
.querySelectorAll('#options-form input')
1818
.forEach((el) => el.addEventListener('change', saveOptions))
@@ -59,7 +59,7 @@ function createFilterLink(number, value = '') {
5959
const a = document.createElement('a')
6060
a.textContent = value
6161
a.dataset.pattern = value
62-
a.classList.add('dropdown-item', 'small')
62+
a.classList.add('dropdown-item', 'small', 'text-break')
6363
a.setAttribute('role', 'button')
6464
a.addEventListener('click', filterForm)
6565
li.appendChild(a)

0 commit comments

Comments
 (0)