heboba/goodgarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Class

Browse Source
This commit is contained in:
Renzo
2024-03-06 11:14:09 +01:00
parent 14b7a1a48b 0e2aab49d7
commit 152ccd551a
14 changed files with 1124 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/css/style.css
View File

@@ -1,40 +1,123 @@
/*default colors*/
@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");
/* The Main container and border*/
h1, h2, h3, h4, h5 {
font-family: "Akaya Kanadaka", system-ui;
margin: 0;
}
p, td {
font-family: "Afacad", sans-serif;
}
body {
background-image: url("../images/achtergrond.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
font-family: "Afacad", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.mainContainer {
margin: 2rem;
body .mainContainer {
width: 85vw;
height: 38rem;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 40px;
padding: 2rem;
}
.mainContainer .mainBorder {
body .mainContainer .goodgarden-logo {
position: absolute;
width: 10vw;
left: 50%;
top: 4.1rem;
transform: translateX(-50%);
}
body .mainContainer .informatie-kas-main-container {
display: grid;
grid-template-columns: 5fr 7fr;
}
body .mainContainer .mainBorder {
padding: 1.25rem 1.5rem;
padding: 1rem 0;
height: 35rem;
border: solid 5px rgb(171, 211, 174);
border-radius: 40px;
}
.mainContainer .mainBorder .content {
body .mainContainer .mainBorder .pagina-titel {
font-size: 2rem;
margin-left: 1.5rem;
}
body .mainContainer .mainBorder #sectie-1 {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0 2.5rem 0 1rem;
position: relative;
}
body .mainContainer .mainBorder #sectie-1 h1 {
background-color: green;
}
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 40px;
padding: 1rem;
margin-top: 1rem;
}
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht {
border: solid 2px rgb(171, 211, 174);
border-radius: 35px;
font-size: 1.25rem;
padding: 0.5rem 1rem;
}
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht .table-informatie-kas {
width: 100%;
}
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht .table-informatie-kas .tr-informatie-kas {
display: flex;
justify-content: space-between;
text-align: left;
}
body .mainContainer .mainBorder #sectie-1 .grafiek {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 40px;
padding: 1rem;
position: relative;
}
body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox {
border: solid 2px rgb(171, 211, 174);
border-radius: 35px;
font-size: 1.25rem;
padding: 0 1rem 2.5rem;
height: 225px;
position: relative;
}
body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body .mainContainer .mainBorder .content {
display: grid;
grid-template-columns: 3fr 1fr 3fr;
height: 100%;
}
.mainContainer .mainBorder .content .kant-links {
body .mainContainer .mainBorder .content .kant-links {
grid-column: 1;
}
.mainContainer .mainBorder .content .kant-links #planten {
body .mainContainer .mainBorder .content .kant-links #planten {
width: 100%;
border-collapse: collapse;
}
.mainContainer .mainBorder .content .kant-links #planten td article {
body .mainContainer .mainBorder .content .kant-links #planten td article {
height: 7rem;
width: 10rem;
padding: 0.6rem;
@@ -48,34 +131,71 @@ body {
border-radius: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.mainContainer .mainBorder .content .kant-links #planten td article #toevoegen {
body .mainContainer .mainBorder .content .kant-links #planten td article #toevoegen {
height: 5rem;
width: 5rem;
}
.mainContainer .mainBorder .content .kant-links #planten td article h2 {
body .mainContainer .mainBorder .content .kant-links #planten td article h2 {
color: gray;
}
.mainContainer .mainBorder .content .kant-links #planten td article:hover {
body .mainContainer .mainBorder .content .kant-links #planten td article:hover {
background-color: lightgray;
}
.mainContainer .mainBorder .content .kant-rechts {
body .mainContainer .mainBorder .content .kant-rechts {
grid-column: 3;
margin-right: 2rem;
}
.mainContainer .mainBorder .content .kant-rechts #metingen {
body .mainContainer .mainBorder .content .kant-rechts #metingen {
border: solid 3px rgb(171, 211, 174);
border-radius: 40px;
}
.mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes {
body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes {
display: flex;
justify-content: space-evenly;
justify-content: space-between;
padding: 0.5rem;
padding-bottom: 0;
width: 100%;
}
.mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes table {
body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes table {
display: flex;
justify-content: space-between;
width: 100%;
}
body .mainContainer .mainBorder .grid-column-2 {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 40px;
padding: 1rem;
margin: 3.25rem 1rem 1.25rem 1rem;
}
body .mainContainer .mainBorder .grid-column-2 .grid-2-child {
border: solid 2px rgb(171, 211, 174);
border-radius: 35px;
height: 100%;
}
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table {
padding: 1.5rem 2rem;
display: flex;
flex-direction: column;
justify-content: space-around;
height: 90%;
}
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2 {
position: relative;
}
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::after, body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
width: 90%;
background: black;
}
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::after {
bottom: -20px;
}
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::before {
top: -20px;
}
/* Divider */
@@ -97,7 +217,7 @@ body {
top: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
padding: 1.25rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 30vw;
height: auto;
@@ -107,7 +227,7 @@ body {
.modal .close {
color: #aaa;
float: right;
font-size: 28px;
font-size: 1.75rem;
font-weight: bold;
}
.modal .close:hover, .modal .close:active {

2
src/css/style.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,iBAAA;AAKQ,mFAAA;AACA,2GAAA;AAMR,iCAAA;AACA;EAEI,kDAAA;EACA,4BAAA;EACA,sBAAA;EACA,iCARQ;ACDZ;;ADYA;EAEI,YAAA;EACA,aAAA;EACA,2CAAA;EACA,mBAAA;EACA,aAAA;ACVJ;ADYI;EAEI,eAAA;EACA,aAAA;EACA,oCAAA;EACA,mBAAA;ACXR;ADaQ;EAEI,aAAA;EACA,kCAAA;EACA,YAAA;ACZZ;ADgBgB;EAEI,cAAA;ACfpB;ADiBoB;EAEI,WAAA;EACA,yBAAA;AChBxB;ADoB4B;EAEI,YAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,oCAAA;EACA,mBAAA;EACA,wCAAA;ACnBhC;ADqBgC;EAEI,YAAA;EACA,WAAA;ACpBpC;ADuBgC;EAEI,WAAA;ACtBpC;ADyBgC;EAEI,2BAAA;ACxBpC;AD+BgB;EAEI,cAAA;EACA,kBAAA;AC9BpB;ADgCoB;EAGI,oCAAA;EACA,mBAAA;AChCxB;ADkCwB;EAEA,aAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;ACjCxB;ADmC4B;EAEI,aAAA;EACA,6BAAA;AClChC;;AD6CA,YAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,oCAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;AC1CJ;;AD6CA,2BAAA;AAEA;EAEI,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,aAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;AC5CJ;AD8CI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;AC7CR;AD+CQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;AC/CZ","file":"style.css"}
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}

299
src/css/style.scss
View File

@@ -1,5 +1,3 @@
/*default colors*/
$primary-color: rgb(171, 211, 174);
$secondary-color: rgb(143, 188, 143);
@@ -7,6 +5,7 @@ $secondary-color: rgb(143, 188, 143);
@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
@@ -30,6 +29,11 @@ $font-text: "Afacad", sans-serif;
border-radius: 40px;
}
@mixin inner-border-radius
{
border-radius: 35px;
}
h1, h2, h3, h4, h5
{
font-family: $font-titels;
@@ -47,7 +51,7 @@ body
background-repeat: no-repeat;
background-size: cover;
background-position: center;
// font-family: $font-text;
font-family: $font-text;
display: flex;
justify-content: center;
align-items: center;
@@ -62,6 +66,15 @@ body
border-radius: 40px;
padding: 2rem;
.goodgarden-logo
{
position: absolute;
width: 10vw;
left: 50%;
top: 4.1rem;
transform: translateX(-50%);
}
.informatie-kas-main-container
{
display: grid;
@@ -70,13 +83,26 @@ body
.mainBorder
{
padding: 1.25rem 1.5rem;
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;
@@ -87,14 +113,15 @@ body
@include box-shadow;
@include border-radius;
padding: 1rem;
margin-top: 1rem;
.algemeen-overzicht
{
@include groene-border;
@include border-radius;
@include inner-border-radius;
font-size: 1.25rem;
padding: 1rem;
background-color: red;
padding: .5rem 1rem;
.table-informatie-kas
{
@@ -106,111 +133,211 @@ body
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
{
// background-color: blue;
}
}
}
.content
.grafiek
{
display: grid;
grid-template-columns: 3fr 1fr 3fr;
height: 100%;
@include box-shadow;
@include border-radius;
padding: 1rem;
position: relative;
.kant
.grafiek-innerbox
{
&-links
@include groene-border;
@include inner-border-radius;
font-size: 1.25rem;
padding: 0 1rem 2.5rem;
height: 225px;
position: relative;
h2
{
grid-column: 1;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#planten
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
{
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
}
&-rechts
{
grid-column: 3;
margin-right: 2rem;
#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-between;
padding: .5rem;
padding-bottom: 0;
width: 100%;
table
{
display: flex;
justify-content: space-between;
width: 100%;
}
display: flex;
justify-content: space-between;
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 */
@@ -234,7 +361,7 @@ body
top: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
padding: 1.25rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 30vw;
height: auto;
@@ -245,7 +372,7 @@ body
{
color: #aaa;
float: right;
font-size: 28px;
font-size: 1.75rem;
font-weight: bold;
&:hover,