sprint_2 refactoring

etacarinae333 · Feb 25, 2024 · a483efa · a483efa
1 parent efa0de8
commit a483efa
Show file tree

Hide file tree

Showing 9 changed files with 225 additions and 283 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,8 +7,8 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-node_modules
-dist
+node_modules/
+dist/
 dist-ssr
 *.local
 

diff --git a/README.md b/README.md
@@ -4,21 +4,21 @@ https://github.com/site-for-design/middle.messenger.praktikum.yandex
 
 В этом спринте я сверстал страницы из предложенного макета. Сделал минимальный интерактив скриптами (модалки, увеличение текстового поля message, редактирование профиля). Формы пока ничего не изменяют.
 
-Я замокал данные переписок. И кредов для Login Page (чтобы без ошибок отправить данные формы нужно в login написать login, в password - password).
+Я замокал данные переписок. И кредов для Login Page (чтобы без ошибок отправить данные формы нужно в login написать login, в password - Password1).
 
 ## Страницы
 
-- [Login Page](https://yaproject2.netlify.app),
-- [Registration Page](https://yaproject2.netlify.app/registration),
-- [Chat Page](https://yaproject2.netlify.app/chat),
-- [404 Page](https://yaproject2.netlify.app/smth),
-- [500 Page](https://yaproject2.netlify.app/500),
+-   [Login Page](https://yaproject2.netlify.app),
+-   [Registration Page](https://yaproject2.netlify.app/registration),
+-   [Chat Page](https://yaproject2.netlify.app/chat),
+-   [404 Page](https://yaproject2.netlify.app/smth),
+-   [500 Page](https://yaproject2.netlify.app/500),
 
 Account секция сверстана в Chat Page как модальное окно, чтобы открыть - нажмите на профиль в сайдбаре слева.
 
 ## Установка
 
-- `npm run start` — запуск сборки и превью.
-- `npm run dev` — запуск проекта в режиме разработки.
-- `npm run build` — запуск сборки.
-- `npm run preview` — запуск просмотра сборки.
+-   `npm run start` — запуск сборки и превью.
+-   `npm run dev` — запуск проекта в режиме разработки.
+-   `npm run build` — запуск сборки.
+-   `npm run preview` — запуск просмотра сборки.
diff --git a/dist/index.html b/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>YandexPracticum Messager</title>
-    <script type="module" crossorigin src="/assets/index-JUzq658P.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-R4qvd1_u.css">
+    <script type="module" crossorigin src="/assets/index-wmMtbnlU.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-kJOTjfN7.css">
   </head>
   <body>
     <main id="app"></main>

diff --git a/dist/scss/shared.scss b/dist/scss/shared.scss
@@ -1,178 +1,96 @@
 .container {
- max-width: 510px;
- width: 100%;
- margin: 0 auto;
- padding: 0 30px;
- display: flex;
- flex-wrap: wrap;
+    max-width: 510px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 30px;
+    display: flex;
+    flex-wrap: wrap;
 }
 h2 {
- font-size: 16px;
+    font-size: 16px;
 }
 h3 {
- font-size: 15px;
+    font-size: 15px;
 }
 .btn {
- transition: 0.2s;
- cursor: pointer;
- width: 280px;
- max-width: 100%;
- height: 37px;
- line-height: 37px;
- padding: 0 10px;
- border-radius: 8px;
- font-size: 13px;
- text-align: center;
- color: #fff;
- background-color: $primaryColor;
- &:hover {
-  transition: 0.2s;
-  background-color: $darkPrimaryColor;
- }
+    transition: 0.2s;
+    cursor: pointer;
+    width: 280px;
+    max-width: 100%;
+    height: 37px;
+    line-height: 37px;
+    padding: 0 10px;
+    border-radius: 8px;
+    font-size: 13px;
+    text-align: center;
+    color: #fff;
+    background-color: $primaryColor;
+    &:hover {
+        transition: 0.2s;
+        background-color: $darkPrimaryColor;
+    }
 }
 .link {
- transition: 0.2s;
- cursor: pointer;
- font-size: 11px;
- color: $primaryColor;
- &.red {
-  color: $redColor;
-  &:hover {
-   transition: 0.2s;
-   color: darken($redColor, 10%);
-  }
- }
- &:hover {
-  transition: 0.2s;
-  color: $darkPrimaryColor;
- }
+    transition: 0.2s;
+    cursor: pointer;
+    font-size: 11px;
+    color: $primaryColor;
+    &.red {
+        color: $redColor;
+        &:hover {
+            transition: 0.2s;
+            opacity: 0.8;
+        }
+    }
+    &:hover {
+        transition: 0.2s;
+        color: $darkPrimaryColor;
+    }
 }
 .title {
- font-size: 20px;
- width: 100%;
- text-align: center;
-}
-
-.form {
- width: 340px;
- max-width: 100%;
- border-radius: 12px;
- box-shadow: 0px 0px 6px 0px #00000024;
- padding: 30px;
- padding-top: 50px;
- display: flex;
- flex-direction: column;
- align-items: center;
- .title {
-  margin-bottom: 40px;
- }
- .error-title {
-  color: $redColor;
- }
- form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
- }
- .link {
-  margin-top: 14px;
- }
- .input-wrap {
-  width: 100%;
-  margin-bottom: 16px;
-  position: relative;
-  display: block;
-  .label {
-   position: absolute;
-   left: 0;
-   bottom: 8px;
-   pointer-events: none;
-   transition: 0.2s ease all;
-   color: $lightTextColor;
-  }
-  input {
-   padding-top: 20px;
-   border-bottom: 1px solid #3369f3;
-   width: 100%;
-   padding-bottom: 6px;
-  }
-  input:focus ~ .label,
-  input:not(:focus):valid ~ .label {
-   bottom: 25px;
-   font-size: 9px;
-  }
-  .prompt {
-   display: none;
-   position: absolute;
-   left: 0;
-   bottom: -16px;
-   font-size: 8px;
-   font-weight: 400;
-   color: $redColor;
-  }
-  &.error {
-   .prompt {
-    display: block;
-   }
-  }
- }
- .file-wrap {
-  margin-top: 0;
-  cursor: pointer;
-  text-align: center;
-  input {
-   display: none;
-  }
-  .link {
-   text-decoration: underline;
-  }
-  .filename {
-   color: #8d8d8d;
-  }
- }
- button {
-  margin-top: 60px;
- }
+    font-size: 20px;
+    width: 100%;
+    text-align: center;
 }
 
 .modal {
- transition: 0.4s;
- opacity: 0;
- visibility: hidden;
- z-index: 4;
- padding: 40px 30px;
- position: fixed;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- background-color: #fff;
- .title {
-  font-size: 15px;
- }
- button {
-  margin-top: 16px;
- }
- &.active {
-  transition: 0.4s;
-  opacity: 1;
-  visibility: visible;
- }
+    transition: 0.4s;
+    opacity: 0;
+    visibility: hidden;
+    z-index: 4;
+    padding: 40px 30px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    .title {
+        font-size: 15px;
+    }
+    button {
+        margin-top: 16px;
+    }
+    &.active {
+        transition: 0.4s;
+        opacity: 1;
+        visibility: visible;
+    }
 }
 .overlay {
- transition: 0.4s;
- opacity: 0;
- visibility: hidden;
- z-index: 3;
- cursor: pointer;
- position: fixed;
- left: 0;
- top: 0;
- width: 100vw;
- height: 100vh;
- background-color: #000;
- &.active {
-  transition: 0.4s;
-  opacity: 0.4;
-  visibility: visible;
- }
+    transition: 0.4s;
+    opacity: 0;
+    visibility: hidden;
+    z-index: 3;
+    cursor: pointer;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000;
+    &.active {
+        transition: 0.4s;
+        opacity: 0.4;
+        visibility: visible;
+    }
 }
diff --git a/dist/scss/styles.scss b/dist/scss/styles.scss
@@ -1,16 +1,17 @@
-@import "variables";
-@import "fonts";
-@import "reset";
-@import "shared";
+@import "./variables";
+@import "./fonts";
+@import "./reset";
+@import "./shared";
 
 * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
 }
+
 html {
- font-family: "Inter", sans-serif;
- font-weight: 500;
- font-size: 12px;
- color: $textColor;
+    font-family: Inter, sans-serif;
+    font-weight: 500;
+    font-size: 12px;
+    color: $textColor;
 }