feat: review backend and frontend
- update to the latest version of Java/SpringBoot - update to the latest version NuxtJS - add account/password update - add account creation - add account password reset - add bundle to regroup questions and add default questions on user creation - add bundle creation
This commit is contained in:
@@ -9,4 +9,11 @@ $orange_hover: #DC6A00;
|
||||
$gray_1: #F6F6F6;
|
||||
$gray_2: #E8E8E8;
|
||||
$gray_3: #9B9B9B;
|
||||
$gray_4: #666666;
|
||||
$gray_4: #666666;
|
||||
|
||||
$info_text: $gray_4;
|
||||
$info_background: $gray_1;
|
||||
$warn_text: #FFFFFF;
|
||||
$warn_background: #f44336;
|
||||
$success_text: #eafbf6;
|
||||
$success_background: #2ed6a0;
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
@import "_color";
|
||||
@import "_font";
|
||||
@import "_spacing";
|
||||
@mixin border-shadow() {
|
||||
box-shadow: inset 0 0 0.5px 1px hsla(0, 0%,
|
||||
100%, 0.075),
|
||||
0 0 0 1px hsla(0, 0%, 0%, 0.05),
|
||||
0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
|
||||
0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
|
||||
0 3.5px 6px hsla(0, 0%, 0%, 0.09);
|
||||
}
|
||||
|
||||
86
frontend/assets/css/_modal.scss
Normal file
86
frontend/assets/css/_modal.scss
Normal file
@@ -0,0 +1,86 @@
|
||||
@import "main";
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
visibility: hidden;
|
||||
inset: 0;
|
||||
z-index: 1040;
|
||||
@media only screen and (min-width: $breakpoint) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
background: $white;
|
||||
position: relative;
|
||||
|
||||
margin: 0;
|
||||
padding: 64px 24px;
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
|
||||
@media only screen and (min-width: $breakpoint) {
|
||||
border-radius: 8px;
|
||||
padding: 64px;
|
||||
margin: 32px;
|
||||
max-width: $breakpoint;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
&-header {
|
||||
margin-block-end: 8px;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 $xx_small 0;
|
||||
}
|
||||
|
||||
.close_modal {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
font-size: 1rem;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $xxx_small;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
gap: $xxx_small;
|
||||
.button:not(.button-back) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgba($color: #000000, $alpha: 0.25);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
@import "_font";
|
||||
|
||||
%flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
%main-text {
|
||||
font-size: $main-font-size;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 2.1rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
%main-text-2 {
|
||||
font-size: $main-font-size;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.8rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
%secondary-text {
|
||||
font-size: $secondary-font-size;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
%secondary-text-bold {
|
||||
@extend %secondary-text;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
%tertiary-text {
|
||||
font-size: $tertiary-font-size;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
%tertiary-text-bold {
|
||||
@extend %tertiary-text;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
%main-text-bold {
|
||||
@extend %main-text;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
%main-text-small {
|
||||
font-size: $small-font-size;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.425rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
@@ -1,16 +1,19 @@
|
||||
$page_width: 1200px;
|
||||
$content_width: 920px;
|
||||
$header_height: 78px;
|
||||
$footer_height: 220px;
|
||||
|
||||
$max_z_index: 999;
|
||||
|
||||
$xxx_small: .5rem;
|
||||
$xx_small: .75rem;
|
||||
$x_small: 1.5rem;
|
||||
$small: 2rem;
|
||||
$medium: 3rem;
|
||||
$x_medium: 3.75rem;
|
||||
$xx_medium: 5rem;
|
||||
$large: 7.5rem;
|
||||
$x_large: 11.875rem;
|
||||
$xx_large: 16.25rem;
|
||||
$xxxx_small: 4px;
|
||||
$xxx_small: 8px;
|
||||
$xx_small: 12px;
|
||||
$x_small: 16px;
|
||||
$small: 24px;
|
||||
$medium: 32px;
|
||||
$x_medium: 48px;
|
||||
$xx_medium: 60px;
|
||||
$xxx_medium: 80px;
|
||||
$large: 120px;
|
||||
$x_large: 190px;
|
||||
$xx_large: 260px;
|
||||
|
||||
@@ -1,45 +1,63 @@
|
||||
@import "_color";
|
||||
@import "_font";
|
||||
@import "_placeholders";
|
||||
@import "_mixin";
|
||||
@import "_spacing";
|
||||
|
||||
$breakpoint: 1024px;
|
||||
|
||||
* {
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: $font-primary;
|
||||
background: $white;
|
||||
color: $gray_4;
|
||||
body {
|
||||
scroll-behavior: smooth;
|
||||
overflow-x: hidden;
|
||||
color: $gray_4;
|
||||
font-family: $font-primary;
|
||||
background: $white; // #ededf0
|
||||
}
|
||||
|
||||
a {
|
||||
color: $light_blue;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
.main-content {
|
||||
min-height: calc(100vh - $footer_height - $header_height);
|
||||
max-width: $content_width;
|
||||
margin: 0 auto;
|
||||
|
||||
@media only screen and (max-width: $breakpoint) {
|
||||
margin: 0 $small;
|
||||
}
|
||||
}
|
||||
|
||||
a, .button-link {
|
||||
color: $gray_4;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button-link {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a, p, .button-link {
|
||||
font-family: $font-primary;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: $xx_small $small;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.125rem;
|
||||
margin: $medium 0 $small 0;
|
||||
margin: $medium 0;
|
||||
color: $black;
|
||||
text-align: center;
|
||||
|
||||
@media only screen and (max-width: $breakpoint) {
|
||||
margin: $xx_small;
|
||||
margin: $xx_small 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,7 +66,7 @@ h2 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.75rem;
|
||||
letter-spacing: -0.02em;
|
||||
margin: $x-medium 0 $medium 0;
|
||||
margin: $xx_medium 0 $x_medium 0;
|
||||
|
||||
@media only screen and (max-width: $breakpoint) {
|
||||
margin: $xx_small;
|
||||
@@ -60,7 +78,7 @@ h3 {
|
||||
font-weight: bold;
|
||||
font-size: 1.75rem;
|
||||
line-height: 2rem;
|
||||
margin: $small 0;
|
||||
margin: $medium 0;
|
||||
}
|
||||
|
||||
p + p { margin-top: 1.5rem }
|
||||
@@ -70,17 +88,27 @@ hr {
|
||||
margin: $xxx_small 0;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $xxx_small;
|
||||
margin-block: $medium;
|
||||
|
||||
&__help {
|
||||
margin-block: $medium $small;
|
||||
}
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
padding: 0 32px;
|
||||
line-height: 60px;
|
||||
padding: $x_small $small;
|
||||
color: $white;
|
||||
border-radius: 100px;
|
||||
border: none;
|
||||
@@ -94,7 +122,18 @@ hr {
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin: $medium 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: $xx_small;
|
||||
margin: $x_medium 0;
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.button-back {
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button.orange:hover:not(:disabled) {
|
||||
@@ -126,16 +165,33 @@ hr {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: $xxx_small;
|
||||
font-size: 1.5rem;
|
||||
line-height: 24px;
|
||||
border-radius: $xxx_small;
|
||||
|
||||
&:hover, &:active {
|
||||
background: $gray_1;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
background: $gray_1;
|
||||
border: 1px solid $gray_2;
|
||||
border-radius: 100px;
|
||||
line-height: 50px;
|
||||
padding: 0 $x_small;
|
||||
padding: 0 $small;
|
||||
}
|
||||
|
||||
input[type=text]::placeholder,
|
||||
input[type=email]::placeholder,
|
||||
input[type=password]::placeholder {
|
||||
color: $gray_3;
|
||||
}
|
||||
@@ -150,41 +206,3 @@ input[type=password]::placeholder {
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: none;
|
||||
display: grid;
|
||||
grid-template-columns: [fullWidth-start] 1rem
|
||||
[left-start] 1fr
|
||||
[article-start right-start] minmax(20ch, $content_width)
|
||||
[article-end left-end] 1fr
|
||||
[right-end] 1rem [fullWidth-end];
|
||||
}
|
||||
.content > * {
|
||||
grid-column: article;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
grid-template-columns: minmax(20ch, $content_width);
|
||||
justify-content: center;
|
||||
grid-column: fullWidth;
|
||||
display: grid;
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
@supports (grid-template-columns: subgrid) {
|
||||
.full-width {
|
||||
grid-template-columns: subgrid;
|
||||
padding: 0;
|
||||
}
|
||||
.full-width-center {
|
||||
grid-column: article;
|
||||
}
|
||||
.full-width-right {
|
||||
grid-column: right;
|
||||
text-align: right;
|
||||
}
|
||||
.full-width-left {
|
||||
grid-column: left;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user