Skip to content

Commit 2e07dc5

Browse files
namiba-worknamiba-work
authored
Adding in a mobile layout for the website (#49)
* Adding the mobile items to css and updating footer and main to be more responsive on mobile * Updating the documentation training section to be mobile friendly * Updating spacing * Fixed up projects components page and added mobile_width and mobile_height characteristics to image button * Updated the Project Page for mobile layout * Updated the Getting Started page for mobile * Updating the community page for mobile * Fixing the community pages to be mobile friendly * Fixing up the hamburger menu for mobile
1 parent 6c31926 commit 2e07dc5

14 files changed

Lines changed: 397 additions & 372 deletions

‎src/components/community_teams.rs‎

Lines changed: 22 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,19 @@ use leptos::prelude::*;
44
pub fn CommunityTeams() -> impl IntoView {
55
view! {
66
<section
7-
class="background_primary"
8-
style="
9-
padding: 120px;
10-
"
7+
class="background_primary px-4 py-6 md:[120px]"
118
>
129
{/* Row 2: Two Columns */}
13-
<div class="flex flex-row gap-[60px]" style="margin-bottom: 80px;">
14-
<div style="width: 950px;">
15-
<span class="h1" style="display: block; text-align: left;">
10+
<div class="flex flex-col md:flex-row gap-[60px]" style="margin-bottom: 80px;">
11+
<div class="w-full md:w-[950px]">
12+
<span class="h1_mobile md:h1 break-words w-full" style="display: block; text-align: left;">
1613
{"How ODP is built by its community"}
1714
</span>
1815
</div>
19-
<div class="flex flex-col justify-start" style="flex: 1; min-width: 600px; max-width: 900px;">
16+
<div class="flex flex-col justify-start w-full md:max-w-[900px]" style="flex: 1;">
2017
<span
21-
class="p2"
22-
style="
23-
display: block;
24-
text-align: left;
25-
"
18+
class="p2 break-words w-full"
19+
style="display: block; text-align: left;"
2620
>
2721

2822
{"The Open Device Partnership (ODP) is a collaborative open-source initiative designed to promote cooperative innovation in firmware development through contribution and transparency."}
@@ -60,35 +54,25 @@ pub fn CommunityTeams() -> impl IntoView {
6054
/>
6155
</picture>
6256
<span
63-
class="h2"
64-
style="
65-
display: flex;
66-
justify-content: left;
67-
align-items: left;
68-
"
57+
class="h2_mobile md:h2 break-words w-full"
58+
style="display: flex; justify-content: left; align-items: left;"
6959
>
7060
{"Teams"}
7161
</span>
7262
</div>
7363

7464
{/* Row 4: Teams */}
75-
<div class="flex flex-row items-stretch" style="gap: 123px;">
65+
<div class="flex flex-col md:flex-row items-stretch" style="gap: 123px;">
7666
<div class="flex flex-col items-start h-full" style="width: 320px; min-height: 350px; justify-content: flex-start;">
7767
<span
78-
class="h3"
79-
style="
80-
display: block;
81-
text-align: left;
82-
"
68+
class="h3_mobile md:h3 break-words w-full"
69+
style="display: block; text-align: left;"
8370
>
8471
{"Boot Firmware (Patina)"}
8572
</span>
8673
<span
87-
class="p2"
88-
style="
89-
display: block;
90-
text-align: left;
91-
"
74+
class="p2 break-words w-full"
75+
style="display: block; text-align: left;"
9276
>
9377
{"Developing and managing development of a new modern UEFI"}
9478
</span>
@@ -106,20 +90,14 @@ pub fn CommunityTeams() -> impl IntoView {
10690
</div>
10791
<div class="flex flex-col items-start h-full" style="width: 320px; min-height: 350px; justify-content: flex-start;">
10892
<span
109-
class="h3"
110-
style="
111-
display: block;
112-
text-align: left;
113-
"
93+
class="h3_mobile md:h3 break-words w-full"
94+
style="display: block; text-align: left;"
11495
>
11596
{"Secure Embedded Controller"}
11697
</span>
11798
<span
118-
class="p2"
119-
style="
120-
display: block;
121-
text-align: left;
122-
"
99+
class="p2 break-words w-full"
100+
style="display: block; text-align: left;"
123101
>
124102
{"Developing and managing secure EC internals"}
125103
</span>
@@ -137,20 +115,14 @@ pub fn CommunityTeams() -> impl IntoView {
137115
</div>
138116
<div class="flex flex-col items-start h-full" style="width: 320px; min-height: 350px; justify-content: flex-start;">
139117
<span
140-
class="h3"
141-
style="
142-
display: block;
143-
text-align: left;
144-
"
118+
class="h3_mobile md:h3 break-words w-full"
119+
style="display: block; text-align: left;"
145120
>
146121
{"Unified EC Services"}
147122
</span>
148123
<span
149-
class="p2"
150-
style="
151-
display: block;
152-
text-align: left;
153-
"
124+
class="p2 break-words w-full"
125+
style="display: block; text-align: left;"
154126
>
155127
{"Designing and managing implementation of a unified EC Services interface"}
156128
</span>

‎src/components/documentation_training.rs‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,65 +12,53 @@ pub struct DocLink {
1212
pub fn DocumentationTraining(#[prop(default = vec![])] links: Vec<DocLink>) -> impl IntoView {
1313
view! {
1414
<section
15-
class="flex flex-row items-start background_primary"
16-
style="padding: 120px;"
15+
class="flex flex-col md:flex-row items-start background_primary w-full overflow-x-hidden px-4 py-8 md:py-[60px] md:px-[120px]"
1716
>
1817
{/* Left: Image and text box */}
19-
<div class="flex flex-col items-start" style="min-width: 663px; align-items: flex-start;">
18+
<div class="flex flex-col items-start w-full" style="align-items: flex-start;">
2019
<picture>
2120
<source srcset="/images/dark/documentation.svg" media="(prefers-color-scheme: dark)" />
2221
<img
2322
src="/images/light/documentation.svg"
2423
alt="Documentation Icon"
25-
style="
26-
width: 150px;
27-
height: 150px;
28-
object-fit: contain;
29-
display: block;
30-
margin-bottom: 16px;
31-
"
24+
class="w-[80px] h-[80px] md:w-[150px] md:h-[150px] object-contain mb-4"
25+
style="display: block; margin-bottom: 16px;"
3226
/>
3327
</picture>
3428
<span
35-
class="h2"
36-
style="
37-
text-align: left;
38-
display: block;
39-
"
29+
class="h2_mobile md:h2 text-left break-words"
30+
style="word-break:break-word; display: block; text-align: left;"
4031
>
4132
"Documentation"
4233
</span>
4334
<div style="height: 10px;"></div>
4435
<span
45-
class="p1"
46-
style="
47-
text-align: left;
48-
display: block;
49-
"
36+
class="p1_mobile md:p1 text-left break-words"
37+
style="word-break:break-word; display: block; text-align: left;"
5038
>
5139
"Start developing with ODP"
5240
</span>
5341
</div>
5442

5543
{/* Spacer between left and right */}
56-
<div style="width: 200px;"></div>
44+
<div class="hidden md:block" style="width: 200px;"></div>
5745

5846
{/* Right: List of hyperlinks */}
59-
<ul class="flex flex-col pt-4" style="width: 760px;">
47+
<ul class="flex flex-col pt-4 w-full max-w-full break-words md:pt-4 md:w-[760px] md:max-w-[760px]">
6048
{links.into_iter().map(|link| view! {
6149
<li>
6250
<Show
6351
when=move || link.external
6452
fallback= move || view! {
65-
<div class="link_large internal-link" style="text-decoration: none;">
53+
<div class="link_large_mobile md:link_large internal-link" style="text-decoration: none;">
6654
<A href=link.href>
6755
<span style="text-decoration: none;">{"→ "}</span>
6856
<span style="text-decoration: underline;">{link.title}</span>
6957
</A>
7058
</div>
7159
}
7260
>
73-
<div class="link_large external-link" style="text-decoration: none;">
61+
<div class="link_large_mobile md:link_large external-link" style="text-decoration: none;">
7462
<a href=link.href target="_blank" style="text-decoration: none;">
7563
<span style="text-decoration: none;">{"→ "}</span>
7664
<span style="text-decoration: underline;">{link.title}</span>

‎src/components/footer.rs‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,50 @@ use leptos::prelude::*;
33
#[component]
44
pub fn Footer() -> impl IntoView {
55
view! {
6-
<footer class="w-full px-[120px] py-[60px] background_secondary">
7-
<div class="flex items-center justify-between w-full">
8-
<div class="flex items-center">
6+
<footer class="w-full px-2 md:px-[60px] py-2 md:py-[32px] background_secondary">
7+
<div class="flex flex-col md:flex-row items-center justify-between w-full gap-1 md:gap-0">
8+
<div class="flex items-center w-full md:w-auto justify-center md:justify-start">
99
<picture>
1010
<source srcset="/images/dark/odplogo.svg" media="(prefers-color-scheme: dark)" />
1111
<img
1212
src="/images/light/odplogo.svg"
1313
alt="Logo"
14-
class="w-[114px] h-[40px] object-contain"
14+
class="w-[70px] h-[24px] md:w-[114px] md:h-[40px] object-contain"
1515
/>
1616
</picture>
17-
<p class="ml-[30px] leading-[26px] p">
17+
<p class="ml-2 md:ml-[30px] leading-[18px] md:leading-[26px] p_mobile md:p">
1818
{"© 2025 Open Device Partnership"}
1919
</p>
2020
</div>
2121

22-
<div class="flex flex-row items-center">
22+
<div class="flex flex-row items-center justify-center w-full md:w-auto">
2323
<a
2424
href="https://github.com/OpenDevicePartnership"
2525
target="_blank"
2626
rel="noopener noreferrer"
27-
class="flex items-center justify-center px-[24px] py-[40px]"
27+
class="flex items-center justify-center px-1 md:px-[16px] py-1 md:py-[24px]"
2828
>
2929
<picture>
3030
<source srcset="/images/dark/github.svg" media="(prefers-color-scheme: dark)" />
3131
<img
3232
src="/images/light/github.svg"
3333
alt="GitHub"
34+
class="w-5 h-5 md:w-auto md:h-auto"
3435
/>
3536
</picture>
3637
</a>
3738
<a
3839
href="https://opendevicepartnership.zulipchat.com"
3940
target="_blank"
4041
rel="noopener noreferrer"
41-
class="flex items-center justify-center px-[24px] py-[40px]"
42+
class="flex items-center justify-center px-1 md:px-[16px] py-1 md:py-[24px]"
4243
>
4344
<picture>
4445
<source srcset="/images/dark/zulip.svg" media="(prefers-color-scheme: dark)" />
4546
<img
4647
src="/images/light/zulip.svg"
4748
alt="Zulip"
49+
class="w-5 h-5 md:w-auto md:h-auto"
4850
/>
4951
</picture>
5052
</a>
@@ -53,13 +55,14 @@ pub fn Footer() -> impl IntoView {
5355
href="https://discord.gg/a8cEfTDQN4"
5456
target="_blank"
5557
rel="noopener noreferrer"
56-
class="flex items-center justify-center px-[24px] py-[40px]"
58+
class="flex items-center justify-center px-1 md:px-[16px] py-1 md:py-[24px]"
5759
>
5860
<picture>
5961
<source srcset="/images/dark/discord.svg" media="(prefers-color-scheme: dark)" />
6062
<img
6163
src="/images/light/discord.svg"
6264
alt="Discord"
65+
class="w-5 h-5 md:w-auto md:h-auto"
6366
/>
6467
</picture>
6568
</a>

‎src/components/header.rs‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,63 @@
1+
12
use leptos::prelude::*;
23
use leptos_router::components::A;
4+
use leptos::prelude::RwSignal;
35

46
#[component]
57
pub fn Header() -> impl IntoView {
8+
let menu_open = RwSignal::new(false);
69
view! {
7-
<header class="w-full h-[160px] px-[120px] bg-white dark:bg-black flex items-center justify-between z-50 m-0 p-0">
10+
<header class="w-full h-[80px] md:h-[160px] px-2 md:px-[120px] background_primary flex items-center justify-between z-50 m-0 p-0 relative">
811
<div class="flex items-center space-x-6">
912
<picture>
1013
<source srcset="/images/dark/odplogo.svg" media="(prefers-color-scheme: dark)" />
1114
<img
1215
src="/images/light/odplogo.svg"
1316
alt="ODP Logo"
14-
class="w-[149px] h-[51.43px] object-contain"
17+
class="w-[100px] h-[34.5px] md:w-[149px] md:h-[51.43px] object-contain"
1518
/>
1619
</picture>
1720
</div>
1821

19-
<nav class="flex [column-gap:25px]">
22+
{/* Hamburger icon for mobile */}
23+
<button
24+
class="md:hidden flex flex-col justify-center items-center w-10 h-10 p-2 focus:outline-none"
25+
aria-label="Open menu"
26+
on:click=move |_| menu_open.update(|v| *v = !*v)
27+
>
28+
<span class="block w-6 h-0.5 bg-black dark:bg-white mb-1"></span>
29+
<span class="block w-6 h-0.5 bg-black dark:bg-white mb-1"></span>
30+
<span class="block w-6 h-0.5 bg-black dark:bg-white"></span>
31+
</button>
32+
33+
{/* Navigation */}
34+
<nav
35+
class="hidden md:flex [column-gap:25px]"
36+
>
2037
<NavButton href="/getting-started" label="Getting Started"/>
2138
<NavButton href="/projects" label="Projects"/>
2239
<ExternalNavButton href="https://opendevicepartnership.github.io/documentation/" label="Library"/>
2340
<NavButton href="/community" label="Community"/>
2441
<NavButton href="/home" label="Home"/>
2542
</nav>
43+
44+
{/* Mobile nav menu, expands below header, right-aligned */}
45+
<nav
46+
class="absolute right-0 top-full w-[80vw] max-w-xs background_primary flex-col items-end px-4 py-4 space-y-2 shadow-lg md:hidden transition-all duration-200"
47+
style=move || if menu_open.get() { "display: flex;" } else { "display: none;" }
48+
>
49+
<NavButton href="/getting-started" label="Getting Started" mobile=true/>
50+
<NavButton href="/projects" label="Projects" mobile=true/>
51+
<ExternalNavButton href="https://opendevicepartnership.github.io/documentation/" label="Library" mobile=true/>
52+
<NavButton href="/community" label="Community" mobile=true/>
53+
<NavButton href="/home" label="Home" mobile=true/>
54+
</nav>
2655
</header>
2756
}
2857
}
2958

3059
#[component]
31-
fn NavButton(href: &'static str, label: &'static str) -> impl IntoView {
60+
fn NavButton(href: &'static str, label: &'static str, #[prop(optional)] mobile: bool) -> impl IntoView {
3261
let location = leptos_router::hooks::use_location();
3362
let is_active = move || location.pathname.get().starts_with(href);
3463

@@ -39,18 +68,19 @@ fn NavButton(href: &'static str, label: &'static str) -> impl IntoView {
3968
class:odp-header-btn-text=true
4069
class:odp-header-btn-active=is_active
4170
class:odp-header-btn-active-text=is_active
71+
class:w-full=mobile
4272
>
4373
{label}
4474
</A>
4575
}
4676
}
4777

4878
#[component]
49-
fn ExternalNavButton(href: &'static str, label: &'static str) -> impl IntoView {
79+
fn ExternalNavButton(href: &'static str, label: &'static str, #[prop(optional)] mobile: bool) -> impl IntoView {
5080
view! {
5181
<a
5282
href=href
53-
class="odp-header-btn odp-header-btn-text"
83+
class=format!("odp-header-btn odp-header-btn-text{}", if mobile { " w-full" } else { "" })
5484
target="_blank"
5585
>
5686
{label}

‎src/components/image_button.rs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ pub fn ImageButton(
77
#[prop(into, default = String::from("Button Image"))] alt: String,
88
#[prop(default = 350)] width: u32,
99
#[prop(default = 320)] height: u32,
10+
#[prop(default = None)] mobile_width: Option<u32>,
11+
#[prop(default = None)] mobile_height: Option<u32>,
1012
) -> impl IntoView {
1113
view! {
1214
<a
@@ -20,6 +22,16 @@ pub fn ImageButton(
2022
text-decoration: none;
2123
"
2224
>
25+
<style>{
26+
if let (Some(mw), Some(mh)) = (mobile_width, mobile_height) {
27+
format!(
28+
"@media (max-width: 767px) {{ img[alt='{}'] {{ width: {}px !important; height: {}px !important; }} }}",
29+
alt, mw, mh
30+
)
31+
} else {
32+
String::new()
33+
}
34+
}</style>
2335
<img
2436
src=img_src
2537
alt=alt

0 commit comments

Comments
 (0)