- From:
- Stefan Sperling <stsp@stsp.name>
- Subject:
- Re: gotwebd: style improvements
- To:
- Omar Polo <op@omarpolo.com>
- Cc:
- gameoftrees@openbsd.org
- Date:
- Mon, 11 Sep 2023 12:17:26 +0200
Download raw body.
Thread
gotwebd: style improvements
Download raw body.
gotwebd: style improvements
On Sun, Sep 10, 2023 at 01:42:26PM +0200, Omar Polo wrote:
> 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(-)
I like the visual changes, especially for text browsers where
diffs are finally readable! (tested in w3m)
My web-foo is not good enough to judge the actual changes but I support
this going in.
> 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 }}
>
>
>
gotwebd: style improvements