Skip to content

Commit 70656cc

Browse files
marcmatiasmarcmatias
committed
WIP
1 parent 54211c3 commit 70656cc

31 files changed

+2450
-3
lines changed

‎index.html‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,49 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="stylesheet" href="./src/assets/css/style.css" />
7+
<link rel="icon" href="vite.svg" />
78
<title>Map Chart Table</title>
89
</head>
910
<body>
11+
<button class="glossary">glossary</button>
12+
<button class="about">about</button>
13+
<button class="error-example">error example</button>
14+
<button class="extra">Extra filter button</button>
1015
<div id="app"></div>
11-
<!-- Main App -->
16+
17+
<!-- Import as file -->
18+
<!--
19+
<script src="./dist/mct-1.6.1.js"></script>
20+
<script>
21+
const dashboard = new MCT({ api: "http://localhost" });
22+
</script>
23+
-->
24+
25+
<!-- Import as module -->
26+
1227
<script type="module">
13-
import Mct from "./src/main.js";
14-
const dashboard = new Mct("http://localhost:5000/");
28+
import MCT from "./src/main.js";
29+
const dashboard = new MCT({ api: "http://localhost" });
30+
31+
/*
32+
document.querySelector(".glossary").addEventListener("click", () => {
33+
dashboard.genericModal("Glossário", "?slug=glossario-vacinabr")
34+
});
35+
36+
document.querySelector(".about").addEventListener("click", () => {
37+
dashboard.genericModal("Sobre", "?slug=sobre-vacinabr")
38+
});
39+
40+
document.querySelector(".error-example").addEventListener("click", () => {
41+
dashboard.genericModal("Error example", "?slug=sobre-vacinabr2")
42+
});
43+
44+
dashboard.genericModalWithFilterButton("Extra filter button", "?slug=sobre-vacinabr")
45+
46+
document.querySelector(".extra").addEventListener("click", () => {
47+
dashboard.genericModal("Extra filter button", "?slug=sobre-vacinabr")
48+
});
49+
*/
1550
</script>
1651
</body>
1752
</html>

‎src/assets/css/base.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
:root {
2+
--body-color: rgba(0, 0, 0, 0.87);
3+
--text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;
4+
--gray-color: #ececec;
5+
--gray-color-light: #fafafa;
6+
--primary-color: #e96f5f;
7+
--label-color: #827e7e;
8+
--embed-color: #fafafa;
9+
10+
--padding-container: 200px;
11+
}
12+
13+
/* MediaQuery */
14+
15+
@media (max-width: 1368px) {
16+
:root {
17+
--padding-container: 20px;
18+
}
19+
}

‎src/assets/css/components/collapsable.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.n-collapse-item.n-collapse-item--left-arrow-placement {
2+
outline: 1px solid #e0e0e0;
3+
border: none;
4+
border-radius: 3px;
5+
padding: 8px;
6+
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px;
7+
}
8+
9+
.n-collapse
10+
.n-collapse-item
11+
.n-collapse-item__header
12+
.n-collapse-item__header-main {
13+
font-weight: 500;
14+
}
15+
16+
.n-collapse .n-collapse-item:not(:first-child) {
17+
border-top: none !important;
18+
}
19+
20+
.n-collapse .n-collapse-item .n-collapse-item__header {
21+
padding: 0px;
22+
}
23+
24+
.n-collapse .n-collapse-item__header-extra .bi {
25+
fill: var(--primary-color);
26+
}

‎src/assets/css/components/container.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* Components Styles */
2+
3+
.main {
4+
display: flex;
5+
flex-direction: column;
6+
}
7+
8+
.main-content {
9+
position: relative;
10+
max-width: 1368px;
11+
margin: 0px auto;
12+
padding: 0px 24px;
13+
}
14+
15+
.main-content--sub {
16+
margin-bottom: 64px;
17+
}
18+
19+
.container-elements {
20+
display: flex;
21+
justify-content: end;
22+
}
23+
24+
.container-elements--table {
25+
display: flex;
26+
gap: 12px;
27+
padding-bottom: 16px;
28+
}
29+
30+
.container-elements--theme {
31+
padding: 15px 65px;
32+
}
33+
34+
.container-elements__selects {
35+
display: flex;
36+
gap: 12px;
37+
}
38+
39+
.container-input-card {
40+
display: flex;
41+
gap: 8px;
42+
justify-content: end;
43+
}
44+
45+
.element-hidden {
46+
display: none !important;
47+
}
48+
49+
@media (max-width: 800px) {
50+
.container-elements--table {
51+
display: flex;
52+
flex-direction: column;
53+
gap: 8px;
54+
}
55+
.container-input-card {
56+
flex-direction: column;
57+
}
58+
}

