From fa21f12af8a59e57ba0cdf52a25f8bf0c7b1fc39 Mon Sep 17 00:00:00 2001 From: Gregory Szorc Date: Fri, 9 Jun 2017 13:55:51 -0700 Subject: [PATCH] hgweb: refresh styling of gitweb's search form gitweb was missing the hint hover box. So that was added. Also, the positioning of the form was absolute and it didn't vertically align on all pages. The element has been moved inline with the navigation links (which now are contained in a div) and flexbox is used to obtain sane alignment of the navigation links and search form. For those new to flexbox, "justify-content: space-between" basically says to maximize space elements. You can use it to easily get left and right justified containers without having to worry about width, floating, etc. "align-items: center" centers all items in a cross-axis. I've literally wasted hours trying to figure out both these problems before flexbox. Flexbox is amazing. Flexbox has been supported by Chrome and Firefox for a few years. But it is only supported by IE 11. I'm willing to wager that people using this either won't be using IE or will be using IE 11. So I'm willing to be a bit aggressive in adopting flexbox because it makes CSS alignment so much easier. --- mercurial/templates/gitweb/bookmarks.tmpl | 5 ++- mercurial/templates/gitweb/branches.tmpl | 5 ++- mercurial/templates/gitweb/changelog.tmpl | 4 +- mercurial/templates/gitweb/changeset.tmpl | 5 ++- mercurial/templates/gitweb/error.tmpl | 5 ++- mercurial/templates/gitweb/fileannotate.tmpl | 5 ++- .../templates/gitweb/filecomparison.tmpl | 5 ++- mercurial/templates/gitweb/filediff.tmpl | 5 ++- mercurial/templates/gitweb/filelog.tmpl | 4 +- mercurial/templates/gitweb/filerevision.tmpl | 5 ++- mercurial/templates/gitweb/graph.tmpl | 6 ++- mercurial/templates/gitweb/help.tmpl | 5 ++- mercurial/templates/gitweb/helptopics.tmpl | 5 ++- mercurial/templates/gitweb/manifest.tmpl | 5 ++- mercurial/templates/gitweb/map | 15 ++++--- mercurial/templates/gitweb/search.tmpl | 5 ++- mercurial/templates/gitweb/shortlog.tmpl | 4 +- mercurial/templates/gitweb/summary.tmpl | 5 ++- mercurial/templates/gitweb/tags.tmpl | 5 ++- mercurial/templates/static/style-gitweb.css | 25 +++++++++++- tests/test-hgweb-commands.t | 39 +++++++++++-------- tests/test-hgweb-descend-empties.t | 19 +++++---- tests/test-hgweb-symrev.t | 4 +- tests/test-hgweb.t | 27 +++++++++++-- 24 files changed, 147 insertions(+), 70 deletions(-) diff --git a/mercurial/templates/gitweb/bookmarks.tmpl b/mercurial/templates/gitweb/bookmarks.tmpl index 1f95eed795..bcf40d9220 100644 --- a/mercurial/templates/gitweb/bookmarks.tmpl +++ b/mercurial/templates/gitweb/bookmarks.tmpl @@ -10,10 +10,10 @@
 
diff --git a/mercurial/templates/gitweb/branches.tmpl b/mercurial/templates/gitweb/branches.tmpl index 74b17ae5ef..323d659489 100644 --- a/mercurial/templates/gitweb/branches.tmpl +++ b/mercurial/templates/gitweb/branches.tmpl @@ -10,10 +10,10 @@
 
