Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Responsive login page #317

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

feat: Responsive login page #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
43275d4
feat:responsive login page first iteration
guillaumetavernier Mar 3, 2024
9c6576a
improve position
guillaumetavernier Mar 3, 2024
7584694
change: remove right panel on small screen
guillaumetavernier Mar 3, 2024
cbf9f1a
fix: adust sizes
guillaumetavernier Mar 3, 2024
4694cc0
fix: use ratio
guillaumetavernier Mar 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 102 additions & 139 deletions lib/login/ui/web/left_panel.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,154 +23,117 @@ class LeftPanel extends HookConsumerWidget {
.watch(loadingProvider)
.maybeWhen(data: (data) => data, orElse: () => false);

return Column(
children: [
SizedBox(
height: 160,
child: Row(
children: [
Expanded(
flex: 3,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/images/logo.png',
width: 70, height: 70),
const SizedBox(width: 20),
const Text('MyECL',
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.bold)),
const SizedBox(width: 15),
const Text("-",
style:
TextStyle(fontSize: 25, color: Colors.black)),
const SizedBox(width: 15),
const Text("L'application de l'associatif centralien",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black)),
return Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const SizedBox(
height: 100,
),
Flexible(
child: SvgPicture.asset('assets/images/login.svg', width: 350)),
const SizedBox(height: 70),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 30),
child: WaitingButton(
onTap: () async {
await authNotifier.getTokenFromRequest();
ref.watch(authTokenProvider).when(
data: (token) {
QR.to(pathForwarding.path);
},
error: (e, s) {
displayToast(context, TypeMsg.error,
LoginTextConstants.loginFailed);
},
loading: () {});
},
builder: (child) => Container(
width: 400,
height: 60,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [
Color(0xFFFF8A14),
Color.fromARGB(255, 255, 114, 0)
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
),
const Spacer(flex: 1)
],
)),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Spacer(),
Expanded(
flex: 5,
child: SvgPicture.asset('assets/images/login.svg',
width: 350, height: double.infinity)),
const SizedBox(height: 70),
WaitingButton(
onTap: () async {
await authNotifier.getTokenFromRequest();
ref.watch(authTokenProvider).when(
data: (token) {
QR.to(pathForwarding.path);
},
error: (e, s) {
displayToast(context, TypeMsg.error,
LoginTextConstants.loginFailed);
},
loading: () {});
},
builder: (child) => Container(
width: 400,
height: 60,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [
Color(0xFFFF8A14),
Color.fromARGB(255, 255, 114, 0)
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: const Color.fromARGB(255, 255, 114, 0)
.withOpacity(0.2),
spreadRadius: 3,
blurRadius: 7,
offset: const Offset(0, 3),
),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: const Color.fromARGB(255, 255, 114, 0)
.withOpacity(0.2),
spreadRadius: 3,
blurRadius: 7,
offset: const Offset(0, 3),
),
],
),
child: child),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(LoginTextConstants.signIn,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white)),
Container(
margin: const EdgeInsets.only(left: 20),
child: isLoading
? const Padding(
padding: EdgeInsets.all(12.0),
child: CircularProgressIndicator(
color: Colors.white,
),
)
: const HeroIcon(
HeroIcons.arrowRight,
],
),
child: child),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(LoginTextConstants.signIn,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white)),
Container(
margin: const EdgeInsets.only(left: 20),
child: isLoading
? const Padding(
padding: EdgeInsets.all(12.0),
child: CircularProgressIndicator(
color: Colors.white,
size: 35.0,
),
),
],
),
)
: const HeroIcon(
HeroIcons.arrowRight,
color: Colors.white,
size: 35.0,
),
),
],
),
const Spacer(flex: 3),
SizedBox(
width: double.infinity,
child: Row(
children: [
const Spacer(),
GestureDetector(
onTap: () {
QR.to(LoginRouter.createAccount);
controller?.forward();
},
child: const Text(LoginTextConstants.createAccount,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
color: Color.fromARGB(255, 48, 48, 48))),
),
const Spacer(flex: 4),
GestureDetector(
onTap: () {
QR.to(LoginRouter.forgotPassword);
controller?.forward();
},
child: const Text(LoginTextConstants.forgotPassword,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
color: Color.fromARGB(255, 48, 48, 48))),
),
const Spacer(),
],
),
),
),
const SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: () {
QR.to(LoginRouter.createAccount);
controller?.forward();
},
child: const Text(LoginTextConstants.createAccount,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
color: Color.fromARGB(255, 48, 48, 48))),
),
GestureDetector(
onTap: () {
QR.to(LoginRouter.forgotPassword);
controller?.forward();
},
child: const Text(LoginTextConstants.forgotPassword,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
color: Color.fromARGB(255, 48, 48, 48))),
),
const SizedBox(height: 50),
],
),
)
],
const SizedBox(height: 50),
],
),
);
}
}
Loading