Skip to content

Commit

Permalink
Tornando o design responsivo
Browse files Browse the repository at this point in the history
  • Loading branch information
@camilamaia
camilamaia committed Nov 8, 2024
1 parent e671e41 commit 7e6f005
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 27 deletions.
70 changes: 43 additions & 27 deletions curadoria_coletiva/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,12 @@

collect_materials(materials_path, yaml_file_path)

app = dash.Dash(__name__)
app = dash.Dash(
__name__,
external_stylesheets=[
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
],
)
app.title = "Curadoria Coletiva"


Expand Down Expand Up @@ -60,7 +65,10 @@ def _create_logo_section():
html.Img(
alt="Cumbuca Dev Logo",
src="https://github.com/cumbucadev/design/raw/main/images/logo-light-transparent.png",
style={"width": "15%"},
style={
"width": "15vw", # O logo será 15% da largura da tela
"max-width": "200px", # Tamanho máximo
},
),
]
),
Expand Down Expand Up @@ -90,7 +98,12 @@ def _create_search_box():
def _create_filter_dropdowns(df):
"""Creates the dropdowns for subject, format, and sorting filters."""
return html.Div(
style={"display": "flex", "gap": "10px", "margin-bottom": "20px"},
style={
"display": "flex",
"flex-wrap": "wrap",
"gap": "10px",
"margin-bottom": "20px",
},
children=[
dcc.Dropdown(
id="subject-dropdown",
Expand All @@ -105,12 +118,11 @@ def _create_filter_dropdowns(df):
dcc.Dropdown(
id="format-dropdown",
options=[
{"label": i, "value": i}
for i in sorted(df["formato"].unique())
{"label": i, "value": i} for i in sorted(df["formato"].unique())
],
placeholder="Formato",
style={"width": "100%"},
multi=True, # Aqui tornamos o campo "Formato" multi-selecionável
multi=True,
),
dcc.Dropdown(
id="learning-style-dropdown",
Expand All @@ -123,12 +135,12 @@ def _create_filter_dropdowns(df):
placeholder="Estilo de aprendizagem",
style={"width": "100%"},
),

dcc.Dropdown(
id="sort-dropdown",
options=[
{"label": col.replace("_", " ").capitalize(), "value": col}
for col in df.columns if col not in ["file_path", "url"]
for col in df.columns
if col not in ["file_path", "url"]
],
placeholder="Ordenar por",
style={"width": "100%"},
Expand All @@ -137,7 +149,6 @@ def _create_filter_dropdowns(df):
)



def generate_result_layout(filtered_df):
result_layout = []
for _, row in filtered_df.iterrows():
Expand Down Expand Up @@ -210,9 +221,7 @@ def _generate_field_content(row, col):
)
)
elif col == "recomendado_por" and row[col]:
recomendado_usuario = str(row[col]).strip(
"[]'\""
)
recomendado_usuario = str(row[col]).strip("[]'\"")
field_content.append(
html.P(
[
Expand Down Expand Up @@ -269,47 +278,54 @@ def _register_callbacks(app, df):
Input("search-box", "value"),
Input("subject-dropdown", "value"),
Input("format-dropdown", "value"),
Input("learning-style-dropdown", "value"), # Novo filtro de estilo de aprendizagem
Input("learning-style-dropdown", "value"),
Input("sort-dropdown", "value"),
)
def update_table(search_term, selected_subject, selected_format, selected_learning_style, sort_column):
def update_table(
search_term,
selected_subject,
selected_format,
selected_learning_style,
sort_column,
):
"""Atualiza a tabela com base nos filtros de busca, assunto, formato, estilo de aprendizagem e ordenação."""
filtered_df = df

# Aplicar o filtro de busca
if search_term:
filtered_df = filtered_df[
filtered_df.apply(
lambda row: row.astype(str).str.contains(search_term, case=False).any(),
lambda row: row.astype(str)
.str.contains(search_term, case=False)
.any(),
axis=1,
)
]

# Aplicar o filtro de assunto (exigindo todas as seleções)
if selected_subject:
filtered_df = filtered_df[
filtered_df["assuntos"].apply(lambda x: all(cat in x for cat in selected_subject))
filtered_df["assuntos"].apply(
lambda x: all(cat in x for cat in selected_subject)
)
]

# Aplicar o filtro de formato (verificando se múltiplos valores foram selecionados)
if selected_format:
filtered_df = filtered_df[filtered_df["formato"].isin(selected_format)]

# Aplicar o filtro de estilo de aprendizagem (verificando se múltiplos valores foram selecionados)
if selected_learning_style:
filtered_df = filtered_df[filtered_df["estilo_aprendizagem"].isin(selected_learning_style)]
filtered_df = filtered_df[
filtered_df["estilo_aprendizagem"].isin(selected_learning_style)
]

# Aplicar o filtro de ordenação
if sort_column:
filtered_df = filtered_df.sort_values(by=sort_column)

# Gerar e retornar o layout dos resultados
if not filtered_df.empty:
return generate_result_layout(filtered_df)
else:
# Exibir mensagem caso não haja resultados
return html.Div("Nenhum resultado encontrado.", style={"color": "red", "text-align": "center", "margin-top": "20px"})

return html.Div(
"Nenhum resultado encontrado.",
style={"color": "red", "text-align": "center", "margin-top": "20px"},
)


data = _load_yaml_data(yaml_file_path)
Expand All @@ -320,4 +336,4 @@ def update_table(search_term, selected_subject, selected_format, selected_learni
_register_callbacks(app, df)

if __name__ == "__main__":
app.run_server()
app.run_server(debug=True)
1 change: 1 addition & 0 deletions requirements.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ ruff>=0.7.2,<1.0.0
pandas>=2.2.3,<3.0.0
dash>=2.18.2,<3.0.0
gunicorn>=23.0.0,<24.0.0
dash-bootstrap-components>=1.6.0,<2.0.0

0 comments on commit 7e6f005

Please sign in to comment.