style(frontend): polish student workspace
This commit is contained in:
@@ -37,7 +37,11 @@ class EtatBox extends StatelessWidget {
|
||||
case EtatChecklist.deteriore:
|
||||
background = const Color(0xFFFFFBEB);
|
||||
border = const Color(0xFFFDE68A);
|
||||
contenu = const Icon(Icons.priority_high, size: 16, color: Color(0xFFD97706));
|
||||
contenu = const Icon(
|
||||
Icons.priority_high,
|
||||
size: 16,
|
||||
color: Color(0xFFD97706),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,15 +77,36 @@ class ChecklistTableau extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
_entete(),
|
||||
for (var i = 0; i < accessoires.length; i++) _ligne(i),
|
||||
],
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final columnWidth = constraints.maxWidth < 520 ? 58.0 : 72.0;
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
border: Border.all(color: EnsupColors.line, width: 1.5),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: EnsupColors.text.withValues(alpha: 0.035),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 3),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_entete(columnWidth),
|
||||
for (var i = 0; i < accessoires.length; i++)
|
||||
_ligne(i, columnWidth),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _entete() {
|
||||
Widget _entete(double columnWidth) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||
decoration: const BoxDecoration(
|
||||
@@ -90,9 +115,9 @@ class ChecklistTableau extends StatelessWidget {
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(child: _texteEntete("ÉLÉMENT")),
|
||||
_colonneEntete("PRÉSENT"),
|
||||
_colonneEntete("ABSENT"),
|
||||
_colonneEntete("DÉTÉRIORÉ"),
|
||||
_colonneEntete("PRÉSENT", columnWidth),
|
||||
_colonneEntete("ABSENT", columnWidth),
|
||||
_colonneEntete("DÉTÉRIORÉ", columnWidth),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -110,11 +135,16 @@ class ChecklistTableau extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _colonneEntete(String label) {
|
||||
return SizedBox(width: 72, child: Center(child: _texteEntete(label)));
|
||||
Widget _colonneEntete(String label, double width) {
|
||||
return SizedBox(
|
||||
width: width,
|
||||
child: Center(
|
||||
child: FittedBox(fit: BoxFit.scaleDown, child: _texteEntete(label)),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _ligne(int index) {
|
||||
Widget _ligne(int index, double columnWidth) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||
decoration: const BoxDecoration(
|
||||
@@ -125,20 +155,23 @@ class ChecklistTableau extends StatelessWidget {
|
||||
Expanded(
|
||||
child: Text(
|
||||
accessoires[index],
|
||||
style: GoogleFonts.titilliumWeb(fontSize: 14, color: EnsupColors.text2),
|
||||
style: GoogleFonts.titilliumWeb(
|
||||
fontSize: 14,
|
||||
color: EnsupColors.text2,
|
||||
),
|
||||
),
|
||||
),
|
||||
_case(index, EtatChecklist.present),
|
||||
_case(index, EtatChecklist.absent),
|
||||
_case(index, EtatChecklist.deteriore),
|
||||
_case(index, EtatChecklist.present, columnWidth),
|
||||
_case(index, EtatChecklist.absent, columnWidth),
|
||||
_case(index, EtatChecklist.deteriore, columnWidth),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _case(int index, EtatChecklist type) {
|
||||
Widget _case(int index, EtatChecklist type, double width) {
|
||||
return SizedBox(
|
||||
width: 72,
|
||||
width: width,
|
||||
child: Center(
|
||||
child: EtatBox(
|
||||
type: type,
|
||||
@@ -152,7 +185,11 @@ class ChecklistTableau extends StatelessWidget {
|
||||
|
||||
/// Encadré d'instructions / rappel à côté d'une checklist.
|
||||
class ChecklistInstructions extends StatelessWidget {
|
||||
const ChecklistInstructions({super.key, required this.titre, required this.texte});
|
||||
const ChecklistInstructions({
|
||||
super.key,
|
||||
required this.titre,
|
||||
required this.texte,
|
||||
});
|
||||
|
||||
final String titre;
|
||||
final String texte;
|
||||
@@ -164,7 +201,10 @@ class ChecklistInstructions extends StatelessWidget {
|
||||
decoration: BoxDecoration(
|
||||
color: EnsupColors.blue2.withValues(alpha: 0.05),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
border: Border.all(color: EnsupColors.blue2.withValues(alpha: 0.15), width: 1.5),
|
||||
border: Border.all(
|
||||
color: EnsupColors.blue2.withValues(alpha: 0.15),
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
@@ -181,7 +221,11 @@ class ChecklistInstructions extends StatelessWidget {
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
texte,
|
||||
style: GoogleFonts.titilliumWeb(fontSize: 13, color: EnsupColors.text2, height: 1.6),
|
||||
style: GoogleFonts.titilliumWeb(
|
||||
fontSize: 13,
|
||||
color: EnsupColors.text2,
|
||||
height: 1.6,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -208,10 +252,16 @@ class ChecklistCommentaire extends StatelessWidget {
|
||||
style: GoogleFonts.titilliumWeb(fontSize: 13, color: EnsupColors.text),
|
||||
decoration: InputDecoration(
|
||||
hintText: hint,
|
||||
hintStyle: GoogleFonts.titilliumWeb(fontSize: 13, color: EnsupColors.muted),
|
||||
hintStyle: GoogleFonts.titilliumWeb(
|
||||
fontSize: 13,
|
||||
color: EnsupColors.muted,
|
||||
),
|
||||
filled: true,
|
||||
fillColor: Colors.white,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 14,
|
||||
vertical: 12,
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(9),
|
||||
borderSide: const BorderSide(color: EnsupColors.line, width: 1.5),
|
||||
|
||||
Reference in New Issue
Block a user