Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

grid

master
Boris Voropaev 2023-11-16 09:50:26 +03:00
parent d576bce667
commit 0073d476c4
6 changed files with 157 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/_modules/layout/footer/footer.component.html
View File

@ -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="">

62
src/app/_modules/layout/footer/footer.component.scss
View File

@ -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;
}
}

8
src/app/_modules/layout/grid/grid.component.html
View File

@ -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>

72
src/assets/css/_basics.scss
View File

@ -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;
}
}

136
src/assets/css/_grid.scss Normal file
View File

@ -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;
}
}

1
src/styles.scss
View File

@ -4,6 +4,7 @@
@import 'dropdown';
@import 'fonts';
@import 'forms';
@import 'grid';
@import 'list-items';
@import 'main-menu';
@import 'page-top-panel';