Skip to content

Commit cfa089d

Browse files
TsingZ0TsingZ0
committed
Adapt to mobile web view
1 parent e765050 commit cfa089d

File tree

10 files changed

+570
-72
lines changed

10 files changed

+570
-72
lines changed

‎docs/about.html‎

Lines changed: 60 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
align-items: center;
2323
background-color: rgba(0, 0, 0, 0.7);
2424
color: white;
25-
padding: 1rem 2rem;
25+
padding: 1rem 0rem;
2626
position: fixed;
2727
width: 100%;
2828
z-index: 1000;
@@ -83,19 +83,56 @@
8383
text-decoration: none;
8484
color: #6DA945;
8585
}
86+
87+
.hamburger {
88+
display: none;
89+
background: none;
90+
border: none;
91+
cursor: pointer;
92+
padding: 0.5rem;
93+
position: absolute;
94+
right: 1rem;
95+
}
96+
97+
.hamburger span {
98+
display: block;
99+
width: 20px;
100+
height: 3px;
101+
background: white;
102+
margin: 5px 0;
103+
transition: 0.3s;
104+
}
105+
86106
@media (max-width: 768px) {
87107
.container {
88-
padding: 1rem;
108+
max-width: 100%;
109+
flex-direction: column;
89110
margin-top: 6rem;
90111
}
112+
.sidebar, .content {
113+
width: 100%;
114+
}
115+
91116
.navbar-container {
92-
flex-direction: column;
93-
align-items: flex-start;
117+
flex-direction: row;
118+
flex-wrap: wrap;
94119
}
120+
121+
.hamburger {
122+
display: block;
123+
}
124+
95125
.navbar nav {
126+
display: none;
96127
flex-direction: column;
97-
gap: 0.5rem;
98-
margin-top: 1rem;
128+
width: 100%;
129+
background: #333333;
130+
padding: 1rem;
131+
margin-top: 2rem;
132+
}
133+
134+
.navbar nav.active {
135+
display: flex;
99136
}
100137
}
101138
</style>
@@ -104,6 +141,11 @@
104141
<div class="navbar">
105142
<div class="navbar-container">
106143
<h1><a href="index.html">PFLlib</a></h1>
144+
<button class="hamburger" aria-label="Menu">
145+
<span></span>
146+
<span></span>
147+
<span></span>
148+
</button>
107149
<nav>
108150
<a href="index.html">Home</a>
109151
<a href="docs.html">Documentation</a>
@@ -150,6 +192,18 @@ <h2>About Me</h2>
150192
}
151193
}
152194
fetchGitHubStars();
195+
196+
document.querySelector('.hamburger').addEventListener('click', function() {
197+
this.classList.toggle('active');
198+
document.querySelector('.navbar nav').classList.toggle('active');
199+
});
200+
201+
document.addEventListener('click', function(e) {
202+
if (!e.target.closest('.navbar-container')) {
203+
document.querySelector('.navbar nav').classList.remove('active');
204+
document.querySelector('.hamburger').classList.remove('active');
205+
}
206+
});
153207
</script>
154208
</body>
155209
</html>

‎docs/algo.html‎

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
align-items: center;
2323
background-color: rgba(0, 0, 0, 0.7);
2424
color: white;
25-
padding: 1rem 2rem;
25+
padding: 1rem 0rem;
2626
position: fixed;
2727
width: 100%;
2828
z-index: 1000;
@@ -129,22 +129,56 @@
129129
text-decoration: none;
130130
color: #6DA945;
131131
}
132+
133+
.hamburger {
134+
display: none;
135+
background: none;
136+
border: none;
137+
cursor: pointer;
138+
padding: 0.5rem;
139+
position: absolute;
140+
right: 1rem;
141+
}
142+
143+
.hamburger span {
144+
display: block;
145+
width: 20px;
146+
height: 3px;
147+
background: white;
148+
margin: 5px 0;
149+
transition: 0.3s;
150+
}
151+
132152
@media (max-width: 768px) {
133153
.container {
154+
max-width: 100%;
134155
flex-direction: column;
135156
margin-top: 6rem;
136157
}
137158
.sidebar, .content {
138159
width: 100%;
139160
}
161+
140162
.navbar-container {
141-
flex-direction: column;
142-
align-items: flex-start;
163+
flex-direction: row;
164+
flex-wrap: wrap;
165+
}
166+
167+
.hamburger {
168+
display: block;
143169
}
170+
144171
.navbar nav {
172+
display: none;
145173
flex-direction: column;
146-
gap: 0.5rem;
147-
margin-top: 1rem;
174+
width: 100%;
175+
background: #333333;
176+
padding: 1rem;
177+
margin-top: 2rem;
178+
}
179+
180+
.navbar nav.active {
181+
display: flex;
148182
}
149183
}
150184
</style>
@@ -153,6 +187,11 @@
153187
<div class="navbar">
154188
<div class="navbar-container">
155189
<h1><a href="index.html">PFLlib</a></h1>
190+
<button class="hamburger" aria-label="Menu">
191+
<span></span>
192+
<span></span>
193+
<span></span>
194+
</button>
156195
<nav>
157196
<a href="index.html">Home</a>
158197
<a href="docs.html">Documentation</a>
@@ -169,7 +208,7 @@ <h1><a href="index.html">PFLlib</a></h1>
169208
<li><a href="algo.html">FL Algorithms</a></li>
170209
<li><a href="data.html">Datasets & Scenarios</a></li>
171210
<li><a href="model.html">Models</a></li>
172-
<li><a href="extend.html">How to Extend</a></li>
211+
<li><a href="extend.html">Easy to Extend</a></li>
173212
<li><a href="features.html">Other Features</a></li>
174213
</ul>
175214
</div>
@@ -294,6 +333,18 @@ <h3>Personalized FL (pFL)</h3>
294333
}
295334
}
296335
fetchGitHubStars();
336+
337+
document.querySelector('.hamburger').addEventListener('click', function() {
338+
this.classList.toggle('active');
339+
document.querySelector('.navbar nav').classList.toggle('active');
340+
});
341+
342+
document.addEventListener('click', function(e) {
343+
if (!e.target.closest('.navbar-container')) {
344+
document.querySelector('.navbar nav').classList.remove('active');
345+
document.querySelector('.hamburger').classList.remove('active');
346+
}
347+
});
297348
</script>
298349
</body>
299350
</html>

