Skip to content

Commit fafcd0e

Browse files
MathiasVDAMathiasVDA
authored
Merge pull request #3 from Matdata-eu/copilot/hide-footer-small-screens
Add responsive footer collapse for mobile screens
2 parents a0d4751 + 75aa282 commit fafcd0e

File tree

3 files changed

+142
-42
lines changed

3 files changed

+142
-42
lines changed

‎src/index.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,10 @@
3434
<!-- YASGUI JavaScript -->
3535
<script src="https://cdn.jsdelivr.net/npm/@matdata/[email protected]/build/yasgui.min.js"></script>
3636

37-
<!-- Main site script -->
38-
<script src="main.js"></script>
37+
<!-- Footer toggle button (visible on small screens) -->
38+
<button id="footer-toggle" aria-label="Toggle footer">
39+
<i class="fas fa-info-circle"></i>
40+
</button>
3941

4042
<div id="footer">
4143
<a href="https://matdata.eu/" target="_blank" rel="noopener noreferrer" class="footer-left">
@@ -48,6 +50,9 @@
4850
and <a href="https://github.com/Matdata-eu/yasgui-graph-plugin">Matdata-eu/yasgui-graph-plugin</a></small>
4951
</div>
5052
</div>
53+
54+
<!-- Main site script -->
55+
<script src="main.js"></script>
5156
</body>
5257

5358
</html>

‎src/main.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ body {
2828
align-items: center;
2929
justify-content: center;
3030
z-index: 1000;
31+
transition: transform 0.3s ease-in-out;
3132
}
3233

3334
.footer-left {
@@ -59,3 +60,69 @@ body {
5960
#footer a:hover {
6061
text-decoration: underline;
6162
}
63+
64+
/* Footer toggle button */
65+
#footer-toggle {
66+
display: none;
67+
position: fixed;
68+
bottom: 20px;
69+
right: 20px;
70+
width: 50px;
71+
height: 50px;
72+
border-radius: 50%;
73+
background-color: #0066cc;
74+
color: white;
75+
border: none;
76+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
77+
cursor: pointer;
78+
z-index: 999;
79+
font-size: 20px;
80+
transition: all 0.3s ease;
81+
}
82+
83+
#footer-toggle:hover {
84+
background-color: #0052a3;
85+
transform: scale(1.1);
86+
}
87+
88+
#footer-toggle:active {
89+
transform: scale(0.95);
90+
}
91+
92+
/* Responsive behavior for small screens */
93+
@media (max-width: 768px) {
94+
#footer {
95+
transform: translateY(100%);
96+
}
97+
98+
#footer.expanded {
99+
transform: translateY(0);
100+
}
101+
102+
#footer-toggle {
103+
display: flex;
104+
align-items: center;
105+
justify-content: center;
106+
}
107+
108+
#footer-toggle.hidden {
109+
opacity: 0;
110+
pointer-events: none;
111+
transform: scale(0);
112+
}
113+
114+
.footer-left {
115+
position: relative;
116+
left: 0;
117+
margin-bottom: 10px;
118+
}
119+
120+
#footer {
121+
flex-direction: column;
122+
padding: 15px 20px;
123+
}
124+
125+
.footer-center {
126+
margin-top: 10px;
127+
}
128+
}

‎src/main.js‎

Lines changed: 68 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,74 @@
1+
// Footer toggle functionality for small screens
2+
(function() {
3+
const footer = document.getElementById('footer');
4+
const footerToggle = document.getElementById('footer-toggle');
5+
6+
if (!footer || !footerToggle) return;
7+
8+
// Toggle footer visibility
9+
footerToggle.addEventListener('click', function() {
10+
footer.classList.toggle('expanded');
11+
footerToggle.classList.toggle('hidden');
12+
});
13+
14+
// Close footer when clicking outside
15+
document.addEventListener('click', function(event) {
16+
const isClickInsideFooter = footer.contains(event.target);
17+
const isClickOnToggle = footerToggle.contains(event.target);
18+
19+
// Only close if footer is expanded, click is outside, and not on toggle button
20+
if (footer.classList.contains('expanded') && !isClickInsideFooter && !isClickOnToggle) {
21+
footer.classList.remove('expanded');
22+
footerToggle.classList.remove('hidden');
23+
}
24+
});
25+
})();
26+
127
// YASGUI is loaded via CDN in index.html and available as a global variable
2-
const yasgui = new Yasgui(document.getElementById("yasgui"), {
3-
// Set the SPARQL endpoint
4-
requestConfig: {
5-
endpoint: "https://dbpedia.org/sparql",
6-
},
28+
if (typeof Yasgui !== 'undefined') {
29+
const yasgui = new Yasgui(document.getElementById("yasgui"), {
30+
// Set the SPARQL endpoint
31+
requestConfig: {
32+
endpoint: "https://dbpedia.org/sparql",
33+
},
734

8-
// Allow resizing of the Yasqe editor
9-
resizeable: true,
35+
// Allow resizing of the Yasqe editor
36+
resizeable: true,
1037

11-
// Whether to autofocus on Yasqe on page load
12-
autofocus: true,
38+
// Whether to autofocus on Yasqe on page load
39+
autofocus: true,
1340

14-
// Use the default endpoint when a new tab is opened
15-
copyEndpointOnNewTab: true,
41+
// Use the default endpoint when a new tab is opened
42+
copyEndpointOnNewTab: true,
1643

17-
// Configuring which endpoints appear in the endpoint catalogue list
18-
endpointCatalogueOptions: {
19-
getData: () => {
20-
return [
21-
//List of objects should contain the endpoint field
22-
//Feel free to include any other fields (e.g. a description or icon
23-
//that you'd like to use when rendering)
24-
{
25-
endpoint: "https://data-interop.era.europa.eu/api/sparql",
26-
},
27-
{
28-
endpoint: "https://dbpedia.org/sparql",
29-
},
30-
{
31-
endpoint: "https://query.wikidata.org",
32-
},
33-
// ...
34-
];
35-
},
36-
//Data object keys that are used for filtering. The 'endpoint' key already used by default
37-
keys: [],
38-
//Data argument contains a `value` property for the matched data object
39-
//Source argument is the suggestion DOM element to append your rendered item to
40-
renderItem: (data, source) => {
41-
const contentDiv = document.createElement("div");
42-
contentDiv.innerText = data.value.endpoint;
43-
source.appendChild(contentDiv);
44+
// Configuring which endpoints appear in the endpoint catalogue list
45+
endpointCatalogueOptions: {
46+
getData: () => {
47+
return [
48+
//List of objects should contain the endpoint field
49+
//Feel free to include any other fields (e.g. a description or icon
50+
//that you'd like to use when rendering)
51+
{
52+
endpoint: "https://data-interop.era.europa.eu/api/sparql",
53+
},
54+
{
55+
endpoint: "https://dbpedia.org/sparql",
56+
},
57+
{
58+
endpoint: "https://query.wikidata.org",
59+
},
60+
// ...
61+
];
62+
},
63+
//Data object keys that are used for filtering. The 'endpoint' key already used by default
64+
keys: [],
65+
//Data argument contains a `value` property for the matched data object
66+
//Source argument is the suggestion DOM element to append your rendered item to
67+
renderItem: (data, source) => {
68+
const contentDiv = document.createElement("div");
69+
contentDiv.innerText = data.value.endpoint;
70+
source.appendChild(contentDiv);
71+
},
4472
},
45-
},
46-
});
73+
});
74+
}

0 commit comments

Comments
 (0)