HM-67. Верстка главной страницы (#33)

src/app.html

@@ -15,7 +15,7 @@
             <div class="container-fluid">
                 <div class="Logo__box">
                 </div>
-                <a class="h3 text-light navbar-brand text-wrap text-center" href="/">Storage Service</a>
+                <a class="h3 text-light navbar-brand text-wrap m-0" href="/">Storage Service</a>
                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                     aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
@@ -34,13 +34,55 @@
                     </ul>
                 </div>
         </nav>
-
     </template>
+
+    <!-- Шаблон карточек на главной-->
+    <template id="main-statistic">
+        <div class="card-group mt-2 justify-content-center">
+            <div class="card bg-warning mb-3 ml-3" style="max-width: 18rem;">
+                <div class="card-header h5">Статистика</div>
+                <div class="card-body">
+                    <div class="card-title h5 row">
+                        <div class="col-sm-7 w-auto pr-0">Хранилищ:</div>
+                        <div class="col-sm-2 ml-auto w-auto">0</div>
+                    </div>
+                    <div class="card-title h5 row">
+                        <div class="col-sm-7 w-auto pr-0">Сервисов:</div>
+                        <div class="col-sm-2 ml-auto w-auto">0</div>
+                    </div>
+                    <div class="card-title h5 row">
+                        <div class="col-sm-7 w-auto pr-0">Авторов:</div>
+                        <div class="col-sm-2 ml-auto w-auto">0</div>
+                    </div>
+                </div>
+            </div>
+            <div class="card text-body bg-info mb-3 ml-3" style="max-width: 18rem;">
+                <div class="card-header h5">Ошибки</div>
+                <div class="card-body">
+                    <div class="card-title h5 row ">
+                        <div class="col-sm-10 w-auto pr-0">Критические:</div>
+                        <div class="col-sm-2 ml-auto w-auto">0</div>
+                    </div>
+                    <div class=" card-title h5 row">
+                        <div class="col-sm-10 w-auto pr-0">Ошибки запросов:</div>
+                        <div class="col-sm-2 ml-auto w-auto">0</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <!-- Шаблон содержимого главной-->
+    <template id="main-content">
+        <div class="d-flex justify-content-center m-0">
+            <p class="h5 text-center text-wrap m-0 w-50">Добро пожаловать в приложение Storage Service</p>
+        </div>
+    </template>
+
     <!-- Шаблон контейнера страниц-->
     <template id="page-container">
         <div class="PageContainer"></div>
     </template>
-
     <!-- Шаблон кнопки-->
     <template id="button">
         <button type="button" class="btn btn-outline-primary"></div>
@@ -216,12 +258,10 @@
                 </div>
                 <div class="collapse" id="descriptionCollapse">
                     <div class="Info__description card card-body">
-
                     </div>
                 </div>
             </div>
             <div class="Info__footer">
-
             </div>
         </div>
     </template>
@@ -242,7 +282,6 @@
         </div>
     </template>
 
-
     <!-- Шаблон для Модального Сайдбара -->
     <template id="modal-sidebar">
         <div class="ModalSidebar row justify-content-end m-0">

src/components/main-content/MainContent.js

@@ -0,0 +1,9 @@
+import Component from '../component/Component';
+
+class MainContent extends Component {
+    constructor (parentNode) {
+        super('#main-content', parentNode);
+    }
+}
+
+export default MainContent;

src/components/main-content/index.js

@@ -0,0 +1,3 @@
+import MainContent from './MainContent';
+
+export default MainContent;

src/components/main-page/MainPage.js

@@ -1,10 +1,12 @@
 import Component from '../component/index';
+import MainStatistic from '../main-statistic';
+import MainContent from '../main-content';
 
 class MainPage extends Component {
     constructor (mainNodeSelector, parentNode) {
         super(mainNodeSelector, parentNode);
-
+        this.mainStatistic = new MainStatistic(this.mainNode);
-        this.mainNode.textContent = 'Главная страница';
+        this.mainContent = new MainContent(this.mainNode);
     }
 }
 

src/components/main-statistic/MainStatistic.js

@@ -0,0 +1,9 @@
+import Component from '../component/index';
+
+class MainStatistic extends Component {
+    constructor (parentNode) {
+        super('#main-statistic', parentNode);
+    }
+}
+
+export default MainStatistic;

src/components/main-statistic/index.js

@@ -0,0 +1,3 @@
+import MainStatistic from './MainStatistic';
+
+export default MainStatistic;