gotwebd: style improvements

On 2023/09/10 10:49:20 +0200, Omar Polo <op@omarpolo.com> wrote: > This is a first round of html polishing, css semplifications and > responsiveness for gotwebd. > > I couldn't find a decent way to split this into smaller steps but the > diff seems quite readable so hope it's not a problem. > > I'm doing a few things here: > > - nuke float usage in the CSS > > - use less divs and start to use html5 semantic markup; this > includes: > > + switching the headings to proper titles (header + h2) > > + using a dl for the key-value part of the interface. > > + use an <hr /> instead of <div class="dotted_line"> > > + using <pre> for the code. > > + using <code> for the commits ids. > > - attempt to make it usable on mobile phones; it's just a first > start. > > - attempt to make it usable on text browsers like w3m and links. I > do use w3m from time to time and care for sites to work on it. > IMHO with this change gotwebd is nicely browseable on text > browsers. > > (On netsurf we have one regression in the key-value sections but > it's still more than usable there.) > > - simplify the font definitions. Just set one global width and only > tweak when necessary. I've dropped "Arial" from the font list and > just kept `sans-serif' which will use the default font of the > browser. > > This shouldn't bring any noticeable differences in the UI on a > computer screen, except maybe for some slightly more spacing in the > tree view and in the key-value sections. > > My goal is not to change the appearance but rather to make it work > better. If there are noticeable differences, it's an unwanted > consequence that I haven't spotted. > > One thing I'm not sure yet is the listing page. I've used a "trick" > with a display:inline-block to render the various fields and drop the > float usage but I'm still not convinced by that. I'll either change > it to a proper table or finally attempt to study the css grids. > > I have this applied on my instance for comparison at > <{git,got}.omarpolo.com>. > > This will likely break any existing custom CSS styling. I'm not at > the point still where I care about breaking existing styling, there > are still many things I'd like to do before taking into consideration > backward compatibility of any sort. fixes for some issues spotted by Lucas on irc, thanks! - keep the monospace in the filenames in the tree view - missing styling for the "Blob" title - fix the width of the first tab character in the blob view diffstat refs/heads/main refs/heads/www M gotwebd/files/htdocs/gotwebd/gotweb.css | 120+ 405- M gotwebd/pages.tmpl | 186+ 190- 2 files changed, 306 insertions(+), 595 deletions(-) diff refs/heads/main refs/heads/www commit - d71015b33dbfbef534be92e584006caddbf16aa6 commit + 60d047a69262c73dc1665023af0b0d3e35920a04 blob - 5259d968ffb89ab3d1148ac90dc8dfffcada9857 blob + 9c9ca1cfdede56727c229a6af5d944e28b121533 --- gotwebd/files/htdocs/gotwebd/gotweb.css +++ gotwebd/files/htdocs/gotwebd/gotweb.css @@ -15,7 +15,9 @@ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. */ -/* general sections */ +*, *::after, *::before { + box-sizing: border-box; +} a { color: #444444; @@ -30,9 +32,15 @@ body { color: #000000; margin: 0; padding: 0; - font-family: Arial, sans-serif; + font-family: sans-serif; + font-size: 16px; } +pre { + font-family: monospace; + margin: 0; +} + .diff_minus, .diff_submodule { color: magenta; } @@ -50,45 +58,34 @@ body { color: blue; } -#logo { - height: 50px; -} .refs_str { background-color: #243647; color: #ffffff; font-style: italic; + white-space: pre; } -.dotted_line { - clear: left; - float: left; - width: 100%; +hr { + margin: 0; + height: 0; border-top: 1px dotted #444444; } #header { - overflow: auto; - width: 100%; background-image: linear-gradient(to right, White, LightSlateGray); } #header a { color: #ffffff; - font-size: 1.2em; text-decoration: none; } #header a:hover { color: Gold; - font-size: 1.2em; text-decoration: none; } #site_path { - clear: left; - float: left; overflow: auto; width: 100%; background-color: #243647; } #site_link { - float: left; - width: 40%; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; @@ -100,18 +97,10 @@ body { text-decoration: none; } #got_link { - float: left; padding-bottom: 10px; padding-top: 10px; } -#content { - width: 100%; - float: left; - clear: both; -} #np_wrapper { - clear: left; - float: left; width: 100%; border-bottom: 1px dotted #444444; background-color: #f5fcfb; @@ -122,7 +111,6 @@ body { text-align: center; } #nav_prev { - float: left; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; @@ -136,8 +124,6 @@ body { overflow: hidden; } .navs_wrapper { - clear: left; - float: left; width: 100%; background-color: #ced7e0; } @@ -145,11 +131,13 @@ body { padding-left: 10px; padding-top: 2px; padding-bottom: 2px; - font-size: .8em; } +@media (min-width: 680px) { + .navs { + font-size: .8em; + } +} #site_owner_wrapper { - clear: left; - float: left; width: 100%; background-color: LightSlateGray; color: #ffffff; @@ -158,215 +146,86 @@ body { padding-left: 10px; padding-top: 5px; padding-bottom: 5px; + margin: 0; } -#description_title { - clear: left; - float: left; - width: 6.5em; - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; -} -#description { - float: left; - width: 72%; - padding-top: 5px; - padding-bottom: 5px; -} -#repo_owner_title { - clear: left; - float: left; - width: 6.5em; - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; -} -#repo_owner { - float: left; - width: 72%; - padding-top: 5px; - padding-bottom: 5px; -} -#last_change_title { - clear: left; - float: left; - width: 6.5em; - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; -} -#last_change { - float: left; - width: 72%; - padding-top: 5px; - padding-bottom: 5px; -} -#cloneurl_title { - clear: left; - float: left; - width: 6.5em; - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; -} -#cloneurl { - float: left; - width: 72%; - padding-top: 5px; - padding-bottom: 5px; - overflow: auto; - white-space: pre-wrap; -} -.header_commit_title { - clear: left; - float: left; - width: 6.5em; - padding-left: 10px; - padding-top: 2px; - padding-bottom: 2px; -} -.header_commit { - float: left; - width: 72%; - padding-top: 2px; - padding-bottom: 2px; -} -.header_author_title { - clear: left; - float: left; - width: 6.5em; - padding-left: 10px; - padding-top: 2px; - padding-bottom: 2px; -} -.header_author { - float: left; - width: 72%; - padding-top: 2px; - padding-bottom: 2px; -} -.header_age_title { - clear: left; - float: left; - width: 6.5em; - padding-left: 10px; - padding-top: 2px; - padding-bottom: 2px; -} -.header_age { - float: left; - width: 72%; - padding-top: 2px; - padding-bottom: 2px; -} -#header_commit_msg_title { - clear: left; - float: left; - width: 6.5em; - padding-left: 10px; - padding-top: 2px; - padding-bottom: 2px; -} -#header_commit_msg { - float: left; - width: 72%; - padding-top: 2px; - padding-bottom: 2px; - white-space: pre-wrap; -} -#header_tree_title { - clear: left; - float: left; - width: 6.5em; - padding-left: 10px; - padding-top: 2px; - padding-bottom: 2px; -} -#header_tree { - float: left; - width: 72%; - padding-top: 2px; - padding-bottom: 2px; -} - #err_content { - clear: left; - float: left; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; } -#briefs_title_wrapper { - clear: left; - float: left; - width: 100%; +header.subtitle { background-color: LightSlateGray; +} +header.subtitle h2 { + margin: 0; + padding: 5px 10px; + font-size: 1rem; + font-weight: normal; color: #ffffff; } -#briefs_title { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; + +.brief { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; } -#briefs_content { - clear: left; - float: left; - width: 100%; +.brief p { + margin: 0; } +.brief_meta { + flex-grow: 0; + flex-shrink: 0; +} +.briefs_age, .briefs_author { display: inline-block; } .briefs_age { padding-left: 10px; padding-top: 5px; padding-bottom: 5px; - float: left; - width: 7.5em; - overflow: auto; + width: 140px; } .briefs_author { - float: left; padding-top: 5px; padding-bottom: 5px; width: 8.5em; font-style: italic; - overflow: auto; } .briefs_log { - float: left; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; - width: 65%; + width: 100%; } -#tags_title_wrapper { - clear: left; - float: left; - width: 100%; - background-color: LightSlateGray; - color: #ffffff; +@media (min-width: 680px) { + .brief { + flex-wrap: nowrap; + } + .briefs_log { + width: auto; + } } -#tags_title { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; + +.tag_age, .tag_name, .tag_log { + display: inline-block; + vertical-align: middle; } -#tags_content { - clear: left; - float: left; - width: 100%; -} .tag_age { padding-left: 10px; padding-top: 5px; padding-bottom: 5px; - float: left; - width: 7.5em; - overflow: auto; + width: 140px; } +.tag_name { + width: 8.5em; + font-style: italic; + padding-top: 5px; + padding-bottom: 5px; +} .tag_log { - float: left; padding-left: 10px; padding-right: 10px; padding-top: 5px; @@ -375,88 +234,42 @@ body { } #tag_header_wrapper { - clear: left; - float: left; background-color: #f5fcfb; - width: 100%; } #tag_header { - float: left; padding-left: 10px; padding-top: 5px; padding-bottom: 2px; width: 80%; } -.tag { - float: left; - width: 8.5em; - font-style: italic; - padding-top: 5px; - padding-bottom: 5px; -} #tag_commit { - clear: left; - float: left; + padding-top: 20px; padding-left: 20px; padding-bottom: 20px; - white-space: pre-wrap; + overflow: auto; } #index_header { - clear: left; - float: left; - overflow: auto; - width: 100%; background-color: Khaki; } -#index_header_project { - clear: left; - float: left; - width: 20%; +.index_project, .index_project_description, .index_project_owner, +.index_project_age { + display: inline-block; padding: 10px; -} -#index_header_description { - float: left; - width: 30%; - padding: 10px; -} -#index_header_owner { - float: left; - width: 12%; - padding: 10px; -} -#index_header_age { - padding: 10px; overflow: hidden; + vertical-align: middle; } -.index_wrapper { - clear: left; - float: left; - width: 100%; -} .index_project { - float: left; width: 20%; - padding: 10px; - overflow: hidden; } .index_project_description { - float: left; width: 30%; - padding: 10px; - overflow: auto; } .index_project_owner { - float: left; - width: 12%; - padding: 10px; - overflow: hidden; + width: 25%; } .index_project_age { - float: left; - width: 14%; - padding: 10px; - overflow: visible; + width: 25%; } .index_project a { color: #444444; @@ -483,261 +296,163 @@ body { text-decoration: none; } -.commits_title_wrapper { - clear: left; - float: left; - width: 100%; - background-color: LightSlateGray; - color: #ffffff; -} -.commits_title { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; -} .commits_content { - clear: left; - float: left; width: 100%; } .commits_header_wrapper { - float: left; background-color: #f5fcfb; - width: 100%; } .commits_header { - float: left; padding-top: 5px; padding-bottom: 2px; width: 80%; } .commit { - clear: left; - float: left; padding-left: 20px; padding-bottom: 20px; white-space: pre-wrap; } -#blame_title_wrapper, #blob_title_wrapper { - background-color: LightSlateGray; - color: #ffffff; -} -#blame_title, #blob_title_wrapper { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; -} -#blame_content, #blob_content { - clear: left; - float: left; - width: 100%; -} #blame_header_wrapper, #blob_header_wrapper { - float: left; background-color: #f5fcfb; - width: 100%; } #blame_header, #blob_header { - float: left; padding-left: 10px; padding-top: 5px; padding-bottom: 2px; - width: 80%; } #blame, #blob { - clear: left; - float: left; + margin-top: 20px; margin-left: 20px; margin-bottom: 20px; - font-family: monospace; - white-space: pre; overflow: auto; } -.blame_wrapper, .blob_line { - clear: left; - float: left; - width: 100%; +.blob_line > a { + display: inline-block; + text-align: right; + width: 60px; + padding-right: 20px; } +.blob_code { + /* fixes the width of the first tab */ + display: inline-block; +} +.blame_number, .blame_hash, .blame_date, .blame_author, .blame_code { + display: inline-block; + vertical-align: middle; +} .blame_wrapper:target, .blob_line:target { background-color: Khaki; } .blame_number, .blob_number { - float: left; width: 6em; overflow: hidden; } .blame_hash { - float: left; width: 6em; overflow: auto; } .blame_date { - float: left; width: 7em; overflow: auto; } .blame_author { - float: left; width: 6em; overflow: hidden; } -.blame_code, .blob_code { - float:left; - width: 50%; - overflow: visible; -} -#tree_title_wrapper { - clear: left; - float: left; - width: 100%; - background-color: LightSlateGray; - color: #ffffff; -} -#tree_title { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; -} -#tree_content { - clear: left; - float: left; - width: 100%; -} -#tree_header_wrapper { - clear: left; - float: left; - background-color: #f5fcfb; - width: 100%; -} #tree_header { - float: left; + background-color: #f5fcfb; padding-left: 10px; padding-top: 5px; padding-bottom: 2px; - width: 80%; } #tree { - clear: left; - float: left; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; - font-family: monospace; + border-collapse: collapse; } .tree_wrapper { - clear: left; - float: left; - width: 100%; background-color: #d8f3ef; } .tree_wrapper:nth-child(even) { background-color: #ffffff; } .tree_line { - clear: left; - float: left; + font-family: monospace; width: 20em; - padding: 1px; + padding: 5px; } .tree_line_blank { - float: left; padding: 1px; width: 9.5em; } -#diff_title_wrapper { - clear: left; - float: left; - width: 100%; - background-color: LightSlateGray; - color: #ffffff; -} -#diff_title { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; -} -#diff_content { - clear: left; - float: left; - width: 100%; -} #diff_header_wrapper { - float: left; background-color: #f5fcfb; - width: 100%; } #diff_header { - float: left; padding-left: 10px; padding-top: 5px; padding-bottom: 2px; - width: 80%; } #diff { - clear: left; - float: left; + margin-top: 20px; margin-left: 20px; margin-bottom: 20px; - font-family: monospace; - white-space: pre; + overflow: auto; } -.diff_line { - clear: left; - float: left; -} #summary_wrapper { - clear: left; - float: left; - width: 100%; background-color: Khaki; } -#branches_title_wrapper { - clear: left; - float: left; - width: 100%; - background-color: LightSlateGray; - color: #ffffff; +dl { + padding: 0; + margin: 0; + display: flex; + flex-wrap: wrap; } -#branches_title { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; +dt { + padding: 3px 7px; + width: 120px; } -#branches_content { - clear: left; - float: left; - width: 100%; +dd { + padding: 3px 7px; + margin-left: auto; + width: calc(100% - 130px); + flex-grow: 2; } -.branches_wrapper { - clear: left; - float: left; +.clone-url { + white-space: pre-wrap; +} + +.commit-msg { + white-space: pre-wrap; +} + +.commit-id { width: 100%; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; } + +.branches_age, .branches_space, .branch { + display: inline-block; + vertical-align: middle; +} .branches_age { padding-left: 10px; padding-top: 5px; padding-bottom: 5px; - float: left; - width: 7.5em; - overflow: auto; + width: calc(140px + 8.5em); } -.branches_space { - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; - float: left; - width: 8.5em; - overflow: auto; -} .branch { - float: left; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; + padding-left: 10px; } blob - fd2adb9dee5877d0502e944fac8a60b381b85437 blob + efdda59e16224c27afe672254b9627509db74a08 --- gotwebd/pages.tmpl +++ gotwebd/pages.tmpl @@ -74,7 +74,7 @@ static inline int rss_author(struct template *, char * <head> <meta charset="utf-8" /> <title>{{ srv->site_name }}</title> - <meta name="viewport" content="initial-scale=.75" /> + <meta name="viewport" content="initial-scale=1.0" /> <meta name="msapplication-TileColor" content="#da532c" /> <meta name="theme-color" content="#ffffff"/> <link rel="apple-touch-icon" sizes="180x180" href="{{ prfx }}apple-touch-icon.png" /> @@ -85,42 +85,40 @@ static inline int rss_author(struct template *, char * <link rel="stylesheet" type="text/css" href="{{ prfx }}{{ css }}" /> </head> <body> - <div id="gw_body"> - <div id="header"> - <div id="got_link"> - <a href="{{ srv->logo_url }}" target="_blank"> - <img src="{{ prfx }}{{ srv->logo }}" /> - </a> - </div> + <header id="header"> + <div id="got_link"> + <a href="{{ srv->logo_url }}" target="_blank"> + <img src="{{ prfx }}{{ srv->logo }}" /> + </a> </div> - <div id="site_path"> - <div id="site_link"> - <a href="?index_page={{ printf "%d", qs->index_page }}"> - {{ srv->site_link }} + </header> + <nav id="site_path"> + <div id="site_link"> + <a href="?index_page={{ printf "%d", qs->index_page }}"> + {{ srv->site_link }} + </a> + {{ if qs->path }} + {! u_path.path = qs->path; !} + {{ " / " }} + <a href="{{ render gotweb_render_url(tp->tp_arg, &u_path)}}"> + {{ qs->path }} </a> - {{ if qs->path }} - {! u_path.path = qs->path; !} - {{ " / " }} - <a href="{{ render gotweb_render_url(tp->tp_arg, &u_path)}}"> - {{ qs->path }} - </a> - {{ end }} - {{ if qs->action != INDEX }} - {{ " / " }}{{ gotweb_action_name(qs->action) }} - {{ end }} - </div> + {{ end }} + {{ if qs->action != INDEX }} + {{ " / " }}{{ gotweb_action_name(qs->action) }} + {{ end }} </div> - <div id="content"> - {{ render body(tp) }} - <div id="site_owner_wrapper"> - <div id="site_owner"> - {{ if srv->show_site_owner }} - {{ srv->site_owner }} - {{ end }} - </div> - </div> - </div> - </div> + </nav> + <main> + {{ render body(tp) }} + </main> + <footer id="site_owner_wrapper"> + <p id="site_owner"> + {{ if srv->show_site_owner }} + {{ srv->site_owner }} + {{ end }} + </p> + </footer> </body> </html> {{ end }} @@ -145,21 +143,21 @@ static inline int rss_author(struct template *, char * struct server *srv = c->srv; !} <div id="index_header"> - <div id="index_header_project"> + <div class="index_project"> Project </div> {{ if srv->show_repo_description }} - <div id="index_header_description"> + <div class="index_project_description"> Description </div> {{ end }} {{ if srv->show_repo_owner }} - <div id="index_header_owner"> + <div class="index_project_owner"> Owner </div> {{ end }} {{ if srv->show_repo_age }} - <div id="index_header_age"> + <div class="index_project_age"> Last Change </div> {{ end }} @@ -235,7 +233,7 @@ static inline int rss_author(struct template *, char * {{ " | " }} <a href="{{ render gotweb_render_url(tp->tp_arg, &rss) }}">rss</a> </div> - <div class="dotted_line"></div> + <hr /> </div> </div> {{ end }} @@ -265,9 +263,9 @@ static inline int rss_author(struct template *, char * .headref = qs->headref, }; !} -<div id="briefs_title_wrapper"> - <div id="briefs_title">Commit Briefs</div> -</div> +<header class='subtitle'> + <h2>Commit Briefs</h2> +</header> <div id="briefs_content"> {{ tailq-foreach rc &t->repo_commits entry }} {! @@ -282,21 +280,26 @@ static inline int rss_author(struct template *, char * if (tmp) *tmp = '\0'; !} - <div class="briefs_age"> - {{ render gotweb_render_age(tp, rc->committer_time, TM_DIFF) }} + <div class='brief'> + <p class='brief_meta'> + <span class='briefs_age'> + {{ render gotweb_render_age(tp, rc->committer_time, TM_DIFF) }} + </span> + {{" "}} + <span class="briefs_author"> + {{ rc->committer }} + </span> + </p> + <p class="briefs_log"> + <a href="{{ render gotweb_render_url(tp->tp_arg, &diff_url) }}"> + {{ rc->commit_msg }} + </a> + {{ if rc->refs_str }} + {{ " " }} <span class="refs_str">({{ rc->refs_str }})</span> + {{ end }} + </a> + </p> </div> - <div class="briefs_author"> - {{ rc->committer }} - </div> - <div class="briefs_log"> - <a href="{{ render gotweb_render_url(tp->tp_arg, &diff_url) }}"> - {{ rc->commit_msg }} - </a> - {{ if rc->refs_str }} - {{ " " }} <span class="refs_str">({{ rc->refs_str }})</span> - {{ end }} - </a> - </div> <div class="navs_wrapper"> <div class="navs"> <a href="{{ render gotweb_render_url(tp->tp_arg, &diff_url) }}">diff</a> @@ -304,7 +307,7 @@ static inline int rss_author(struct template *, char * <a href="{{ render gotweb_render_url(tp->tp_arg, &tree_url) }}">tree</a> </div> </div> - <div class="dotted_line"></div> + <hr /> {{ end }} {{ render gotweb_render_more(tp, BRIEFS) }} </div> @@ -389,9 +392,9 @@ static inline int rss_author(struct template *, char * .path = repo_dir->name, }; !} -<div class="commits_title_wrapper"> - <div class="commits_title">Commits</div> -</div> +<header class="subtitle"> + <h2>Commits</h2> +</header> <div class="commits_content"> {{ tailq-foreach rc &t->repo_commits entry }} {! @@ -399,22 +402,22 @@ static inline int rss_author(struct template *, char * tree.commit = rc->commit_id; !} <div class="commits_header_wrapper"> - <div class="commits_header"> - <div class="header_commit_title">Commit:</div> - <div class="header_commit">{{ rc->commit_id }}</div> - <div class="header_author_title">From:</div> - <div class="header_author">{{ rc->author }}</div> + <dl class="commits_header"> + <dt>Commit:</dt> + <dd><code class="commit-id">{{ rc->commit_id }}</code></dd> + <dt>From:</dt> + <dd>{{ rc->author }}</dd> {{ if strcmp(rc->committer, rc->author) != 0 }} - <div class="header_author_title">Via:</div> - <div class="header_author">{{ rc->committer }}</div> + <dt>Via:</dt> + <dd>{{ rc->committer }}</dd> {{ end }} - <div class="header_age_title">Date:</div> - <div class="header_age"> + <dt>Date:</dt> + <dd> {{ render gotweb_render_age(tp, rc->committer_time, TM_LONG) }} - </div> - </div> + </dd> + </dl> </div> - <div class="dotted_line"></div> + <hr /> <div class="commit"> {{ "\n" }} {{ rc->commit_msg }} @@ -426,7 +429,7 @@ static inline int rss_author(struct template *, char * <a href="{{ render gotweb_render_url(c, &tree) }}">tree</a> </div> </div> - <div class="dotted_line"></div> + <hr /> {{ end }} {{ render gotweb_render_more(tp, COMMITS) }} </div> @@ -439,21 +442,21 @@ static inline int rss_author(struct template *, char * struct got_blob_object *blob = t->blob; struct repo_commit *rc = TAILQ_FIRST(&t->repo_commits); !} -<div id="blob_title_wrapper"> - <div id="blob_title">Blob</div> -</div> +<header class="subtitle"> + <h2>Blob</h2> +</header> <div id="blob_content"> <div id="blob_header_wrapper"> - <div id="blob_header"> - <div class="header_age_title">Date:</div> - <div class="header_age"> + <dl id="blob_header"> + <dt>Date:</dt> + <dd> {{ render gotweb_render_age(tp, rc->committer_time, TM_LONG) }} - </div> - <div id="header_commit_msg_title">Message:</div> - <div id="header_commit_msg">{{ rc->commit_msg }}</div> - </div> + </dd> + <dt>Message:</dt> + <dd class="commit-msg">{{ rc->commit_msg }}</dd> + </dl> </div> - <div class="dotted_line"></div> + <hr /> <div id="blob"> <pre> {{ render got_output_blob_by_lines(tp, blob, gotweb_render_blob_line) }} @@ -473,10 +476,8 @@ static inline int rss_author(struct template *, char * return -1; !} <div class="blob_line" id="line{{ lineno }}"> - <div class="blob_number"> - <a href="#line{{ lineno }}">{{ lineno }}</a> - </div> - <div class="blob_code">{{ line }}</div> + <a href="#line{{ lineno }}">{{ lineno }}</a> + <span class="blob_code">{{ line }}</span> </div> {{ end }} @@ -486,26 +487,26 @@ static inline int rss_author(struct template *, char * struct transport *t = c->t; struct repo_commit *rc = TAILQ_FIRST(&t->repo_commits); !} -<div id="tree_title_wrapper"> - <div id="tree_title">Tree</div> -</div> +<header class='subtitle'> + <h2>Tree</h2> +</header> <div id="tree_content"> <div id="tree_header_wrapper"> - <div id="tree_header"> - <div id="header_tree_title">Tree:</div> - <div id="header_tree">{{ rc->tree_id }}</div> - <div class="header_age_title">Date:</div> - <div class="header_age"> + <dl id="tree_header"> + <dt>Tree:</dt> + <dd><code class="commit-id">{{ rc->tree_id }}</code></dd> + <dt>Date:</dt> + <dd> {{ render gotweb_render_age(tp, rc->committer_time, TM_LONG) }} - </div> - <div id="header_commit_msg_title">Message:</div> - <div id="header_commit_msg">{{ rc->commit_msg }}</div> - </div> + </dd> + <dt>Message:</dt> + <dd class="commit-msg">{{ rc->commit_msg }}</d> + </dl> </div> - <div class="dotted_line"></div> - <div id="tree"> + <hr /> + <table id="tree"> {{ render got_output_repo_tree(c, gotweb_render_tree_item) }} - </div> + </table> </div> {{ end }} @@ -553,21 +554,20 @@ static inline int rss_author(struct template *, char * else if (mode & S_IXUSR) modestr = "*"; !} -<div class="tree_wrapper"> +<tr class="tree_wrapper"> {{ if S_ISDIR(mode) }} - <div class="tree_line"> + <td class="tree_line" colspan=2> <a href="{{ render gotweb_render_url(c, &url) }}"> {{ name }}{{ modestr }} </a> - </div> - <div class="tree_line_blank"> </div> + </td> {{ else }} - <div class="tree_line"> + <td class="tree_line"> <a href="{{ render gotweb_render_url(c, &url) }}"> {{ name }}{{ modestr }} </a> - </div> - <div class="tree_line_blank"> + </td> + <td class="tree_line_blank"> {! url.action = COMMITS; !} <a href="{{ render gotweb_render_url(c, &url) }}"> commits @@ -577,9 +577,9 @@ static inline int rss_author(struct template *, char * <a href="{{ render gotweb_render_url(c, &url) }}"> blame </a> - </div> + </td> {{ end }} -</div> +</tr> {{ finally }} {! free(dir); @@ -596,9 +596,9 @@ static inline int rss_author(struct template *, char * commit_found = qs->commit == NULL; !} -<div id="tags_title_wrapper"> - <div id="tags_title">Tags</div> -</div> +<header class='subtitle'> + <h2>Tags</h2> +</header> <div id="tags_content"> {{ if t->tag_count == 0 }} <div id="err_content"> @@ -647,7 +647,7 @@ static inline int rss_author(struct template *, char * <div class="tag_age"> {{ render gotweb_render_age(tp, rt->tagger_time, TM_DIFF) }} </div> -<div class="tag">{{ tag_name }}</div> +<div class="tag_name">{{ tag_name }}</div> <div class="tag_log"> <a href="{{ render gotweb_render_url(c, &url) }}"> {{ msg }} @@ -664,7 +664,7 @@ static inline int rss_author(struct template *, char * <a href="{{ render gotweb_render_url(c, &url) }}">commits</a> </div> </div> -<div class="dotted_line"></div> +<hr /> {{ end }} {{ define gotweb_render_tag(struct template *tp) }} @@ -680,32 +680,31 @@ static inline int rss_author(struct template *, char * if (strncmp(tag_name, "refs/", 5) == 0) tag_name += 5; !} -<div id="tags_title_wrapper"> - <div id="tags_title">Tag</div> -</div> +<header class="subtitle"> + <h2>Tag</h2> +</header> <div id="tags_content"> <div id="tag_header_wrapper"> - <div id="tag_header"> - <div class="header_commit_title">Commit:</div> - <div class="header_commit"> - {{ rt->commit_id }} + <dl id="tag_header"> + <dt>Commit:</dt> + <dd> + <code class="commit-id">{{ rt->commit_id }}</code> {{ " " }} <span class="refs_str">({{ tag_name }})</span> - </div> - <div class="header_author_title">Tagger:</div> - <div class="header_author">{{ rt->tagger }}</div> - <div class="header_age_title">Date:</div> - <div class="header_age"> + </dd> + <dt>Tagger:</dt> + <dd>{{ rt->tagger }}</dd> + <dt>Date:</dt> + <dd> {{ render gotweb_render_age(tp, rt->tagger_time, TM_LONG)}} - </div> - <div id="header_commit_msg_title">Message:</div> - <div id="header_commit_msg">{{ rt->commit_msg }}</div> - </div> - <div class="dotted_line"></div> - <div id="tag_commit"> - {{ "\n" }} + </dd> + <dt>Message:</dt> + <dd class="commit-msg">{{ rt->commit_msg }}</dd> + </dl> + <hr /> + <pre id="tag_commit"> {{ rt->tag_commit }} - </div> + </pre> </div> </div> {{ end }} @@ -720,35 +719,34 @@ static inline int rss_author(struct template *, char * size_t linesize = 0; ssize_t linelen; !} -<div id="diff_title_wrapper"> - <div id="diff_title">Commit Diff</div> -</div> +<header class="subtitle"> + <h2>Commit Diff</h2> +</header> <div id="diff_content"> <div id="diff_header_wrapper"> - <div id="diff_header"> - <div class="header_commit_title">Commit:</div> - <div class="header_commit">{{ rc->commit_id }}</div> - <div class="header_author_title">From:</div> - <div class="header_author">{{ rc->author }}</div> + <dl id="diff_header"> + <dt>Commit:</dt> + <dd><code class="commit-id">{{ rc->commit_id }}</code></dd> + <dt>From:</dt> + <dd>{{ rc->author }}</dd> {{ if strcmp(rc->committer, rc->author) != 0 }} - <div class="header_author_title">Via:</div> - <div class="header_author">{{ rc->committer }}</div> + <dt>Via:</dt> + <dd>{{ rc->committer }}</dd> {{ end }} - <div class="header_age_title">Date:</div> - <div class="header_age"> + <dt>Date:</dt> + <dd> {{ render gotweb_render_age(tp, rc->committer_time, TM_LONG) }} - </div> - <div id="header_commit_msg_title">Message:</div> - <div id="header_commit_msg">{{ rc->commit_msg }}</div> - </div> + </dd> + <dt>Message:</dt> + <dd class="commit-msg">{{ rc->commit_msg }}</dd> + </dl> </div> - <div class="dotted_line"></div> - <div id="diff"> - {{ "\n" }} + <hr /> + <pre id="diff"> {{ while (linelen = getline(&line, &linesize, fp)) != -1 }} {{ render diff_line(tp, line) }} {{ end }} - </div> + </pre> </div> {{ finally }} {! free(line); !} @@ -781,7 +779,7 @@ static inline int rss_author(struct template *, char * if (nl) *nl = '\0'; !} -<div class="diff_line {{ color }}">{{ line }}</div> +<span class="diff_line {{ color }}">{{ line }}</span>{{"\n"}} {{ end }} {{ define gotweb_render_branches(struct template *tp, @@ -789,9 +787,9 @@ static inline int rss_author(struct template *, char * {! struct got_reflist_entry *re; !} -<div id="branches_title_wrapper"> - <div id="branches_title">Branches</div> -</div> +<header class='subtitle'> + <h2>Branches</h2> +</header> <div id="branches_content"> {{ tailq-foreach re refs entry }} {{ if !got_ref_is_symbolic(re->ref) }} @@ -828,11 +826,10 @@ static inline int rss_author(struct template *, char * url.headref = refname; !} -<div class="branches_wrapper"> +<section class="branches_wrapper"> <div class="branches_age"> {{ render gotweb_render_age(tp, age, TM_DIFF) }} </div> - <div class="branches_space"> </div> <div class="branch"> <a href="{{ render gotweb_render_url(c, &url) }}">{{ refname }}</a> </div> @@ -847,8 +844,8 @@ static inline int rss_author(struct template *, char * <a href="{{ render gotweb_render_url(c, &url) }}">commits</a> </div> </div> - <div class="dotted_line"></div> -</div> + <hr /> +</section> {{ end }} {{ define gotweb_render_summary(struct template *tp) }} @@ -858,26 +855,26 @@ static inline int rss_author(struct template *, char * struct transport *t = c->t; struct got_reflist_head *refs = &t->refs; !} -<div id="summary_wrapper"> +<dl id="summary_wrapper"> {{ if srv->show_repo_description }} - <div id="description_title">Description:</div> - <div id="description">{{ t->repo_dir->description }}</div> + <dt>Description:</dt> + <dd>{{ t->repo_dir->description }}</dd> {{ end }} {{ if srv->show_repo_owner }} - <div id="repo_owner_title">Owner:</div> - <div id="repo_owner">{{ t->repo_dir->owner }}</div> + <dt>Owner:</dt> + <dd>{{ t->repo_dir->owner }}</dd> {{ end }} {{ if srv->show_repo_age }} - <div id="last_change_title">Last Change:</div> - <div id="last_change"> + <dt>Last Change:</dt> + <dd> {{ render gotweb_render_age(tp, t->repo_dir->age, TM_DIFF) }} - </div> + </dd> {{ end }} {{ if srv->show_repo_cloneurl }} - <div id="cloneurl_title">Clone URL:</div> - <div id="cloneurl">{{ t->repo_dir->url }}</div> + <dt>Clone URL:</dt> + <dd><pre class="clone-url">{{ t->repo_dir->url }}</pre></dd> {{ end }} -</div> +</dl> {{ render gotweb_render_briefs(tp) }} {{ render gotweb_render_tags(tp) }} {{ render gotweb_render_branches(tp, refs) }} @@ -890,23 +887,22 @@ static inline int rss_author(struct template *, char * struct transport *t = c->t; struct repo_commit *rc = TAILQ_FIRST(&t->repo_commits); !} -<div id="blame_title_wrapper"> - <div id="blame_title">Blame</div> -</div> +<header class="subtitle"> + <h2>Blame</h2> +</header> <div id="blame_content"> <div id="blame_header_wrapper"> - <div id="blame_header"> - <div class="header_age_title">Date:</div> - <div class="header_age"> + <dl id="blame_header"> + <dt>Date:</dt> + <dd> {{ render gotweb_render_age(tp, rc->committer_time, TM_LONG) }} - </div> - <div id="header_commit_msg_title">Message:</div> - <div id="header_commit_msg">{{ rc->commit_msg }}</div> - </div> + </dd> + <dt>Message:</dt> + <dd class="commit-msg">{{ rc->commit_msg }}</dd> + </dl> </div> - <div class="dotted_line"></div> - <div id="blame"> - {{ "\n" }} + <hr /> + <pre id="blame"> {! err = got_output_file_blame(c, &blame_line); if (err && err->code != GOT_ERR_CANCELLED) @@ -915,7 +911,7 @@ static inline int rss_author(struct template *, char * if (err) return (-1); !} - </div> + </pre> </div> {{ end }}

2023-09-10 08:49 Omar Polo:
gotwebd: style improvements
- 2023-09-10 11:42 Omar Polo:
  gotwebd: style improvements
- - 2023-09-11 10:17 Stefan Sperling:
    gotwebd: style improvements