Skip to content

Commit 1042f85

Browse files
levkklevkk
authored
Custom greeting area in split, checkbox component (#1404)
1 parent 507e9b6 commit 1042f85

File tree

11 files changed

+116
-39
lines changed

11 files changed

+116
-39
lines changed

‎pgml-dashboard/src/components/inputs/checkbox/checkbox.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
div[data-controller="inputs-checkbox"] {
2+
.form-check-label {
3+
padding-left: 8px;
4+
user-select: none; // Annoying to constantly highlight the text when clicking too fast.
5+
}
6+
7+
.form-check-input {
8+
&:not(:checked) {
9+
border-color: #{$neon-tint-100};
10+
}
11+
12+
&:hover {
13+
cursor: pointer;
14+
}
15+
}
16+
}
17+

‎pgml-dashboard/src/components/inputs/checkbox/mod.rs

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
use pgml_components::{component, Component};
2+
use sailfish::TemplateOnce;
3+
4+
use crate::utils::random_string;
5+
6+
#[derive(TemplateOnce, Default)]
7+
#[template(path = "inputs/checkbox/template.html")]
8+
pub struct Checkbox {
9+
name: String,
10+
value: String,
11+
label: Component,
12+
id: String,
13+
}
14+
15+
impl Checkbox {
16+
pub fn new(name: &str, value: &str) -> Checkbox {
17+
Checkbox {
18+
name: name.to_string(),
19+
value: value.to_string(),
20+
label: Component::from(name),
21+
id: random_string(16).to_lowercase(),
22+
}
23+
}
24+
}
25+
26+
component!(Checkbox);

‎pgml-dashboard/src/components/inputs/checkbox/template.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div data-controller="inputs-checkbox">
2+
<div class="form-check d-flex gap-2 align-items-center">
3+
<input class="form-check-input" type="checkbox" id="<%= id %>" name="<%= name %>" value="<%= value %>">
4+
<label class="form-check-label flex-grow-1" for="<%= id %>"><%+ label %></label>
5+
</div>
6+
</div>

‎pgml-dashboard/src/components/inputs/mod.rs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
// This file is automatically generated.
22
// You shouldn't modify it manually.
33

4+
// src/components/inputs/checkbox
5+
pub mod checkbox;
6+
pub use checkbox::Checkbox;
7+
48
// src/components/inputs/radio
59
pub mod radio;
610
pub use radio::Radio;

‎pgml-dashboard/src/components/pages/careers/apply/template.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
use crate::components::sections::Split;
55
use crate::components::PostgresLogo;
66

7-
let eyebrow_formated = r#"<span class="text-white-300">APPLY NOW</span>"#;
7+
let eyebrow_formatted = r#"<span class="text-white-300 text-uppercase">Apply now</span>"#;
88

99
let path = format!("/careers/apply/{}",job_title.replace(" ", "-").to_lowercase());
1010

@@ -105,8 +105,7 @@
105105

106106
<%+
107107
Split::new()
108-
.eyebrow(Component::from(eyebrow_formated))
109-
.title(Component::from(job_title))
108+
.greeting(Component::from(eyebrow_formatted), Component::from(job_title))
110109
.display_area(Component::from(display_area))
111110
.with_navbar()
112111
%>

‎pgml-dashboard/src/components/pages/demo/template.html

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<% use crate::components::stimulus::StimulusAction; %>
77
<% use crate::components::inputs::RangeGroupV2; %>
88
<% use crate::components::inputs::select::{Select, Option}; %>
9-
<% use crate::components::inputs::{SwitchV2, Radio}; %>
9+
<% use crate::components::inputs::{SwitchV2, Radio, Checkbox}; %>
1010
<% use crate::components::cards::{Rgb, Secondary, Primary}; %>
1111

1212
<div class="container" data-controller="pages-demo">
@@ -186,4 +186,19 @@
186186
</div>
187187
</div>
188188
</div>
189+
190+
<div class="py-5 mb-5">
191+
<div class="card mb-3">
192+
<div class="card-body">
193+
<div class="d-flex">
194+
<%+ Checkbox::new("Inline checkbox", "inline") %>
195+
</div>
196+
</div>
197+
</div>
198+
<div class="card">
199+
<div class="card-body">
200+
<%+ Checkbox::new("Take full width checkbox", "block") %>
201+
</div>
202+
</div>
203+
</div>
189204
</div>

‎pgml-dashboard/src/components/sections/split/greeting.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="py-5 text-center text-lg-start greeting">
2+
<h6 class="h6 text-uppercase mb-0">
3+
<small class="eyebrow-text">
4+
<%+ eyebrow %>
5+
</small>
6+
</h6>
7+
<h2 class="display-1 fw-bold text-capitalize">
8+
<%+ title %>
9+
</h2>
10+
</div>

‎pgml-dashboard/src/components/sections/split/mod.rs

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,51 @@
1+
//! Left/right split used in onboarding, signup, careers, etc.
2+
13
use pgml_components::component;
24
use pgml_components::Component;
35
use sailfish::TemplateOnce;
46

57
#[derive(TemplateOnce, Default)]
68
#[template(path = "sections/split/template.html")]
79
pub struct Split {
8-
eyebrow: Component,
9-
title: Component,
10+
greeting_area: Component,
1011
display_area: Component,
1112
with_navbar: bool,
1213
}
1314

15+
// Greeting with its own styling.
16+
#[derive(TemplateOnce, Default, Clone)]
17+
#[template(path = "sections/split/greeting.html")]
18+
pub struct Greeting {
19+
eyebrow: Component,
20+
title: Component,
21+
}
22+
23+
component!(Greeting);
24+
25+
impl Greeting {
26+
pub fn new(eyebrow: Component, title: Component) -> Greeting {
27+
Greeting { eyebrow, title }
28+
}
29+
}
30+
1431
impl Split {
1532
pub fn new() -> Split {
1633
Split {
17-
eyebrow: Component::from(String::from("")),
18-
title: Component::from(String::from("")),
19-
display_area: Component::from(String::from("")),
34+
greeting_area: Component::default(),
35+
display_area: Component::default(),
2036
with_navbar: false,
2137
}
2238
}
2339

24-
pub fn eyebrow(mut self, eyebrow: Component) -> Split {
25-
self.eyebrow = eyebrow;
40+
// Set the greeting.
41+
pub fn greeting(mut self, eyebrow: Component, title: Component) -> Split {
42+
self.greeting_area = Greeting::new(eyebrow, title).into();
2643
self
2744
}
2845

29-
pub fn title(mut self, title: Component) -> Split {
30-
self.title = title;
46+
// Set whatever you want on the left side of the display.
47+
pub fn greeting_area(mut self, greeting_area: Component) -> Split {
48+
self.greeting_area = greeting_area;
3149
self
3250
}
3351

‎pgml-dashboard/src/components/sections/split/split.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ div[data-controller="sections-split"] {
77
}
88
}
99

10-
.signup-left {
10+
.sections-split-left {
1111
background: #{$gray-700};
1212
}
1313

14-
.signup-right {
14+
.sections-split-right {
1515
position: relative;
1616
background-color: #{$gray-800};
1717
overflow: hidden;

‎pgml-dashboard/src/components/sections/split/template.html

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,23 @@
1-
<%
2-
use pgml_components::Component;
3-
4-
let greeting = format!(r#"
5-
<div class="py-5 text-center text-lg-start greeting">
6-
<h6 class="h6 text-uppercase mb-0">
7-
<small class="eyebrow-text">
8-
{}
9-
</small>
10-
</h6>
11-
<h2 class="display-1 fw-bold" style="text-transform: capitalize">
12-
{}
13-
</h2>
14-
</div>
15-
"#,
16-
eyebrow.render_once().unwrap(),
17-
title.render_once().unwrap());
18-
%>
19-
20-
<div data-controller="sections-split" class="">
1+
<div data-controller="sections-split">
212
<div class="row h-100 gx-0">
223
<!-- left -->
234
<div class="col-6 d-none d-lg-block">
24-
<div class="d-flex flex-column signup-left" style="height: 100%;">
5+
<div class="d-flex flex-column sections-split-left" style="height: 100%;">
256
<div class="d-flex flex-column position-sticky justify-content-center left-center<% if with_navbar {%>-navbar<% } %>">
26-
<%+ Component::from(greeting.clone()) %>
7+
<%+ greeting_area.clone() %>
278
</div>
289
</div>
2910
</div>
3011

3112
<!-- right -->
3213
<div class="col-12 col-lg-6 ">
33-
<div class="d-flex flex-column align-items-center justify-content-center signup-right pt-lg-5 pt-0 pb-5 px-3 right-center<% if with_navbar {%>-navbar<% } %>">
14+
<div class="d-flex flex-column align-items-center justify-content-center sections-split-right pt-lg-5 pt-0 pb-5 px-3 right-center<% if with_navbar {%>-navbar<% } %>">
3415
<div class="glow-1"></div>
3516
<div class="glow-2"></div>
3617
<div class="glow-3"></div>
3718
<div class="glow-4"></div>
3819
<div class="glow-5"></div>
39-
<div class="d-flex d-lg-none"><%+ Component::from(greeting) %></div>
20+
<div class="d-flex d-lg-none"><%+ greeting_area %></div>
4021

4122
<%+ display_area %>
4223
</div>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy