Gedeeltelijk opgelost

This commit is contained in:
Atilla
2024-03-05 19:39:41 +01:00
parent c3fc78a598
commit e60518fa77
4 changed files with 85 additions and 792 deletions

View File

@@ -1,712 +1,3 @@
// /*default colors*/
// $primary-color: rgb(171, 211, 174);
// $secondary-color: rgb(143, 188, 143);
// @import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
// @import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
// $font-titels: "Akaya Kanadaka", system-ui;
// $font-text: "Afacad", sans-serif;
// @mixin flexbox
// {
// display: flex;
// justify-content: space-around;
// }
// @mixin groene-border
// {
// border: solid 2px $primary-color;
// }
// @mixin box-shadow
// {
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
// }
// @mixin border-radius
// {
// border-radius: 40px;
// }
// h1, h2, h3, h4, h5
// {
// font-family: $font-titels;
// margin: 0;
// }
// p, td
// {
// font-family: $font-text;
// }
// body
// {
// // background-image: url("../images/achtergrond.png");
// // background-repeat: no-repeat;
// // background-size: cover;
// // background-position: center;
// // // font-family: $font-text;
// // display: flex;
// // justify-content: center;
// // align-items: center;
// // height: 100vh;
// // margin: 0;
// background-image: url("../images/achtergrond.png");
// background-repeat: no-repeat;
// background-size: cover;
// background-position: center;
// // font-family: $font-text;
// display: flex;
// justify-content: center;
// align-items: center;
// height: 100vh;
// margin: 0;
// .mainContainer
// {
// width: 85vw;
// height: 38rem;
// background-color: rgb(255, 255, 255, 95%);
// border-radius: 40px;
// padding: 2rem;
// .goodgarden-logo
// {
// // z-index: inherit;
// position: absolute;
// width: 10vw;
// left: 50%;
// top: 2.5rem;
// transform: translateX(-50%);
// }
// .informatie-kas-main-container
// {
// display: grid;
// grid-template-columns: 5fr 7fr;
// }
// .mainBorder
// {
// padding: 1rem 0;
// height: 35rem;
// border: solid 5px $primary-color;
// border-radius: 40px;
// .pagina-titel
// {
// font-size: 2rem;
// margin-left: 1.5rem;
// }
// #sectie-1
// {
// display: flex;
// flex-direction: column;
// gap: 1rem;
// padding: 0 2.5rem 0 1rem;
// position: relative;
// // h1
// // {
// // background-color: green;
// // }
// .parent-algemeen-overzicht
// {
// @include box-shadow;
// @include border-radius;
// padding: 1rem;
// margin-top: 1rem;
// .algemeen-overzicht
// {
// @include groene-border;
// @include border-radius;
// font-size: 1.25rem;
// padding: .5rem 1rem;
// // background-color: red;
// .table-informatie-kas
// {
// width: 100%;
// .tr-informatie-kas
// {
// display: flex;
// justify-content: space-between;
// text-align: left;
// }
// // .tr-informatie-kas > :last-child
// // {
// // text-align: center; /* Centers the numbers */
// // flex: 1; /* Allows it to expand to fill the space */
// // }
// // }
// }
// }
// .grafiek
// {
// @include box-shadow;
// @include border-radius;
// padding: 1rem;
// position: relative;
// .grafiek-innerbox
// {
// @include groene-border;
// // @include inner-border-radius;
// font-size: 1.25rem;
// padding: 0 1rem 2.5rem;
// height: 225px;
// // position: relative;
// h2
// {
// position: absolute;
// left: 50%;
// transform: translateX(-50%);
// }
// canvas
// {
// // Zorgt ervoor dat de grafiek precies in eht midden komt
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
// }
// }
// }
// .content
// {
// display: grid;
// grid-template-columns: 3fr 1fr 3fr;
// height: 100%;
// .kant
// {
// &-links
// {
// grid-column: 1;
// #planten
// {
// width: 100%;
// border-collapse: collapse;
// td
// {
// article
// {
// height: 7rem;
// width: 10rem;
// padding: .6rem;
// margin: .1rem;
// margin-left: 2rem;
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// border: solid 3px $primary-color;
// border-radius: 40px;
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
// #toevoegen
// {
// height: 5rem;
// width: 5rem;
// }
// h2
// {
// color: gray;
// }
// &:hover
// {
// background-color: lightgray;
// }
// }
// }
// }
// }
// &-rechts
// {
// grid-column: 3;
// // margin-right: 2rem;
// #metingen
// {
// border: solid 3px $primary-color;
// border-radius: 40px;
// #main-waardes
// {
// display: flex;
// justify-content: space-evenly;
// padding: .5rem;
// padding-bottom: 0;
// width: 100%;
// table
// {
// display: flex;
// justify-content: space-around;
// // width: 100%;
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// /* Divider */
// .divider {
// display: flex;
// justify-content: center;
// border: solid 1px $primary-color;
// border-radius: 5px;
// width: 80%;
// margin: 0 auto;
// }
// /* The Modal (background) */
// .modal
// {
// display: none;
// position: fixed;
// z-index: 999;
// left: 50%;
// top: 50%;
// transform: translate(-50%, -50%);
// background: white;
// padding: 20px;
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
// width: 30vw;
// height: auto;
// border: solid 2px black;
// border-radius: 10px;
// .close
// {
// color: #aaa;
// float: right;
// font-size: 28px;
// font-weight: bold;
// &:hover,
// &:active
// {
// color: black;
// text-decoration: none;
// cursor: pointer;
// }
// }
// }
/*default colors*/
// $primary-color: rgb(171, 211, 174);
// $secondary-color: rgb(143, 188, 143);
// @import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
// @import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
// $font-titels: "Akaya Kanadaka", system-ui;
// $font-text: "Afacad", sans-serif;
// @mixin flexbox
// {
// display: flex;
// justify-content: space-around;
// }
// @mixin groene-border
// {
// border: solid 2px $primary-color;
// }
// @mixin box-shadow
// {
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
// }
// @mixin border-radius
// {
// border-radius: 40px;
// }
// @mixin inner-border-radius
// {
// border-radius: 35px;
// }
// h1, h2, h3, h4, h5
// {
// font-family: $font-titels;
// margin: 0;
// }
// p, td
// {
// font-family: $font-text;
// }
// body
// {
// background-image: url("../images/achtergrond.png");
// background-repeat: no-repeat;
// background-size: cover;
// background-position: center;
// // font-family: $font-text;
// display: flex;
// justify-content: center;
// align-items: center;
// height: 100vh;
// margin: 0;
// .mainContainer
// {
// width: 85vw;
// height: 38rem;
// background-color: rgb(255, 255, 255, 95%);
// border-radius: 40px;
// padding: 2rem;
// .goodgarden-logo
// {
// // z-index: inherit;
// position: absolute;
// width: 10vw;
// left: 50%;
// top: 2.5rem;
// transform: translateX(-50%);
// }
// .informatie-kas-main-container
// {
// display: grid;
// grid-template-columns: 5fr 7fr;
// }
// .mainBorder
// {
// padding: 1.25rem 1.5rem;
// height: 35rem;
// border: solid 5px $primary-color;
// border-radius: 40px;
// .pagina-titel
// {
// font-size: 2rem;
// margin-left: 1.5rem;
// }
// #sectie-1
// {
// display: flex;
// flex-direction: column;
// gap: 1rem;
// padding: 0 2.5rem 0 1rem;
// position: relative;
// .parent-algemeen-overzicht
// {
// @include box-shadow;
// @include border-radius;
// padding: 1rem;
// margin-top: 1rem;
// .algemeen-overzicht
// {
// @include groene-border;
// @include inner-border-radius;
// font-size: 1.25rem;
// padding: .5rem 1rem;
// // background-color: red;
// .table-informatie-kas
// {
// width: 100%;
// .tr-informatie-kas
// {
// display: flex;
// justify-content: space-between;
// text-align: left;
// }
// }
// }
// }
// .grafiek
// {
// @include box-shadow;
// @include border-radius;
// padding: 1rem;
// position: relative;
// .grafiek-innerbox
// {
// @include groene-border;
// @include inner-border-radius;
// font-size: 1.25rem;
// padding: 0 1rem 2.5rem;
// height: 225px;
// // position: relative;
// h2
// {
// position: absolute;
// left: 50%;
// transform: translateX(-50%);
// }
// canvas
// {
// // Zorgt ervoor dat de grafiek precies in eht midden komt
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
// }
// }
// .content
// {
// display: grid;
// grid-template-columns: 3fr 1fr 3fr;
// height: 100%;
// .kant
// {
// &-links
// {
// grid-column: 1;
// #planten
// {
// width: 100%;
// border-collapse: collapse;
// td
// {
// article
// {
// height: 7rem;
// width: 10rem;
// padding: .6rem;
// margin: .1rem;
// margin-left: 2rem;
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// border: solid 3px $primary-color;
// border-radius: 40px;
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
// #toevoegen
// {
// height: 5rem;
// width: 5rem;
// }
// h2
// {
// color: gray;
// }
// &:hover
// {
// background-color: lightgray;
// }
// }
// }
// }
// }
// &-rechts
// {
// grid-column: 3;
// // margin-right: 2rem;
// #metingen
// {
// border: solid 3px $primary-color;
// border-radius: 40px;
// #main-waardes
// {
// display: flex;
// justify-content: space-evenly;
// padding: .5rem;
// padding-bottom: 0;
// width: 100%;
// table
// {
// display: flex;
// justify-content: space-around;
// // width: 100%;
// }
// }
// }
// }
// }
// }
// }
// .grid-column-2
// {
// @include box-shadow;
// @include border-radius;
// padding: 1rem;
// margin: 3.25rem 1rem 1.25rem 1rem;
// .grid-2-child
// {
// @include groene-border;
// @include inner-border-radius;
// height: 100%;
// .parent-table
// {
// padding: 1.5rem 2rem;
// display: flex;
// flex-direction: column;
// // align-items: stretch;
// // gap: 2.5rem;
// justify-content: space-around;
// height: 90%;
// table
// {
// tr
// {
// td
// {
// font-size: 1.05rem;
// }
// }
// }
// .kas-table-1
// {
// tr
// {
// td
// {
// font-size: 1.25rem;
// }
// }
// }
// .kas-table-2
// {
// position: relative;
// &::after,
// &::before
// {
// content: "";
// position: absolute;
// left: 0;
// right: 0;
// height: 1px;
// width: 90%;
// background: black;
// }
// &::after
// {
// bottom: -20px;
// }
// &::before
// {
// top: -20px;
// }
// }
// }
// }
// }
// }
// }
// }
// /* Divider */
// .divider {
// display: flex;
// justify-content: center;
// border: solid 1px $primary-color;
// border-radius: 5px;
// width: 80%;
// margin: 0 auto;
// }
// /* The Modal (background) */
// .modal
// {
// display: none;
// position: fixed;
// z-index: 999;
// left: 50%;
// top: 50%;
// transform: translate(-50%, -50%);
// background: white;
// padding: 1.25rem;
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
// width: 30vw;
// height: auto;
// border: solid 2px black;
// border-radius: 10px;
// .close
// {
// color: #aaa;
// float: right;
// font-size: 1.75rem;
// font-weight: bold;
// &:hover,
// &:active
// {
// color: black;
// text-decoration: none;
// cursor: pointer;
// }
// }
// }
$primary-color: rgb(171, 211, 174);
$secondary-color: rgb(143, 188, 143);
@@ -880,96 +171,95 @@ body
}
}
}
}
.content
{
display: grid;
grid-template-columns: 3fr 1fr 3fr;
height: 100%;
.content
.kant
{
display: grid;
grid-template-columns: 3fr 1fr 3fr;
height: 100%;
.kant
&-links
{
&-links
grid-column: 1;
#planten
{
grid-column: 1;
width: 100%;
border-collapse: collapse;
#planten
td
{
width: 100%;
border-collapse: collapse;
td
article
{
article
height: 7rem;
width: 10rem;
padding: .6rem;
margin: .1rem;
margin-left: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 3px $primary-color;
border-radius: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
#toevoegen
{
height: 7rem;
width: 10rem;
padding: .6rem;
margin: .1rem;
margin-left: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 3px $primary-color;
border-radius: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
#toevoegen
{
height: 5rem;
width: 5rem;
}
h2
{
color: gray;
}
&:hover
{
background-color: lightgray;
}
height: 5rem;
width: 5rem;
}
h2
{
color: gray;
}
&:hover
{
background-color: lightgray;
}
}
}
}
}
&-rechts
{
grid-column: 3;
// margin-right: 2rem;
&-rechts
#metingen
{
grid-column: 3;
// margin-right: 2rem;
#metingen
border: solid 3px $primary-color;
border-radius: 40px;
#main-waardes
{
display: flex;
justify-content: space-between;
padding: .5rem;
padding-bottom: 0;
width: 100%;
border: solid 3px $primary-color;
border-radius: 40px;
#main-waardes
table
{
display: flex;
justify-content: space-evenly;
padding: .5rem;
padding-bottom: 0;
width: 100%;
table
{
display: flex;
justify-content: space-around;
// width: 100%;
}
display: flex;
justify-content: space-between;
width: 100%;
}
}
}
}
}
}
.grid-column-2
{
@include box-shadow;