Skip to content

Commit 22e1abe

Browse files
petersirkapetersirka
authored
Merge pull request #252 from jozefmarton/master
Added `j-ResponsiveLayout` template
2 parents 17f1464 + 53174d3 commit 22e1abe

File tree

4 files changed

+120
-0
lines changed

4 files changed

+120
-0
lines changed

‎j-ResponsiveLayout/component.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"datecreated": "2025-04-22T14:00:00.000Z",
3+
"name": "j-ResponsiveLayout",
4+
"jcomponent": "19|20",
5+
"version": 1,
6+
"picture": "picture.jpg",
7+
"dependencies": "",
8+
"author": "Dodo Marton",
9+
"email": "[email protected]",
10+
"license": "https://www.totaljs.com/license/"
11+
}

‎j-ResponsiveLayout/example.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>PAGE TITLE</title>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=11" />
7+
<meta name="format-detection" content="telephone=no" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
9+
<meta name="robots" content="all,follow" />
10+
<link href="https://cdn.componentator.com/[email protected]" rel="stylesheet" type="text/css" />
11+
<script src="https://cdn.componentator.com/[email protected]"></script>
12+
<style type="text/css">
13+
* { margin: 0; padding: 0; }
14+
html, body { height: 100%; }
15+
.layout { display: grid; grid-template-rows: 60px 1fr 60px; height: 100vh; }
16+
header, footer { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: var(--gap); background: #fff; }
17+
header { border-bottom: 1px solid #e0e0e0; }
18+
header nav a { margin-left: 20px; }
19+
main { display: grid; grid-template-columns: 220px 1fr; overflow: hidden; }
20+
aside { width: 220px; height: 100%; padding: var(--gap); background-color: #fff; border-right: 1px solid #e0e0e0; }
21+
footer { border-top: 1px solid #e0e0e0; }
22+
.responsivecontent { overflow-y: auto; padding: var(--gap); }
23+
.mobilemenubtn { display: none; background-color: transparent; border: 0; font-size: 20px; }
24+
.mobileasidebtn { position: fixed; bottom: 80px; left: 20px; display: none; z-index: 1001; background-color: #f0f0f0; border: 1px solid #e0e0e0; border-radius: var(--radius); padding: 4px 10px; }
25+
.mobilemenu-visible header nav { position: absolute; top: 60px; left: 0; visibility: visible; width: 100%; height: calc(100vh - 120px); display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); z-index: 1000; background-color: #e0e0e0; transition: all 0.2s ease; }
26+
.mobilemenu-visible header nav a { margin-left: 0; }
27+
.mobilemenu-visible .mobilemenubtn i { color: red; }
28+
.mobilemenu-visible .mobilemenubtn i:before { content: '\ea63'; }
29+
.mobileaside-visible aside { display: block; visibility: visible; z-index: 1000; position: absolute; width: 100%; top: 60px; left: 0; height: calc(100vh - 120px); transition: left .2s ease; }
30+
.mobileaside-visible .mobileasidebtn i:before { content: '\e90b' !important; }
31+
32+
@media (max-width: 768px) {
33+
.mobilemenubtn { display: block; }
34+
.mobileasidebtn { display: block; }
35+
main { grid-template-columns: 1fr; }
36+
aside { visibility: hidden; background-color: #e0e0e0; position: absolute; left: -100%; top: 60px; }
37+
header nav { visibility: hidden; top: -100%; transition: top .2s ease; }
38+
}
39+
</style>
40+
</head>
41+
<body>
42+
<div class="responsivelayout">
43+
<header>
44+
<button class="mobileasidebtn"><i class="ti ti-angle-double-right"></i></button>
45+
<span>HEADER</span>
46+
<nav>
47+
<a href="#">Link 1</a>
48+
<a href="#">Link 2</a>
49+
<a href="#">Link 3</a>
50+
</nav>
51+
<button class="mobilemenubtn"><i class="ti ti-bars"></i></button>
52+
</header>
53+
<main>
54+
<aside>ASIDE</aside>
55+
<section class="responsivecontent">
56+
CONTENT
57+
</section>
58+
</main>
59+
<footer>FOOTER</footer>
60+
</div>
61+
62+
<script>
63+
document.addEventListener('DOMContentLoaded', function () {
64+
var body = document.body;
65+
var menubtn = document.querySelector('.mobilemenubtn');
66+
var asidebtn = document.querySelector('.mobileasidebtn');
67+
var navlinks = document.querySelectorAll('header nav a');
68+
69+
menubtn.addEventListener('click', function () {
70+
if (body.classList.contains('mobileaside-visible'))
71+
body.classList.remove('mobileaside-visible');
72+
73+
body.classList.toggle('mobilemenu-visible');
74+
});
75+
76+
asidebtn.addEventListener('click', function () {
77+
if (body.classList.contains('mobilemenu-visible'))
78+
body.classList.remove('mobilemenu-visible');
79+
80+
body.classList.toggle('mobileaside-visible');
81+
});
82+
83+
navlinks.forEach(function(link) {
84+
link.addEventListener('click', function () {
85+
document.querySelector('body').classList.remove('mobilemenu-visible');
86+
});
87+
});
88+
89+
});
90+
</script>
91+
</body>
92+
</html>

‎j-ResponsiveLayout/picture.jpg

4.05 KB
Loading

‎j-ResponsiveLayout/readme.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## j-ResponsiveLayout
2+
3+
Fully responsive template with two interactive buttons. Ideal for simple SPAs or web applications that require access to navigation and additional tools on mobile devices.
4+
5+
- jComponent `v19|v20`
6+
7+
__Features__:
8+
9+
- Navigation with menu button (`.mobilemenubtn`)
10+
- Adds the `.mobilemenu-visible` class to the `<body>` element when active
11+
- Left sidebar with button (`.mobileasidebtn`)
12+
- Adds the `.mobileaside-visible` class to the `<body>` element when active.
13+
14+
### Author
15+
16+
- Dodo Marton <[email protected]>
17+
- [License](https://www.totaljs.com/license/)

0 commit comments

Comments
 (0)