‎src/assets/css/components/filter-suggestion.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.filter-suggestion {
2+
height: 100%;
3+
overflow-y: auto;
4+
position: absolute;
5+
top: 0;
6+
bottom: 0;
7+
left: 0;
8+
right: 0;
9+
display: flex;
10+
flex-direction: column;
11+
background-color: rgb(254, 254, 254);
12+
}
13+
14+
.filter-suggestion-center {
15+
justify-content: center;
16+
}
17+
18+
.filter-suggestion-title {
19+
text-align: center;
20+
font-size: 24px;
21+
padding-bottom: 48px;
22+
font-weight: 400;
23+
}
24+
25+
.filters-container {
26+
gap: 8px;
27+
display: grid;
28+
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
29+
grid-gap: 10px;
30+
}
31+
32+
.filter-container-suggestion {
33+
overflow: hidden;
34+
}
35+
36+
.filter-title {
37+
height: 18px;
38+
}
39+
.filter-text-suggestion {
40+
text-align: initial;
41+
overflow: hidden;
42+
text-overflow: ellipsis;
43+
white-space: nowrap;
44+
}
45+
46+
.filter-description {
47+
font-size: 11px;
48+
height: 14px;
49+
}
50+
51+
/* MediaQuery */
52+
53+
@media (max-width: 1300px) {
54+
.filters-container {
55+
display: flex;
56+
flex-direction: column;
57+
}
58+
}
59+
60+
@media (max-width: 768px) {
61+
.filter-suggestion {
62+
display: block;
63+
}
64+
}

‎src/assets/css/components/label.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* Label */
2+
.n-form-item.n-form-item--top-labelled .n-form-item-label {
3+
align-items: center;
4+
padding: 0px;
5+
}
6+
7+
.n-form-item-label__text {
8+
color: var(--label-color);
9+
font-size: 0.65rem;
10+
}

‎src/assets/css/components/main-content.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.main-content {
2+
margin-top: 16px;
3+
}
4+
5+
.map-section {
6+
min-height: 520px;
7+
}
8+
9+
@media (max-width: 475px) {
10+
.map-section {
11+
min-height: 420px;
12+
}
13+
}

‎src/assets/css/components/main-footer.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.main-card-footer-container {
2+
display: block;
3+
}
4+
5+
.main-card-footer {
6+
display: flex;
7+
justify-content: space-between;
8+
align-items: center;
9+
margin-top: 18px;
10+
margin-bottom: 12px;
11+
}
12+
13+
.main-card-footer--mobile {
14+
align-items: initial;
15+
gap: 14px;
16+
}
17+
18+
.main-card-footer-mobile {
19+
display: none;
20+
}
21+
22+
.main-card-footer__legend {
23+
color: gray;
24+
font-size: 14px;
25+
font-weight: 400;
26+
}
27+
28+
.main-card-footer__buttons {
29+
display: flex;
30+
gap: 8px;
31+
}
32+
33+
.main-card-footer__buttons--mobile {
34+
justify-content: space-between;
35+
}
36+
37+
.main-card-footer-dates {
38+
display: flex;
39+
flex-direction: column;
40+
gap: 4px;
41+
}
42+
43+
/* MediaQuery */
44+
45+
@media (max-width: 1200px) {
46+
.main-card-footer {
47+
margin: 0px 0px 12px;
48+
flex-direction: column;
49+
gap: 8px;
50+
}
51+
.main-card-footer-container {
52+
display: flex;
53+
flex-direction: column;
54+
}
55+
.main-card-footer__buttons {
56+
justify-items: start;
57+
margin-bottom: 12px;
58+
flex-wrap: wrap;
59+
justify-content: center;
60+
width: 100%;
61+
gap: 12px;
62+
}
63+
.main-card-footer-mobile {
64+
display: flex;
65+
}
66+
.main-card-footer-container-mobile {
67+
display: block;
68+
}
69+
.main-card-footer-dates {
70+
flex-direction: row;
71+
flex-wrap: wrap;
72+
justify-content: center;
73+
gap: 4px 12px;
74+
}
75+
}

0 commit comments

Comments
 (0)