[PATCH 1 of 2] css: make 'add comment' button look more like a button (issue #77)

[Mads Kiilerich]

On 04/22/2015 02:20 PM, Andrew Shadura wrote:
> # HG changeset patch
> # User Andrew Shadura <andrew at shadura.me>
> # Date 1429703987 -7200
> #      Wed Apr 22 13:59:47 2015 +0200
> # Branch stable
> # Node ID 539f3da5d965459d2221d10b6724585e60104f7d
> # Parent  74b5e0318d4e961081daca2833c4ffe520e59e62
> css: make 'add comment' button look more like a button (issue #77)

This will apparently also add more space around the line numbers, 
leaving less room for the text that is reviewed?

It will also add a column between the line number and the text and make 
the 'add comment' button show up there. Pretty much cloning what github 
does.

I think I would prefer to have the "button" show up on top of the + and 
- numbers. I don't think it would be a problem if the number of a 
deleted line can't be seen while the line is hovered, but it must of 
course still be possible to click the line number so we can link to the 
line. Perhaps.

Anyway: The "button" will be drawn incorrectly on Firefox when selecting 
text in multiple lines and hovering over them.

/Mads

>
> diff --git a/kallithea/public/css/style.css b/kallithea/public/css/style.css
> --- a/kallithea/public/css/style.css
> +++ b/kallithea/public/css/style.css
> @@ -4931,7 +4931,7 @@ table.code-difftable .lineno a {
>       font: 11px Consolas, Monaco, Inconsolata, Liberation Mono, monospace !important;
>       letter-spacing: -1px;
>       text-align: right;
> -    padding-right: 2px;
> +    padding-right: 8px;
>       cursor: pointer;
>       display: block;
>       width: 30px;
> @@ -4957,7 +4957,7 @@ table.code-difftable .code td {
>       padding: 0;
>   }
>   table.code-difftable .code pre {
> -    margin: 0;
> +    margin: 0 0 0 12px;
>       padding: 0;
>       min-height: 17px;
>       line-height: 17px;
> @@ -4965,33 +4965,43 @@ table.code-difftable .code pre {
>   }
>   
>   .add-bubble {
> +    position: relative;
>       display: none;
>       float: left;
>       width: 0px;
>       height: 0px;
> -}
> -
> -tr.line.add td.code:hover .add-bubble,
> -tr.line.del td.code:hover .add-bubble,
> -tr.line.unmod td.code:hover .add-bubble {
> -    display: inherit;
> +    left: -8px;
> +    box-sizing: border-box;
> +}
> +
> +tr.line.add:hover td .add-bubble,
> +tr.line.del:hover td .add-bubble,
> +tr.line.unmod:hover td .add-bubble {
> +    display: block;
>   }
>   
>   .add-bubble div {
> -    position: relative;
> -    left: -32px;
> -    width: 32px;
> -    height: 32px;
> +    background: #577632;
> +    width: 16px;
> +    height: 16px;
>       cursor: pointer;
> +    padding: 0 2px 2px 0.5px;
> +    border: 1px solid #577632;
> +    border-radius: 3px;
> +    box-sizing: border-box;
>   }
>   
>   .add-bubble div:before {
>       font-size: 14px;
> -    color: #577632;
> +    color: #ffffff;
>       font-family: "kallithea";
>       content: '\e80c';
>   }
>   
> +.add-bubble div:hover {
> +    transform: scale(1.2, 1.2);
> +}
> +
>   div.comment:target>.comment-wrapp {
>       border: solid 2px #ee0 !important;
>   }
> _______________________________________________
> kallithea-general mailing list
> kallithea-general at sfconservancy.org
> http://lists.sfconservancy.org/mailman/listinfo/kallithea-general