BUILD131 — цвета вертикально, только HEX

2026-09-10 11:42:37 +03:00
parent 837d40d6ce
commit d97e2eb29d
3 changed files with 9 additions and 51 deletions
--- a/hockey_data/static/admin-directories.css
+++ b/hockey_data/static/admin-directories.css
@@ -1613,7 +1613,7 @@

 .hockey-team-color-control {
  display: grid;
-  grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr) 34px;
+  grid-template-columns: 46px minmax(180px, 1fr) 36px;
  gap: 7px;
  align-items: center;
 }
@@ -1659,15 +1659,13 @@

 .hockey-team-color-value{display:grid!important;gap:3px!important;margin:0!important;min-width:0}
 .hockey-team-color-value>small{font-size:7px!important;font-weight:900;letter-spacing:.5px;color:#71869a!important}
-.hockey-team-color-value>input{width:100%;min-width:0}
-.hockey-team-color-control input[data-team-color-text],
-.hockey-team-color-control input[data-team-color-rgb] {
+.hockey-team-color-value>input{width:100%;min-width:180px;box-sizing:border-box;white-space:nowrap}
+.hockey-team-color-control input[data-team-color-text] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
 }
-.hockey-team-color-control input[data-team-color-rgb]{text-transform:none;letter-spacing:0}

 .hockey-team-color-clear {
  color: #879bb1;
@@ -1751,11 +1749,11 @@
 .hockey-map-sql-table-ref code{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:8px Consolas,monospace;color:#738da6}
@media(max-width:1050px){.hockey-map-sql-table-list{grid-template-columns:1fr}}

-/* BUILD130 — four optional team colours with explicit HEX/RGB entry */
+/* BUILD131 — four optional team colours stacked vertically with HEX entry */
 .hockey-team-color-field-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:3px}
 .hockey-team-color-field-head>span{color:#c8d7e6;font-size:10px;font-weight:900}
 .hockey-team-color-field-head>small{max-width:520px;text-align:right;line-height:1.35}
-.hockey-team-colors-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
+.hockey-team-colors-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
 .hockey-team-color-item{min-width:0;padding:8px;border:1px solid #2b4057;border-radius:10px;background:#0b1725;opacity:.72;transition:border-color .15s ease,opacity .15s ease,background .15s ease}
 .hockey-team-color-item.is-enabled{border-color:#347662;background:#0d201f;opacity:1}
 .hockey-team-color-enabled{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:6px!important;margin:0 0 6px!important}
@@ -1771,5 +1769,5 @@
 .hockey-team-color-chip.is-disabled{opacity:.38}
 .hockey-team-color-chip.is-enabled>b{background:#183a32;color:#71e2c7}
 .hockey-team-color-chip.is-enabled>code{color:#bed2e2}
-@media(max-width:1180px){.hockey-team-colors-grid{grid-template-columns:1fr}.hockey-team-color-field-head{align-items:flex-start;flex-direction:column}.hockey-team-color-field-head>small{text-align:left}}
-@media(max-width:720px){.hockey-team-color-control{grid-template-columns:42px minmax(0,1fr) 34px}.hockey-team-color-value:nth-of-type(2){grid-column:2/3}}
+@media(max-width:1180px){.hockey-team-color-field-head{align-items:flex-start;flex-direction:column}.hockey-team-color-field-head>small{text-align:left}}
+@media(max-width:720px){.hockey-team-color-control{grid-template-columns:42px minmax(140px,1fr) 34px}.hockey-team-color-value>input{min-width:140px}}
--- a/hockey_data/static/admin-directories.js
+++ b/hockey_data/static/admin-directories.js
@@ -80,23 +80,6 @@
    return color || "#FFFFFF";
  };

-  const teamColorHexToRgb = (value) => {
-    const color = normalizeTeamColorHex(value);
-    if (!color) return "";
-    return [1, 3, 5].map((offset) => parseInt(color.slice(offset, offset + 2), 16)).join(", ");
-  };
-
-  const teamColorRgbToHex = (value) => {
-    let raw = String(value ?? "").trim();
-    if (!raw) return "";
-    raw = raw.replace(/^rgb\s*\(/i, "").replace(/\)$/, "").trim();
-    const parts = raw.includes(",") ? raw.split(",") : raw.split(/\s+/);
-    if (parts.length !== 3) return "";
-    const rgb = parts.map((part) => Number(String(part).trim()));
-    if (rgb.some((part) => !Number.isInteger(part) || part < 0 || part > 255)) return "";
-    return `#${rgb.map((part) => part.toString(16).padStart(2, "0")).join("").toUpperCase()}`;
-  };
-
  const teamColorFieldName = (index) => index === 1 ? "color_hex" : `color_${index}_hex`;
  const teamColorEnabledName = (index) => index === 1 ? "color_enabled" : `color_${index}_enabled`;

@@ -120,7 +103,6 @@
            <input type="color" data-team-color-picker="${index}" value="${escapeHtml(teamColorPreview(value))}" tabindex="-1" aria-label="Выбрать цвет ${index} команды">
          </button>
          <label class="hockey-team-color-value"><small>HEX</small><input ${fieldNameAttr} data-team-color-text="${index}" maxlength="7" placeholder="#282E66" value="${escapeHtml(value)}" autocomplete="off" spellcheck="false"></label>
-          <label class="hockey-team-color-value"><small>RGB</small><input data-team-color-rgb="${index}" maxlength="18" placeholder="40, 46, 102" value="${escapeHtml(teamColorHexToRgb(value))}" autocomplete="off" spellcheck="false"></label>
          <button type="button" class="hockey-team-color-clear" data-team-color-clear="${index}" title="Очистить цвет ${index}">×</button>
        </div>
      </div>
@@ -438,7 +420,7 @@
          <div class="hockey-team-color-field">
            <div class="hockey-team-color-field-head">
              <span>Цвета команды</span>
-              <small>Цвет можно выбрать мышкой или ввести вручную в HEX / RGB; галочка отдельно включает или выключает его в Mapping.</small>
+              <small>Цвет можно выбрать мышкой или ввести вручную в HEX; галочка отдельно включает или выключает его в Mapping.</small>
            </div>
            <div class="hockey-team-colors-grid">
              ${teamColorEditorMarkup(editing, 1)}
@@ -3145,7 +3127,6 @@
      const item = modal.querySelector(`[data-team-color-item="${index}"]`);
      const colorText = modal.querySelector(`[data-team-color-text="${index}"]`);
      const colorPicker = modal.querySelector(`[data-team-color-picker="${index}"]`);
-      const colorRgb = modal.querySelector(`[data-team-color-rgb="${index}"]`);
      const colorPreview = modal.querySelector(`[data-team-color-preview="${index}"]`);
      const colorEnabled = modal.querySelector(`[data-team-color-enabled="${index}"]`);
      const enabledCaption = item?.querySelector(".hockey-team-color-enabled small");
@@ -3159,7 +3140,6 @@
        if (normalized) {
          if (colorText && (commit || colorText.value !== rawValue)) colorText.value = normalized;
          if (colorPicker) colorPicker.value = normalized;
-          if (colorRgb) colorRgb.value = teamColorHexToRgb(normalized);
          if (colorPreview) colorPreview.style.setProperty("--team-color", normalized);
          return normalized;
        }
@@ -3169,7 +3149,6 @@
        if (!String(rawValue || "").trim()) {
          if (colorText && commit) colorText.value = "";
          if (colorPicker) colorPicker.value = "#FFFFFF";
-          if (colorRgb && commit) colorRgb.value = "";
          if (colorPreview) colorPreview.style.setProperty("--team-color", "#FFFFFF");
        }
        return "";
@@ -3189,28 +3168,9 @@
        if (normalized) syncTeamColorUi(normalized);
      });
      colorText?.addEventListener("blur", () => syncTeamColorUi(colorText.value, { commit: true }));
-      colorRgb?.addEventListener("input", () => {
-        const normalized = teamColorRgbToHex(colorRgb.value);
-        if (normalized) syncTeamColorUi(normalized);
-      });
-      colorRgb?.addEventListener("blur", () => {
-        const raw = String(colorRgb.value || "").trim();
-        if (!raw) {
-          colorRgb.value = teamColorHexToRgb(colorText?.value || "");
-          return;
-        }
-        const normalized = teamColorRgbToHex(raw);
-        if (!normalized) {
-          setStatus(`RGB цвета ${index} должен содержать три целых числа 0–255, например 40, 46, 102`, true);
-          colorRgb.focus();
-          return;
-        }
-        syncTeamColorUi(normalized, { commit: true });
-      });
      colorEnabled?.addEventListener("change", updateEnabledUi);
      modal.querySelector(`[data-team-color-clear="${index}"]`)?.addEventListener("click", () => {
        if (colorText) colorText.value = "";
-        if (colorRgb) colorRgb.value = "";
        if (colorEnabled) colorEnabled.checked = false;
        updateEnabledUi();
        syncTeamColorUi("", { commit: true });