Nettoie et améliore l'affichage du karma des messages (fix #2303)

zestedesavoir · Mar 9, 2015 · f4b73b2 · f4b73b2
1 parent 0b6276f
commit f4b73b2
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 90 deletions.
diff --git a/assets/js/ajax-actions.js b/assets/js/ajax-actions.js
@@ -30,7 +30,7 @@
     /**
      * Karma of the messages
      */
-    $(".topic-message").on("click", ".upvote, .downvote", function(e){
+    $(".topic-message").on("click", "button.upvote, button.downvote", function(e){
         var $thumb = $(this),
             $form = $(this).parents("form:first"),
             $karma = $thumb.parents(".message-karma:first"),
@@ -78,6 +78,8 @@
                 } else {
                     $downvote.removeClass("more-voted");
                 }
+
+                $thumb.blur();
             }
         });
 

diff --git a/assets/scss/components/_topic-message.scss b/assets/scss/components/_topic-message.scss
@@ -288,90 +288,83 @@
                     border-bottom-color: transparent;
                     background: none !important;
                     height: 32px;
-
+                }
+                span {
                     &.upvote,
                     &.downvote {
                         &:not(.has-vote) {
-                            text-indent: -9999px;
-                            width: 0;
-                        }
-                    }
-                    &.disabled {
-                        &,
-                        &:hover,
-                        &:focus {
-                            border-bottom-color: transparent;
-
-                            &:after {
-                                opacity: .25 !important;
-                            }
+                            border-bottom: none;
+                            opacity: .5;
                         }
                     }
                 }
-                span.upvote,
-                span.downvote {
-                    &:not(.has-vote) {
-                        border-bottom: none;
-                        opacity: .5;
-                    }
-                }
-
-                .tick {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-
-                    &:hover:not(.disabled),
-                    &:focus:not(.disabled) {
-                        color: #555;
-                        border-bottom-color: $color-success;
-                    }
-                    &.active:not(.disabled) {
-                        color: #48a200;
+                button {
+                    // Disable transition for text-indent
+                    transition-property: opacity, border;
 
+                    &.voted:hover {
                         &:after {
-                            opacity: 1;
+                            opacity: .5;
                         }
                     }
                 }
+
                 .upvote,
                 .downvote {
                     &:after {
                         left: 10px;
                     }
+                    &.voted:after {
+                        opacity: 1;
+                    }
+
+                    &:hover,
+                    &:focus {
+                        &:not(.more-voted) {
+                            border-bottom-color: transparent;
+                        }
+                    }
+
+                    &:not(.has-vote) {
+                        text-indent: -9999px;
+                        width: 0;
+                    }
+
+                    &.more-voted {
+                        font-weight: bold;
+                    }
                 }
                 .upvote {
                     color: $color-success;
 
-                    &:hover:not(.disabled),
-                    &:focus:not(.disabled),
                     &.more-voted {
                         border-bottom-color: $color-success;
                     }
-                    &:not(.has-vote){
-                        text-indent: -9999px;
-                        width: 0;
-                    }
                 }
                 .downvote {
                     color: $color-danger;
 
-                    &:hover:not(.disabled),
-                    &:focus:not(.disabled),
                     &.more-voted {
                         border-bottom-color: $color-danger;
                     }
                 }
-                .voted:after {
-                    opacity: 1;
-                }
-                .more-voted {
-                    font-weight: bold;
-                }
-                button.more-voted {
+
+                .tick {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+
                     &:hover,
                     &:focus {
-                        border-bottom-color: transparent !important;
+                        color: #555;
+                        border-bottom-color: $color-success;
+                    }
+                    &.active {
+                        color: #48a200;
+
+                        &:after {
+                            opacity: 1;
+                        }
                     }
                 }
             }
@@ -475,18 +468,6 @@ form.topic-message {
     margin-top: 50px;
 }
 
-@media only screen and #{$media-tablet} {
-    .topic-message .message .message-bottom .message-karma {
-        a,
-        span {
-            &.upvote.has-vote,
-            &.downvote.has-vote {
-                padding-left: 27px;
-            }
-        }
-    }
-}
-
 @media only screen and #{$media-mobile-tablet} {
     .topic-message {
         padding: 20px 0;
@@ -566,14 +547,6 @@ form.topic-message {
                     top: 35px;
                     left: 7px;
 
-                    a,
-                    span {
-                        &:not(.has-vote){
-                            border-bottom-width: 1px !important;
-                            border-bottom-color: #D2D5D6;
-                        }
-                    }
-
                     .tick {
                         text-indent: -9999px;
                         margin-right: 1px;
@@ -587,10 +560,6 @@ form.topic-message {
                     .downvote {
                         padding: 0 7px;
                         text-align: center;
-
-                        &.has-vote {
-                            min-width: 30px;
-                        }
                     }
                 }
             }
@@ -667,20 +636,11 @@ form.topic-message {
         .message-actions a {
             width: 0px;
             text-indent: -9999px;
-        }
-        .message-actions a,
-        .message-karma a {
+
             &:after {
                 left: 12px !important;
             }
         }
-        .message-karma {
-            a,
-            span {
-                margin-right: 1px;
-                margin-left: 0;
-            }
-        }
         .message-submit {
             display: block !important;
             width: 100%;
@@ -702,4 +662,4 @@ form.topic-message {
     form.forum-message .message {
         padding-top: 0 !important;
     }
-}
+}
diff --git a/templates/misc/message.part.html b/templates/misc/message.part.html
@@ -320,9 +320,7 @@
                                 </span>
                             </span>
                         {% endif %}
-                    {% if upvote_link %}
-                        </div>
-                    {% endif %}
+                    </div>
                 {% endif %}
             </div>
         {% endif %}