diff --git a/Api/wwwroot/css/project.css b/Api/wwwroot/css/project.css index 6cfa478..ad30137 100644 --- a/Api/wwwroot/css/project.css +++ b/Api/wwwroot/css/project.css @@ -4,12 +4,10 @@ --panel-line: #3a3a3a; --text: #f4f4f4; --muted: #838383; - --orange: #f4864d; --blue: #42609f; --green: #407d52; --peach: #ffe3d8; - --serif: "Yeseva One", Georgia, serif; --sans: Inter, Arial, sans-serif; --label: Raleway, Inter, Arial, sans-serif; @@ -49,11 +47,9 @@ select { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28); border-bottom-right-radius: 14px; border-bottom-left-radius: 14px; - display: flex; align-items: center; justify-content: center; - position: sticky; top: 0; z-index: 40; @@ -62,7 +58,6 @@ select { .brand { text-decoration: none; display: block; - font-family: var(--serif); font-size: clamp(72px, 7vw, 96px); line-height: 1; @@ -76,10 +71,8 @@ select { .home-link { position: absolute; top: 42px; - width: 38px; height: 38px; - border: 0; background: transparent; color: var(--orange); @@ -136,7 +129,6 @@ select { .project-head { margin-bottom: 38px; - display: flex; align-items: center; justify-content: space-between; @@ -145,7 +137,6 @@ select { .project-head h1 { margin: 0; - color: white; font-family: var(--label); font-size: 64px; @@ -158,16 +149,12 @@ select { border: 0; background: transparent; color: white; - display: inline-flex; align-items: center; gap: 9px; - cursor: pointer; - font-family: var(--label); font-weight: 500; - transition: color 0.2s ease; } @@ -192,17 +179,14 @@ select { .project-panel { min-height: 300px; - padding: 24px 26px; background: var(--panel); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); border: 1px solid transparent; border-radius: 30px; - display: flex; flex-direction: column; gap: 18px; - cursor: pointer; transition: border-color 0.2s ease, @@ -221,45 +205,57 @@ select { } .project-panel-head { + position: relative; + min-height: 58px; display: grid; - grid-template-columns: 22px minmax(0, 1fr) auto; + grid-template-columns: 24px minmax(260px, 1fr) auto; align-items: center; - gap: 14px; + gap: 12px; } .project-color-dot { width: 21px; height: 21px; border-radius: 50%; + z-index: 3; } .project-title-block { min-width: 0; + z-index: 3; } .project-team-name { - margin: 0 0 8px; + margin: 0; + max-width: none; color: var(--orange); font-family: var(--label); - font-size: 16px; - font-weight: 700; - line-height: 1.1; - overflow: hidden; - text-overflow: ellipsis; + font-size: 21px; + font-weight: 800; + line-height: 1.15; + text-align: left; + overflow: visible; + text-overflow: unset; white-space: nowrap; } .project-card-name { - min-width: 0; + position: absolute; + left: 50%; + top: 50%; + max-width: 360px; margin: 0; - + transform: translate(-50%, -50%); color: white; font-family: var(--label); font-size: 38px; font-weight: 700; line-height: 1; - - overflow-wrap: anywhere; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + z-index: 1; } .project-board-count { @@ -267,25 +263,23 @@ select { padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; - color: var(--muted); display: inline-flex; align-items: center; justify-content: center; - font-family: var(--label); font-size: 15px; white-space: nowrap; + justify-self: end; + z-index: 3; } .project-boards { flex: 1; min-height: 180px; - border: 1px solid white; border-radius: 20px; overflow: hidden; - display: flex; flex-direction: column; } @@ -298,18 +292,14 @@ select { .project-board-row { min-height: 66px; - padding: 14px 20px; - display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 0.6fr) 32px; align-items: center; gap: 24px; - border-bottom: 1px solid rgba(255, 255, 255, 0.9); color: white; text-decoration: none; - transition: background 0.2s ease, color 0.2s ease; @@ -332,12 +322,10 @@ select { .project-board-name, .project-board-meta { min-width: 0; - font-family: var(--label); font-size: 24px; font-weight: 400; line-height: 1.25; - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -358,10 +346,8 @@ select { .project-empty { flex: 1; - display: grid; place-items: center; - color: var(--orange); font-family: var(--serif); font-size: 24px; @@ -369,17 +355,13 @@ select { .project-state { min-height: 220px; - padding: 36px; border: 1px solid var(--panel-line); border-radius: 30px; - background: var(--panel); color: var(--muted); - display: grid; place-items: center; - text-align: center; font-family: var(--label); font-size: 24px; @@ -395,17 +377,13 @@ body.modal-locked { position: fixed; inset: 0; z-index: 999; - display: grid; place-items: center; - padding: 24px; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(3px); - opacity: 0; pointer-events: none; - transition: opacity 0.22s ease; } @@ -417,19 +395,15 @@ body.modal-locked { .project-modal { width: min(720px, calc(100vw - 36px)); max-height: calc(100vh - 48px); - padding: 28px; border: 0; border-radius: 22px; - background: var(--panel); color: white; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62); - display: flex; flex-direction: column; gap: 26px; - overflow-y: auto; transform: translateY(18px) scale(0.97); transition: transform 0.22s ease; @@ -452,7 +426,6 @@ body.modal-locked { .project-modal-header h2 { margin: 0; - color: white; font-family: var(--label); font-size: 30px; @@ -462,10 +435,8 @@ body.modal-locked { .project-modal-close { position: relative; - width: 42px; height: 42px; - border: 0; background: transparent; cursor: pointer; @@ -475,10 +446,8 @@ body.modal-locked { position: absolute; left: 6px; top: 19px; - width: 32px; height: 4px; - border-radius: 999px; background: white; } @@ -513,15 +482,12 @@ body.modal-locked { .project-select { width: 100%; min-height: 48px; - padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; outline: none; - background: rgba(255, 255, 255, 0.06); color: white; - font-size: 16px; } @@ -542,7 +508,6 @@ body.modal-locked { .project-modal-actions { margin-top: auto; - display: flex; justify-content: space-between; align-items: center; @@ -551,12 +516,9 @@ body.modal-locked { .project-modal-action { min-height: 42px; - border: 0; background: transparent; - cursor: pointer; - font-family: var(--label); font-size: 18px; font-weight: 500; @@ -595,24 +557,18 @@ body.modal-locked { left: 50%; bottom: 46px; z-index: 250; - transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; - min-height: 34px; padding: 0 14px; border-radius: 10px; - background: white; color: #111; - display: flex; align-items: center; gap: 8px; - font-size: 14px; - transition: opacity 0.25s ease, transform 0.25s ease; } @@ -629,6 +585,8 @@ body.modal-locked { color: #000; } +/* MOBILE */ + @media (max-width: 800px) { .project-topbar { height: 82px; @@ -664,18 +622,53 @@ body.modal-locked { } .project-panel-head { - grid-template-columns: 18px minmax(0, 1fr); + min-height: auto; + grid-template-columns: 20px minmax(0, 1fr); + gap: 10px; + align-items: center; } - .project-board-count { - width: max-content; + .project-color-dot { + width: 18px; + height: 18px; + grid-column: 1; + grid-row: 1; + } + + .project-title-block { grid-column: 2; + grid-row: 1; + min-width: 0; + } + + .project-team-name { + max-width: 100%; + margin: 0 0 8px; + font-size: 18px; + font-weight: 800; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .project-card-name { + position: static; + max-width: 100%; + transform: none; + text-align: left; + white-space: normal; + overflow: visible; + text-overflow: unset; font-size: 30px; } + .project-board-count { + width: max-content; + grid-column: 2; + grid-row: 2; + justify-self: start; + } + .project-board-row { grid-template-columns: minmax(0, 1fr) 32px; gap: 8px 12px; @@ -717,4 +710,4 @@ body.modal-locked { .project-modal-action { width: 100%; } -} +} \ No newline at end of file diff --git a/Api/wwwroot/css/styles.css b/Api/wwwroot/css/styles.css index fbeb26f..89243bb 100644 --- a/Api/wwwroot/css/styles.css +++ b/Api/wwwroot/css/styles.css @@ -628,6 +628,10 @@ button.section-head:hover { margin 0.22s ease; } +.sidebar-section:not(.is-collapsed) .collapsible-content { + overflow: visible; +} + .sidebar-section.is-collapsed .collapsible-content { max-height: 0; opacity: 0; @@ -648,7 +652,7 @@ button.section-head:hover { background: var(--sidebar-hover-bg); border-color: var(--sidebar-hover-border); transform: translateX(var(--sidebar-hover-shift)); - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); + box-shadow: none; } .project-item:hover .project-name { @@ -669,6 +673,7 @@ button.section-head:hover { .project-list { display: grid; gap: 16px; + padding-right: calc(var(--sidebar-hover-shift) + 10px); } .sidebar-empty { @@ -699,7 +704,7 @@ button.section-head:hover { .project-item.active { min-height: 72px; background: #333333; - box-shadow: 0 12px 20px rgba(0, 0, 0, 0.32); + box-shadow: none; } .project-color { @@ -740,6 +745,7 @@ button.section-head:hover { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; + padding-right: calc(var(--sidebar-hover-shift) + 10px); } .team-card { @@ -771,7 +777,7 @@ button.section-head:hover { background: var(--sidebar-hover-bg); border-color: var(--sidebar-hover-border); transform: translateX(var(--sidebar-hover-shift)); - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); + box-shadow: none; } @@ -806,6 +812,7 @@ button.section-head:hover { display: flex; flex-wrap: wrap; gap: 16px; + padding-right: calc(var(--sidebar-hover-shift) + 10px); } /* ========================= diff --git a/Api/wwwroot/css/tutorial.css b/Api/wwwroot/css/tutorial.css new file mode 100644 index 0000000..efa4a43 --- /dev/null +++ b/Api/wwwroot/css/tutorial.css @@ -0,0 +1,206 @@ +:root { + --tutorial-bg: #1f1f1f; + --tutorial-panel: #282828; + --tutorial-line: #3a3a3a; + --tutorial-text: #f4f4f4; + --tutorial-muted: #a7a7a7; + --tutorial-orange: #f4864d; + --tutorial-green: #407d52; + --tutorial-serif: "Yeseva One", Georgia, serif; + --tutorial-sans: Inter, Arial, sans-serif; + --tutorial-label: Raleway, Inter, Arial, sans-serif; +} + +body.tutorial-locked { + overflow: hidden; +} + +.tutorial-overlay { + position: fixed; + inset: 0; + z-index: 12000; + display: grid; + place-items: center; + padding: 24px; + background: rgba(0, 0, 0, 0.64); + backdrop-filter: blur(4px); + opacity: 0; + pointer-events: none; + transition: opacity 0.22s ease; +} + +.tutorial-overlay.is-open { + opacity: 1; + pointer-events: auto; +} + +.tutorial-card { + position: relative; + width: min(720px, calc(100vw - 32px)); + max-height: calc(100vh - 48px); + padding: 34px; + border: 1px solid rgba(244, 134, 77, 0.42); + border-radius: 24px; + background: linear-gradient(180deg, #2b2b2b 0%, var(--tutorial-panel) 100%); + color: var(--tutorial-text); + box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62); + display: grid; + gap: 22px; + overflow-y: auto; + transform: translateY(18px) scale(0.97); + transition: transform 0.22s ease; + text-align: left; +} + +.tutorial-overlay.is-open .tutorial-card { + transform: translateY(0) scale(1); +} + +.tutorial-close { + position: absolute; + right: 22px; + top: 20px; + width: 38px; + height: 38px; + border: 0; + background: transparent; + cursor: pointer; +} + +.tutorial-close span { + position: absolute; + left: 6px; + top: 17px; + width: 28px; + height: 4px; + border-radius: 999px; + background: white; +} + +.tutorial-close span:first-child { + transform: rotate(45deg); +} + +.tutorial-close span:last-child { + transform: rotate(-45deg); +} + +.tutorial-close:hover span, +.tutorial-close:focus-visible span { + background: var(--tutorial-orange); +} + +.tutorial-eyebrow { + margin: 0; + color: var(--tutorial-orange); + font-family: var(--tutorial-label); + font-size: 16px; + font-weight: 700; + text-align: left; +} + +.tutorial-card h2 { + margin: 0; + padding-right: 44px; + color: white; + font-family: var(--tutorial-label); + font-size: 36px; + font-weight: 500; + line-height: 1.1; + text-align: left; +} + +.tutorial-steps { + margin: 0; + padding: 0; + list-style: none; + display: grid; + gap: 12px; +} + +.tutorial-steps li { + min-height: 58px; + padding: 14px 16px; + border: 1px solid var(--tutorial-line); + border-radius: 14px; + background: rgba(255, 255, 255, 0.04); + display: grid; + grid-template-columns: 34px minmax(0, 1fr); + align-items: center; + gap: 12px; + color: var(--tutorial-text); + font-family: var(--tutorial-label); + font-size: 17px; + line-height: 1.35; + text-align: left; +} + +.tutorial-step-index { + width: 30px; + height: 30px; + border-radius: 50%; + background: rgba(244, 134, 77, 0.18); + color: var(--tutorial-orange); + display: grid; + place-items: center; + font-family: var(--tutorial-sans); + font-size: 14px; + font-weight: 800; +} + +.tutorial-done { + width: max-content; + min-height: 44px; + margin-left: auto; + border: 0; + background: transparent; + color: var(--tutorial-green); + cursor: pointer; + font-family: var(--tutorial-label); + font-size: 21px; + font-weight: 600; + text-align: left; +} + +.tutorial-done:hover, +.tutorial-done:focus-visible { + color: #5fb978; + outline: none; +} + +@media (max-width: 700px) { + .tutorial-overlay { + padding: 14px; + } + + .tutorial-card { + width: calc(100vw - 28px); + padding: 26px 20px; + gap: 18px; + text-align: left; + } + + .tutorial-card h2 { + font-size: 28px; + padding-right: 38px; + text-align: left; + } + + .tutorial-eyebrow { + text-align: left; + } + + .tutorial-steps li { + grid-template-columns: 30px minmax(0, 1fr); + padding: 12px; + font-size: 15px; + align-items: center; + text-align: left; + } + + .tutorial-done { + width: 100%; + margin-left: 0; + text-align: left; + } +} \ No newline at end of file diff --git a/Api/wwwroot/js/authGuard.js b/Api/wwwroot/js/authGuard.js index e2cae6a..83243b0 100644 --- a/Api/wwwroot/js/authGuard.js +++ b/Api/wwwroot/js/authGuard.js @@ -8,4 +8,12 @@ if (!hasToken) { authUrl.searchParams.set("next", current); window.location.replace(authUrl); +} else { + import("./tutorial.js") + .then(({ showFirstLoginTutorial }) => { + showFirstLoginTutorial(); + }) + .catch((error) => { + console.error(error); + }); } diff --git a/Api/wwwroot/js/project.js b/Api/wwwroot/js/project.js index 753c65c..c9de99d 100644 --- a/Api/wwwroot/js/project.js +++ b/Api/wwwroot/js/project.js @@ -81,13 +81,13 @@ function createProjectCard(project) { panel.innerHTML = `
${escapeHtml(project.team?.name || "Без команды")}
-Быстрый старт
+