diff options
| -rw-r--r-- | src/Routes/Images.c | 9 | ||||
| -rw-r--r-- | src/Routes/Search.c | 16 | ||||
| -rw-r--r-- | static/main.css | 23 | ||||
| -rw-r--r-- | templates/images.html | 51 | ||||
| -rw-r--r-- | templates/results.html | 39 |
5 files changed, 116 insertions, 22 deletions
diff --git a/src/Routes/Images.c b/src/Routes/Images.c index ae25cf8..0f8ff1e 100644 --- a/src/Routes/Images.c +++ b/src/Routes/Images.c @@ -20,15 +20,20 @@ int images_handler(UrlParams *params) { } } - char page_str[16], prev_str[16], next_str[16]; + char page_str[16], prev_str[16], next_str[16], two_prev_str[16], + two_next_str[16]; + snprintf(page_str, sizeof(page_str), "%d", page); snprintf(prev_str, sizeof(prev_str), "%d", page > 1 ? page - 1 : 0); snprintf(next_str, sizeof(next_str), "%d", page + 1); - + snprintf(two_prev_str, sizeof(two_prev_str), "%d", page > 2 ? page - 2 : 0); + snprintf(two_next_str, sizeof(two_next_str), "%d", page + 2); context_set(&ctx, "query", raw_query); context_set(&ctx, "page", page_str); context_set(&ctx, "prev_page", prev_str); context_set(&ctx, "next_page", next_str); + context_set(&ctx, "two_prev_page", two_prev_str); + context_set(&ctx, "two_next_page", two_next_str); char *display_query = url_decode_query(raw_query); context_set(&ctx, "query", display_query); diff --git a/src/Routes/Search.c b/src/Routes/Search.c index 16ff1c0..b9851d7 100644 --- a/src/Routes/Search.c +++ b/src/Routes/Search.c @@ -174,13 +174,18 @@ int results_handler(UrlParams *params) { context_set(&ctx, "query", raw_query); - char page_str[16], prev_str[16], next_str[16]; + char page_str[16], prev_str[16], next_str[16], two_prev_str[16], + two_next_str[16]; snprintf(page_str, sizeof(page_str), "%d", page); snprintf(prev_str, sizeof(prev_str), "%d", page > 1 ? page - 1 : 0); snprintf(next_str, sizeof(next_str), "%d", page + 1); + snprintf(two_prev_str, sizeof(two_prev_str), "%d", page > 2 ? page - 2 : 0); + snprintf(two_next_str, sizeof(two_next_str), "%d", page + 2); context_set(&ctx, "page", page_str); context_set(&ctx, "prev_page", prev_str); context_set(&ctx, "next_page", next_str); + context_set(&ctx, "two_prev_page", two_prev_str); + context_set(&ctx, "two_next_page", two_next_str); if (!raw_query || strlen(raw_query) == 0) { send_response("<h1>No query provided</h1>"); @@ -265,9 +270,12 @@ int results_handler(UrlParams *params) { int *results_inner_counts = (int *)malloc(sizeof(int) * total_results); char **seen_urls = (char **)malloc(sizeof(char *) * total_results); if (!results_matrix || !results_inner_counts || !seen_urls) { - if (results_matrix) free(results_matrix); - if (results_inner_counts) free(results_inner_counts); - if (seen_urls) free(seen_urls); + if (results_matrix) + free(results_matrix); + if (results_inner_counts) + free(results_inner_counts); + if (seen_urls) + free(seen_urls); char *html = render_template("results.html", &ctx); if (html) { send_response(html); diff --git a/static/main.css b/static/main.css index fd69035..a458541 100644 --- a/static/main.css +++ b/static/main.css @@ -360,9 +360,9 @@ h1 span { .pagination-btn { background: var(--bg-card); - color: var(--text-primary); + color: var(--text-secondary); border: 1px solid var(--border); - padding: 8px 16px; + padding: 4px 8px; border-radius: 8px; text-decoration: none; font-size: 0.9rem; @@ -376,11 +376,26 @@ h1 span { border-color: var(--text-secondary); } + .pagination-current { - color: var(--text-secondary); - font-size: 0.9rem; + background: var(--bg-card); + color: var(--text-primary); + border: 1px solid var(--border); + padding: 4px 12px; + border-radius: 8px; + text-decoration: none; + font-size: 1.2rem; + font-weight: 600; + transition: all 0.2s; + touch-action: manipulation; } +.pagination-current:hover { + background: var(--border); + border-color: var(--text-secondary); +} + + @media (max-width:1200px) { .content-layout { grid-template-columns:1fr; diff --git a/templates/images.html b/templates/images.html index 4dad2ea..b20eb04 100644 --- a/templates/images.html +++ b/templates/images.html @@ -59,15 +59,48 @@ </div> {{endfor}} </div> - <nav class="pagination"> - <a class="pagination-btn prev" href="/images?q={{query}}&p={{prev_page}}"> - ← Page {{prev_page}} - </a> - <span class="pagination-current">Page {{page}}</span> - <a class="pagination-btn next" href="/images?q={{query}}&p={{next_page}}"> - Page {{next_page}} → - </a> - </nav> + <nav class="pagination"> + <a class="pagination-btn prev" href="/images?q={{query}}&p={{prev_page}}"> + ← + </a> + + {{if two_prev_page != 0}} + <a class="pagination-btn prev" href="/images?q={{query}}&p={{two_prev_page}}"> + {{two_prev_page}} + </a> + {{endif}} + + {{if prev_page != 0}} + <a class="pagination-btn prev" href="/images?q={{query}}&p={{prev_page}}"> + {{prev_page}} + </a> + {{endif}} + + <a class="pagination-current" href="/images?q={{query}}&p={{page}}"> + {{page}} + </a> + <a class="pagination-btn next" href="/images?q={{query}}&p={{next_page}}"> + {{next_page}} + </a> + <a class="pagination-btn next" href="/images?q={{query}}&p={{two_next_page}}"> + {{two_next_page}} + </a> + + {{if prev_page == 0}} + <a class="pagination-btn prev" href="/images?q={{query}}&p=4"> + 4 + </a> + {{endif}} + + {{if two_prev_page == 0}} + <a class="pagination-btn prev" href="/images?q={{query}}&p=5"> + 5 + </a> + {{endif}} + <a class="pagination-btn next" href="/images?q={{query}}&p={{next_page}}"> + → + </a> + </nav> </main> </body> diff --git a/templates/results.html b/templates/results.html index 759213b..1bda9e4 100644 --- a/templates/results.html +++ b/templates/results.html @@ -54,11 +54,44 @@ <nav class="pagination"> <a class="pagination-btn prev" href="/search?q={{query}}&p={{prev_page}}"> - ← Page {{prev_page}} + ← </a> - <span class="pagination-current">Page {{page}}</span> + + {{if two_prev_page != 0}} + <a class="pagination-btn prev" href="/search?q={{query}}&p={{two_prev_page}}"> + {{two_prev_page}} + </a> + {{endif}} + + {{if prev_page != 0}} + <a class="pagination-btn prev" href="/search?q={{query}}&p={{prev_page}}"> + {{prev_page}} + </a> + {{endif}} + + <a class="pagination-current" href="/search?q={{query}}&p={{page}}"> + {{page}} + </a> + <a class="pagination-btn next" href="/search?q={{query}}&p={{next_page}}"> + {{next_page}} + </a> + <a class="pagination-btn next" href="/search?q={{query}}&p={{two_next_page}}"> + {{two_next_page}} + </a> + + {{if prev_page == 0}} + <a class="pagination-btn prev" href="/search?q={{query}}&p=4"> + 4 + </a> + {{endif}} + + {{if two_prev_page == 0}} + <a class="pagination-btn prev" href="/search?q={{query}}&p=5"> + 5 + </a> + {{endif}} <a class="pagination-btn next" href="/search?q={{query}}&p={{next_page}}"> - Page {{next_page}} → + → </a> </nav> </main> |