fix: mobile css

frontend-park-mail-ru · Dec 21, 2024 · 9eef6f1 · 9eef6f1
1 parent a30a06f
commit 9eef6f1
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 23 deletions.
diff --git a/src/application/components/cv_article/cv_article.scss b/src/application/components/cv_article/cv_article.scss
@@ -1,3 +1,5 @@
+@use '@/scss/variables' as v;
+
 .cv-article {
   display: flex;
   flex-direction: column;
@@ -32,15 +34,29 @@
     margin-bottom: 32px;
   }
 
-  &__pdf-button {
-    position: absolute;
-    top: var(--col-margin);
-    width: 36px;
-    height: 36px;
-    right: var(--col-margin);
+  &__pdf-picture {
+    width: 28px;
+    height: 28px;
     cursor: pointer;
   }
 
+  &__pdf-button {
+    background-color: var(--color-background-800);
+    border: none;
+    color: var(--color-main-100);
+    display: flex;
+    align-items: center;
+    text-decoration: underline;
+  }
+
+  &__job-search-status-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    gap: 8px;
+  }
+
   &__working-experience {
     padding: 0px 32px;
     font-size: var(--text-size-5);
@@ -71,7 +87,8 @@
 
   &__button-container {
     display: flex;
-    align-items: baseline;
+    flex-wrap: wrap;
+    align-items: center;
     gap: 8px;
     padding: 32px 32px;
     justify-content: start;
@@ -105,3 +122,11 @@
     padding: 0 32px;
   }
 }
+
+@media screen and (min-width: v.$mobile-breakpoint) {
+  .cv-article {
+    &__button-container {
+      align-items: baseline;
+    }
+  }
+}
diff --git a/src/application/components/cv_article/cv_article.tsx b/src/application/components/cv_article/cv_article.tsx
@@ -47,10 +47,20 @@ export class CvArticle extends Component {
         <div className="cv-article__header-container">
           <div className="cv-article__header">
             <h1 className="cv-article__header-text">{`${cv.positionRu} / ${cv.positionEn}`}</h1>
-            <div>
+            <div className="cv-article__job-search-status-container">
               <span className="cv-article__job-search-status pill pill_main">
                 {cv.jobSearchStatus}
               </span>
+              <button
+                type="button"
+                onClick={() => {
+                  cvActionCreators.loadPdf(cv.id);
+                }}
+                className="cv-article__pdf-button"
+              >
+                <img src={IconPdf} className="cv-article__pdf-picture" />
+                Скачать PDF
+              </button>
             </div>
           </div>
         </div>
@@ -96,15 +106,6 @@ export class CvArticle extends Component {
             </div>
           )
         )}
-        <img
-          src={IconPdf}
-          onClick={() => {
-            cvActionCreators.loadPdf(cv.id);
-          }}
-          className="cv-article__pdf-button"
-        >
-          PDF
-        </img>
       </article>
     );
   }

diff --git a/src/application/components/dropdown/dropdown.scss b/src/application/components/dropdown/dropdown.scss
@@ -0,0 +1,3 @@
+.dropdown {
+  z-index: 1000;
+}
diff --git a/src/application/components/dropdown/dropdown.tsx b/src/application/components/dropdown/dropdown.tsx
@@ -1,6 +1,7 @@
 import * as vdom from '@/modules/vdom/virtual_dom';
 import { Component } from '@/modules/vdom/virtual_node';
 import { VirtualNodeSpec } from '@/modules/vdom/virtual_node';
