feat(web): full desktop layout instead of a stretched phone view
- focus screens: question and context on the left, answers on the right in one wide card; consent text and the 0–10 scale in one wide column - today: dashboard with tasks, this week's doses and quick actions side by side; meds / doctor / profile in two-column grids; welcome gets «Как это работает» steps - fix: 0–10 scale no longer overflows narrow containers Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
+260
-10
@@ -788,7 +788,9 @@ button.row-card:hover:not(:disabled) {
|
||||
|
||||
.num {
|
||||
aspect-ratio: 1;
|
||||
min-height: 30px;
|
||||
width: 100%;
|
||||
max-width: 52px;
|
||||
justify-self: center;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
@@ -1170,22 +1172,128 @@ button.row-card:hover:not(:disabled) {
|
||||
.quick__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-2);
|
||||
min-height: 64px;
|
||||
gap: var(--s-3);
|
||||
min-height: 72px;
|
||||
padding: var(--s-3);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--r-tile);
|
||||
background: var(--c-surface);
|
||||
text-align: left;
|
||||
font-size: var(--fs-14);
|
||||
font-weight: 600;
|
||||
color: var(--c-navy);
|
||||
}
|
||||
|
||||
.quick__title {
|
||||
display: block;
|
||||
font-size: var(--fs-14);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.quick__sub {
|
||||
display: none;
|
||||
font-size: var(--fs-13);
|
||||
color: var(--c-text-2);
|
||||
}
|
||||
|
||||
.quick__btn svg {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- shared blocks: focus, dashboard, grids */
|
||||
|
||||
.focus,
|
||||
.split,
|
||||
.split__lead,
|
||||
.split__act {
|
||||
display: grid;
|
||||
gap: var(--s-5);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.dash,
|
||||
.dash__main,
|
||||
.dash__side {
|
||||
display: grid;
|
||||
gap: var(--s-4);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
gap: var(--s-3);
|
||||
width: 100%;
|
||||
padding: var(--s-4);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--r-tile);
|
||||
background: var(--c-surface);
|
||||
text-align: left;
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-3);
|
||||
}
|
||||
|
||||
.card__head > svg:last-child {
|
||||
flex: none;
|
||||
color: var(--c-text-3);
|
||||
}
|
||||
|
||||
.grid2,
|
||||
.cols {
|
||||
display: grid;
|
||||
gap: var(--s-4);
|
||||
}
|
||||
|
||||
.btn--auto {
|
||||
width: auto;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.how {
|
||||
display: grid;
|
||||
gap: var(--s-3);
|
||||
}
|
||||
|
||||
.how__list {
|
||||
display: grid;
|
||||
gap: var(--s-3);
|
||||
}
|
||||
|
||||
.how__item {
|
||||
display: flex;
|
||||
gap: var(--s-3);
|
||||
align-items: flex-start;
|
||||
padding: var(--s-4);
|
||||
border-radius: var(--r-tile);
|
||||
background: var(--c-tile);
|
||||
}
|
||||
|
||||
.how__num {
|
||||
flex: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: var(--c-navy);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: var(--fs-14);
|
||||
}
|
||||
|
||||
.how__title {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.how__text {
|
||||
display: block;
|
||||
font-size: var(--fs-13);
|
||||
color: var(--c-text-2);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- meds */
|
||||
|
||||
.rx {
|
||||
@@ -1717,19 +1825,152 @@ button.row-card:hover:not(:disabled) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) var(--rail-w);
|
||||
gap: var(--s-6);
|
||||
max-width: 1180px;
|
||||
max-width: 1320px;
|
||||
padding: var(--s-8) var(--s-8) var(--s-8) var(--s-10);
|
||||
}
|
||||
|
||||
.screen {
|
||||
max-width: 760px;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: var(--s-8);
|
||||
padding: 0;
|
||||
gap: var(--s-6);
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
/* Tab screens and sign-in: the page content sits on one wide white card. */
|
||||
.screen > .stack {
|
||||
padding: var(--s-8) var(--s-10);
|
||||
border-radius: 24px;
|
||||
background: var(--c-surface);
|
||||
box-shadow: 0 1px 2px rgb(15 39 71 / 0.06);
|
||||
align-self: start;
|
||||
min-height: 560px;
|
||||
}
|
||||
|
||||
/* Focus screens: question on the left, answers on the right. */
|
||||
.focus,
|
||||
.done {
|
||||
padding: var(--s-8) var(--s-10) var(--s-10);
|
||||
border-radius: 24px;
|
||||
background: var(--c-surface);
|
||||
box-shadow: 0 1px 2px rgb(15 39 71 / 0.06);
|
||||
}
|
||||
|
||||
.done {
|
||||
max-width: none;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.done > .panel,
|
||||
.done > .btn {
|
||||
width: min(100%, 520px);
|
||||
}
|
||||
|
||||
.split {
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
|
||||
gap: var(--s-12);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.split__lead {
|
||||
position: sticky;
|
||||
top: var(--s-8);
|
||||
}
|
||||
|
||||
.split__act {
|
||||
padding: var(--s-6);
|
||||
border-radius: 20px;
|
||||
background: var(--c-tile);
|
||||
}
|
||||
|
||||
.split__act .option,
|
||||
.split__act .row-card,
|
||||
.split__act .textarea textarea,
|
||||
.split__act .code-input {
|
||||
background: var(--c-surface);
|
||||
}
|
||||
|
||||
.split--crisis .split__act,
|
||||
.split--plan .split__act {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-row--stack-desk {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Wide content (consent text, 0–10 scale) reads better in one centred column. */
|
||||
.split--consent,
|
||||
.split--number {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-width: 760px;
|
||||
gap: var(--s-6);
|
||||
}
|
||||
|
||||
.split--consent .split__lead,
|
||||
.split--number .split__lead {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.split--consent .btn-row--stack-desk {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.split--number .numscale__row {
|
||||
gap: var(--s-2);
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: var(--fs-16);
|
||||
}
|
||||
|
||||
.focus .h1 {
|
||||
font-size: var(--fs-28);
|
||||
}
|
||||
|
||||
.panel--scroll {
|
||||
max-height: 56vh;
|
||||
}
|
||||
|
||||
/* Today: dashboard. */
|
||||
.dash {
|
||||
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
|
||||
gap: var(--s-6);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.dash__head {
|
||||
grid-column: 1 / -1;
|
||||
padding: 0 var(--s-2);
|
||||
}
|
||||
|
||||
.dash__main {
|
||||
padding: var(--s-6);
|
||||
border-radius: 24px;
|
||||
background: var(--c-surface);
|
||||
box-shadow: 0 1px 2px rgb(15 39 71 / 0.06);
|
||||
}
|
||||
|
||||
.dash__side .card {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 1px 2px rgb(15 39 71 / 0.06);
|
||||
}
|
||||
|
||||
.grid2,
|
||||
.cols {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.dash__side .quick {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cols > .notice {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.how__list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.rail {
|
||||
@@ -1769,6 +2010,15 @@ button.row-card:hover:not(:disabled) {
|
||||
font-size: var(--fs-34);
|
||||
}
|
||||
|
||||
.quick__sub {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quick__btn {
|
||||
min-height: 84px;
|
||||
padding: var(--s-4);
|
||||
}
|
||||
|
||||
.entry-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user