this repo has no description
lustre
frontent
oat-ui
gleam
๐ simplify logo on smaller screens
+66
-18
+2
-2
src/client.gleam
+2
-2
src/client.gleam
···
134
134
layout(model, home.view(session), HomeMsg)
135
135
136
136
// LOGIN PAGE --------------------------------------------------------------
137
-
Model(session:, route: route.Login, page: page.Login(page), ..) ->
138
-
layout(model, login.view(session, page), LoginMsg)
137
+
Model(session:, route: route.Login, page: page.Login(page), lang:) ->
138
+
layout(model, login.view(session, page, lang), LoginMsg)
139
139
140
140
// DASHBOARD PAGE ----------------------------------------------------------
141
141
Model(session:, route: route.Dashboard, page: page.Dashboard(page), ..) ->
+64
-16
src/client/page/login.gleam
+64
-16
src/client/page/login.gleam
···
1
1
import client/brand
2
+
import client/language
2
3
import client/session
3
4
import gleam/json
4
5
import lustre/attribute.{class} as attr
···
80
81
}
81
82
}
82
83
83
-
pub fn view(_session: session.Session, model: Model) -> element.Element(Msg) {
84
+
pub fn view(
85
+
_session: session.Session,
86
+
model: Model,
87
+
lang: language.Language,
88
+
) -> element.Element(Msg) {
84
89
// Wrapper
85
90
let wrapper_attr = [
86
91
class("mx-auto max-w-lg h-full"),
···
90
95
html.div(wrapper_attr, [
91
96
// ๏ฌ Logo with Title ---
92
97
html.section(
93
-
[class("p-4 w-full"), class("flex gap-4 justify-center items-center")],
94
98
[
95
-
brand.logo([class("size-12 drop-shadow-md")]),
99
+
class("p-4 w-full"),
100
+
class("flex gap-2 justify-center items-center sm:gap-4"),
101
+
],
102
+
[
103
+
brand.logo([class("size-8 drop-shadow-md sm:size-12")]),
96
104
html.div([], [
97
105
brand.title([class("my-0 text-xl text-center")]),
98
-
html.small([class("text-subtext")], [
99
-
html.text("Soluรงรตes Climรกticas Inteligentes"),
106
+
html.small([class("hidden sm:inline text-subtext")], [
107
+
html.text(case lang {
108
+
language.BrazillianPortuguese | language.PortugalPortuguese ->
109
+
"Soluรงรตes Climรกticas Inteligentes"
110
+
_ -> "Smart climate solutions"
111
+
}),
100
112
]),
101
113
]),
102
114
],
103
115
),
104
116
105
117
// Form ---
106
-
html.article([class("card")], [
118
+
html.article([class("w-full card @container")], [
107
119
// Form Header
108
-
html.header([], [
109
-
html.h3([class("my-2 font-bold")], [html.text("Entrar na Plataforma")]),
120
+
html.header([class("hidden mb-4 @md:inline")], [
121
+
html.h3([class("my-2 font-bold")], [
122
+
html.text(case lang {
123
+
language.BrazillianPortuguese | language.PortugalPortuguese ->
124
+
"Entrar na Plataforma"
125
+
_ -> "Join the Platform"
126
+
}),
127
+
]),
110
128
html.p([class("text-subtext")], [
111
-
html.text("Acesse sua conta para gerenciar contratos de energia"),
129
+
html.text(case lang {
130
+
language.BrazillianPortuguese | language.PortugalPortuguese ->
131
+
"Acesse sua conta para gerenciar contratos de energia"
132
+
_ -> "Access your account to manage your energy contracts"
133
+
}),
112
134
]),
113
135
]),
114
136
115
137
// Form input fields
116
-
html.div([class("mt-4")], [
138
+
html.div([], [
117
139
// ๓ฐฎ Email
118
140
html.label([attr.data("field", ""), class("mt-4")], [
119
141
html.text("Email"),
120
142
html.input([
121
143
attr.type_("email"),
122
144
attr.value(model.email),
123
-
attr.placeholder("usuario@email.com"),
145
+
attr.placeholder(case lang {
146
+
language.BrazillianPortuguese | language.PortugalPortuguese ->
147
+
"usuario@email.com"
148
+
_ -> "user@email.com"
149
+
}),
124
150
class("py-1 px-2 bg-gray-100 rounded-md text-subtext"),
125
151
class("placeholder:text-gray-400"),
126
152
class("text-sm font-light"),
···
129
155
130
156
// ๏ฃ Password
131
157
html.label([attr.data("field", ""), class("mt-4")], [
132
-
html.text("Senha"),
158
+
html.text(case lang {
159
+
language.BrazillianPortuguese | language.PortugalPortuguese ->
160
+
"Senha"
161
+
_ -> "Password"
162
+
}),
133
163
html.input([
134
164
attr.type_("password"),
135
165
attr.value(model.password),
···
149
179
150
180
// ---
151
181
html.hr([class("my-4")]),
152
-
html.div([class("flex justify-around text-sm")], [
153
-
html.a([], [html.text("Esqueci minha senha")]),
154
-
html.a([], [html.text("Criar Conta")]),
155
-
]),
182
+
html.div(
183
+
[
184
+
class("text-sm text-center"),
185
+
class("grid grid-cols-1 @xs:gap-2 @xs:grid-cols-2"),
186
+
],
187
+
[
188
+
html.a([], [
189
+
html.text(case lang {
190
+
language.BrazillianPortuguese | language.PortugalPortuguese ->
191
+
"Esqueci a senha"
192
+
_ -> "Forgot my password"
193
+
}),
194
+
]),
195
+
html.a([], [
196
+
html.text(case lang {
197
+
language.BrazillianPortuguese | language.PortugalPortuguese ->
198
+
"Criar Conta"
199
+
_ -> "Create account"
200
+
}),
201
+
]),
202
+
],
203
+
),
156
204
]),
157
205
]),
158
206
])