diff --git a/public/images/edit.png b/public/images/edit.png deleted file mode 100644 index f4413b1..0000000 Binary files a/public/images/edit.png and /dev/null differ diff --git a/public/images/glyphicons-halflings.png b/public/images/glyphicons-halflings.png new file mode 100644 index 0000000..92d4445 Binary files /dev/null and b/public/images/glyphicons-halflings.png differ diff --git a/public/images/list_items.png b/public/images/list_items.png deleted file mode 100644 index d66c2d7..0000000 Binary files a/public/images/list_items.png and /dev/null differ diff --git a/public/images/tag.png b/public/images/tag.png deleted file mode 100644 index 905b282..0000000 Binary files a/public/images/tag.png and /dev/null differ diff --git a/public/images/thumbs_up.png b/public/images/thumbs_up.png deleted file mode 100644 index 3821f94..0000000 Binary files a/public/images/thumbs_up.png and /dev/null differ diff --git a/public/images/trash.png b/public/images/trash.png deleted file mode 100644 index cd18ff6..0000000 Binary files a/public/images/trash.png and /dev/null differ diff --git a/public/stylesheets/sass/easy_retro.scss b/public/stylesheets/sass/easy_retro.scss index 8f3be81..a0c572a 100644 --- a/public/stylesheets/sass/easy_retro.scss +++ b/public/stylesheets/sass/easy_retro.scss @@ -40,6 +40,11 @@ $post_it_font_size: 12px; border-bottom: 2px solid rgba($color, 0.5); &:hover { background-color: darken($color, 25%); + .icon { + &:hover { + opacity: 0.7; + } + } } } } @@ -84,10 +89,14 @@ body { @include create-box-shadow; .header { - height: 20px; - width: $post_it_side; + height: 17px; + width: $post_it_side -10px; font-weight: bold; cursor: move; + padding: 4px 4px 0 5px; + .icon { + opacity: 0; + } } .content { @@ -101,9 +110,21 @@ body { } .footer { + opacity: 0; height: 20px; - width: $post_it_side; - padding: 0 2px 0 2px; + width: $post_it_side -10px; + padding: 5px 5px 0 5px; + } + + &:hover { + .header { + .icon { + opacity: 0.3; + } + } + .footer { + opacity: 1; + } } } @@ -145,41 +166,59 @@ menu { } } -.hidden { - display : none; -} - .icon { float: left; opacity: 0.3; &:hover { opacity: 0.7; } + display: inline-block; + width: 15px; + height: 15px; + line-height: 15px; + vertical-align: text-top; + background-image: url("../images/glyphicons-halflings.png"); + background-position: 14px 14px; + background-repeat: no-repeat; + *margin-right: .3em; +} + +.delete { + background-position: -312px 0; + float: left; } -.vote { - @include flip-horizontally; - height: 25px; - width: 25px; - margin-top: 3px; - margin-right: -5px; +.vote-up { + background-position: -289px -96px; } -.list { - height: 25px; - width: 20px; - margin-top: 3px; +.vote-down { + background-position: -312px -96px; } -.edit { - height: 20px; - width: 20px; - margin-top: 7px; +.actions { + background-position: -360px -48px; } -.delete { - height: 15px; - width: 15px; - margin-top: 8px; - margin-left: 1px; +.notes { + background-position: 0 -72px; +} + +.responsible { + background-position: -168px 0; +} + +.tags { + background-position: 0 -48px; +} + +.hidden { + display : none; +} + +.fork-me-flag { + position: absolute; + top: 0; + right: 0; + border: 0; } diff --git a/views/board.slim b/views/board.slim index d5008af..2b12d01 100644 --- a/views/board.slim +++ b/views/board.slim @@ -8,6 +8,7 @@ html script{type="text/javascript" data-main="javascripts/main" src="javascripts/require.js"} body a href="http://github.com/thiagotnunes/easy-retro" + img.fork-me-flag{src="../images/fork_me.png" alt="Fork me on GitHub"} menu span.handwritten.big Add input#add_well.add.well{type="button"} @@ -17,13 +18,12 @@ html #board #base_post_it.post_it.hidden.handwritten.big .header + a.delete.icon{href="#" alt="delete"} .content{contenteditable="true"} .footer - a.hidden href="#" - img.vote.icon{src="images/thumbs_up.png" alt="vote up"} - a.hidden href="#" - img.list.icon{src="images/list_items.png" alt="list item"} - a.hidden href="#" - img.edit.icon{src="images/edit.png" alt="edit"} - a href="#" - img.delete.icon{src="images/trash.png" alt="delete"} + a.hidden.vote-up.icon{href="#" alt="vote up"} + a.hidden.vote-down.icon{href="#" alt="vote down"} + a.hidden.actions.icon{href="#" alt="actions"} + a.hidden.notes.icon{href="#" alt="notes"} + a.hidden.responsible.icon{href="#" alt="responsible"} + a.hidden.tags.icon{href="#" alt="tags"}