diff --git a/mercurial/templates/gitweb/changelog.tmpl b/mercurial/templates/gitweb/changelog.tmpl index 4a6e302c90..d9d27ffef3 100644 --- a/mercurial/templates/gitweb/changelog.tmpl +++ b/mercurial/templates/gitweb/changelog.tmpl @@ -10,10 +10,10 @@ {entries%changelogentry} diff --git a/mercurial/templates/gitweb/changeset.tmpl b/mercurial/templates/gitweb/changeset.tmpl index c332895da3..73b68a61e8 100644 --- a/mercurial/templates/gitweb/changeset.tmpl +++ b/mercurial/templates/gitweb/changeset.tmpl @@ -10,10 +10,10 @@
diff --git a/mercurial/templates/gitweb/error.tmpl b/mercurial/templates/gitweb/error.tmpl index 61855ac758..58a87e3999 100644 --- a/mercurial/templates/gitweb/error.tmpl +++ b/mercurial/templates/gitweb/error.tmpl @@ -10,10 +10,10 @@
diff --git a/mercurial/templates/gitweb/fileannotate.tmpl b/mercurial/templates/gitweb/fileannotate.tmpl index a1169ad99a..fed5913282 100644 --- a/mercurial/templates/gitweb/fileannotate.tmpl +++ b/mercurial/templates/gitweb/fileannotate.tmpl @@ -10,10 +10,10 @@
{file|escape}
diff --git a/mercurial/templates/gitweb/filecomparison.tmpl b/mercurial/templates/gitweb/filecomparison.tmpl index db770f082e..c52c964172 100644 --- a/mercurial/templates/gitweb/filecomparison.tmpl +++ b/mercurial/templates/gitweb/filecomparison.tmpl @@ -10,10 +10,10 @@
{file|escape}
diff --git a/mercurial/templates/gitweb/filediff.tmpl b/mercurial/templates/gitweb/filediff.tmpl index 2d626a1c74..1c095754ad 100644 --- a/mercurial/templates/gitweb/filediff.tmpl +++ b/mercurial/templates/gitweb/filediff.tmpl @@ -10,10 +10,10 @@
{file|escape}
diff --git a/mercurial/templates/gitweb/filelog.tmpl b/mercurial/templates/gitweb/filelog.tmpl index 4ae164cb16..d73fe84dbe 100644 --- a/mercurial/templates/gitweb/filelog.tmpl +++ b/mercurial/templates/gitweb/filelog.tmpl @@ -10,10 +10,10 @@
{file|urlescape}{if(linerange, diff --git a/mercurial/templates/gitweb/filerevision.tmpl b/mercurial/templates/gitweb/filerevision.tmpl index 5498b23343..8551ad9838 100644 --- a/mercurial/templates/gitweb/filerevision.tmpl +++ b/mercurial/templates/gitweb/filerevision.tmpl @@ -10,10 +10,10 @@
{file|escape}
diff --git a/mercurial/templates/gitweb/graph.tmpl b/mercurial/templates/gitweb/graph.tmpl index 5b1b8f8f4b..150d3a5632 100644 --- a/mercurial/templates/gitweb/graph.tmpl +++ b/mercurial/templates/gitweb/graph.tmpl @@ -11,10 +11,10 @@
 
diff --git a/mercurial/templates/gitweb/help.tmpl b/mercurial/templates/gitweb/help.tmpl index 81ce3730c1..c459709cba 100644 --- a/mercurial/templates/gitweb/help.tmpl +++ b/mercurial/templates/gitweb/help.tmpl @@ -10,10 +10,10 @@
 
diff --git a/mercurial/templates/gitweb/helptopics.tmpl b/mercurial/templates/gitweb/helptopics.tmpl index dad96b6e6b..e9ef393614 100644 --- a/mercurial/templates/gitweb/helptopics.tmpl +++ b/mercurial/templates/gitweb/helptopics.tmpl @@ -10,10 +10,10 @@
 
diff --git a/mercurial/templates/gitweb/manifest.tmpl b/mercurial/templates/gitweb/manifest.tmpl index cefb30e1d9..a4d8f2276a 100644 --- a/mercurial/templates/gitweb/manifest.tmpl +++ b/mercurial/templates/gitweb/manifest.tmpl @@ -10,10 +10,10 @@
{path|escape} {inbranch%inbranchtag}{branches%branchtag}{tags%tagtag}{bookmarks%bookmarktag}
diff --git a/mercurial/templates/gitweb/map b/mercurial/templates/gitweb/map index 12cbef3b24..2cad45b50e 100644 --- a/mercurial/templates/gitweb/map +++ b/mercurial/templates/gitweb/map @@ -325,9 +325,12 @@ hiddenformentry = '' breadcrumb = '> {name|escape} ' searchform = ' -
- {sessionvars%hiddenformentry} - -
' + ' +searchhint = 'Find changesets by keywords (author, files, the commit message), revision + number or hash, or revset expression.' diff --git a/mercurial/templates/gitweb/search.tmpl b/mercurial/templates/gitweb/search.tmpl index fe2b877fa1..8cb6489b32 100644 --- a/mercurial/templates/gitweb/search.tmpl +++ b/mercurial/templates/gitweb/search.tmpl @@ -10,10 +10,10 @@
searching for {query|escape}
diff --git a/mercurial/templates/gitweb/shortlog.tmpl b/mercurial/templates/gitweb/shortlog.tmpl index 677771e861..5f6231d8f9 100644 --- a/mercurial/templates/gitweb/shortlog.tmpl +++ b/mercurial/templates/gitweb/shortlog.tmpl @@ -10,10 +10,10 @@
 
diff --git a/mercurial/templates/gitweb/summary.tmpl b/mercurial/templates/gitweb/summary.tmpl index 3914671f5a..1085913fd3 100644 --- a/mercurial/templates/gitweb/summary.tmpl +++ b/mercurial/templates/gitweb/summary.tmpl @@ -10,10 +10,10 @@
 
diff --git a/mercurial/templates/gitweb/tags.tmpl b/mercurial/templates/gitweb/tags.tmpl index a3df4e28f9..e773cc17fb 100644 --- a/mercurial/templates/gitweb/tags.tmpl +++ b/mercurial/templates/gitweb/tags.tmpl @@ -10,10 +10,10 @@
 
diff --git a/mercurial/templates/static/style-gitweb.css b/mercurial/templates/static/style-gitweb.css index 0c1ec64016..561134ff91 100644 --- a/mercurial/templates/static/style-gitweb.css +++ b/mercurial/templates/static/style-gitweb.css @@ -4,7 +4,12 @@ a:hover, a:visited, a:active { color:#880000; } div.page_header { height:25px; padding:8px; font-size:18px; font-weight:bold; background-color:#d9d8d1; } div.page_header a:visited { color:#0000cc; } div.page_header a:hover { color:#880000; } -div.page_nav { padding:8px; } +div.page_nav { + padding:8px; + display: flex; + justify-content: space-between; + align-items: center; +} div.page_nav a:visited { color:#0000cc; } div.page_path { padding:8px; border:solid #d9d8d1; border-width:0px 0px 1px} div.page_footer { padding:4px 8px; background-color: #d9d8d1; } @@ -52,7 +57,23 @@ td.indexlinks a:hover { background-color: #6666aa; } div.pre { font-family:monospace; font-size:12px; white-space:pre; } div.diff_info { font-family:monospace; color:#000099; background-color:#edece6; font-style:italic; } div.index_include { border:solid #d9d8d1; border-width:0px 0px 1px; padding:12px 8px; } -div.search { margin:4px 8px; position:absolute; top:56px; right:12px } + +.search { + margin-right: 8px; +} + +div#hint { + position: absolute; + display: none; + width: 250px; + padding: 5px; + background: #ffc; + border: 1px solid yellow; + border-radius: 5px; +} + +#searchform:hover div#hint { display: block; } + tr.thisrev a { color:#999999; text-decoration: none; } tr.thisrev pre { color:#009900; } td.annotate { diff --git a/tests/test-hgweb-commands.t b/tests/test-hgweb-commands.t index 0f87172b0c..ea967b0e9d 100644 --- a/tests/test-hgweb-commands.t +++ b/tests/test-hgweb-commands.t @@ -1533,16 +1533,10 @@ Overviews
 
@@ -1733,16 +1736,10 @@ Overviews
 
diff --git a/tests/test-hgweb-descend-empties.t b/tests/test-hgweb-descend-empties.t index 84f1c70e37..8626fb49e7 100644 --- a/tests/test-hgweb-descend-empties.t +++ b/tests/test-hgweb-descend-empties.t @@ -405,16 +405,10 @@ manifest with descending (gitweb)
/ default tip
diff --git a/tests/test-hgweb-symrev.t b/tests/test-hgweb-symrev.t index 3e53461b2e..4ab3190d62 100644 --- a/tests/test-hgweb-symrev.t +++ b/tests/test-hgweb-symrev.t @@ -482,7 +482,7 @@ Set up the repo files | lessmore - | (0)tip
+ | (0)tiplessmore | (0)tip @@ -572,7 +572,7 @@ Set up the repo files | lessmore - | (0)tip
+ | (0)tiplessmore | (0)tip diff --git a/tests/test-hgweb.t b/tests/test-hgweb.t index 542ffae8f7..627a118860 100644 --- a/tests/test-hgweb.t +++ b/tests/test-hgweb.t @@ -340,7 +340,7 @@ static file $ get-with-headers.py --twice localhost:$HGPORT 'static/style-gitweb.css' - date etag server 200 Script output follows - content-length: 8012 + content-length: 8265 content-type: text/css body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; background: white; color: black; } @@ -349,7 +349,12 @@ static file div.page_header { height:25px; padding:8px; font-size:18px; font-weight:bold; background-color:#d9d8d1; } div.page_header a:visited { color:#0000cc; } div.page_header a:hover { color:#880000; } - div.page_nav { padding:8px; } + div.page_nav { + padding:8px; + display: flex; + justify-content: space-between; + align-items: center; + } div.page_nav a:visited { color:#0000cc; } div.page_path { padding:8px; border:solid #d9d8d1; border-width:0px 0px 1px} div.page_footer { padding:4px 8px; background-color: #d9d8d1; } @@ -397,7 +402,23 @@ static file div.pre { font-family:monospace; font-size:12px; white-space:pre; } div.diff_info { font-family:monospace; color:#000099; background-color:#edece6; font-style:italic; } div.index_include { border:solid #d9d8d1; border-width:0px 0px 1px; padding:12px 8px; } - div.search { margin:4px 8px; position:absolute; top:56px; right:12px } + + .search { + margin-right: 8px; + } + + div#hint { + position: absolute; + display: none; + width: 250px; + padding: 5px; + background: #ffc; + border: 1px solid yellow; + border-radius: 5px; + } + + #searchform:hover div#hint { display: block; } + tr.thisrev a { color:#999999; text-decoration: none; } tr.thisrev pre { color:#009900; } td.annotate {