UI: навигация, документация, favicon; журнал развёртывания; валидация формы
- Меню API: ссылка «Теги образов», обёртка прокрутки пилюль, z-index и padding против обрезки hover - Документация: ширина колонки как у дашборда (72rem) - Favicon SVG + GET /favicon.ico, link в base.html - provision_log.json, GET .../provision-log, кнопка в таблице кластеров - Валидация create: имя, workers, тег kindest; модалка alert - Прочие правки из сессии (clusters, job_store, стили, шаблоны)
This commit is contained in:
Sergey Antropoff
+124
-42
@@ -112,14 +112,34 @@ body.modal-open {
|
||||
justify-content: flex-end;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
/* Не overflow-x: здесь — иначе обрезается .nav-dropdown__menu (absolute под кнопкой API). */
|
||||
overflow: visible;
|
||||
}
|
||||
/* Горизонтальная прокрутка только подписей «Панель» / «Документация», без выпадающего меню. */
|
||||
.nav-links-scroll {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
/*
|
||||
* При overflow-x: auto вертикаль становится auto — обрезает translateY(-1px) и тень у .nav-pill:hover.
|
||||
* Внутренний padding даёт место сверху/снизу; API вне .nav-links-scroll, там обрезки не было.
|
||||
* z-index как у .nav-dropdown — общий stacking context при overflow.
|
||||
*/
|
||||
padding-top: 0.45rem;
|
||||
padding-bottom: 0.45rem;
|
||||
position: relative;
|
||||
z-index: 160;
|
||||
}
|
||||
|
||||
/* Выпадающее меню «API»: Swagger, ReDoc, Health в отдельном окне */
|
||||
.nav-dropdown {
|
||||
position: relative;
|
||||
z-index: 160;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
@@ -339,14 +359,6 @@ html[data-theme="light"] .nav-link.nav-pill.nav-pill--active:not(.nav-pill--ext)
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Страница /documentation: основной блок и подвал на всю ширину окна */
|
||||
.doc-layout-full .app-main,
|
||||
.doc-layout-full .app-footer {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
@@ -690,54 +702,112 @@ html[data-theme="light"] .cluster-resources-expand-cell {
|
||||
}
|
||||
|
||||
.cluster-create-hero {
|
||||
margin-bottom: 1.35rem;
|
||||
}
|
||||
|
||||
/* Карточка формы: чуть плотнее внутри, заголовок отступает от полей */
|
||||
.card.create-cluster-card {
|
||||
padding: 0.85rem 1rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.create-cluster-card {
|
||||
margin-bottom: 1rem;
|
||||
.create-cluster-card__title {
|
||||
margin: 0 0 1rem;
|
||||
padding: 0;
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
/* Форма создания: две колонки, кнопка на всю ширину */
|
||||
/* Сетка 2×2: имя | тег, затем подсказка на всю ширину, workers | версия; выравнивание по нижнему краю ячеек */
|
||||
.create-form-grid {
|
||||
display: grid;
|
||||
gap: 0.75rem 1.5rem;
|
||||
margin-top: 0.25rem;
|
||||
gap: 0.4rem 1.15rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.create-form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.create-form-field > label {
|
||||
margin: 0;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.create-form-grid .create-form-field input,
|
||||
.create-form-grid .create-form-field select {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 0.35rem 0.5rem;
|
||||
min-height: 2.3rem;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.create-form-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: start;
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
.create-form-col > label:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.create-form-span {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Ссылка на актуальные теги kindest/node (Docker Hub), новая вкладка */
|
||||
.create-form-doc-link {
|
||||
color: var(--accent);
|
||||
font-weight: 650;
|
||||
text-decoration: none;
|
||||
}
|
||||
.create-form-doc-link:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.create-form-doc-link:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.create-form-doc-link__ext {
|
||||
margin-left: 0.12rem;
|
||||
font-size: 0.82em;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.create-form-label-rest {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.create-ver-hint {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.create-ver-hint--full {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0.1rem 0 0.25rem;
|
||||
}
|
||||
|
||||
.create-form-grid .create-actions {
|
||||
margin-top: 0.25rem;
|
||||
margin-top: 0.35rem;
|
||||
padding-top: 0.15rem;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.create-form-grid .create-actions button {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.create-form-col input,
|
||||
.create-form-col select {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Одна карточка: заголовок + описание + строка состояния среды */
|
||||
.hero-panel {
|
||||
margin-bottom: 1rem;
|
||||
@@ -1342,6 +1412,26 @@ html[data-theme="light"] .icon-btn--danger {
|
||||
.confirm-modal-overlay {
|
||||
z-index: 150;
|
||||
}
|
||||
/* Журнал развёртывания: между окном «Состояние» (100) и подтверждением (150) */
|
||||
.provision-log-modal-overlay {
|
||||
z-index: 120;
|
||||
}
|
||||
.modal-box--provision-log .provision-log-body {
|
||||
max-height: min(70vh, 32rem);
|
||||
overflow: auto;
|
||||
margin: 0.35rem 0 0;
|
||||
padding: 0.65rem 0.75rem;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.45;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
html[data-theme="light"] .modal-box--provision-log .provision-log-body {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.modal-box--confirm {
|
||||
max-width: 24rem;
|
||||
text-align: center;
|
||||
@@ -1407,17 +1497,13 @@ button.btn-danger:hover {
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
|
||||
/* Хлебные крошки на странице документации */
|
||||
/* Хлебные крошки на странице документации — ширина как у .app-main (с дашбордом). */
|
||||
.doc-breadcrumbs {
|
||||
max-width: 52rem;
|
||||
margin: 0 auto 0.65rem;
|
||||
padding: 0 0.15rem;
|
||||
}
|
||||
.doc-layout-full .doc-breadcrumbs {
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
margin: 0 0 0.65rem;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.doc-breadcrumbs__list {
|
||||
display: flex;
|
||||
@@ -1455,16 +1541,12 @@ button.btn-danger:hover {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Страница «Документация»: Markdown → карточки секций */
|
||||
/* Страница «Документация»: Markdown → карточки; ширина блока = ширина main (как card на дашборде). */
|
||||
.readme-doc-shell {
|
||||
max-width: 52rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.doc-layout-full .readme-doc-shell {
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.readme-doc-loading {
|
||||
margin: 0 0 0.75rem;
|
||||
|
||||
Reference in New Issue
Block a user