Skip to content

Commit

Permalink
fill dashboard main page template, scss styles & handle dashboard men…
Browse files Browse the repository at this point in the history 
…u with js script
  • Loading branch information
@goldipl
goldipl committed Jan 5, 2024
1 parent 99bf720 commit d77a368
Show file tree
Hide file tree
Showing 10 changed files with 1,154 additions and 5 deletions.
162 changes: 161 additions & 1 deletion components/dashboard/dashboard_main_page.php
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,163 @@
<div class="dashboard-main">

<section class="dashboard-main-box-large">
<div class="title">
<p><img src="./assets/icons/dashboard/wallet.svg" alt="dashboard icon" width="20" height="20"><span>Twoja</span> Linia kredytowa:</p>
</div>
<div class="bottom-boxes">
<div class="value-box">
<p>Przeterminowane należności</p>
<b class="orange">1100 zł</b>
</div>
<div class="value-box">
<p>Wszystkie należności</p>
<b class="red">1100 zł</b>
</div>
<div class="progress-box">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="value-box">
<p>Dostępna linia kredytowa</p>
<b class="green">38 900 zł</b>
</div>
</div>
</section>
<div class="dashboard-main-box">
<div class="title">
<p><img src="./assets/icons/dashboard/client-status.svg" alt="dashboard icon" width="20" height="20"><span>Twój status klienta</p>
</div>
<div class="box-content big-arrow">
<img src="./assets/img/dashboard/macma-gold.jpg" alt="macma status arrow" width="350" height="194">
</div>
</div>
<div class="dashboard-main-box">
<div class="title">
<p><img src="./assets/icons/dashboard/discounts.svg" alt="dashboard icon" width="20" height="20"><span>Twoje rabaty</p>
</div>
<div class="box-content">
<div class="catalog-offert">
<p class="orange catalog-p">Oferta katalogowa: 44%</p>
<p>Kody rabatowe na produkty</p>
<p>Kody rabatowe na znakowanie</p>
<p>Nagrody dla Ciebie</p>
</div>
</div>
</div>
<div class="dashboard-main-box">
<div class="title">
<p><img src="./assets/icons/dashboard/program.svg" alt="dashboard icon" width="20" height="20"><span>Program rozwoju</p>
</div>
<div class="box-content">
<p><span class="orange text-uppercase fw-bold">Sprawdź</span> jakie korzyści na Ciebie czekają!</p>
<img class="arrows" src="./assets/img/dashboard/macma-arrows.jpg" alt="macma status arrow" width="550" height="117">
</div>
</div>
<div class="dashboard-main-box">
<div class="title">
<p><img src="./assets/icons/dashboard/sales_supervisor.svg" alt="dashboard icon" width="20" height="20"><span>Twój opiekun handlowy</p>
</div>
<div class="box-content">
<div class="supervisor-box">
<div class="supervisor-box__left">
<h3>Jan Nowak</h3>
<p>Kierownik Biura Obsługi Klienta</p>
<p>tel: <a class="gtm-phone" href="tel:+48 71 330 51 11">+48 71 330 51 11</a></p>
<p>kom: <a class="gtm-phone" href="tel:+48 880 349 176">+48 880 349 176</a></p>
<button>
<a href="mailto:biuro@macma.pl">Napisz</a>
</button>
</div>
<div class="supervisor-box__right">
<img src="./assets/img/dashboard/person.jpg" alt="profile img" width="248" height="165">
</div>
</div>
</div>
</div>
<div class="dashboard-main-box">
<div class="title">
<p><img src="./assets/icons/dashboard/benefits.svg" alt="dashboard icon" width="20" height="20"><span>Twoje korzyści</p>
</div>
<div class="box-content lines">
<div class="lines-box">
<div class="lines-box__row">
<div class="lines-box__row__left">
<p>Darmowa dostawa od kwoty:</p>
</div>
<div class="lines-box__row__right">
<p class="green"><span>750</span> PLN netto</p>
</div>
</div>
<div class="lines-box__row">
<div class="lines-box__row__left">
<p>Poniżej 750 PLN netto koszt transportu w 1 miejsce:</p>
</div>
<div class="lines-box__row__right">
<p class="green"><span>16</span> PLN netto</p>
</div>
</div>
<div class="lines-box__row">
<div class="lines-box__row__left">
<p>Wysyłka do 14:00 dla towarów bez znakowania:</p>
</div>
<div class="lines-box__row__right">
<p class="green"><span>TAK</span></p>
</div>
</div>
<div class="lines-box__row">
<div class="lines-box__row__left">
<p>Gwarantowany termin znakowania:</p>
<p class="desc">*Nie dotyczy kalki ceramicznej oraz tłoczenia</p>
</div>
<div class="lines-box__row__right">
<p class="green fw-bold"><span>24h</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-main-box">
<div class="title">
<p><img src="./assets/icons/dashboard/wallet.svg" alt="dashboard icon" width="20" height="20"><span>Twój limit kredytowy</p>
</div>
<div class="box-content lines">
<div class="lines-box">
<div class="lines-box__row">
<div class="lines-box__row__left">
<p>Całkowita linia kredytowa:</p>
</div>
<div class="lines-box__row__right">
<p class="green"><span>50 000</span> PLN</p>
</div>
</div>
<div class="lines-box__row">
<div class="lines-box__row__left">
<p>Należności:</p>
</div>
<div class="lines-box__row__right">
<p class="red"><span>20 000</span> PLN</p>
</div>
</div>
<div class="lines-box__row">
<div class="lines-box__row__left">
<p>Dostępna linia kredytowa:</p>
</div>
<div class="lines-box__row__right">
<p class="green"><span>30 000</span> PLN</p>
</div>
</div>
<div class="lines-box__row">
<div class="lines-box__row__left">
<p>Przeterminowane płatności:</p>
</div>
<div class="lines-box__row__right">
<p class="red"><span>1100</span> PLN</p>
</div>
</div>
<div class="lines-box__row">
<p class="long"><b>UWAGA:</b> warunkiem podniesienia limitu jest terminowe uregulowanie 2 faktur w ciągu ostatnich 12 m-cy.</p>
</div>
</div>
</div>
</div>
</div>
3 changes: 3 additions & 0 deletions components/dashboard/dashboard_menu.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
<div class="header">
<p>Menu</p>
</div>
<div class="expand-menu">
<p><img src="./assets/icons/common/grey-arrow-down.svg" alt="arrow down icon" width="12" height="8">Rozwiń menu<img src="./assets/icons/common/grey-arrow-down.svg" alt="arrow down icon" width="12" height="8"></p>
</div>
<div class="menu-links-container">
<div class="menu-links-box">
<a class="menu-link-big" href="#"><img src="./assets/icons/dashboard/profile.svg" alt="menu icon" width="20" height="20">Profil</a>
Expand Down
1 change: 1 addition & 0 deletions dashboard.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,5 +35,6 @@
<script src="./js/bootbox.min.js"></script>
<script src="./js/select2.min.js"></script>
<script src="./js/script.js"></script>
<script src="./js/dashboard/dashboard_menu.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions js/dashboard/dashboard_menu.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const expand_btn = document.querySelector('.dashboard-menu .expand-menu');
const dashboard_menu = document.querySelector('.dashboard-container .menu-links-container');

expand_btn.addEventListener('click', () => {
dashboard_menu.classList.toggle('active');
expand_btn.classList.toggle('active');
});
25 changes: 24 additions & 1 deletion scss/dashboard/_dashboard_grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
padding: 35px 0 112px 0;
background-color: $light_grey;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
&::before {
Expand All @@ -22,10 +21,34 @@
flex-direction: column;
width: calc(20% - 24px);
margin-right: 24px;
min-width: 260px;
}
&__right {
display: flex;
flex-direction: column;
width: 80%;
}
}

@media (max-width: 1260px) {
.dashboard-container {
flex-wrap: wrap;
&__left {
display: flex;
flex-direction: column;
width: 100%;
margin-right: 0;
}
&__right {
display: flex;
flex-direction: column;
width: 100%;
}
}
}

@media (max-width: 860px) {
.dashboard-container {
padding: 0;
}
}
Loading

0 comments on commit d77a368

Please sign in to comment.