tutor/tutor-deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add pagination to store plugins

Browse Source
This commit is contained in:
Muhammad Labeeb 2025-02-26 18:22:30 +05:00 committed by Régis Behmo
parent fcf5bb9508
commit cf50a8b612
4 changed files with 126 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
tutordash/server/app.py
View File

@ -78,22 +78,22 @@ async def plugin_store_list() -> str:
if search_query:
plugins = [plugin for plugin in plugins if search_query in plugin["name"].lower()]
# page = request.args.get("page", default=1, type=int)
# per_page = 9
# total_pages = (len(plugins) + per_page - 1) // per_page
# if page < 1:
# page = 1
# elif page > total_pages:
# page = total_pages
# start = (page - 1) * per_page
# end = start + per_page
# plugins = plugins[start:end]
page = request.args.get("page", default=1, type=int)
per_page = 9
total_pages = (len(plugins) + per_page - 1) // per_page
if page < 1:
page = 1
elif page > total_pages:
page = total_pages
start = (page - 1) * per_page
end = start + per_page
plugins = plugins[start:end]
return await render_template(
"_plugin_store_list.html",
plugins=plugins,
# page_count=total_pages,
# current_page=page,
page_count=total_pages,
current_page=page,
**shared_template_context(),
)

175
tutordash/server/static/scss/dash.scss
View File

@ -290,80 +290,115 @@ main {
}
.store-plugins {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
.plugin {
border: 1px solid $gray-2;
border-radius: 1em;
.plugins-container {
display: flex;
flex-direction: column;
width: 26em;
margin-bottom: 1.5em;
padding: 1em;
justify-content: space-between;
flex-wrap: wrap;
.header {
.plugin {
border: 1px solid $gray-2;
border-radius: 1em;
display: flex;
flex-direction: row;
flex-direction: column;
width: 26em;
margin-bottom: 1.5em;
padding: 1em;
justify-content: space-between;
margin: 0px;
height: 4em;
.title {
.header {
display: flex;
flex-direction: column;
text-transform: capitalize;
justify-content: space-around;
flex-direction: row;
justify-content: space-between;
margin: 0px;
height: 4em;
.name {
a {
color: $blue;
text-decoration: none;
font-size: 1.75em;
.title {
display: flex;
flex-direction: column;
text-transform: capitalize;
justify-content: space-around;
&:visited {
.name {
a {
color: $blue;
text-decoration: none;
font-size: 1.75em;
&:visited {
text-decoration: none;
}
}
}
.author {
font-size: 1em;
color: $gray-4;
}
}
.author {
.status {
img {
width: 1.5em;
}
}
}
.body {
p {
width: 100%;
height: auto;
display: -webkit-box;
-webkit-line-clamp: 3; // Limit to 3 lines
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
}
.footer {
padding: 0em;
button {
width: 5em;
height: 2em;
background-color: $light-blue;
border: none;
border-radius: 0.5em;
color: white;
font-size: 1em;
color: $gray-4;
cursor: pointer;
margin: 0em 0.5em;
}
}
}
}
.pagination-container {
display: flex;
justify-content: flex-end;
padding: 0em 2em;
.pagination {
display: flex;
justify-content: space-between;
border: 1px solid $gray-2;
border-radius: 0.5em;
align-items: center;
a {
@include a-tag();
border-right: 1px solid $gray-2;
&:last-child {
border: none;
}
}
.status {
img {
width: 1.5em;
}
}
}
.body {
p {
width: 100%;
height: auto;
display: -webkit-box;
-webkit-line-clamp: 3; // Limit to 3 lines
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
}
.footer {
padding: 0em;
button {
width: 5em;
height: 2em;
background-color: $light-blue;
border: none;
border-radius: 0.5em;
color: white;
font-size: 1em;
div {
cursor: pointer;
margin: 0em 0.5em;
height: 2.5em;
align-content: center;
width: 3.5em;
text-align: center;
}
}
}
@ -439,36 +474,6 @@ main {
}
}
}
footer {
display: flex;
justify-content: flex-end;
padding: 0em 2em;
.pagination {
display: flex;
justify-content: space-between;
border: 1px solid $gray-2;
border-radius: 0.5em;
align-items: center;
a {
@include a-tag();
border-right: 1px solid $gray-2;
&:last-child {
border: none;
}
}
div {
cursor: pointer;
height: 2.5em;
align-content: center;
width: 3.5em;
text-align: center;
}
}
}
}
}

25
tutordash/server/templates/_plugin_store_list.html
View File

@ -1,3 +1,4 @@
<div class="plugins-container">
{% for plugin in plugins %}
<div class="plugin">
<div class="header">
@ -32,4 +33,26 @@
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
<div class="pagination-container">
<div class="pagination">
<a hx-get="{{ url_for('plugin_store_list', page=current_page-1)}}" hx-target="#plugins-list">
<div class="pagination-button">
<img src="{{ url_for('static', filename='/img/arrow-left.svg')}}" alt="">
</div>
</a>
{% for i in range(1, page_count + 1) %}
<a hx-get="{{ url_for('plugin_store_list', page=i)}}" hx-target="#plugins-list">
<div class="pagination-button">
{{i}}
</div>
</a>
{% endfor %}
<a hx-get="{{ url_for('plugin_store_list', page=current_page+1)}}" hx-target="#plugins-list">
<div class="pagination-button">
<img src="{{ url_for('static', filename='/img/arrow-right.svg')}}" alt="">
</div>
</a>
</div>
</div>

1
tutordash/server/templates/plugin_store.html
View File

@ -20,7 +20,6 @@ View and install available plugins.
{% block workspace_content %}
<div id="plugins-list" class="store-plugins" hx-get="{{ url_for('plugin_store_list')}}" hx-trigger="load"></div>
{% endblock %}