refactor(life): extract rating control and reorganize post actions
Extract 5-star rating UI into a dedicated LifeRatingControl component Move moderation status and retry button into the engagement actions bar
This commit is contained in:
@@ -2032,59 +2032,6 @@ button:disabled,
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.life-rating {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 12px;
|
||||
}
|
||||
|
||||
.life-rating__stars {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.life-rating__star {
|
||||
width: 44px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-soft);
|
||||
color: color-mix(in srgb, var(--warning) 80%, var(--ink-soft));
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.14s ease,
|
||||
border-color 0.14s ease,
|
||||
color 0.14s ease;
|
||||
}
|
||||
|
||||
.life-rating__star:hover,
|
||||
.life-rating__star.is-active {
|
||||
border-color: color-mix(in srgb, var(--warning) 72%, var(--line));
|
||||
background: color-mix(in srgb, var(--warning) 16%, var(--surface-soft));
|
||||
color: color-mix(in srgb, var(--warning) 84%, var(--ink));
|
||||
}
|
||||
|
||||
.life-rating__star:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.56;
|
||||
}
|
||||
|
||||
.life-rating__star .ui-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.life-rating__summary {
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.life-post__engagement {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -2103,11 +2050,105 @@ button:disabled,
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.life-post__engagement-actions {
|
||||
flex: 1 1 520px;
|
||||
}
|
||||
|
||||
.life-post__metrics {
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.life-rating-control {
|
||||
min-height: 44px;
|
||||
height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
padding: 0 8px 0 0;
|
||||
border: 0;
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--line);
|
||||
color: var(--ink-soft);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.life-rating-control__stars {
|
||||
min-height: 44px;
|
||||
height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
border-radius: calc(var(--radius-control) - 1px) 0 0 calc(var(--radius-control) - 1px);
|
||||
}
|
||||
|
||||
.life-rating-control__star {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
flex: 0 0 44px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: color-mix(in srgb, var(--warning) 78%, var(--ink-soft));
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
transition:
|
||||
background 0.14s ease,
|
||||
border-color 0.14s ease,
|
||||
color 0.14s ease,
|
||||
transform 0.14s ease;
|
||||
}
|
||||
|
||||
.life-rating-control__star:hover,
|
||||
.life-rating-control__star:focus-visible,
|
||||
.life-rating-control__star.is-active {
|
||||
border-color: transparent;
|
||||
background: color-mix(in srgb, var(--warning) 16%, var(--surface-soft));
|
||||
color: color-mix(in srgb, var(--warning) 86%, var(--ink));
|
||||
}
|
||||
|
||||
.life-rating-control__star:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.life-rating-control__star:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.life-rating-control__star .ui-icon {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.life-rating-control__summary {
|
||||
min-width: 24px;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2px;
|
||||
color: var(--ink-soft);
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1.25;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.life-icon-button,
|
||||
.life-metric-button {
|
||||
position: relative;
|
||||
@@ -2180,13 +2221,28 @@ button:disabled,
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.life-post__review-actions {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.life-review-button {
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.life-reaction-control {
|
||||
height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
overflow: visible;
|
||||
border: 1px solid var(--line);
|
||||
border: 0;
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--line);
|
||||
}
|
||||
|
||||
.life-reaction-control .life-icon-button {
|
||||
@@ -5939,6 +5995,11 @@ button:disabled,
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.life-rating-control {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.life-toolbar,
|
||||
.life-toolbar__search,
|
||||
.life-toolbar__filters {
|
||||
|
||||
Reference in New Issue
Block a user