From 0073d476c43a73bf3091797aa6ae1b517da66cb9 Mon Sep 17 00:00:00 2001
From: Boris Voropaev <boris1voropaev@gmail.com>
Date: Thu, 16 Nov 2023 09:50:26 +0300
Subject: [PATCH] grid

---
 .../layout/footer/footer.component.html       |   2 +-
 .../layout/footer/footer.component.scss       |  62 --------
 .../_modules/layout/grid/grid.component.html  |   8 +-
 src/assets/css/_basics.scss                   |  72 ++--------
 src/assets/css/_grid.scss                     | 136 ++++++++++++++++++
 src/styles.scss                               |   1 +
 6 files changed, 157 insertions(+), 124 deletions(-)
 create mode 100644 src/assets/css/_grid.scss

diff --git a/src/app/_modules/layout/footer/footer.component.html b/src/app/_modules/layout/footer/footer.component.html
index f31a04b..839369d 100644
--- a/src/app/_modules/layout/footer/footer.component.html
+++ b/src/app/_modules/layout/footer/footer.component.html
@@ -1,4 +1,4 @@
-<div class="footer">
+<div class="footer layout-corral">
   <div class="block">
     <div class="logo">
       <img src="assets/images/logo_vniigaz_wt_280x110.svg" alt="">
diff --git a/src/app/_modules/layout/footer/footer.component.scss b/src/app/_modules/layout/footer/footer.component.scss
index e489912..e69de29 100644
--- a/src/app/_modules/layout/footer/footer.component.scss
+++ b/src/app/_modules/layout/footer/footer.component.scss
@@ -1,62 +0,0 @@
-.footer {
-  width: 100%;
-  padding: 40px 100px;
-  margin-top: 48px;
-  background-color: var(--prime-act);
-  color: white;
-  display: flex;
-  flex-direction: column;
-  .block{
-    a{
-      cursor: pointer;
-      color: white;
-      :hover{
-        color: white;
-      }
-    }
-    display: flex;
-    flex-wrap: wrap;
-    grid-gap: 20px;
-    &>div{
-      padding-bottom: 40px;
-    }
-    div{
-      display: block;
-      flex-grow: 1;
-      flex-basis: 196px;
-      flex-shrink: 0;
-      margin-bottom: -16px;
-      div {
-        margin-bottom: 16px;
-      }
-    }
-    .icons a{
-      margin-right: 16px;
-    }
-    .menu{
-      display: block;
-    }
-  }
-
-  .line{
-    width: 100%;
-    height: 1px;
-    background-color: var(--prime);
-    margin-bottom: 40px;
-  }
-
-  .copyright{
-    display: flex;
-    justify-content: space-between;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-  }
-}
-
-
-@media screen and (max-width: 1330px){
-  .footer{
-    padding: 40px 24px;
-  }
-}
diff --git a/src/app/_modules/layout/grid/grid.component.html b/src/app/_modules/layout/grid/grid.component.html
index 0734481..8b20240 100644
--- a/src/app/_modules/layout/grid/grid.component.html
+++ b/src/app/_modules/layout/grid/grid.component.html
@@ -5,8 +5,8 @@
 <div class="wrapper">
   <header class="space"></header>
   <jumbotron></jumbotron>
-  <div class="space">
-    <div class="grid-content layout-corral">
+  <div class="space content-sapce">
+    <div class="content-grid layout-corral">
       <left-content></left-content>
       <div class="main-content">
       <router-outlet></router-outlet>
@@ -14,6 +14,8 @@
       <right-content></right-content>
     </div>      
   </div>
-  <footer></footer>
+
+  <footer class="space"></footer>
+
 </div>
 
diff --git a/src/assets/css/_basics.scss b/src/assets/css/_basics.scss
index 56ae283..d1007b7 100644
--- a/src/assets/css/_basics.scss
+++ b/src/assets/css/_basics.scss
@@ -40,65 +40,22 @@ $ps:16px;
 $pxs:8px;
 $pxxs:4px;
 
