feat: switch criteria items to horizontal flex-row layout
Transform .competence-item layout from vertical flex-column to horizontal flex-row with checkbox, label (flex-grow), level pills, and remove button. Remove 'Niveau:' label text and reposition remove-field-btn from absolute to static positioning. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+18
-18
@@ -607,16 +607,17 @@
|
|||||||
|
|
||||||
.competence-item {
|
.competence-item {
|
||||||
border: 1px solid var(--border-slate-200);
|
border: 1px solid var(--border-slate-200);
|
||||||
padding: 16px;
|
padding: 10px 12px;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
position: relative;
|
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
transition: var(--transition);
|
transition: var(--transition);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
gap: 12px;
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
box-shadow: var(--shadow-card);
|
box-shadow: var(--shadow-card);
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.competence-item:hover {
|
.competence-item:hover {
|
||||||
@@ -636,15 +637,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.competence-item .competence-label {
|
.competence-item .competence-label {
|
||||||
font-weight: 700;
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
font-weight: 600;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
font-size: 13.5px;
|
font-size: 13px;
|
||||||
padding-right: 22px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 10px;
|
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.remove-field-btn {
|
.remove-field-btn {
|
||||||
@@ -660,13 +660,12 @@
|
|||||||
display: flex !important;
|
display: flex !important;
|
||||||
align-items: center !important;
|
align-items: center !important;
|
||||||
justify-content: center !important;
|
justify-content: center !important;
|
||||||
position: absolute;
|
flex-shrink: 0;
|
||||||
top: 14px;
|
|
||||||
right: 14px;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
transition: var(--transition);
|
transition: var(--transition);
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
position: static;
|
||||||
}
|
}
|
||||||
|
|
||||||
.competence-item:hover .remove-field-btn {
|
.competence-item:hover .remove-field-btn {
|
||||||
@@ -765,13 +764,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.level-group {
|
.level-group {
|
||||||
margin-top: 12px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: nowrap;
|
||||||
gap: 6px;
|
gap: 4px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-top: 1px dashed var(--border-slate-200);
|
flex-shrink: 0;
|
||||||
padding-top: 12px;
|
border-top: none;
|
||||||
|
padding-top: 0;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.level-title {
|
.level-title {
|
||||||
|
|||||||
@@ -1062,7 +1062,6 @@ ${notesFormateur}`,
|
|||||||
role="radiogroup"
|
role="radiogroup"
|
||||||
aria-label="Niveau"
|
aria-label="Niveau"
|
||||||
>
|
>
|
||||||
<span className="level-title">Niveau :</span>
|
|
||||||
{LEVELS.map((level) => (
|
{LEVELS.map((level) => (
|
||||||
<span className="level-pill" key={level.key}>
|
<span className="level-pill" key={level.key}>
|
||||||
<input
|
<input
|
||||||
|
|||||||
Reference in New Issue
Block a user