From 79b7ba784af0aa15ea4d6586f3019b7c16670016 Mon Sep 17 00:00:00 2001 From: Oleg Hasjanov Date: Thu, 5 Oct 2023 14:02:11 +0300 Subject: [PATCH] update templates --- app/assets/builds/application.css | 304 +++++++++++------- .../stylesheets/components/_account.scss | 130 +++++++- .../stylesheets/components/_address.scss | 11 +- .../stylesheets/components/_components.scss | 1 + .../components/_create-account.scss | 26 ++ .../stylesheets/components/_profile.scss | 122 ------- app/assets/stylesheets/objects/_card.scss | 21 +- app/assets/stylesheets/objects/_form.scss | 23 +- app/assets/stylesheets/objects/_grid.scss | 18 ++ .../stylesheets/utilities/_flexbox.scss | 3 + app/views/users/_form.html.erb | 109 +++---- app/views/users/_sign_up_form.html.erb | 90 ++++++ app/views/users/_user_info.html.erb | 4 +- app/views/users/new.html.erb | 4 +- config/locales/users.en.yml | 4 +- config/locales/users.et.yml | 2 +- 16 files changed, 547 insertions(+), 325 deletions(-) create mode 100644 app/assets/stylesheets/components/_create-account.scss create mode 100644 app/views/users/_sign_up_form.html.erb diff --git a/app/assets/builds/application.css b/app/assets/builds/application.css index 9b5917dd6..d42c5dc16 100644 --- a/app/assets/builds/application.css +++ b/app/assets/builds/application.css @@ -1950,6 +1950,29 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali } } +.c-account .o-grid--two-col { + grid-template-columns: repeat(1, 1fr); +} +@media all and (min-width: 992px) { + .c-account .o-grid--two-col { + grid-template-columns: repeat(2, 1fr); + } +} +.c-account .o-grid--sep { + row-gap: 1.25rem; +} +@media all and (min-width: 768px) { + .c-account .o-grid--sep { + row-gap: 2.5rem; + } +} +@media all and (min-width: 992px) { + .c-account .o-grid--sep { + row-gap: 3.125rem; + column-gap: 3.125rem; + } +} + .o-io-icon { display: inline-block; vertical-align: middle; @@ -2252,8 +2275,8 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali position: absolute; top: 0.1875rem; left: 0; - height: 1rem; - width: 1rem; + height: 1.125rem; + width: 1.125rem; border-radius: 0.25rem; border: 1px solid #E2E2E2; background: #FFFFFF; @@ -2271,8 +2294,8 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali content: ""; position: absolute; display: none; - left: 0.3125rem; - top: 0.0625rem; + left: 0.375rem; + top: 0.125rem; width: 0.34375rem; height: 0.625rem; border: solid #A7A8AA; @@ -2284,6 +2307,19 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali display: block; } +.o-checkbox-container--grey .o-checkbox-sample:checked ~ .o-checkmark-sample { + background-color: #A7A8AA; +} +.o-checkbox-container--grey .o-checkmark-sample:after { + border: solid #FFFFFF; + border-width: 0 3px 3px 0; +} + +.o-checkbox-container--green .o-checkmark-sample:after { + border: solid #48A23F; + border-width: 0 3px 3px 0; +} + .o-checkbox { display: inline-block; height: 1rem; @@ -2370,12 +2406,37 @@ input:checked + .o-checkbox__slider:before { } } +.o-card--no-shadow { + background-color: transparent; + box-shadow: unset; +} +@media all and (min-width: 768px) { + .o-card--no-shadow { + padding: 0 3rem 0 3rem; + } +} +@media all and (min-width: 992px) { + .o-card--no-shadow { + padding: 2.5rem 3rem 3rem 3rem; + } +} + .o-card__title { color: #212224; font-size: 24px; font-weight: 900; } +.c-account .o-card { + height: 100%; + padding: 2.25rem 1.5rem 3rem 1.5rem; +} +@media all and (min-width: 768px) { + .c-account .o-card { + padding: 2.5rem 3rem 3rem 3rem; + } +} + body { font-size: 16px; font-family: "Raleway", Arial, sans-serif; @@ -5571,8 +5632,23 @@ table .c-btn--icon { cursor: pointer; } +.c-account__title-wrapper { + flex-direction: column-reverse; +} +@media all and (min-width: 768px) { + .c-account__title-wrapper { + flex-direction: row; + } +} + .c-account__title { - margin: 0; + margin-top: 0; + margin-bottom: 1.5rem; +} +@media all and (min-width: 768px) { + .c-account__title { + margin-bottom: 2rem; + } } .c-account--mainpage .c-account_editicons > svg:first-child { @@ -5581,17 +5657,8 @@ table .c-btn--icon { .c-account_editicons { gap: 8px; - position: absolute; - top: 0; - right: -14px; - transform: translateY(-50%); - height: 32px; -} -@media all and (min-width: 768px) { - .c-account_editicons { - position: static; - transform: none; - } + height: 2rem; + margin-bottom: 1.5rem; } .c-account_editicons > svg { cursor: pointer; @@ -5634,12 +5701,12 @@ table .c-btn--icon { } @media all and (min-width: 768px) { .c-account__input-wrapper .c-account__input { - width: 131px; + width: 8.1875rem; } } @media all and (min-width: 768px) { .c-account__input-wrapper .c-account__input:last-child { - width: 165px; + width: 10.3125rem; } } .c-account__input-wrapper span { @@ -5652,7 +5719,7 @@ table .c-btn--icon { padding-right: 0; } .c-account__input-wrapper .c-account__input--readonly label { - margin-bottom: 20px; + margin-bottom: 1.25rem; } .c-account__input-wrapper .c-account__input--readonly input { border: 0; @@ -5674,6 +5741,11 @@ table .c-btn--icon { margin: 0; } +.c-account .c-account__checkbox label { + margin: 0; + margin-top: 0.3125rem; +} + .c-account__chekboxtitle { color: #212224; font-size: 0.875rem; @@ -5720,110 +5792,43 @@ table .c-btn--icon { gap: 10px; } -.c-account--profile .o-grid--two-col { - grid-template-columns: repeat(1, 1fr); -} -@media all and (min-width: 992px) { - .c-account--profile .o-grid--two-col { - grid-template-columns: repeat(2, 1fr); - } -} -.c-account--profile .o-grid--sep { - row-gap: 1.25rem; -} -@media all and (min-width: 768px) { - .c-account--profile .o-grid--sep { - row-gap: 2.5rem; - } -} -@media all and (min-width: 992px) { - .c-account--profile .o-grid--sep { - row-gap: 3.125rem; - column-gap: 3.125rem; - } -} -.c-account--profile .o-card { - height: 100%; -} -.c-account--profile .o-card:last-child { - background-color: transparent; - box-shadow: unset; -} -@media all and (min-width: 768px) { - .c-account--profile .o-card:last-child { - padding: 0 3rem 0 3rem; - } -} -@media all and (min-width: 992px) { - .c-account--profile .o-card:last-child { - padding: 1.875rem 3rem 3rem 3rem; - } -} -.c-account--profile .c-account__title { - margin-bottom: 1.5rem; -} -@media all and (min-width: 768px) { - .c-account--profile .c-account__title { - margin-bottom: 2rem; - } -} -.c-account--profile .o-checkbox-text { - margin-left: 8px; - white-space: normal; -} -@media all and (min-width: 768px) { - .c-account--profile .o-checkbox-text { - margin-left: 1rem; - } -} -.c-account--profile .o-checkbox-text:first-child { - margin-bottom: 1.5rem; -} -@media all and (min-width: 768px) { - .c-account--profile .o-checkbox-text:first-child { - margin-bottom: 2rem; - } -} -.c-account--profile .o-checkbox-text a { - color: #0085ca; - text-decoration: underline; -} -.c-account--profile .c-account__label-explain { +.c-account__label-explain { display: flex; justify-content: space-between; } -.c-account--profile .c-account__label-explain span { +.c-account__label-explain span { font-weight: 500; } -.c-account--profile .c-account__label-explain span:first-child { +.c-account__label-explain span:first-child { display: block; } @media all and (min-width: 768px) { - .c-account--profile .c-account__label-explain span:first-child { + .c-account__label-explain span:first-child { display: inline-block; } } -.c-account--profile .c-account__label-explain > span { +.c-account__label-explain > span { color: #A7A8AA; margin-right: 1rem; display: none; } @media all and (min-width: 768px) { - .c-account--profile .c-account__label-explain > span { + .c-account__label-explain > span { display: block; } } @media all and (min-width: 992px) { - .c-account--profile .c-account__label-explain > span { + .c-account__label-explain > span { display: none; } } @media all and (min-width: 1480px) { - .c-account--profile .c-account__label-explain > span { + .c-account__label-explain > span { display: block; } } -.c-account--profile .c-account__input-explain { + +.c-account__input-explain { color: #A7A8AA; text-align: right; font-size: 0.875rem; @@ -5832,51 +5837,115 @@ table .c-btn--icon { display: block; } @media all and (min-width: 768px) { - .c-account--profile .c-account__input-explain { + .c-account__input-explain { display: none; } } @media all and (min-width: 992px) { - .c-account--profile .c-account__input-explain { + .c-account__input-explain { display: block; } } @media all and (min-width: 1480px) { - .c-account--profile .c-account__input-explain { + .c-account__input-explain { display: none; } } -.c-account--profile .c-btn { - font-size: 14px; + +.c-account__title--password { + margin-bottom: 1.5rem; } -.c-account--profile .c-account__title--confirm { - margin-bottom: 8px; +@media all and (min-width: 768px) { + .c-account__title--password { + margin-bottom: 2rem; + } +} + +.o-checkbox-text { + margin-left: 0.5rem; + white-space: normal; +} +@media all and (min-width: 768px) { + .o-checkbox-text { + margin-left: 1rem; + } } -.c-account--profile .c-account__subtitle { +.o-checkbox-text:first-child { + margin-bottom: 1.5rem; +} +@media all and (min-width: 768px) { + .o-checkbox-text:first-child { + margin-bottom: 2rem; + } +} +.o-checkbox-text a { + color: #0085ca; + text-decoration: underline; +} + +.c-btn { + font-size: 0.875rem; +} + +.c-account__title--confirm { + margin-bottom: 0.5rem; +} + +.c-account__subtitle { font-size: 0.875rem; font-weight: 500; line-height: 1.5rem; margin: 0 0 1rem 0; } @media all and (min-width: 768px) { - .c-account--profile .c-account__subtitle { + .c-account__subtitle { margin: 0 0 1.5rem 0; } } @media all and (min-width: 992px) { - .c-account--profile .c-account__subtitle { + .c-account__subtitle { margin: 0 0 2rem 0; } } -.c-account--profile .c-account__btns { + +.c-account__btns { justify-content: center; } @media all and (min-width: 992px) { - .c-account--profile .c-account__btns { + .c-account__btns { justify-content: flex-start; } } +.c-account--createnew .o-card { + height: auto; +} +.c-account--createnew .o-card.o-card--personaldata { + margin-bottom: 3.125rem; +} +@media all and (min-width: 992px) { + .c-account--createnew .o-card.o-card--personaldata { + margin-bottom: 5rem; + } +} +.c-account--createnew .o-checkbox-container--green .o-checkbox-text { + margin-bottom: 0; +} +@media all and (min-width: 992px) { + .c-account--createnew .o-checkbox-container--green { + padding-bottom: 2.5rem; + } +} +.c-account--createnew .c-account__btn { + margin: 0 auto; + display: block; +} +@media all and (min-width: 992px) { + .c-account--createnew .c-account__btn { + margin: 0; + } +} + .c-wishlist__table tr th { white-space: nowrap; } @@ -5983,12 +6052,17 @@ table .c-btn--icon { font-size: 0.875rem; } +.c-account--adresses .c-account_editicons { + width: 100%; +} +@media all and (min-width: 992px) { + .c-account--adresses .c-account_editicons { + width: unset; + } +} .c-account--adresses input { max-width: 550px; } -.c-account--adresses .c-account__input-title { - gap: 40px; -} .c-account--adresses .c-account__input-title input { border-radius: 0; } @@ -5999,11 +6073,11 @@ table .c-btn--icon { .c-account--adresses .c-account__input-wrapper { max-width: 100%; flex-wrap: wrap; - gap: 8px; + column-gap: 8px; } @media all and (min-width: 768px) { .c-account--adresses .c-account__input-wrapper { - gap: 16px; + column-gap: 16px; } } .c-account--adresses .c-account__input-wrapper .c-account__input input { @@ -6414,6 +6488,10 @@ table .c-btn--icon { justify-content: flex-start; } +.u-content-end { + justify-content: flex-end; +} + .u-flex-gap-16 { gap: 1rem; } diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss index e377a31db..cc82c723e 100644 --- a/app/assets/stylesheets/components/_account.scss +++ b/app/assets/stylesheets/components/_account.scss @@ -1,6 +1,18 @@ +.c-account__title-wrapper{ + flex-direction: column-reverse; + @include mq(tablet){ + flex-direction: row; + } +} + .c-account__title{ - margin: 0; + margin-top: 0; + margin-bottom: rem(24px); + @include mq(tablet){ + margin-bottom: rem(32px); + } } + .c-account--mainpage{ .c-account_editicons { &> svg:first-child{ @@ -10,15 +22,8 @@ } .c-account_editicons { gap: 8px; - position: absolute; - top: 0; - right: -14px; - transform: translateY(-50%); - height: 32px; - @include mq(tablet){ - position: static; - transform: none; - } + height: rem(32px); + margin-bottom: rem(24px); &> svg{ cursor: pointer; opacity: 1; @@ -59,11 +64,11 @@ width: 50%; } @include mq(tablet){ - width: 131px; + width: rem(131px); } &:last-child{ @include mq(tablet){ - width: 165px; + width: rem(165px); } } } @@ -79,7 +84,7 @@ .c-account__input--readonly{ label{ - margin-bottom: 20px; + margin-bottom: rem(20px); } input{ border: 0; @@ -105,6 +110,10 @@ margin: 0; } } +.c-account .c-account__checkbox label { + margin: 0; + margin-top: rem(5px); +} .c-account__chekboxtitle { color: $black-color; font-size: rem(14px); @@ -139,4 +148,97 @@ display: inline-flex; align-items: center; gap: 10px; -} \ No newline at end of file +} +.c-account__label-explain { + display: flex; + justify-content: space-between; + span { + font-weight: 500; + &:first-child{ + display: block; + @include mq(tablet){ + display: inline-block; + } + } + } + & > span { + color: $grey-400-color; + margin-right: rem(16px); + display: none; + @include mq(tablet){ + display: block; + } + @include mq(laptop){ + display: none; + } + @include mq(menu){ + display: block; + } + } + } + +.c-account__input-explain{ +color: $grey-400-color; +text-align: right; +font-size: rem(14px); +font-weight: 500; +line-height: rem(24px); +display: block; +@include mq(tablet){ + display: none; +} +@include mq(laptop){ + display: block; +} +@include mq(menu){ + display: none; +} +} +.c-account__title--password { + margin-bottom: rem(24px); + @include mq(tablet) { + margin-bottom: rem(32px); + } + } + .o-checkbox-text { + margin-left: rem(8px); + @include mq(tablet){ + margin-left: rem(16px); + } + white-space: normal; + &:first-child { + margin-bottom: rem(24px); + @include mq(tablet){ + margin-bottom: rem(32px); + } + } + a { + color: $primary-blue-color; + text-decoration: underline; + } + } + + .c-btn{ + font-size: rem(14px); + } + .c-account__title--confirm{ + margin-bottom: rem(8px); + } + .c-account__subtitle{ + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + margin: rem(0 0 16px 0); + @include mq(tablet){ + margin: rem(0 0 24px 0); + } + @include mq(laptop){ + margin: rem(0 0 32px 0); + } + } + .c-account__btns{ + justify-content: center; + @include mq(laptop){ + justify-content: flex-start; + } + } \ No newline at end of file diff --git a/app/assets/stylesheets/components/_address.scss b/app/assets/stylesheets/components/_address.scss index 4811bf0ca..16317b7ae 100644 --- a/app/assets/stylesheets/components/_address.scss +++ b/app/assets/stylesheets/components/_address.scss @@ -1,9 +1,14 @@ .c-account--adresses{ + .c-account_editicons { + width: 100%; + @include mq(laptop){ + width: unset; + } + } input{ max-width: 550px; } .c-account__input-title{ - gap: 40px; input{ border-radius: 0; } @@ -17,9 +22,9 @@ .c-account__input-wrapper{ max-width: 100%; flex-wrap: wrap; - gap: 8px; + column-gap: 8px; @include mq(tablet){ - gap: 16px; + column-gap: 16px; } .c-account__input{ input{ diff --git a/app/assets/stylesheets/components/_components.scss b/app/assets/stylesheets/components/_components.scss index 2a3f4ed06..3df592282 100644 --- a/app/assets/stylesheets/components/_components.scss +++ b/app/assets/stylesheets/components/_components.scss @@ -19,6 +19,7 @@ @import "notices"; @import "login"; @import "account"; +@import "create-account"; @import "profile"; @import "table-whishlist"; @import "wishlist"; diff --git a/app/assets/stylesheets/components/_create-account.scss b/app/assets/stylesheets/components/_create-account.scss new file mode 100644 index 000000000..08261f0ec --- /dev/null +++ b/app/assets/stylesheets/components/_create-account.scss @@ -0,0 +1,26 @@ +.c-account--createnew { + .o-card { + height: auto; + &.o-card--personaldata{ + margin-bottom: rem(50px); + @include mq(laptop){ + margin-bottom: rem(80px); + } + } + } + .o-checkbox-container--green { + .o-checkbox-text{ + margin-bottom: 0; + } + @include mq(laptop){ + padding-bottom: rem(40px); + } + } + .c-account__btn{ + margin: 0 auto; + display: block; + @include mq(laptop){ + margin: 0; + } + } +} diff --git a/app/assets/stylesheets/components/_profile.scss b/app/assets/stylesheets/components/_profile.scss index 38e298ad7..8b1378917 100644 --- a/app/assets/stylesheets/components/_profile.scss +++ b/app/assets/stylesheets/components/_profile.scss @@ -1,123 +1 @@ -.c-account--profile { - .o-grid--two-col { - grid-template-columns: repeat(1,1fr); - @include mq(laptop){ - grid-template-columns: repeat(2,1fr); - } - } - .o-grid--sep { - row-gap: rem(20px); - @include mq(tablet){ - row-gap: rem(40px); - } - @include mq(laptop){ - row-gap: rem(50px); - column-gap: rem(50px); - } - } - .o-card { - height: 100%; - &:last-child { - background-color: transparent; - box-shadow: unset; - @include mq(tablet){ - padding: rem(0 48px 0 48px); - } - @include mq(laptop){ - padding: rem(30px 48px 48px 48px); - } - } - } - .c-account__title { - margin-bottom: rem(24px); - @include mq(tablet){ - margin-bottom: rem(32px); - } - } - .o-checkbox-text { - margin-left: 8px; - @include mq(tablet){ - margin-left: rem(16px); - } - white-space: normal; - &:first-child { - margin-bottom: rem(24px); - @include mq(tablet){ - margin-bottom: rem(32px); - } - } - a { - color: $primary-blue-color; - text-decoration: underline; - } - } - .c-account__label-explain { - display: flex; - justify-content: space-between; - span { - font-weight: 500; - &:first-child{ - display: block; - @include mq(tablet){ - display: inline-block; - } - } - } - & > span { - color: $grey-400-color; - margin-right: rem(16px); - display: none; - @include mq(tablet){ - display: block; - } - @include mq(laptop){ - display: none; - } - @include mq(menu){ - display: block; - } - } - } - .c-account__input-explain{ - color: $grey-400-color; - text-align: right; - font-size: rem(14px); - font-weight: 500; - line-height: rem(24px); - display: block; - @include mq(tablet){ - display: none; - } - @include mq(laptop){ - display: block; - } - @include mq(menu){ - display: none; - } - } - .c-btn{ - font-size: 14px; - } - .c-account__title--confirm{ - margin-bottom: 8px; - } - .c-account__subtitle{ - font-size: rem(14px); - font-weight: 500; - line-height: rem(24px); - margin: rem(0 0 16px 0); - @include mq(tablet){ - margin: rem(0 0 24px 0); - } - @include mq(laptop){ - margin: rem(0 0 32px 0); - } - } - .c-account__btns{ - justify-content: center; - @include mq(laptop){ - justify-content: flex-start; - } - } -} diff --git a/app/assets/stylesheets/objects/_card.scss b/app/assets/stylesheets/objects/_card.scss index 49e691538..a42e4fc06 100644 --- a/app/assets/stylesheets/objects/_card.scss +++ b/app/assets/stylesheets/objects/_card.scss @@ -5,14 +5,31 @@ padding: rem(24px 24px 48px 24px); align-self: self-start; position: relative; - @include mq(tablet){ padding: rem(30px 48px 48px 48px); } } - +.o-card--no-shadow { + background-color: transparent; + box-shadow: unset; + @include mq(tablet){ + padding: rem(0 48px 0 48px); + } + @include mq(laptop){ + padding: rem(40px 48px 48px 48px); + } +} .o-card__title{ color: $black-color; font-size: 24px; font-weight: 900; +} +.c-account{ + .o-card{ + height: 100%; + padding: rem(36px 24px 48px 24px); + @include mq(tablet){ + padding: rem(40px 48px 48px 48px); + } + } } \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_form.scss b/app/assets/stylesheets/objects/_form.scss index 7dd15cc7d..7e78ec836 100644 --- a/app/assets/stylesheets/objects/_form.scss +++ b/app/assets/stylesheets/objects/_form.scss @@ -34,8 +34,8 @@ position: absolute; top: rem(3px); left: 0; - height: rem(16px); - width: rem(16px); + height: rem(18px); + width: rem(18px); border-radius: rem(4px); border: 1px solid $grey-200-color; background: $white-color; @@ -51,8 +51,8 @@ content: ""; position: absolute; display: none; - left: rem(5px); - top: rem(1px); + left: rem(6px); + top: rem(2px); width: rem(5.5px); height: rem(10px); border: solid $grey-400-color; @@ -63,7 +63,22 @@ .o-checkbox-sample:checked ~ .o-checkmark-sample:after { display: block; } +.o-checkbox-container--grey{ + .o-checkbox-sample:checked ~ .o-checkmark-sample { + background-color: $grey-400-color; + } + .o-checkmark-sample:after { + border: solid $white-color; + border-width: 0 3px 3px 0; + } +} +.o-checkbox-container--green{ + .o-checkmark-sample:after { + border: solid $primary-green-color; + border-width: 0 3px 3px 0; + } +} // Custom Checkbox .o-checkbox { diff --git a/app/assets/stylesheets/objects/_grid.scss b/app/assets/stylesheets/objects/_grid.scss index 874ddae50..790989c89 100644 --- a/app/assets/stylesheets/objects/_grid.scss +++ b/app/assets/stylesheets/objects/_grid.scss @@ -54,4 +54,22 @@ @include mq(laptop){ row-gap: 0; } +} +.c-account { + .o-grid--two-col { + grid-template-columns: repeat(1,1fr); + @include mq(laptop){ + grid-template-columns: repeat(2,1fr); + } + } + .o-grid--sep { + row-gap: rem(20px); + @include mq(tablet){ + row-gap: rem(40px); + } + @include mq(laptop){ + row-gap: rem(50px); + column-gap: rem(50px); + } + } } \ No newline at end of file diff --git a/app/assets/stylesheets/utilities/_flexbox.scss b/app/assets/stylesheets/utilities/_flexbox.scss index 74d138a9b..a1aabd1ba 100644 --- a/app/assets/stylesheets/utilities/_flexbox.scss +++ b/app/assets/stylesheets/utilities/_flexbox.scss @@ -31,6 +31,9 @@ .u-content-start { justify-content: flex-start; } +.u-content-end { + justify-content: flex-end; +} .u-flex-gap-16 { gap: rem(16px); diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb index 71ed5e655..d32b1b004 100644 --- a/app/views/users/_form.html.erb +++ b/app/views/users/_form.html.erb @@ -1,30 +1,29 @@ <%= turbo_frame_tag 'user_info' do %> <%= form_with model: user, url: user_path(user.uuid) do |f| %> <%= render partial: 'common/flash', locals: { flash: flash } if turbo_frame_request? %> -
- -
- - <%= t('users.terms_and_conditions_link') %> -
- <%= link_to t(:billing), billing_profiles_path, class: "c-btn c-btn--ghost c-acount__button", target: '_top' %> - - <%= button_to user_path(@user.uuid), method: :delete, form: { data: { turbo_confirm: t("are_you_sure") } }, + <%= link_to t(:billing), billing_profiles_path, class: "c-btn c-btn--ghost c-acount__button", target: '_top' %> + <%= button_to user_path(@user.uuid), method: :delete, form: { data: { turbo_confirm: t("are_you_sure") } }, class: "c-btn c-btn--ghost c-acount__button c-acount__button--icon", target: '_top' do %> - - <%= t('users.show.delete') %> + + <%= t('users.show.delete') %> + <% end %> +
+
+
+ <% if user.persisted? || (user.signed_in_with_identity_document? && user.encrypted_password.blank?) %> + + <% else %> + <% end %> + + +
+
+ <% if user.persisted? && !user.signed_in_with_identity_document? %> + + + + <% end %> + + <%= link_to t(:cancel), '#', class: "c-btn c-btn--ghost c-account__btn", data: { turbo_frame: 'user_info' } %> + <%= f.button class: "c-btn c-btn--green c-account__btn u-ml-16" do %><%= t(:submit) %><% end %>
<% end %> diff --git a/app/views/users/_sign_up_form.html.erb b/app/views/users/_sign_up_form.html.erb new file mode 100644 index 000000000..70f56a358 --- /dev/null +++ b/app/views/users/_sign_up_form.html.erb @@ -0,0 +1,90 @@ + + + +
+ + + + + + + +
+ +
+
+ + + + + +
+ +
+ + + diff --git a/app/views/users/_user_info.html.erb b/app/views/users/_user_info.html.erb index dda96a28b..5d44e7b82 100644 --- a/app/views/users/_user_info.html.erb +++ b/app/views/users/_user_info.html.erb @@ -1,11 +1,11 @@ <%= turbo_frame_tag 'user_info' do %>
-
+