-.space{
-  display: flex;
-  justify-content: center;
-  .layout-corral{
-    max-width: calc($layout-width + 2 * $pxl);
-    padding: 0 $pxl;
-    flex-grow: 1;
-  }
-  .page-corral{
-    max-width: calc($page-width + 2 * $pxl);
-    padding: 0 $pxl;
-    flex-grow: 1;
-  }
-}
 
-jumbotron{
-  .jumbotron-bg{
-    height: 400px;
-    background-size: cover;
-    background-position: center;
-    .jumbotron-content{
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      header-user-bar{
-        align-self: flex-end;
-        margin-top: $pl;
-      }
-      h1{
-        margin-top: calc( 0px - $pl );
-        max-width: $page-width;
-        align-self: center;
-        width: 100%;
-      }
-    }
-  }
-  .jumbotron-edit-field{
-    height: 60px;
-    .jumbotron-edit-field-row{
-      max-width: calc($page-width  + 2 * $pxl);
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: $pxs;
-    }
-  }
-}
 
-.grid-content{
-  display: flex;
-  >*{
-    flex-grow: 1;
-  }
-}
-.main-content{
-  width: 100%;
-  max-width: $page-width;
-}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 .menu, .page-header {
@@ -277,7 +234,6 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-
   }
 }
 
diff --git a/src/assets/css/_grid.scss b/src/assets/css/_grid.scss
new file mode 100644
index 0000000..15b2890
--- /dev/null
+++ b/src/assets/css/_grid.scss
@@ -0,0 +1,136 @@
+.center{
+    align-items: center;
+}
+
+.space{
+  display: flex;
+  justify-content: center;
+  .layout-corral{
+    max-width: calc($layout-width + 2 * $pxl);
+    padding: 0 $pxl;
+    flex-grow: 1;
+  }
+  .page-corral{
+    max-width: calc($page-width + 2 * $pxl);
+    padding: 0 $pxl;
+    flex-grow: 1;
+  }
+}
+
+
+
+jumbotron{
+  .jumbotron-bg{
+    height: 400px;
+    background-size: cover;
+    background-position: center;
+    .jumbotron-content{
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      header-user-bar{
+        align-self: flex-end;
+        margin-top: $pl;
+      }
+      h1{
+        margin-top: calc( 0px - $pl );
+        max-width: $page-width;
+        align-self: center;
+        width: 100%;
+      }
+    }
+  }
+  .jumbotron-edit-field{
+    height: 60px;
+    .jumbotron-edit-field-row{
+      max-width: calc($page-width  + 2 * $pxl);
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: $pxs;
+    }
+  }
+}
+
+.content-sapce{
+  flex-grow: 1;
+  .content-grid{
+    display: flex;
+    >*{
+      flex-grow: 1;
+    }
+    .main-content{
+      width: 100%;
+      max-width: $page-width;
+    }
+    
+  }
+}
+
+footer{
+  background-color: var(--prime-act);
+  align-self: stretch;
+
+  .footer {
+    width: 100%;
+    padding: 40px 0;
+    margin-top: 48px;
+    
+    color: white;
+    display: flex;
+    flex-direction: column;
+    .block{
+      a{
+        cursor: pointer;
+        color: white;
+        :hover{
+          color: white;
+        }
+      }
+      display: flex;
+      flex-wrap: wrap;
+      grid-gap: 20px;
+      &>div{
+        padding-bottom: 40px;
+      }
+      div{
+        display: block;
+        flex-grow: 1;
+        flex-basis: 196px;
+        flex-shrink: 0;
+        margin-bottom: -16px;
+        div {
+          margin-bottom: 16px;
+        }
+      }
+      .icons a{
+        margin-right: 16px;
+      }
+      .menu{
+        display: block;
+      }
+    }
+  
+    .line{
+      width: 100%;
+      height: 1px;
+      background-color: var(--prime);
+      margin-bottom: 40px;
+    }
+  
+    .copyright{
+      display: flex;
+      justify-content: space-between;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+    }
+  }
+}
+
+@media screen and (max-width: 1330px){
+  .footer{
+    padding: 40px 24px;
+  }
+}
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 197b4b1..19e9526 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -4,6 +4,7 @@
 @import 'dropdown';
 @import 'fonts';
 @import 'forms';
+@import 'grid';
 @import 'list-items';
 @import 'main-menu';
 @import 'page-top-panel';