diff --git a/LICENSE b/LICENSE index 92f8c39..c19b4b2 100644 --- a/LICENSE +++ b/LICENSE @@ -5,4 +5,10 @@ APACHE-LICENSE-2.0.txt. The CycleDash logo/favicon, "Retro old fashioned bicycle", by Vintage Printables at http://vintageprintables.blogspot.com/2012/09/vintage-old-fashioned-bicycle-clip-art.html is Creative Commons 4.0 BY licensed, (https://creativecommons.org/licenses/by/4.0/) -and in /licenses as CREATIVE-COMMONS-BY-4.0.txt. \ No newline at end of file +and in /licenses as CREATIVE-COMMONS-BY-4.0.txt. + +The following icons are Creative Commons 3.0 BY licensed, found at +https://creativecommons.org/licenses/by/3.0/ and in /licensed as +CREATIVE-COMMONS-BY-3.0.txt: +https://thenounproject.com/term/8070/ +https://thenounproject.com/term/16505/ diff --git a/cycledash/static/css/examine.css b/cycledash/static/css/examine.css index f90a5ad..4b258b9 100644 --- a/cycledash/static/css/examine.css +++ b/cycledash/static/css/examine.css @@ -117,28 +117,45 @@ body { background: rgb(247, 252, 253); text-align: left; } -.vcf-table .comment-container { - width: 600px; +.vcf-table .comment-edit-container, .vcf-table .comment-view-container { + width: 700px; + margin: 10px 5px; } -.vcf-table .comment-box-head { - width: 600px; +.vcf-table .comment-edit-container { + border-radius: 3px; + border: 1px solid #ccc; + padding: 5px; + background-color: #fff; +} +.vcf-table .comment-box-header { + width: 700px; text-align: left; - vertical-align: middle; + height: 18px; } .vcf-table .comment-header { - width: 600px; + width: 700px; + height: 35px; + padding-top: 2px; text-align: right; + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 3px 3px 0px 0px; + color: #666; } .vcf-table .comment-text { clear: both; width: 100%; - min-height: 70px; height: auto; - background-color: #eee; + min-height: 70px; + font-size: 14px; + line-height: 1.42857143; + background-color: #fff; border: 1px solid #ccc; + border-top: 0px; white-space: pre-wrap; word-wrap: break-word; - margin-bottom: 10px; + border-radius: 0px 0px 3px 3px; + padding: 10px; } .vcf-table .comment-text p, ul, li, pre { margin: 0px; @@ -147,22 +164,54 @@ body { line-height: 1.1; } .vcf-table .comment-textarea { - width: 600px; + width: 100%; height: 100px; + background-color: #f5f5f5; + border-radius: 3px; +} +.vcf-table .comment-textarea:focus { + background-color: #fff; } .vcf-table .comment-button { margin: 6px 0px 6px 6px; } .vcf-table .edit-buttons { float: right; + padding: 0px; + margin-top: 5px; + margin-right: 5px; +} +.vcf-table .comment-delete { + width: 20px; + height: 20px; + background: url(/static/img/delete-comment-noun_16505_cc.svg); + background-size: 20px 20px; + opacity: 0.7; + display: inline-block; + margin-left: 5px; + margin-bottom: -1px; +} +.vcf-table .comment-edit { + width: 20px; + height: 20px; + background: url(/static/img/edit-comment-noun_8070_cc.svg); + background-size: 22px 22px; + opacity: 0.7; + display: inline-block; +} +.vcf-table .comment-cancel, .vcf-table .comment-save { + margin-bottom: 0px; } .vcf-table .comment-by { float: left; - padding-top: 15px; + margin-top: 10px; + margin-left: 10px; } .vcf-table .save-buttons { - width: 600px; + width: 100%; text-align: right; + padding: 0px; + margin: 0px; } .vcf-table .comment-author { margin-bottom: 3px; @@ -172,8 +221,12 @@ body { font-size: 14px; line-height: 20px; border: 1px solid #B6B6B7; - border-radius: 5px; + border-radius: 3px; outline: none; + background-color: #f9f9f9; +} +.vcf-table .comment-author:focus { + background-color: #fff; } .vcf-table .dalliance-open, .vcf-table .igv-links { padding: 7px 0 0 21px; @@ -188,6 +241,17 @@ body { background: url(/static/img/igv32x32.jpg) no-repeat 2px 3px; background-size: 16px 16px; margin-left: 10px; + height: 16px; +} +.vcf-table .igv-help { + margin-bottom: -4px; + margin-left: 4px; + width: 18px; + height: 18px; + background: url(/static/img/question-mark-noun_61692.svg); + background-size: 18px 18px; + opacity: 0.55; + display: inline-block; } .vcf-table tbody tr:nth-child(even) { background: rgb(245, 245, 245); diff --git a/cycledash/static/img/delete-comment-noun_16505_cc.svg b/cycledash/static/img/delete-comment-noun_16505_cc.svg new file mode 100644 index 0000000..1a9efc4 --- /dev/null +++ b/cycledash/static/img/delete-comment-noun_16505_cc.svg @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/cycledash/static/img/edit-comment-noun_8070_cc.svg b/cycledash/static/img/edit-comment-noun_8070_cc.svg new file mode 100644 index 0000000..ee53a51 --- /dev/null +++ b/cycledash/static/img/edit-comment-noun_8070_cc.svg @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/cycledash/static/js/examine/components/CommentBox.js b/cycledash/static/js/examine/components/CommentBox.js index 236f7ce..5f30c40 100644 --- a/cycledash/static/js/examine/components/CommentBox.js +++ b/cycledash/static/js/examine/components/CommentBox.js @@ -224,11 +224,7 @@ var VCFComment = React.createClass({ placeHolder={placeHolder} handleDelete={this.props.handleDelete} handleEdit={this.makeEditable} />; - return ( -