‎docs/benchmark.html‎

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
align-items: center;
2323
background-color: rgba(0, 0, 0, 0.7);
2424
color: white;
25-
padding: 1rem 2rem;
25+
padding: 1rem 0rem;
2626
position: fixed;
2727
width: 100%;
2828
z-index: 1000;
@@ -135,22 +135,56 @@
135135
text-align: center;
136136
font-size: 0.8em;
137137
}
138+
139+
.hamburger {
140+
display: none;
141+
background: none;
142+
border: none;
143+
cursor: pointer;
144+
padding: 0.5rem;
145+
position: absolute;
146+
right: 1rem;
147+
}
148+
149+
.hamburger span {
150+
display: block;
151+
width: 20px;
152+
height: 3px;
153+
background: white;
154+
margin: 5px 0;
155+
transition: 0.3s;
156+
}
157+
138158
@media (max-width: 768px) {
139159
.container {
160+
max-width: 100%;
140161
flex-direction: column;
141162
margin-top: 6rem;
142163
}
143164
.sidebar, .content {
144165
width: 100%;
145166
}
167+
146168
.navbar-container {
147-
flex-direction: column;
148-
align-items: flex-start;
169+
flex-direction: row;
170+
flex-wrap: wrap;
171+
}
172+
173+
.hamburger {
174+
display: block;
149175
}
176+
150177
.navbar nav {
178+
display: none;
151179
flex-direction: column;
152-
gap: 0.5rem;
153-
margin-top: 1rem;
180+
width: 100%;
181+
background: #333333;
182+
padding: 1rem;
183+
margin-top: 2rem;
184+
}
185+
186+
.navbar nav.active {
187+
display: flex;
154188
}
155189
}
156190
</style>
@@ -159,6 +193,11 @@
159193
<div class="navbar">
160194
<div class="navbar-container">
161195
<h1><a href="index.html">PFLlib</a></h1>
196+
<button class="hamburger" aria-label="Menu">
197+
<span></span>
198+
<span></span>
199+
<span></span>
200+
</button>
162201
<nav>
163202
<a href="index.html">Home</a>
164203
<a href="docs.html">Documentation</a>
@@ -175,7 +214,7 @@ <h1><a href="index.html">PFLlib</a></h1>
175214
<li><a href="algo.html">FL Algorithms</a></li>
176215
<li><a href="data.html">Datasets & Scenarios</a></li>
177216
<li><a href="model.html">Models</a></li>
178-
<li><a href="extend.html">How to Extend</a></li>
217+
<li><a href="extend.html">Easy to Extend</a></li>
179218
<li><a href="features.html">Other Features</a></li>
180219
</ul>
181220
</div>
@@ -903,6 +942,18 @@ <h3>References</h3>
903942
}
904943
}
905944
fetchGitHubStars();
945+
946+
document.querySelector('.hamburger').addEventListener('click', function() {
947+
this.classList.toggle('active');
948+
document.querySelector('.navbar nav').classList.toggle('active');
949+
});
950+
951+
document.addEventListener('click', function(e) {
952+
if (!e.target.closest('.navbar-container')) {
953+
document.querySelector('.navbar nav').classList.remove('active');
954+
document.querySelector('.hamburger').classList.remove('active');
955+
}
956+
});
906957
</script>
907958
<script type="text/javascript" async
908959
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">

0 commit comments

Comments
 (0)