diff options
| author | Rodrigo Arias Mallo <rodarima@gmail.com> | 2024-03-31 23:06:55 +0200 |
|---|---|---|
| committer | Rodrigo Arias Mallo <rodarima@gmail.com> | 2024-04-01 16:03:37 +0200 |
| commit | 97b2f65cea3cf75464d6808ec03586fed3c6693c (patch) | |
| tree | 1812755ab56336d5deff11f0bedab59abff7ac1e | |
| parent | b55dc711c6c4d8bc47b7ac2c9cf303c4dbf822f3 (diff) | |
Improve readability of bookmarks
Simplifies and increases the contrast of the Bookmark pages and menus.
Tables are removed in favor of HTML5 elements. For styles we add a
simple CSS style sheet, common for all pages.
Fixes: https://github.com/dillo-browser/dillo/issues/108
| -rw-r--r-- | dpi/bookmarks.c | 323 |
1 files changed, 113 insertions, 210 deletions
diff --git a/dpi/bookmarks.c b/dpi/bookmarks.c index f0467a8b..15498449 100644 --- a/dpi/bookmarks.c +++ b/dpi/bookmarks.c @@ -4,6 +4,7 @@ * NOTE: this code illustrates how to make a dpi-program. * * Copyright 2002-2007 Jorge Arellano Cid <jcid@dillo.org> + * Copyright 2024 Rodrigo Arias Mallo <rodarima@gmail.com> * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by @@ -45,8 +46,20 @@ #define MSG(...) printf("[bookmarks dpi]: " __VA_ARGS__) #define DOCTYPE \ - "<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>\n" - + "<!DOCTYPE html>\n" + +#define CSS_STYLE \ + "<style type='text/css'>\n"\ + "body { margin: 2em; background: white; font-size: 16px }\n" \ + "table { border: 0 }\n" \ + "ul { font-size: inherit; margin-left: 1em; margin-top: 0.5em; list-style-type: none; }\n" \ + "ul.main { list-style-type: none; }\n" \ + "li { min-height: 1.6em; }\n" \ + "div.modify-menu { background-color: #f0f0f0; border: solid 1px #ccc; padding: 1em }\n" \ + "nav ul { margin-top: 1em }\n" \ + "nav li { display: inline; }\n" \ + "a { color: black; }\n" \ + "</style>\n" /* * Notes on character escaping: * - Basically things are saved unescaped and escaped when in memory. @@ -95,145 +108,99 @@ DOCTYPE "<html>\n" "<head>\n" "<title>Bookmarks</title>\n" +CSS_STYLE "</head>\n" -"<body id='dillo_bm' bgcolor='#778899' link='black' vlink='brown'>\n" -"<table border='1' cellpadding='0' width='100%'>\n" -" <tr><td>\n" -" <table width='100%' bgcolor='#b4b4b4'>\n" -" <tr>\n" -" <td> Bookmarks :: </td>\n" -" <td align='right'>\n" -" [<a href='dpi:/bm/modify'>modify</a>]\n" -" </td></tr>\n" -" </table></td></tr>\n" -"</table>\n" -"<br>\n"; +"<body id='dillo_bm'>\n" +"\n" +" <h1>Bookmarks</h1>\n" +" <div style='float: right; padding: 1em'>\n" +" [<a href='dpi:/bm/modify'>Modify</a>]\n" +" </div>\n"; static const char *modifypage_header = DOCTYPE "<html>\n" "<head>\n" "<title>Bookmarks</title>\n" +CSS_STYLE "</head>\n" -"<body id='dillo_bm' bgcolor='#778899' link='black' vlink='brown'>\n" -"<table border='1' cellpadding='0' width='100%'>\n" -" <tr><td>\n" -" <table width='100%' bgcolor='#b4b4b4'>\n" -" <tr>\n" -" <td> Bookmarks :: modify</td>\n" -" <td align='right'>\n" -" [<a href='dpi:/bm/'>cancel</a>]\n" -" </td>\n" -" </tr>\n" -" </table></td></tr> \n" -"</table> \n" +"<body id='dillo_bm'>\n" +" <h1>Bookmarks</h1>\n" "\n" "<form action='modify'>\n" -"<table width='100%' border='1' cellpadding='0'>\n" -" <tr style='background-color: teal'>\n" -" <td>\n" -" <b>Select an operation</b>\n" -" <select name='operation'>\n" +"<div class='modify-menu'>\n" +" <div style='float: right'>\n" +" [<a href='dpi:/bm/'>Dismiss</a>]\n" +" </div>\n" +" <p>Select an operation\n" +" <select name='operation'>\n" " <option value='none' selected>--\n" " <option value='delete'>Delete\n" " <option value='move'>Move\n" " <option value='modify'>Modify\n" " <option value='add_sec'>Add Section\n" " <option value='add_url'>Add URL\n" -" </select>\n" -" <b>, mark its operands, and</b>\n" -" <input type='submit' name='submit' value='submit.'>\n" -" </td>\n" -" </tr>\n" -"</table>\n"; +" </select>\n" +" , mark its operands and\n" +" <input type='submit' name='submit' value='Submit'>\n" +" <p>You can also modify the bookmarks by editting the\n" +" <a href='file:~/.dillo/bm.txt'><code>~/.dillo/bm.txt</code></a> file.\n" +"</div>\n"; static const char *mainpage_sections_header = -"<table border='1' cellpadding='0' cellspacing='20' width='100%'>\n" -" <tr valign='top'>\n" -" <td>\n" -" <table bgcolor='#b4b4b4' border='2' cellpadding='4' cellspacing='1'>\n" -" <tr><td>\n" -" <table width='100%' bgcolor='#b4b4b4'>\n" -" <tr><td><small>Sections:</small></td></tr></table></td></tr>\n"; - -static const char *modifypage_sections_header = -"<table border='1' cellpadding='0' cellspacing='20' width='100%'>\n" -" <tr valign='top'>\n" -" <td>\n" -" <table bgcolor='#b4b4b4' border='1'>\n" -" <tr><td>\n" -" <table width='100%' bgcolor='#b4b4b4'>\n" -" <tr><td><small>Sections:</small></td></tr></table></td></tr>\n"; +"<nav>\n" +" <ul>\n"; + +#define modifypage_sections_header mainpage_sections_header static const char *mainpage_sections_item = -" <tr><td align='center'>\n" -" <a href='#s%d'>%s</a></td></tr>\n"; +" <li><a href='#s%d'>%s</a></li>\n"; + +static const char *sections_sep = +" | \n"; static const char *modifypage_sections_item = -" <tr><td>\n" -" <table width='100%%'>\n" -" <tr align='center'>" -" <td><input type='checkbox' name='s%d'></td>\n" -" <td width='100%%'><a href='#s%d'>%s</a></td></tr></table></td></tr>\n"; +" <li><input type='checkbox' name='s%d'><a href='#s%d'>%s</a></li>\n"; static const char *mainpage_sections_footer = -" </table>\n"; +" </ul>\n" +"</nav>\n"; -static const char *modifypage_sections_footer = -" </table>\n"; +#define modifypage_sections_footer mainpage_sections_footer -static const char *mainpage_middle1 = -" </td>\n" -" <td width='100%'>\n"; +static const char *mainpage_middle1 = "\n"; -static const char *modifypage_middle1 = -" </td>\n" -" <td width='100%'>\n"; +static const char *modifypage_middle1 = "\n"; static const char *mainpage_section_card_header = -" <a name='s%d'></a>\n" -" <table bgcolor='#bfbfbf' width='100%%' cellspacing='2'>\n" -" <tr>\n" -" <td bgcolor='#bf0c0c'><font color='white'><b>\n" -" %s </b></font></td>\n" -" <td bgcolor='white' width='100%%'> </td></tr>\n"; +"<h2 id='s%d'>%s</h2>\n" +"<ul class='main'>\n"; static const char *modifypage_section_card_header = -" <a name='s%d'></a>\n" -" <table bgcolor='#bfbfbf' width='100%%' cellspacing='2'>\n" -" <tr>\n" -" <td bgcolor='#bf0c0c'><font color='white'><b>\n" -" %s </b></font></td>\n" -" <td bgcolor='white' width='100%%'> </td></tr>\n"; +"<h2 id='s%d'>%s</h2>\n" +"<ul class='main'>\n"; static const char *mainpage_section_card_item = -" <tr><td colspan='2'>\n" -" <a href='%s'>%s</a> </td></tr>\n"; +" <li>\n" +" <a href='%s'>%s</a>\n" +" </li>\n"; static const char *modifypage_section_card_item = -" <tr>\n" -" <td colspan='2'><input type='checkbox' name='url%d'>\n" -" <a href='%s'>%s</a></td></tr>\n"; +" <li>\n" +" <input type='checkbox' name='url%d'>\n" +" <a href='%s'>%s</a>\n" +" </li>\n"; static const char *mainpage_section_card_footer = -" </table>\n" -" <hr>\n"; +"</ul>\n"; -static const char *modifypage_section_card_footer = -" </table>\n" -" <hr>\n"; +#define modifypage_section_card_footer mainpage_section_card_footer static const char *mainpage_footer = -" </td>\n" -" </tr>\n" -"</table>\n" "</body>\n" "</html>\n"; static const char *modifypage_footer = -" </td>\n" -" </tr>\n" -"</table>\n" "</form>\n" "</body>\n" "</html>\n"; @@ -244,42 +211,18 @@ DOCTYPE "<html>\n" "<head>\n" "<title>Bookmarks</title>\n" +CSS_STYLE "</head>\n" -"<body id='dillo_bm' bgcolor='#778899' link='black' vlink='brown'>\n" -"<table border='1' cellpadding='0' width='100%'>\n" -" <tr><td colspan='2'>\n" -" <table bgcolor='#b4b4b4' width='100%'>\n" -" <tr>\n" -" <td bgcolor='#b4b4b4'>\n" -" Modify bookmarks :: add section\n" -" </td>\n" -" <td align='right'>\n" -" [<a href='dpi:/bm/'>cancel</a>]\n" -" </td>\n" -" </tr>\n" -" </table></td></tr>\n" -"</table>\n" -"<br>\n" +"<body id='dillo_bm'>\n" +"<h1>Boorkmarks: New section</h1>\n" "<form action='modify'>\n" -" <input type='hidden' name='operation' value='add_section'>\n" -"<table border='1' width='100%'>\n" -" <tr>\n" -" <td bgcolor='olive'><b>New section:</b></td>\n" -" <td bgcolor='white' width='100%'></td></tr>\n" -"</table>\n" -"<table width='100%' cellpadding='10'>\n" -"<tr><td>\n" -" <table width='100%' bgcolor='teal'>\n" -" <tr>\n" -" <td>Title:</td>\n" -" <td><input type='text' name='title' size='64'></td></tr>\n" -" </table>\n" -" </td></tr>\n" -"</table>\n" -"<table width='100%' cellpadding='4' border='0'>\n" -"<tr><td bgcolor='#a0a0a0'>\n" -" <input type='submit' name='submit' value='submit.'></td></tr>\n" -"</table>\n" +" <input type='hidden' name='operation' value='add_section'>\n" +" <p>\n" +" New section title:\n" +" <input type='text' name='title' size='32'>\n" +" <input type='submit' name='submit' value='Submit'>\n" +" or <a href='dpi:/bm/'>Cancel</a>\n" +" </p>\n" "</form>\n" "</body>\n" "</html>\n" @@ -291,64 +234,35 @@ DOCTYPE "<html>\n" "<head>\n" "<title>Bookmarks</title>\n" +CSS_STYLE "</head>\n" -"<body id='dillo_bm' bgcolor='#778899' link='black' vlink='brown'>\n" -"<table border='1' cellpadding='0' width='100%'>\n" -" <tr><td colspan='2'>\n" -" <table bgcolor='#b4b4b4' width='100%'>\n" -" <tr><td bgcolor='#b4b4b4'> Modify bookmarks :: update\n" -" </td>\n" -" <td align='right'>\n" -" [<a href='dpi:/bm/'>cancel</a>]\n" -" </td>\n" -" </tr>\n" -" </table></td></tr>\n" -"</table>\n" -"<br>\n" +"<body id='dillo_bm'>\n" +"<h1>Bookmarks: Update</h1>\n" "<form action='modify'>\n" "<input type='hidden' name='operation' value='modify2'>\n"; static const char *modifypage_update_title = -"<table border='1' width='100%%'>\n" -" <tr>\n" -" <td bgcolor='olive'><b>%s</b></td>\n" -" <td bgcolor='white' width='100%%'></td></tr>\n" -"</table>\n"; +"<h2>%s</h2>\n"; static const char *modifypage_update_item_header = -"<table width='100%' cellpadding='10'>\n"; +"<ul>\n"; static const char *modifypage_update_item = -"<tr><td>\n" -" <table width='100%%' bgcolor='teal'>\n" -" <tr>\n" -" <td>Title:</td>\n" -" <td><input type='text' name='title%d' size='64'\n" -" value='%s'></td></tr>\n" -" <tr>\n" -" <td>URL:</td>\n" -" <td>%s</td></tr>\n" -" </table>\n" -" </td></tr>\n"; +"<li style='padding: 0.5em'>\n" +" <input type='text' name='title%d' size='64'\n value='%s'>\n" +" <br>URL: <code>%s</code>\n" +"</li>\n"; static const char *modifypage_update_item2 = -"<tr><td>\n" -" <table width='100%%' bgcolor='teal'>\n" -" <tr>\n" -" <td>Title:</td>\n" -" <td><input type='text' name='s%d' size='64'\n" -" value='%s'></td></tr>\n" -" </table>\n" -" </td></tr>\n"; +"<li style='padding: 0.5em'>\n" +" <input type='text' name='s%d' size='64' value='%s'>\n" +"</li>\n"; static const char *modifypage_update_item_footer = -"</table>\n"; +"</ul>\n"; static const char *modifypage_update_footer = -"<table width='100%' cellpadding='4' border='0'>\n" -"<tr><td bgcolor='#a0a0a0'>\n" -" <input type='submit' name='submit' value='submit.'></td></tr>\n" -"</table>\n" +"<input type='submit' name='submit' value='Submit'>\n" "</form>\n" "</body>\n" "</html>\n"; @@ -359,43 +273,22 @@ DOCTYPE "<html>\n" "<head>\n" "<title>Bookmarks</title>\n" +CSS_STYLE "</head>\n" -"<body id='dillo_bm' bgcolor='#778899' link='black' vlink='brown'>\n" -"<table border='1' cellpadding='0' width='100%'>\n" -" <tr><td colspan='2'>\n" -" <table bgcolor='#b4b4b4' width='100%'>\n" -" <tr><td bgcolor='#b4b4b4'> Modify bookmarks :: add url\n" -" </td>\n" -" <td align='right'>\n" -" [<a href='dpi:/bm/'>cancel</a>]\n" -" </td>\n" -" </tr>\n" -" </table></td></tr>\n" -"</table>\n" -"<br>\n" +"<body id='dillo_bm'>\n" +"<h1>Bookmarks: Add URL</h1>\n" "<form action='modify'>\n" "<input type='hidden' name='operation' value='add_url2'>\n" -"<table border='1' width='100%'>\n" -" <tr>\n" -" <td bgcolor='olive'><b>Add url:</b></td>\n" -" <td bgcolor='white' width='100%'></td></tr>\n" -"</table>\n" -"<table width='100%' cellpadding='10'>\n" -"<tr><td>\n" -" <table width='100%' bgcolor='teal'>\n" -" <tr>\n" -" <td>Title:</td>\n" -" <td><input type='text' name='title' size='64'></td></tr>\n" -" <tr>\n" -" <td>URL:</td>\n" -" <td><input type='text' name='url' size='64'></td></tr>\n" -" </table>\n" -" </td></tr>\n" -"</table>\n" -"<table width='100%' cellpadding='4' border='0'>\n" -"<tr><td bgcolor='#a0a0a0'>\n" -" <input type='submit' name='submit' value='submit.'></td></tr>\n" -"</table>\n" +"<p>Title:\n" +" <input type='text' name='title' size='64'>\n" +"</p>\n" +"<p>URL:\n" +" <input type='text' name='url' size='64'>\n" +"</p>\n" +"<p>\n" +" <input type='submit' name='submit' value='Submit'>\n" +" or <a href='dpi:/bm/'>Cancel</a>\n" +"</p>\n" "</form>\n" "</body>\n" "</html>\n"; @@ -964,6 +857,11 @@ static int Bmsrv_send_modify_page(Dsh *sh) return 1; /* write sections */ for (i = 0; (sec_node = dList_nth_data(B_secs, i)); ++i) { + if (i > 0) { + if (a_Dpip_dsh_write_str(sh, 0, sections_sep)) + return 1; + } + dStr_sprintf(dstr, modifypage_sections_item, sec_node->section, sec_node->section, sec_node->title); if (a_Dpip_dsh_write_str(sh, 0, dstr->str)) @@ -1069,7 +967,7 @@ static int Bmsrv_send_modify_update(Dsh *sh, char *url) Bmsrv_count_urls_and_sections(url1, &n_sec, &n_url); if (n_sec) { - dStr_sprintf(dstr, modifypage_update_title, "Update sections:"); + dStr_sprintf(dstr, modifypage_update_title, "Update sections"); a_Dpip_dsh_write_str(sh, 0, dstr->str); a_Dpip_dsh_write_str(sh, 0, modifypage_update_item_header); /* send items here */ @@ -1089,7 +987,7 @@ static int Bmsrv_send_modify_update(Dsh *sh, char *url) } if (n_url) { - dStr_sprintf(dstr, modifypage_update_title, "Update titles:"); + dStr_sprintf(dstr, modifypage_update_title, "Update titles"); a_Dpip_dsh_write_str(sh, 0, dstr->str); a_Dpip_dsh_write_str(sh, 0, modifypage_update_item_header); /* send items here */ @@ -1524,6 +1422,11 @@ static int send_bm_page(Dsh *sh) return 1; /* write sections */ for (i = 0; (sec_node = dList_nth_data(B_secs, i)); ++i) { + if (i > 0) { + if (a_Dpip_dsh_write_str(sh, 0, sections_sep)) + return 1; + } + dStr_sprintf(dstr, mainpage_sections_item, sec_node->section, sec_node->title); if (a_Dpip_dsh_write_str(sh, 0, dstr->str)) |