Merge branch 'main' of https://git.zetcraft.ru/PAYDAY/PaydayFrontend

react-app/src/components/app/app.js

@@ -12,7 +12,11 @@ class App extends Component {
         return (
             <div className="app">
                 <Header />
+                <div class="fixed"></div>
                 <Main />
+                <footer>
+                    <span>Copyrited By PayDay</span>
+                </footer>
             </div>
         );
     }

react-app/src/components/app/css/app.css

@@ -332,4 +332,64 @@ header {
     margin-right: 8px;
     border-radius: 50%;
     background-color: #aeaeae;
+}
+.navigation .container_flex {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+} /*# sourceMappingURL=style.css.map */
+.navigation_choise {
+    position: fixed;
+    background: -webkit-gradient(
+            linear,
+            left bottom,
+            left top,
+            from(#ececec),
+            to(#ececec)
+        ),
+        #e8e8e8;
+    background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    bottom: 50px;
+}
+footer {
+    width: 100%;
+    bottom: 0px;
+    position: fixed;
+    background-color: #fff;
+    height: 50px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+}
+footer span {
+    width: 200px;
+    color: #20d37d;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
 } /*# sourceMappingURL=style.css.map */

react-app/src/components/main/main.js

@@ -2,6 +2,7 @@ import { Component } from "react";
 
 import UniverseList from "../universe/universe-list";
 import NavigationList from "../navigation/navigation-list";
+import CreditsList from "../navigation-credits/navigation-credits";
 
 //генерятся из get запроса (будет ссылка в universeData вместо #)
 import KubGu from "./img/kubgu.jpg";
@@ -68,12 +69,13 @@ class Main extends Component {
             //Из UniverseList приходит текущий выбранный вуз, он отправляется в NavigationList
             <>
                 {/* тут проиходит переключение слайдеров (мб стоит сделать как список) */}
-                <UniverseList
+                {/* <UniverseList
                     data={universeData}
                     picturesList={picturesList}
                     onUniverseProps={this.onClickToUniverse}
-                />
+                /> */}
                 {/* <NavigationList /> */}
+                <CreditsList />
             </>
         );
     }

react-app/src/components/nav-credit-item/nav-credit-item.js

@@ -0,0 +1,29 @@
+import { Component } from "react";
+import AlphaPng from "./img/alpha.png";
+
+class CreditItem extends Component {
+    state = {};
+
+    render() {
+        const { name, credit, pic, onUniverseProps } = this.props;
+
+        return (
+            <div class="col-12 navigation_card navigation_bank_text">
+                <div class="navigation_bank">
+                    <img
+                        src={AlphaPng}
+                        alt="navigation"
+                        class="navigation_icon"
+                    />
+                    Альфа Банк <span>на 15 лет</span>
+                </div>
+                <div class="navigation_credit">
+                    <span class="navigation_credit_cost">10000 рублей/мес</span>
+                    <span class="navigation_credit_prosent">6% в год</span>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default CreditItem;

react-app/src/components/navigation-credits/navigation-credits.js

@@ -0,0 +1,44 @@
+import { Component } from "react";
+
+import CreditItem from "../nav-credit-item/nav-credit-item";
+
+class CreditsList extends Component {
+    state = {};
+
+    render() {
+        // const credits = data.map((item, index) => {
+        //     return <CreditItem key={index} />;
+        // });
+
+        return (
+            <section class="navigation">
+                <div class="container container_flex">
+                    <div class="navigation_fixed"></div>
+                    <div class="navigation_banks" id="navigation">
+                        <div class="navigation_banks_univer ">СпбГУ</div>
+                        <div class="navigation_banks_speciality ">
+                            09.03.04 - Программная инженерия
+                        </div>
+                        <div class="navigation_banks_sort navigation_banks_sort_hamburger">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </div>
+                    <CreditItem />
+                    <div class="row row-cols-lg-10 g-5 g-lg-3"></div>
+                </div>
+                <div class="navigation_choise">
+                    <div class="navigation_slid">
+                        <span class="navigation_slid_disable"></span>
+                        <span class="navigation_slid_active"></span>
+                        <span class="navigation_slid_disable"></span>
+                        <span class="navigation_slid_disable"></span>
+                    </div>
+                </div>
+            </section>
+        );
+    }
+}
+
+export default CreditsList;

react-app/src/components/navigation/navigation-list.js

@@ -39,6 +39,7 @@ class NavigationList extends Component {
                         <NavigationItem />
                         <NavigationItem />
                         <NavigationItem />
+                        {/* {navigations} */}
                     </div>
                 </div>
                 <div className="navigation_slid">