add pagination
This commit is contained in:
Muhammad Labeeb
Régis Behmo
parent
4f87480911
commit
8501590211
@ -51,6 +51,9 @@ async def home() -> str:
|
||||
|
||||
@app.get("/plugin/store")
|
||||
async def plugin_store() -> str:
|
||||
page = request.args.get("page", default=1, type=int)
|
||||
per_page = 6
|
||||
|
||||
installed_plugins = tutorclient.Client.installed_plugins()
|
||||
plugins: list[dict[str, str]] = [
|
||||
{
|
||||
@ -64,9 +67,20 @@ async def plugin_store() -> str:
|
||||
for p in tutorclient.Client.plugins_in_store()
|
||||
]
|
||||
|
||||
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.html",
|
||||
plugins=plugins,
|
||||
page_count=total_pages,
|
||||
current_page=page,
|
||||
**shared_template_context(),
|
||||
)
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ $edly-logo-red: #dc1f26;
|
||||
$dark-gray: #4a4a4a;
|
||||
$gray: #535862;
|
||||
$light-gray: #888;
|
||||
$extra-light-gray: #c4c4c4;
|
||||
$black: #181d27;
|
||||
$white: #e6f3ff;
|
||||
$blue: #1570ef;
|
||||
@ -26,7 +27,7 @@ body {
|
||||
display: flex;
|
||||
.sidebar {
|
||||
flex: 0 0 19em;
|
||||
border-right: 1px solid #c4c4c4;
|
||||
border-right: 1px solid $extra-light-gray;
|
||||
box-shadow: 2px 0px #e3e3e3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -38,7 +39,7 @@ body {
|
||||
height: 100%;
|
||||
.header {
|
||||
flex: 0 0 6em;
|
||||
border-bottom: 1px solid #c4c4c4;
|
||||
border-bottom: 1px solid $extra-light-gray;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.image {
|
||||
@ -102,6 +103,7 @@ body {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -163,7 +165,7 @@ body {
|
||||
width: 20em;
|
||||
border-radius: 10px;
|
||||
padding-left: 2.5em;
|
||||
border: 1px solid #c4c4c4;
|
||||
border: 1px solid $extra-light-gray;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -174,9 +176,11 @@ body {
|
||||
}
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
max-height: 75vh;
|
||||
margin: 0em 2em 2em 2em;
|
||||
border-bottom: 1px solid $extra-light-gray;
|
||||
.installed-plugins-list {
|
||||
border: 1px solid #c4c4c4;
|
||||
border: 1px solid $extra-light-gray;
|
||||
border-radius: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -184,7 +188,7 @@ body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1em 2em;
|
||||
border-bottom: 1px solid #c4c4c4;
|
||||
border-bottom: 1px solid $extra-light-gray;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
@ -301,6 +305,41 @@ body {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
.tutor-logs-container {
|
||||
height: 100%;
|
||||
}
|
||||
#tutor-logs {
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 2em;
|
||||
border-radius: 1em;
|
||||
font-family: inherit;
|
||||
line-height: 1.5em;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0em 2em;
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
width: 20em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border: 1px solid $light-gray;
|
||||
padding: 1em 2em;
|
||||
border-radius: 1em;
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -455,17 +494,3 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tutor-logs {
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 2em;
|
||||
border-radius: 1em;
|
||||
font-family: inherit;
|
||||
line-height: 1.5em;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-y: auto;
|
||||
max-height: 50%;
|
||||
}
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,6 +60,9 @@
|
||||
<div class="content">
|
||||
{% block workspace_content %}{% endblock %}
|
||||
</div>
|
||||
<div class="footer">
|
||||
{% block footer %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-container" id="modal_container">
|
||||
|
||||
@ -55,14 +55,44 @@ View and install available plugins.
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <p{{ plugin.short_description }}></p>
|
||||
<ul>
|
||||
<li>url: {{ plugin.url }}</li>
|
||||
<li>index: {{ plugin.index }}</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
<div class="pagination">
|
||||
<a href="{{ url_for('plugin_store', page=current_page+1)}}">
|
||||
<div class="pagination-button">
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
{% if page_count > 4 %}
|
||||
{% for i in range(1, 5) %}
|
||||
<a href="{{ url_for('plugin_store', page=i)}}">
|
||||
<div class="pagination-button">
|
||||
{{i}}
|
||||
</div>
|
||||
</a>
|
||||
{% if i == 2 %}
|
||||
<div class="pagination-button">
|
||||
...
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for i in range(1,page_count+1) %}
|
||||
<a href="{{ url_for('plugin_store', page=i)}}">
|
||||
<div class="pagination-button">
|
||||
{{i}}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<a href="{{ url_for('plugin_store', page=current_page-1)}}">
|
||||
<div class="pagination-button">
|
||||
<
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
