Improve Styling.

metacpan · Jul 8, 2014 · 84f90b6 · 84f90b6
1 parent 60b1626
commit 84f90b6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/root/inc/stargazer.html b/root/inc/stargazer.html
@@ -4,7 +4,10 @@
     <input type="hidden" name="release" value="<% module.release %>">
     <input type="hidden" name="author" value="<% module.author %>">
     <input type="hidden" name="module" value="<% module.documentation %>">
-    <button type="submit" class="stargazer<% IF mystarred == 1 %> active<% ELSE %> highlight<% END %>"><span style="visibility:hidden;"><% total_starred %></span>Bookmark</button>
+    <% IF mystarred == 1 %>
+    <button type="submit" class="stargazer active">Unstar</button>
+    <% ELSE %> <button type="submit" class="stargazer highlight">Star</button>
+    <% END %>
 </form>
 <% ELSE -%>
-<a href="" onclick="alert('Please sign in to bookmark the Module'); return false" class="stargazer highlight"><span style="visibility:hidden;"><% total_starred %></span>Bookmark</a><% END -%>
+<a href="" onclick="alert('Please sign in to bookmark the Module'); return false" class="stargazer highlight">Star</a><% END -%>
diff --git a/root/static/css/style.css b/root/static/css/style.css
@@ -155,7 +155,7 @@ button.stargazer, a.stargazer {
     text-decoration: none;
     display: inline-block;
     line-height: 1;
-    text-align: right;
+    text-align: center;
     min-width: 25px;
     position: relative;
     top: -1px;
@@ -168,8 +168,11 @@ button.stargazer, a.stargazer {
 }
 
 button.stargazer {
+    background-color: #fca216;
+    color: #fff;
     min-width: 35px;
     cursor: pointer;
+    opacity: 1;
 }
 
 button.stargazer.highlight, a.stargazer.highlight {
@@ -190,7 +193,6 @@ button.stargazer:hover, button.stargazer.active, a.stargazer.active, a.stargazer
     text-shadow: 0px 1px 1px #333;
     border-color: #36C;
     opacity: 1;
-    text-decoration: none;
 }
 
 

diff --git a/root/static/js/cpan.js b/root/static/js/cpan.js
@@ -339,19 +339,21 @@ function starModule(form) {
         success: function () {
             var button = form.find('button');
             button.toggleClass('active');
-            var counter = button.find('span');
-            var count = counter.text();
+            var count = 0;
             if (button.hasClass('active')) {
-                counter.text(count ? parseInt(count, 10) + 1 : 1);
+                count = 1;
+                button.text("Unstar");
                 form.append('<input type="hidden" name="remove" value="1">');
-                if (!count)
+                if (!count){
                     button.toggleClass('highlight');
-            } else {
-                counter.text(parseInt(count, 10) - 1);
+		    button.text("Star");
+		}            
+		} else {
+                count=0;
                 form.find('input[name="remove"]').remove();
-                if (counter.text() === 0) {
-                    counter.text("");
+                if (count === 0) {
                     button.toggleClass('highlight');
+		    button.text("Star");
                 }
             }
         },