From 4c1267e09f8718cd24b7a4701818336cdb45a0bf Mon Sep 17 00:00:00 2001 From: randx Date: Sun, 29 Jul 2012 01:34:51 +0300 Subject: [PATCH] CSS refactoring. Notes better styled --- app/assets/stylesheets/gitlab_bootstrap.scss | 3 +++ app/assets/stylesheets/header.scss | 228 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ app/assets/stylesheets/login.scss | 44 -------------------------------------------- app/assets/stylesheets/main.scss | 8 ++++---- app/assets/stylesheets/nav.scss | 98 -------------------------------------------------------------------------------------------------- app/assets/stylesheets/notes.scss | 181 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- app/assets/stylesheets/sections/header.scss | 228 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ app/assets/stylesheets/sections/login.scss | 43 +++++++++++++++++++++++++++++++++++++++++++ app/assets/stylesheets/sections/nav.scss | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ app/assets/stylesheets/sections/notes.scss | 191 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ app/views/notes/_show.html.haml | 6 ++++-- 11 files changed, 571 insertions(+), 557 deletions(-) delete mode 100644 app/assets/stylesheets/header.scss delete mode 100644 app/assets/stylesheets/login.scss delete mode 100644 app/assets/stylesheets/nav.scss delete mode 100644 app/assets/stylesheets/notes.scss create mode 100644 app/assets/stylesheets/sections/header.scss create mode 100644 app/assets/stylesheets/sections/login.scss create mode 100644 app/assets/stylesheets/sections/nav.scss create mode 100644 app/assets/stylesheets/sections/notes.scss diff --git a/app/assets/stylesheets/gitlab_bootstrap.scss b/app/assets/stylesheets/gitlab_bootstrap.scss index b01f127..9d6c05a 100644 --- a/app/assets/stylesheets/gitlab_bootstrap.scss +++ b/app/assets/stylesheets/gitlab_bootstrap.scss @@ -335,6 +335,9 @@ img.avatar { &.s24 { width:24px; } + &.s32 { + width:32px; + } } img.lil_av { diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss deleted file mode 100644 index 07eba39..0000000 --- a/app/assets/stylesheets/header.scss +++ /dev/null @@ -1,228 +0,0 @@ -/* - * Application Header - * - */ -header { - width:100%; - padding:0; - margin:0; - top:1px; - left:0; - background: #F1F1F1; /* for non-css3 browsers */ - border-bottom: 1px solid #ccc; - box-shadow: 0 -1px 0 white inset; - -moz-box-shadow: 0 -1px 0 white inset; - -webkit-box-shadow: 0 -1px 0 white inset; - z-index:10; - height:60px; - - /** - * - * Logo holder - * - */ - .app_logo { - width:230px; - float:left; - position:relative; - top:-5px; - - a { - float:left; - - h1 { - text-indent:-9999px; - width:102px; - background: url('logo_text.png') no-repeat 0px -3px; - float:left; - margin-left:5px; - font-size:20px; - line-height:36px; - font-weight:bold; - color:#aaa; - text-shadow: 0 1px 1px #FFF; - padding-left:50px; - } - } - .separator { - margin-left:20px; - float: left; - height: 60px; - width: 1px; - background: white; - border-left: 1px solid #DDD; - margin-top: -10px; - } - } - .container { - .top_panel_content { - margin:auto; - position:relative; - padding:15px 0; - } - } - - /** - * - * Project / Area name - * - */ - .project_name { - float:left; - margin:0; - margin-right:30px; - font-size:24px; - line-height:36px; - font-weight:500; - color:$style_color; - text-shadow: 0 1px 1px #FFF; - } - - .fbtn { - float: right; - margin-right:10px; - .btn { - margin-left:7px; - background: #F1F1F1; - border: 1px solid #CCC; - } - } - - - /** - * - * Search box - * - */ - .search { - float: right; - margin-right: 50px; - - .search-input { - @extend .span2; - background-image: url("icon-search.png"); - background-repeat: no-repeat; - background-position: 10px; - padding-left:25px; - @include border-radius(5px); - border:1px solid #ccc; - } - } - - /** - * - * Account box - * - */ - .account-box { - position: absolute; - right: 0; - top: 13px; - z-index: 10000; - width: 128px; - font-size: 11px; - float: right; - display: block; - cursor: pointer; - img { - border-radius: 4px; - right: 5px; - position: absolute; - width: 31px; - height: 31px; - display: block; - top: 0; - &:after { - content: " "; - display: block; - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; - float: right; - border-radius: 5px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-bottom: 0; - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); - background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); - background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); - -webkit-background-origin: border-box; - -moz-background-origin: border; - background-origin: border-box; } } } - - .account-box { - &.hover { - height: 138px; } - &:hover > .account-links { - display: block; } } - - .account-links { - background: #79C3E0; - display: none; - border-radius: 5px; - width: 100px; - margin-top: 0; - float: right; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - position: relative; - &:before { - content: "."; - width: 0; - height: 0; - position: absolute; - border: 5px solid transparent; - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #333; - text-indent: -9999px; - top: -10px; - line-height: 0; - right: 10px; - z-index: 10; } - background: #333; - display: none; - z-index: 100000; - border-radius: 5px; - width: 100px; - position: absolute; - right: 10px; - top: 46px; - margin-top: 0; - float: right; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - a { - color: #EEE; - padding: 6px 10px; - display: block; - text-shadow: none; - border-bottom: 1px solid #555; - &:hover { - color:#eee; - background: #444; - } - } - } - - .account-box.hover .arrow-up { - top: 41px; - right: 6px; - position: absolute; } - - .account-links a { - &:first-child { - -webkit-border-top-left-radius: 5px; - -webkit-border-top-right-radius: 5px; - -moz-border-radius-topleft: 5px; - -moz-border-radius-topright: 5px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; } - &:last-child { - -webkit-border-bottom-right-radius: 5px; - -webkit-border-bottom-left-radius: 5px; - -moz-border-radius-bottomright: 5px; - -moz-border-radius-bottomleft: 5px; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; - border-bottom: 0; } } -} - diff --git a/app/assets/stylesheets/login.scss b/app/assets/stylesheets/login.scss deleted file mode 100644 index 3bba706..0000000 --- a/app/assets/stylesheets/login.scss +++ /dev/null @@ -1,44 +0,0 @@ -/* Login Page */ -body.login-page{ - padding-top: 10%; - background:#f1f1f1; -} - -.login-box{ - width: 304px; - position: relative; - border-radius: 5px; - margin: auto; - padding: 20px; - background: white; -} - -.login-box .login-logo{ - margin: 10px 0 30px 0; - display: block; -} - -.login-box input.text{background-color: #f1f1f1; font-size: 16px; border-radius: 0; padding: 14px 10px; width: 280px} - -.login-box input.text.top{ - -webkit-border-top-left-radius: 5px; - -webkit-border-top-right-radius: 5px; - -moz-border-radius-topleft: 5px; - -moz-border-radius-topright: 5px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} - -.login-box input.text.bottom{ - -webkit-border-bottom-right-radius: 5px; - -webkit-border-bottom-left-radius: 5px; - -moz-border-radius-bottomright: 5px; - -moz-border-radius-bottomleft: 5px; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; - border-top: 0; - margin-bottom: 20px; -} - -.login-box a.forgot{float: right; padding-top: 6px} - diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 7d60cd2..5613f1e 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -76,13 +76,13 @@ $hover: #FDF5D9; * Header of application. * Contain application logo, search panel, profile icon */ -@import "header.scss"; +@import "sections/header.scss"; /** * Navigation menu of application. * Panel with links to pages depends on project, profile or admin area */ -@import "nav.scss"; +@import "sections/nav.scss"; /** * This file represent some UI that can be changed @@ -147,12 +147,12 @@ $hover: #FDF5D9; /** * This file represent notes(comments) styles */ -@import "notes.scss"; +@import "sections/notes.scss"; /** * Devise styles */ -@import "login.scss"; +@import "sections/login.scss"; /** * CODE HIGHTLIGHT BASE diff --git a/app/assets/stylesheets/nav.scss b/app/assets/stylesheets/nav.scss deleted file mode 100644 index 93df419..0000000 --- a/app/assets/stylesheets/nav.scss +++ /dev/null @@ -1,98 +0,0 @@ -/* - * Main Menu of Application - * - */ -ul.main_menu { - border-radius: 4px; - margin: auto; - margin:30px 0; - background:#eee; - border:1px solid #bbb; - height:37px; - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); - position:relative; - @include shade; - .count { - position: relative; - top: -1px; - display: inline-block; - height: 15px; - margin: 0 0 0 5px; - padding: 0 8px 1px 8px; - height: auto; - font-size: 0.82em; - line-height: 14px; - text-align: center; - color: #777; - background: #f2f2f2; - border-top: 1px solid #CCC; - border-radius: 8px; - -moz-border-radius: 8px; - } - .label { - background:$hover; - text-shadow:none; - color:$style_color; - } - li { - list-style-type: none; - margin: 0; - display: table-cell; - width: 1%; - border-right: 1px solid #DDD; - border-left: 1px solid #EEE; - border-bottom:2px solid #CFCFCF; - - &:first-child{ - -webkit-border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-topleft: 4px; - -moz-border-radius-bottomleft: 4px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - border-left: 0; - } - - &.current { - background-color:#D5D5D5; - border-bottom: 2px solid $style_color; - border-right: 1px solid #BBB; - border-left: 1px solid #BBB; - border-radius: 0 0 1px 1px; - &:first-child{ - border-bottom:none; - border-left:none; - } - } - - &.home { - a { - background: url(home_icon.PNG) no-repeat center center; - text-indent:-9999px; - min-width:20px; - img { - position:relative; - top:4px; - } - } - } - } - a { - display: block; - text-align: center; - font-weight:bold; - height:35px; - line-height:36px; - color: $style_color; - text-shadow:0 1px 1px white; - - } -} -/* - * End of Main Menu - * - */ - diff --git a/app/assets/stylesheets/notes.scss b/app/assets/stylesheets/notes.scss deleted file mode 100644 index abce4c6..0000000 --- a/app/assets/stylesheets/notes.scss +++ /dev/null @@ -1,181 +0,0 @@ -/** - * Notes - * - */ -#notes-list, -#new_notes_list { - display:block; - list-style:none; - margin:0px; - padding:0px; -} - -#new_notes_list li:last-child{ - border-bottom:1px solid #aaa; -} - -.issue_notes, -.wiki_notes { - .note_content { - float:left; - width:400px; - } -} - -/* Note textare */ -#note_note { - height:80px; - width:99%; - font-size:14px; -} - -#new_note { - #note_note { - height:25px; - } - .attach_holder { - display:none; - } -} - -.note .delete-note { - display:none; - float:right; -} -.note:hover .delete-note { display:block; } -.note {padding: 10px 0; border-bottom: 1px solid #eee; overflow: hidden; display: block;} -.note img{float: left; margin-right: 10px;} -.note span.note-title{display: block;} -.note span.note-title{margin-bottom: 10px} -.note span.note-author{color: #999; font-weight: normal; font-style: italic;} -.note span.note-author strong{font-weight: bold; font-style: normal;} -.note p { color:$style_color; } -.note .note-author { color: $style_color;} - -.note .note-title { margin-left:55px; } - -p.notify_controls input{ - margin: 5px; -} - -p.notify_controls span{ - font-weight: 700; -} - -tr.line_notes_row { - border-bottom:1px solid #DDD; - border-left: 7px solid #2A79A3; - - &.reply { - background:#eee; - border-left: 7px solid #2A79A3; - border-top:1px solid #ddd; - td { - padding:7px 10px; - } - a.line_note_reply_link { - @include round-borders-all(4px); - padding: 3px 10px; - margin-left:5px; - color: white; - background: #2A79A3; - border-color: #2A79A3; - } - } - ul { - margin:0; - li { - padding:0; - border:none; - } - } -} - -.line_notes_row, .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } - -.per_line_form { - background:#f5f5f5; - border-top:1px solid #eee; - form { margin: 0; } - td { - border-bottom:1px solid #ddd; - } - .note_actions { - margin:0; - padding-top: 10px; - - .buttons { - float:left; - width:300px; - } - .options { - .labels { - float:left; - padding-left:10px; - label { - padding: 6px 0; - margin: 0; - width:120px; - } - } - } - } -} - -td .line_note_link { - position:absolute; - margin-left:-70px; - margin-top:-10px; - z-index:10; - background: url("comment_add.png") no-repeat left 0; - width:32px; - height:32px; - - opacity: 0.0; - filter: alpha(opacity=0); - - &:hover { - opacity: 1.0; - filter: alpha(opacity=100); - } -} - -.diff_file_content tr.line_holder:hover > td { background: $hover !important; } -.diff_file_content tr.line_holder:hover > td .line_note_link { - opacity: 1.0; - filter: alpha(opacity=100); -} - -.new_note { - .input-file { - font: 500px monospace; - opacity:0; - filter: alpha(opacity=0); - position: absolute; - z-index: 1; - top:0; - right:0; - padding:0; - margin: 0; - } - - .file_upload { - position: absolute; - right:14px; - top:7px; - } - - div.attachments { - position:relative; - width: 350px; - height: 36px; - overflow:hidden; - margin:0 0 5px !important; - } - .file_name { - line-height:30px; - width:240px; - height:28px; - overflow:hidden; - } -} diff --git a/app/assets/stylesheets/sections/header.scss b/app/assets/stylesheets/sections/header.scss new file mode 100644 index 0000000..07eba39 --- /dev/null +++ b/app/assets/stylesheets/sections/header.scss @@ -0,0 +1,228 @@ +/* + * Application Header + * + */ +header { + width:100%; + padding:0; + margin:0; + top:1px; + left:0; + background: #F1F1F1; /* for non-css3 browsers */ + border-bottom: 1px solid #ccc; + box-shadow: 0 -1px 0 white inset; + -moz-box-shadow: 0 -1px 0 white inset; + -webkit-box-shadow: 0 -1px 0 white inset; + z-index:10; + height:60px; + + /** + * + * Logo holder + * + */ + .app_logo { + width:230px; + float:left; + position:relative; + top:-5px; + + a { + float:left; + + h1 { + text-indent:-9999px; + width:102px; + background: url('logo_text.png') no-repeat 0px -3px; + float:left; + margin-left:5px; + font-size:20px; + line-height:36px; + font-weight:bold; + color:#aaa; + text-shadow: 0 1px 1px #FFF; + padding-left:50px; + } + } + .separator { + margin-left:20px; + float: left; + height: 60px; + width: 1px; + background: white; + border-left: 1px solid #DDD; + margin-top: -10px; + } + } + .container { + .top_panel_content { + margin:auto; + position:relative; + padding:15px 0; + } + } + + /** + * + * Project / Area name + * + */ + .project_name { + float:left; + margin:0; + margin-right:30px; + font-size:24px; + line-height:36px; + font-weight:500; + color:$style_color; + text-shadow: 0 1px 1px #FFF; + } + + .fbtn { + float: right; + margin-right:10px; + .btn { + margin-left:7px; + background: #F1F1F1; + border: 1px solid #CCC; + } + } + + + /** + * + * Search box + * + */ + .search { + float: right; + margin-right: 50px; + + .search-input { + @extend .span2; + background-image: url("icon-search.png"); + background-repeat: no-repeat; + background-position: 10px; + padding-left:25px; + @include border-radius(5px); + border:1px solid #ccc; + } + } + + /** + * + * Account box + * + */ + .account-box { + position: absolute; + right: 0; + top: 13px; + z-index: 10000; + width: 128px; + font-size: 11px; + float: right; + display: block; + cursor: pointer; + img { + border-radius: 4px; + right: 5px; + position: absolute; + width: 31px; + height: 31px; + display: block; + top: 0; + &:after { + content: " "; + display: block; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + float: right; + border-radius: 5px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 0; + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); + background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); + -webkit-background-origin: border-box; + -moz-background-origin: border; + background-origin: border-box; } } } + + .account-box { + &.hover { + height: 138px; } + &:hover > .account-links { + display: block; } } + + .account-links { + background: #79C3E0; + display: none; + border-radius: 5px; + width: 100px; + margin-top: 0; + float: right; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + position: relative; + &:before { + content: "."; + width: 0; + height: 0; + position: absolute; + border: 5px solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #333; + text-indent: -9999px; + top: -10px; + line-height: 0; + right: 10px; + z-index: 10; } + background: #333; + display: none; + z-index: 100000; + border-radius: 5px; + width: 100px; + position: absolute; + right: 10px; + top: 46px; + margin-top: 0; + float: right; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + a { + color: #EEE; + padding: 6px 10px; + display: block; + text-shadow: none; + border-bottom: 1px solid #555; + &:hover { + color:#eee; + background: #444; + } + } + } + + .account-box.hover .arrow-up { + top: 41px; + right: 6px; + position: absolute; } + + .account-links a { + &:first-child { + -webkit-border-top-left-radius: 5px; + -webkit-border-top-right-radius: 5px; + -moz-border-radius-topleft: 5px; + -moz-border-radius-topright: 5px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; } + &:last-child { + -webkit-border-bottom-right-radius: 5px; + -webkit-border-bottom-left-radius: 5px; + -moz-border-radius-bottomright: 5px; + -moz-border-radius-bottomleft: 5px; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + border-bottom: 0; } } +} + diff --git a/app/assets/stylesheets/sections/login.scss b/app/assets/stylesheets/sections/login.scss new file mode 100644 index 0000000..3726d9f --- /dev/null +++ b/app/assets/stylesheets/sections/login.scss @@ -0,0 +1,43 @@ +/* Login Page */ +body.login-page{ + padding-top: 10%; + background:#f1f1f1; +} + +.login-box{ + width: 304px; + position: relative; + border-radius: 5px; + margin: auto; + padding: 20px; + background: white; +} + +.login-box .login-logo{ + margin: 10px 0 30px 0; + display: block; +} + +.login-box input.text{background-color: #f1f1f1; font-size: 16px; border-radius: 0; padding: 14px 10px; width: 280px} + +.login-box input.text.top{ + -webkit-border-top-left-radius: 5px; + -webkit-border-top-right-radius: 5px; + -moz-border-radius-topleft: 5px; + -moz-border-radius-topright: 5px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.login-box input.text.bottom{ + -webkit-border-bottom-right-radius: 5px; + -webkit-border-bottom-left-radius: 5px; + -moz-border-radius-bottomright: 5px; + -moz-border-radius-bottomleft: 5px; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + border-top: 0; + margin-bottom: 20px; +} + +.login-box a.forgot{float: right; padding-top: 6px} diff --git a/app/assets/stylesheets/sections/nav.scss b/app/assets/stylesheets/sections/nav.scss new file mode 100644 index 0000000..93df419 --- /dev/null +++ b/app/assets/stylesheets/sections/nav.scss @@ -0,0 +1,98 @@ +/* + * Main Menu of Application + * + */ +ul.main_menu { + border-radius: 4px; + margin: auto; + margin:30px 0; + background:#eee; + border:1px solid #bbb; + height:37px; + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); + position:relative; + @include shade; + .count { + position: relative; + top: -1px; + display: inline-block; + height: 15px; + margin: 0 0 0 5px; + padding: 0 8px 1px 8px; + height: auto; + font-size: 0.82em; + line-height: 14px; + text-align: center; + color: #777; + background: #f2f2f2; + border-top: 1px solid #CCC; + border-radius: 8px; + -moz-border-radius: 8px; + } + .label { + background:$hover; + text-shadow:none; + color:$style_color; + } + li { + list-style-type: none; + margin: 0; + display: table-cell; + width: 1%; + border-right: 1px solid #DDD; + border-left: 1px solid #EEE; + border-bottom:2px solid #CFCFCF; + + &:first-child{ + -webkit-border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-topleft: 4px; + -moz-border-radius-bottomleft: 4px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border-left: 0; + } + + &.current { + background-color:#D5D5D5; + border-bottom: 2px solid $style_color; + border-right: 1px solid #BBB; + border-left: 1px solid #BBB; + border-radius: 0 0 1px 1px; + &:first-child{ + border-bottom:none; + border-left:none; + } + } + + &.home { + a { + background: url(home_icon.PNG) no-repeat center center; + text-indent:-9999px; + min-width:20px; + img { + position:relative; + top:4px; + } + } + } + } + a { + display: block; + text-align: center; + font-weight:bold; + height:35px; + line-height:36px; + color: $style_color; + text-shadow:0 1px 1px white; + + } +} +/* + * End of Main Menu + * + */ + diff --git a/app/assets/stylesheets/sections/notes.scss b/app/assets/stylesheets/sections/notes.scss new file mode 100644 index 0000000..17805de --- /dev/null +++ b/app/assets/stylesheets/sections/notes.scss @@ -0,0 +1,191 @@ +/** + * Notes + * + */ +#notes-list, +#new_notes_list { + display:block; + list-style:none; + margin:0px; + padding:0px; +} + +#new_notes_list li:last-child{ + border-bottom:1px solid #aaa; +} + +.issue_notes, +.wiki_notes { + .note_content { + float:left; + width:400px; + } +} + +/* Note textare */ +#note_note { + height:80px; + width:99%; + font-size:14px; +} + +#new_note { + #note_note { + height:25px; + } + .attach_holder { + display:none; + } +} + +.note { + padding: 8px 0; + border-bottom: 1px solid #eee; + overflow: hidden; + display: block; + img {float: left; margin-right: 10px;} + .note-author cite{font-style: italic;} + p { color:$style_color; } + .note-author { color: $style_color;} + + .note-title { margin-left:50px; padding-top: 5px;} + .avatar { + margin-top:3px; + } + + .delete-note { + display:none; + float:right; + } + + &:hover { + .delete-note { display:block; } + } +} + + +p.notify_controls input{ + margin: 5px; +} + +p.notify_controls span{ + font-weight: 700; +} + +tr.line_notes_row { + border-bottom:1px solid #DDD; + border-left: 7px solid #2A79A3; + + &.reply { + background:#eee; + border-left: 7px solid #2A79A3; + border-top:1px solid #ddd; + td { + padding:7px 10px; + } + a.line_note_reply_link { + @include round-borders-all(4px); + padding: 3px 10px; + margin-left:5px; + color: white; + background: #2A79A3; + border-color: #2A79A3; + } + } + ul { + margin:0; + li { + padding:0; + border:none; + } + } +} + +.line_notes_row, .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } + +.per_line_form { + background:#f5f5f5; + border-top:1px solid #eee; + form { margin: 0; } + td { + border-bottom:1px solid #ddd; + } + .note_actions { + margin:0; + padding-top: 10px; + + .buttons { + float:left; + width:300px; + } + .options { + .labels { + float:left; + padding-left:10px; + label { + padding: 6px 0; + margin: 0; + width:120px; + } + } + } + } +} + +td .line_note_link { + position:absolute; + margin-left:-70px; + margin-top:-10px; + z-index:10; + background: url("comment_add.png") no-repeat left 0; + width:32px; + height:32px; + + opacity: 0.0; + filter: alpha(opacity=0); + + &:hover { + opacity: 1.0; + filter: alpha(opacity=100); + } +} + +.diff_file_content tr.line_holder:hover > td { background: $hover !important; } +.diff_file_content tr.line_holder:hover > td .line_note_link { + opacity: 1.0; + filter: alpha(opacity=100); +} + +.new_note { + .input-file { + font: 500px monospace; + opacity:0; + filter: alpha(opacity=0); + position: absolute; + z-index: 1; + top:0; + right:0; + padding:0; + margin: 0; + } + + .file_upload { + position: absolute; + right:14px; + top:7px; + } + + div.attachments { + position:relative; + width: 350px; + height: 36px; + overflow:hidden; + margin:0 0 5px !important; + } + .file_name { + line-height:30px; + width:240px; + height:28px; + overflow:hidden; + } +} diff --git a/app/views/notes/_show.html.haml b/app/views/notes/_show.html.haml index 3cd72c3..62aca15 100644 --- a/app/views/notes/_show.html.haml +++ b/app/views/notes/_show.html.haml @@ -1,5 +1,5 @@ %li{:id => dom_id(note), :class => "note"} - = image_tag gravatar_icon(note.author.email), :class => "left", :width => 40, :style => "padding-right:5px;" + = image_tag gravatar_icon(note.author.email), :class => "avatar" %div.note-author %strong= note.author_name = link_to "##{dom_id(note)}", name: dom_id(note) do @@ -7,7 +7,9 @@ = time_ago_in_words(note.updated_at) ago - if(note.author_id == current_user.id) || can?(current_user, :admin_note, @project) - %strong= link_to "Remove", [@project, note], :confirm => 'Are you sure?', :method => :delete, :remote => true, :class => "cred delete-note btn small" + = link_to [@project, note], :confirm => 'Are you sure?', :method => :delete, :remote => true, :class => "cred delete-note btn very_small" do + %i.icon-trash + Remove %div.note-title = preserve do -- libgit2 0.21.2