diff --git a/tutordash/server/app.py b/tutordash/server/app.py index e96c1ff..65be5dd 100644 --- a/tutordash/server/app.py +++ b/tutordash/server/app.py @@ -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(), ) diff --git a/tutordash/server/static/scss/dash.scss b/tutordash/server/static/scss/dash.scss index b75c97e..78135dd 100644 --- a/tutordash/server/static/scss/dash.scss +++ b/tutordash/server/static/scss/dash.scss @@ -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; - } - } - } } } diff --git a/tutordash/server/templates/_plugin_store_list.html b/tutordash/server/templates/_plugin_store_list.html index a26fc10..78300a4 100644 --- a/tutordash/server/templates/_plugin_store_list.html +++ b/tutordash/server/templates/_plugin_store_list.html @@ -1,3 +1,4 @@ +
{% for plugin in plugins %}
@@ -32,4 +33,26 @@
-{% endfor %} \ No newline at end of file +{% endfor %} + +
+ +
\ No newline at end of file diff --git a/tutordash/server/templates/plugin_store.html b/tutordash/server/templates/plugin_store.html index ea8338b..8124ea3 100644 --- a/tutordash/server/templates/plugin_store.html +++ b/tutordash/server/templates/plugin_store.html @@ -20,7 +20,6 @@ View and install available plugins. {% block workspace_content %}
- {% endblock %}