Skip to content

web #412

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

Merged
ajouatom merged 1 commit into from
Jun 24, 2026
Merged

web #412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion selfdrive/carrot/web/css/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -991,11 +991,11 @@ body[data-page="terminal"] .app-toast-host {
background: color-mix(in srgb, var(--md-error-cont) 18%, var(--md-surface-cont-h));
}

/* ── Setting Item ─────────────────────────────────────────── */
.ui-action-grid > .git-pull-btn {
justify-content: space-between;
}

/* ── Setting Item ─────────────────────────────────────────── */
.setting {
padding: var(--sp-lg) 0;
margin: 0;
Expand Down
57 changes: 44 additions & 13 deletions selfdrive/carrot/web/css/pages/settings/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,27 @@
--setting-profile-toolbar-height: 58px;
}

.page--setting.setting-profile-active {
--page-gutter-block: 0px;
.page--setting #settingScreenHost.setting-screen-transitioning {
overflow: hidden !important;
}

.page--setting #settingScreenHost.setting-screen-transitioning > .page-transitioning {
overflow: hidden;
background: var(--md-surface);
pointer-events: none;
contain: paint;
}

.page--setting.setting-screen-transitioning #carrotTabContent,
.page--setting.setting-screen-transitioning #deviceTabContent,
.page--setting.setting-screen-transitioning #items,
.page--setting.setting-screen-transitioning #deviceItems {
animation: none !important;
}

.page--setting .setting-screen-snapshot,
.page--setting .setting-screen-snapshot * {
animation: none !important;
}

.page--setting .setting.is-restored-live .val {
Expand Down Expand Up @@ -160,6 +179,16 @@
flex-direction: column;
align-items: flex-end;
pointer-events: auto;
transform-origin: right bottom;
transition:
opacity 0.12s ease,
transform 0.16s cubic-bezier(0.2, 0, 0, 1);
}

/* 전환 중 FAB 를 숨기지 않는다 — FAB 는 position:fixed 라 슬라이드와 무관하고,
끝에 다시 나타나며(opacity/scale) 한 번 깜박이던 원인이었다. 클릭만 잠시 막는다. */
.page--setting.setting-screen-transitioning .setting-fab-menu {
pointer-events: none;
}

.setting-fab-actions {
Expand Down Expand Up @@ -294,14 +323,17 @@
}

.setting-fab-menu.is-open .fab--setting-menu {
animation: setting-fab-pop 0.28s cubic-bezier(0.2, 0, 0, 1);
box-shadow: 0 16px 34px rgba(255, 135, 58, 0.34);
}

