Skip to content

Commit 3649ca5

Browse files
committed
Bootstrap CSS
1 parent 98285d6 commit 3649ca5

File tree

4 files changed

+74
-6
lines changed

4 files changed

+74
-6
lines changed

app/Presentation/@layout.latte

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
{import 'form-bootstrap5.latte'}
2+
13
<!DOCTYPE html>
24
<html>
35
<head>
@@ -6,14 +8,19 @@
68

79
{* Page title with optional prefix from the child template *}
810
<title>{ifset title}{include title|stripHtml} | {/ifset}User Login Example</title>
11+
12+
{* Link to the Bootstrap stylesheet for styling *}
13+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
914
</head>
1015

1116
<body>
12-
{* Flash messages display block *}
13-
<div n:foreach="$flashes as $flash" n:class="alert, 'alert-' . $flash->type">{$flash->message}</div>
17+
<div class=container>
18+
{* Flash messages display block *}
19+
<div n:foreach="$flashes as $flash" n:class="alert, 'alert-' . $flash->type">{$flash->message}</div>
1420

15-
{* Main content of the child template goes here *}
16-
{include content}
21+
{* Main content of the child template goes here *}
22+
{include content}
23+
</div>
1724

1825
{* Scripts block; by default includes Nette Forms script for validation *}
1926
{block scripts}

app/Presentation/Sign/in.latte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
{block content}
44
<h1 n:block=title>Sign In</h1>
55

6-
{control signInForm}
6+
{include bootstrap-form signInForm}
77

88
<p class="text-center"><a n:href="up">Don't have an account yet? Sign up.</a></p>

app/Presentation/Sign/up.latte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
{block content}
44
<h1 n:block=title>Sign Up</h1>
55

6-
{control signUpForm}
6+
{include bootstrap-form signUpForm}
77

88
<p class="text-center"><a n:href="in">Already have an account? Log in.</a></p>
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{* Generic form template for Bootstrap v5 *}
2+
3+
{define bootstrap-form, $name}
4+
<form n:name=$name>
5+
{* List for form-level error messages *}
6+
<ul class="alert alert-danger" n:ifcontent>
7+
<li n:foreach="$form->ownErrors as $error">{$error}</li>
8+
</ul>
9+
10+
{include controls $form->getControls()}
11+
</form>
12+
{/define}
13+
14+
15+
{define local controls, array $controls}
16+
{* Loop over form controls and render each one *}
17+
<div n:foreach="$controls as $control"
18+
n:if="!$control->getOption(rendered) && $control->getOption(type) !== hidden"
19+
n:class="mb-3, row, $control->required ? required, $control->error ? is-invalid">
20+
21+
{* Label for the control *}
22+
<div class="col-sm-3 col-form-label">{label $control /}</div>
23+
24+
<div class="col-sm-9">
25+
{include control $control}
26+
{if $control->getOption(type) === button}
27+
{while $iterator->nextValue?->getOption(type) === button}
28+
{input $iterator->nextValue class => "btn btn-secondary"}
29+
{do $iterator->next()}
30+
{/while}
31+
{/if}
32+
33+
{* Display control-level errors or descriptions, if present *}
34+
<span class=invalid-feedback n:ifcontent>{$control->error}</span>
35+
<span class=form-text n:ifcontent>{$control->getOption(description)}</span>
36+
</div>
37+
</div>
38+
{/define}
39+
40+
41+
{define local control, Nette\Forms\Controls\BaseControl $control}
42+
{* Conditionally render controls based on their type with appropriate Bootstrap classes *}
43+
{if $control->getOption(type) in [text, select, textarea, datetime, file]}
44+
{input $control class => form-control}
45+
46+
{elseif $control->getOption(type) === button}
47+
{input $control class => "btn btn-primary"}
48+
49+
{elseif $control->getOption(type) in [checkbox, radio]}
50+
{var $items = $control instanceof Nette\Forms\Controls\Checkbox ? [''] : $control->getItems()}
51+
<div class="form-check" n:foreach="$items as $key => $foo">
52+
{input $control:$key class => form-check-input}{label $control:$key class => form-check-label /}
53+
</div>
54+
55+
{elseif $control->getOption(type) === color}
56+
{input $control class => "form-control form-control-color"}
57+
58+
{else}
59+
{input $control}
60+
{/if}
61+
{/define}

0 commit comments

Comments
 (0)