+import './dropdown.scss';
 
 export interface DropdownProps {
   elementClass: string;

diff --git a/src/application/components/frame_series/frame_series.scss b/src/application/components/frame_series/frame_series.scss
@@ -1,10 +1,14 @@
+@use '@/scss/variables' as v;
+
 /* Frame series component */
 .frame-series {
   &__frame-selector {
     display: flex;
     flex-direction: row;
     align-items: baseline;
     gap: var(--col-margin);
+    flex-wrap: wrap;
+    justify-content: center;
   }
 
   &__divider {
@@ -21,6 +25,12 @@
   }
 }
 
+@media screen and (min-width: v.$mobile-breakpoint) {
+  frame-series__frame-selector {
+    justify-content: start;
+  }
+}
+
 .frame-choice {
   font-size: var(--text-size-9);
   border-radius: 14px;

diff --git a/src/application/components/page_container/page-container.scss b/src/application/components/page_container/page-container.scss
@@ -11,4 +11,7 @@
   flex-direction: column;
   height: 100vh;
   width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
diff --git a/src/application/components/picture_input/picture_input.tsx b/src/application/components/picture_input/picture_input.tsx
diff --git a/src/application/components/vacancy_article/vacancy_article.scss b/src/application/components/vacancy_article/vacancy_article.scss
@@ -1,3 +1,5 @@
+@use '@/scss/variables' as v;
+
 .vacancy-article {
   display: flex;
   flex-direction: column;
@@ -76,19 +78,28 @@
 
   &__button-container {
     display: flex;
-    align-items: baseline;
+    flex-wrap: wrap;
+    align-items: center;
     gap: 8px;
     padding: var(--col-margin);
     justify-content: start;
   }
 }
 
+@media screen and (min-width: v.$mobile-breakpoint) {
+  .vacancy-article {
+    &__button-container {
+      align-items: baseline;
+    }
+  }
+}
+
 .vacancy-summary {
   display: flex;
   flex-direction: column;
   color: var(--color-main-100);
   &__header {
-    font-size: var(--text-size-10);
+    font-size: var(--text-size-8);
     text-decoration: none;
     margin-top: 0px;
     margin-bottom: 8px;
@@ -103,4 +114,18 @@
     font-size: var(--text-size-4);
     margin-right: 20px;
   }
+
+  &__span-box {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+@media screen and (min-width: v.$mobile-breakpoint) {
+  .vacancy-summary {
+    &__header {
+      font-size: var(--text-size-10);
+    }
+  }
 }
diff --git a/src/application/components/vacancy_article/vacancy_article.tsx b/src/application/components/vacancy_article/vacancy_article.tsx
@@ -78,7 +78,7 @@ export class VacancyArticle extends Component {
           <div className="vacancy-article__header vacancy-summary">
             <h1 className="vacancy-summary__header">{vacancy.position}</h1>
             <div className="vacancy-summary__company-name">{vacancy.companyName}</div>
-            <div key="span-box">
+            <div key="span-box" className="vacancy-summary__span-box">
               <span className="vacancy-summary__salary">
                 {vacancy.salary ? vacancy.salary.toString() + ' ₽' : ''}
               </span>

diff --git a/src/application/pages/cv_page/cv_page.scss b/src/application/pages/cv_page/cv_page.scss
@@ -2,10 +2,10 @@
 
 .cv-page {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
+  align-items: center;
   width: var(--12-col);
   margin-top: var(--col-margin);
-  align-items: start;
   align-self: center;
   gap: var(--col-margin);
 
@@ -15,6 +15,14 @@
     border-radius: var(--radius-l);
     padding: 16px;
     color: var(--color-main-100);
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    max-width: 425px;
+  }
+
+  &__side-column {
+    width: var(--3-col);
   }
 
   &__cv-container {
@@ -28,5 +36,6 @@
   .cv-page {
     display: flex;
     flex-direction: row;
+    align-items: start;
   }
 }
diff --git a/src/application/pages/vacancies_page/vacancies_page.scss b/src/application/pages/vacancies_page/vacancies_page.scss
@@ -10,6 +10,10 @@
   align-self: center;
   background-color: var(--color-background-1000);
   color: var(--color-main-100);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
   &__side-column {
     border-radius: var(--radius-l);
     padding: 16px;
@@ -19,6 +23,9 @@
     flex-direction: column;
     align-items: center;
     width: var(--3-col);
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     gap: 16px;
   }
 
@@ -31,6 +38,10 @@
     border-radius: var(--radius-l);
     padding: 16px;
     width: var(--9-col);
+
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
   }
 
   &__complex-search {

diff --git a/src/application/pages/vacancy_page/vacancy_page.scss b/src/application/pages/vacancy_page/vacancy_page.scss
@@ -3,7 +3,6 @@
 .vacancy-page {
   display: flex;
   flex-direction: column;
-  align-items: column-reverse;
   width: var(--12-col);
   margin-top: var(--col-margin);
   gap: var(--col-margin);
@@ -20,6 +19,7 @@
     border-radius: var(--radius-l);
     padding: 16px;
     color: var(--color-main-100);
+    max-width: 425px;
   }
 
   &__vacancy-container {