/* 터치/클릭 시 가벼운 바운스 (JS 가 is-bouncing 을 토글) */
.fab--setting-menu.is-bouncing {
animation: setting-fab-bounce 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.fab--setting-menu svg {
width: 26px;
height: 26px;
transition: transform 0.26s cubic-bezier(0.2, 0, 0, 1);
}

.fab--setting-menu .setting-fab-menu-icon {
Expand All @@ -317,16 +349,15 @@
stroke-linejoin: round;
}

.fab--setting-menu[aria-expanded="true"] svg {
transform: rotate(90deg) scale(0.92);
}

@keyframes setting-fab-pop {
@keyframes setting-fab-bounce {
0% {
transform: scale(0.92);
transform: scale(1);
}
30% {
transform: scale(0.93);
}
58% {
transform: scale(1.04);
62% {
transform: scale(1.03);
}
100% {
transform: scale(1);
Expand All @@ -339,7 +370,7 @@
.fab--setting-menu svg {
transition: none !important;
}
.setting-fab-menu.is-open .fab--setting-menu {
.fab--setting-menu.is-bouncing {
animation: none !important;
}
.setting-fab-menu.is-open .setting-fab-action {
Expand Down
105 changes: 48 additions & 57 deletions selfdrive/carrot/web/css/pages/settings/device.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,35 +27,10 @@
white-space: nowrap;
}

.setting-profile-info {
display: grid;
gap: 7px;
min-width: 0;
white-space: normal;
}

.setting-profile-info--empty {
color: var(--md-on-surface-var);
font-weight: 800;
}

.page--setting #carrotTabContent,
.page--setting #deviceTabContent,
.page--setting #items,
.page--setting #deviceItems {
animation: setting-content-enter 0.16s ease both;
}

@keyframes setting-content-enter {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* setting-content-enter(opacity 0→1 + translateY 4px→0) 제거 —
단계 전환이 끝나며(전환 중 `animation:none` 억제가 풀릴 때) 이 애니메이션이 재생돼
콘텐츠가 한 번 페이드(깜박)+4px 세로 점프(하단 위아래 흔들)하던 직접 원인이었다.
좌우 슬라이드가 이미 화면 진입을 표현하므로 별도 콘텐츠 진입 애니메이션은 불필요하다. */

.setting-search-result {
width: 100%;
Expand Down Expand Up @@ -236,51 +211,67 @@
.page--setting #settingScreenItems.setting-screen-items--profile {
padding-top: 0;
--setting-profile-panel-sticky-top: 0px;
--setting-profile-section-sticky-top: var(--setting-profile-toolbar-height);
--setting-profile-section-sticky-top: 72px;
}

.page--setting #settingScreenItems.setting-screen-items--profile #items {
padding-top: 0;
}

.page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel + .setting-profile-section {
margin-top: 0;
.page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-row {
min-height: 46px;
gap: var(--sp-sm);
}

.page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel {
margin-left: calc(-1 * var(--sp-lg));
margin-right: calc(-1 * var(--sp-lg));
padding-left: calc(var(--sp-lg) + 14px);
padding-right: var(--sp-lg);
.page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-action__icon {
width: 20px;
height: 20px;
}

.page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel::before {
left: var(--sp-lg);
.page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-section__header {
margin-left: 0;
margin-right: 0;
padding-left: 2px;
padding-right: 2px;
}

.page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel__titleRow {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
.page--setting #settingScreenItems.setting-screen-items--profile > .row-between.mb-sm {
display: grid;
}

.page--setting #settingScreenItems.setting-screen-items--profile .setting-toolbar-action {
min-width: 50px;
padding-inline: 10px;
font-size: 12.5px;
/* ── 세로(phone): 설정을 뷰포트 고정 높이로, 두 화면을 absolute inset:0 로 '항상' 겹쳐
각자 내부 스크롤시킨다 → 단계 전환이 순수 transform(레이아웃 변화 0)이라 끝에
흔들림/깜박임이 구조적으로 생기지 않는다. (가로 split 모드와 동일 원리) ── */
.page.page--setting {
display: flex;
flex-direction: column;
height: calc(var(--app-vv-height, 100dvh) - var(--nav-bar-height) - env(safe-area-inset-bottom, 0px));
min-block-size: 0;
padding-bottom: 0;
overflow: hidden;
}

.page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-section__header {
margin-left: calc(-1 * var(--sp-lg));
margin-right: calc(-1 * var(--sp-lg));
padding-left: var(--sp-lg);
padding-right: var(--sp-lg);
.page.page--setting > #settingsMeta {
flex: 0 0 auto;
}

.page--setting #settingScreenHost,
.page--setting #settingScreenItems:not(.hidden) {
overflow: visible;
transform: none !important;
will-change: auto !important;
.page.page--setting > #settingScreenHost {
flex: 1 1 auto;
position: relative;
min-height: 0;
overflow: hidden;
}

.page.page--setting > #settingScreenHost > #settingScreenGroups,
.page.page--setting > #settingScreenHost > #settingScreenItems {
position: absolute;
inset: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
padding-bottom: calc(var(--nav-bar-height) + 24px + env(safe-area-inset-bottom, 0px));
will-change: transform;
}

.page--setting #settingSubnavWrap {
Expand Down Expand Up @@ -376,7 +367,7 @@
.page.page--setting > #settingScreenHost > #settingScreenItems.setting-screen-items--profile {
padding-top: 0;
--setting-profile-panel-sticky-top: 0px;
--setting-profile-section-sticky-top: var(--setting-profile-toolbar-height);
--setting-profile-section-sticky-top: 68px;
}

.page--setting #settingCarRow {
Expand Down
Loading
Loading