Skip to content

Commit 82beb7c

Browse files
seproDevseproDev
committed
Improve responsive design
1 parent 6919763 commit 82beb7c

7 files changed

Lines changed: 51 additions & 21 deletions

File tree

‎src/_layouts/base.njk‎

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,45 @@
99
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark shadow">
1010
<div class="container-fluid">
1111
<a class="navbar-brand" href="{{ "/" | url }}">DepCtrl Browser</a>
12-
<ul class="navbar-nav me-auto mb-2 mb-md-0">
13-
<li class="nav-item">
14-
<a class="nav-link{% if '/' === page.url %} active{% endif %}" href="{{ "/" | url }}">Home</a>
15-
</li>
16-
<li class="nav-item">
17-
<a class="nav-link{% if '/feeds/' === page.url %} active{% endif %}" href="{{ "/feeds/" | url }}">Feeds</a>
18-
</li>
19-
<li class="nav-item">
20-
<a class="nav-link{% if '/macros/' === page.url %} active{% endif %}" href="{{ "/macros/" | url }}">Macros</a>
21-
</li>
22-
<li class="nav-item">
23-
<a class="nav-link{% if '/modules/' === page.url %} active{% endif %}" href="{{ "/modules/" | url }}">Modules</a>
24-
</li>
25-
<li class="nav-item">
26-
<a class="nav-link" href="https://github.com/seproDev/depctrl-browser">GitHub</a>
27-
</li>
28-
</ul>
29-
<form class="d-flex" role="search">
30-
<input id="search" class="form-control me-2 is-search" type="search" placeholder="Search..." aria-label="Search" autocomplete="off">
12+
<button
13+
class="navbar-toggler"
14+
type="button"
15+
data-bs-toggle="collapse"
16+
data-bs-target="#navbarCollapse"
17+
aria-controls="navbarCollapse"
18+
aria-expanded="false"
19+
aria-label="Toggle navigation">
20+
<span class="navbar-toggler-icon"></span>
21+
</button>
22+
<div class="collapse navbar-collapse" id="navbarCollapse">
23+
<ul class="navbar-nav me-auto mb-2 mb-md-0">
24+
<li class="nav-item">
25+
<a class="nav-link{% if '/' === page.url %} active{% endif %}" href="{{ "/" | url }}">Home</a>
26+
</li>
27+
<li class="nav-item">
28+
<a class="nav-link{% if '/feeds/' === page.url %} active{% endif %}" href="{{ "/feeds/" | url }}">Feeds</a>
29+
</li>
30+
<li class="nav-item">
31+
<a class="nav-link{% if '/macros/' === page.url %} active{% endif %}" href="{{ "/macros/" | url }}">Macros</a>
32+
</li>
33+
<li class="nav-item">
34+
<a class="nav-link{% if '/modules/' === page.url %} active{% endif %}" href="{{ "/modules/" | url }}">Modules</a>
35+
</li>
36+
<li class="nav-item">
37+
<a class="nav-link" href="https://github.com/seproDev/depctrl-browser">GitHub</a>
38+
</li>
39+
</ul>
40+
<form class="d-flex" role="search">
41+
<input
42+
id="search"
43+
class="form-control me-2 is-search"
44+
type="search"
45+
placeholder="Search..."
46+
aria-label="Search"
47+
autocomplete="off">
3148
<div id="suggestions" class="shadow bg-white rounded d-none"></div>
32-
</form>
49+
</form>
50+
</div>
3351
</div>
3452
</nav>
3553
</header>
@@ -51,4 +69,4 @@
5169
</div>
5270
<script src="{{ "/assets/app.js" | url }}"></script>
5371
</body>
54-
</html>
72+
</html>

‎src/assets/app.js.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
permalink: /_esbuild/app.js
33
---
44
const { Index, Document, Worker } = require("flexsearch");
5+
import Collapse from '../../node_modules/bootstrap/js/dist/collapse';
56

67
// Code largly copied from Doks https://github.com/h-enk/doks
78

‎src/assets/app.scss.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ permalink: /_esbuild/app.scss
2626
@import "../../node_modules/bootstrap/scss/badge";
2727
@import "../../node_modules/bootstrap/scss/alert";
2828
@import "../../node_modules/bootstrap/scss/forms";
29+
@import "../../node_modules/bootstrap/scss/transitions";
2930
@import "../../node_modules/bootstrap/scss/helpers";
3031
@import "../../node_modules/bootstrap/scss/utilities/api";
3132

‎src/pages/feeds-list.njk‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ permalink: "feeds/"
55
---
66
<h1>List of all Feeds</h1>
77
{% if (feeds | length) !== 0 %}
8+
<div class="table-responsive">
89
<table class="table table-hover">
910
<thead>
1011
<tr>
@@ -40,6 +41,7 @@ permalink: "feeds/"
4041
{% endfor %}
4142
</tbody>
4243
</table>
44+
</div>
4345
{% else %}
4446
<div class="alert alert-danger" role="alert">
4547
No feeds found!

‎src/pages/feeds-pages.njk‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ Feed may not be JSON compliant due to {{ feed._defective }}
2828
<h2>Macros:</h2>
2929
{% set macros = feed.macros %}
3030
{% if (macros | length) !== 0 %}
31+
<div class="table-responsive">
3132
<table class="table table-hover">
3233
<thead>
3334
<tr>
@@ -48,6 +49,7 @@ Feed may not be JSON compliant due to {{ feed._defective }}
4849
{% endfor %}
4950
</tbody>
5051
</table>
52+
</div>
5153
{% else %}
5254
<div class="alert alert-secondary" role="alert">
5355
No Macros found!
@@ -57,6 +59,7 @@ Feed may not be JSON compliant due to {{ feed._defective }}
5759
<h2>Modules:</h2>
5860
{% set modules = feed.modules %}
5961
{% if (modules | length) !== 0 %}
62+
<div class="table-responsive">
6063
<table class="table table-hover">
6164
<thead>
6265
<tr>
@@ -77,6 +80,7 @@ Feed may not be JSON compliant due to {{ feed._defective }}
7780
{% endfor %}
7881
</tbody>
7982
</table>
83+
</div>
8084
{% else %}
8185
<div class="alert alert-secondary" role="alert">
8286
No Modules found!

‎src/pages/macros-list.njk‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ permalink: "macros/"
55
---
66
<h1>List of all Macros</h1>
77
{% if (macros | length) !== 0 %}
8+
<div class="table-responsive">
89
<table class="table table-hover">
910
<thead>
1011
<tr>
@@ -43,6 +44,7 @@ permalink: "macros/"
4344
{% endfor %}
4445
</tbody>
4546
</table>
47+
</div>
4648
{% else %}
4749
<div class="alert alert-danger" role="alert">
4850
No Macros found!

‎src/pages/modules-list.njk‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ permalink: "modules/"
55
---
66
<h1>List of all Modules</h1>
77
{% if (modules | length) !== 0 %}
8+
<div class="table-responsive">
89
<table class="table table-hover">
910
<thead>
1011
<tr>
@@ -43,6 +44,7 @@ permalink: "modules/"
4344
{% endfor %}
4445
</tbody>
4546
</table>
47+
</div>
4648
{% else %}
4749
<div class="alert alert-danger" role="alert">
4850
No Modules found!

0 commit comments

Comments
 (0)