Commit 450dc760 authored by Moreau Elise's avatar Moreau Elise
Browse files

update css file / create grid file

parent a785fe9a
......@@ -14,25 +14,10 @@ body, html {
height: 100%
}
.main-wrapper {
padding: 30px;
min-height: 100%;
display: flex;
flex-direction: column;
}
.container-wrapper {
flex: 1;
background-color: white;
border-radius: 5px;
opacity: 0.9;
display: flex;
flex-direction: column;
}
#footer-content {
border-radius: 0px 0px 5px 5px;
}
#header-content {
......@@ -44,16 +29,11 @@ body, html {
margin: 10px;
}
#usercard, #groupcard {
#groupcard {
width: 350px;
grid-row:1/3
}
.form_format {
grid-column: span 4 ;
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - 240px);
}
......@@ -62,69 +42,24 @@ body, html {
justify-content: center;
}
#content {
display: grid;
grid-template-columns: 30% 25% 25%;
grid-gap: 2px;
grid-template-rows: repeat(4, var(--row-height));
}
#members{
grid-row: 3/5;
grid-column: 1/5;
.list{
max-height: 370px;
}
#usercard {
grid-column: 1/2;
grid-row:1/2
}
#map {
grid-row:1/3;
grid-column: 2/5;
overflow: scroll;
}
#members_list {
max-height: 95%;
}
#groups {
grid-row: 2/5;
grid-column: 1/2;
}
#list {
overflow:scroll;
grid-row:2/5;
grid-column: 1/5;
}
#center_text {
grid-column: span 4 ;
max-width: 100%;
}
#list_tchat {
grid-column: 1/2;
grid-row: 1/3;
}
.current_tchat{
grid-column: 2/5;
grid-row: 1/2;
}
#current_messages{
grid-column: 2/5;
grid-row: 2/4;
overflow: scroll;
}
.reply {
grid-column: 2/5;
grid-row: 4/5;
}
#map {
height: 400px;
width: 100%;
......
.main-wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding: 30px;
min-height: 100%;
}
.container-wrapper {
flex: 1;
background-color: white;
border-radius: 5px;
opacity: 0.9;
display: flex;
flex-direction: column;
}
.col {
flex-shrink: 1;
flex-grow: 0;
justify-content: flex-start;
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: row;
}
.col + .col {
margin-left: 1.2%;
}
.s1 {
flex-basis: 7.2333333333%;
}
.s2 {
flex-basis: 15.6666666667%;
}
.s3 {
flex-basis: 24.1%;
}
.s4 {
flex-basis: 32.5333333333%;
}
.s5 {
flex-basis: 40.9666666667%;
}
.s6 {
flex-basis: 49.4%;
}
.s7 {
flex-basis: 57.8333333333%;
}
.s8 {
flex-basis: 66.2666666667%;
}
.s9 {
flex-basis: 74.7%;
}
.s10 {
flex-basis: 83.1333333333%;
}
.s11 {
flex-basis: 91.5666666667%;
}
.s12 {
flex-basis: 100%;
}
@media only screen and (min-width: 650px) {
.m1 {
flex-basis: 7.2333333333%;
}
.m2 {
flex-basis: 15.6666666667%;
}
.m3 {
flex-basis: 24.1%;
}
.m4 {
flex-basis: 32.5333333333%;
}
.m5 {
flex-basis: 40.9666666667%;
}
.m6 {
flex-basis: 49.4%;
}
.m7 {
flex-basis: 57.8333333333%;
}
.m8 {
flex-basis: 66.2666666667%;
}
.m9 {
flex-basis: 74.7%;
}
.m10 {
flex-basis: 83.1333333333%;
}
.m11 {
flex-basis: 91.5666666667%;
}
.m12 {
flex-basis: 100%;
}
}
@media only screen and (min-width: 1000px) {
.l1 {
flex-basis: 7.2333333333%;
}
.l2 {
flex-basis: 15.6666666667%;
}
.l3 {
flex-basis: 24.1%;
}
.l4 {
flex-basis: 32.5333333333%;
}
.l5 {
flex-basis: 40.9666666667%;
}
.l6 {
flex-basis: 49.4%;
}
.l7 {
flex-basis: 57.8333333333%;
}
.l8 {
flex-basis: 66.2666666667%;
}
.l9 {
flex-basis: 74.7%;
}
.l10 {
flex-basis: 83.1333333333%;
}
.l11 {
flex-basis: 91.5666666667%;
}
.l12 {
flex-basis: 100%;
}
}
.o1 {
margin-left: 6.0333333333% !important;
}
.o2 {
margin-left: 13.2666666667% !important;
}
.o3 {
margin-left: 20.5% !important;
}
.o4 {
margin-left: 27.7333333333% !important;
}
.o5 {
margin-left: 34.9666666667% !important;
}
.o6 {
margin-left: 42.2% !important;
}
.o7 {
margin-left: 49.4333333333% !important;
}
.o8 {
margin-left: 56.6666666667% !important;
}
.o9 {
margin-left: 63.9% !important;
}
.o10 {
margin-left: 71.1333333333% !important;
}
.o11 {
margin-left: 78.3666666667% !important;
}
.o12 {
margin-left: 85.6% !important;
}
/*# sourceMappingURL=_grid.css.map */
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment