-
Notifications
You must be signed in to change notification settings - Fork 0
/
layout.py
107 lines (90 loc) · 3.52 KB
/
layout.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
# dbc
import dash_bootstrap_components as dbc
from dash import html
# card sliders
from sliders import price_slider, other_sliders, range_sliders, rating_sliders
info_card = dbc.Row(
dbc.Col(
html.Div(
[
html.H1("Map visualistation of Airbnb offers"),
html.P(">>This package allows for creating a map visualisation of Airbnb offers.", style={
"padding": "10px"}),
html.P(">>Rating category is collapsible.", style={
"padding": "10px"}),
],
style={
# "background": "var(--bs-gray-200)",
"border-radius": "5px",
"border-color": "var(--bs-gray-800)",
"padding": "20px",
},
),
),
style={"padding": "20px"}
)
def create_card(header_text, icon=None):
card = html.Div(
[
html.H6(header_text,
className="text-center text-light d-flex d-xl-flex align-items-center justify-content-xl-start align-items-xl-center",
style={
"padding": "5px",
"background": "linear-gradient(121deg, var(--bs-pink) 35%, var(--bs-purple)), var(--bs-highlight-bg)",
"border-radius": "5px",
"border-bottom-right-radius": "0px",
"border-bottom-left-radius": "0px",
"border-top-left-radius": "5px",
"border-top-right-radius": "5px",
},
),
],
style={"border-radius": "5px",
"border": "1px solid var(--bs-gray-900)",
"margin": "5px"
},
)
return card
# -------------------------------- Price card -------------------------------- #
price_card = create_card("Price")
# add children to card
price_card.children.append(price_slider[0].create_card_slider())
# ------------------------------------- < ------------------------------------ #
# ---------------------------- Other sliders card ---------------------------- #
other_sliders_card = create_card("Other sliders")
# add children to card
other_sliders_card.children.append(other_sliders[0].create_card_slider())
other_sliders_card.children.append(other_sliders[1].create_card_slider())
# ------------------------------------- < ------------------------------------ #
rating_collapse = html.Div(
[
dbc.Button(
"Rating",
id="collapse-button",
className="btn fs-6 text-white d-flex align-items-center align-items-xl-center",
style={
"padding": "5px",
"background": "linear-gradient(121deg, var(--bs-pink) 35%, var(--bs-purple)), var(--bs-highlight-bg)",
"border-radius": "5px",
"width": "100%",
# border color = black
"border": "1px solid var(--bs-gray-900)",
},
n_clicks=0,
),
dbc.Collapse(
# dbc.Card(dbc.CardBody("This content is hidden in the collapse")),
# insert rating sliders
html.Div([slider.create_card_slider()
for slider in rating_sliders]),
id="collapse",
is_open=False,
style={"border-radius": "5px",
"border": "1px solid var(--bs-gray-900)",
# "margin": "5px"
},
),
],
style={"border-radius": "5px",
"margin": "5px"},
)