splitting scss, pluralizing entries, etc

TODO

@@ -17,3 +17,4 @@
 [017|  0%] write "terms of service" and a privacy policy.
 [018|  0%] that annoying "we use cookies" thing every website in the EU must? add
 [019|  0%] omniAuth (twatter, fakelook, goggles plus) for social networking elitists
+[020|  0%] helper function for profile headings to resize on certain string length

app/assets/stylesheets/base.css.scss

@@ -5,6 +5,13 @@ body {
   word-wrap: break-word;
 }
 
+@import "scss/answerbox";
+@import "scss/comments";
+@import "scss/entry";
+@import "scss/navbar";
+@import "scss/panel";
+@import "scss/user";
+
 .j2-page {
   padding-top: 30px;
 }
@@ -13,104 +20,6 @@ body {
   text-align: center;
 }
 
-.entry-subtext {
-  color: $navbar-inverse-bg;
-  margin-top: 0px;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 80%;
-}
-
-.entry-text {
-  margin-bottom: 0px;
-}
-
-.img-answerbox {
-  min-height: 32px;
-  min-width: 32px;
-  height: 32px;
-  width: 32px;
-}
-
-.img-answerbox-small {
-  min-height: 20px;
-  min-width: 20px;
-  height: 20px;
-  width: 20px;
-}
-
-.answerbox-question-text, .answerbox-question-user {
-  margin-bottom: 0px;
-}
-
-.answerbox-question-text {
-  font-weight: bold;
-  color: $gray-darker;
-}
-
-.user-displayname {
-  margin-top: -2px;
-  margin-bottom: 2px;
-}
-
-.user-username {
-  margin-top: 0px;
-  margin-bottom: 2px;
-}
-
-.user-admin {
-  color: $brand-danger;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 80%;
-}
-
-.user-profiletext {
-  margin-bottom: 2px;
-}
-
-.answer-box .text-muted a, .answer-box .text-muted a:hover {
-  color: $gray-dark;
-  text-decoration: none;
-}
-
-.navbar .nav .badge {
-  padding: 3px 6px 3px;
-  background-color: $navbar-inverse-link-active-bg;
-}
-
-.navbar .nav .active .badge {
-  padding: 3px 6px 3px;
-  background-color: $navbar-inverse-bg;
-}
-
-.panel-primary .text-muted a, .panel-primary .text-muted a:hover {
-  color: #fff;
-  text-decoration: none;
-  opacity: 1;
-}
-
-.panel-primary .text-muted {
-  color: #fff;
-  opacity: 0.7;
-}
-
-.panel-primary .answerbox-question-text {
-  color: #fff;
-}
-
-.comment-count {
-  margin-top: -2em;
-}
-
 .ios-web-app {
   padding-top: 1em;
-}
-
-.comments {
-  padding-left: 0;
-}
-
-.comments li {
-  list-style-type: none;
 }

app/assets/stylesheets/scss/answerbox.scss

@@ -0,0 +1,27 @@
+.answerbox .text-muted a, .answerbox .text-muted a:hover {
+  color: $gray-dark;
+  text-decoration: none;
+}
+
+.answerbox--img {
+  min-height: 32px;
+  min-width: 32px;
+  height: 32px;
+  width: 32px;
+}
+
+.answerbox--img-small {
+  min-height: 20px;
+  min-width: 20px;
+  height: 20px;
+  width: 20px;
+}
+
+.answerbox--question-text, .answerbox--question-user {
+  margin-bottom: 0px;
+}
+
+.answerbox--question-text {
+  font-weight: bold;
+  color: $gray-darker;
+}

app/assets/stylesheets/scss/comments.scss

@@ -0,0 +1,11 @@
+.comments {
+  padding-left: 0;
+}
+
+.comments li {
+  list-style-type: none;
+}
+
+.comments--count {
+  margin-top: -2em;
+}

app/assets/stylesheets/scss/entry.scss

@@ -0,0 +1,11 @@
+.entry-subtext {
+  color: $navbar-inverse-bg;
+  margin-top: 0px;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 80%;
+}
+
+.entry-text {
+  margin-bottom: 0px;
+}

app/assets/stylesheets/scss/navbar.scss

@@ -0,0 +1,9 @@
+.navbar .nav .badge {
+  padding: 3px 6px 3px;
+  background-color: $navbar-inverse-link-active-bg;
+}
+
+.navbar .nav .active .badge {
+  padding: 3px 6px 3px;
+  background-color: $navbar-inverse-bg;
+}

app/assets/stylesheets/scss/panel.scss

@@ -0,0 +1,14 @@
+.panel-primary .text-muted a, .panel-primary .text-muted a:hover {
+  color: #fff;
+  text-decoration: none;
+  opacity: 1;
+}
+
+.panel-primary .text-muted {
+  color: #fff;
+  opacity: 0.7;
+}
+
+.panel-primary .answerbox--question-text {
+  color: #fff;
+}

app/assets/stylesheets/scss/user.scss

@@ -0,0 +1,27 @@
+.profile--img {
+  min-height: 80px;
+  min-width: 80px;
+  height: 80px;
+  width: 8px;
+}
+
+.profile--displayname {
+  margin-top: -2px;
+  margin-bottom: 2px;
+}
+
+.profile--username {
+  margin-top: 0px;
+  margin-bottom: 2px;
+}
+
+.profile--admin {
+  color: $brand-danger;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 80%;
+}
+
+.profile--text {
+  margin-bottom: 2px;
+}

app/views/inbox/show.html.haml

@@ -6,9 +6,9 @@
         .media
           - unless i.question.author_is_anonymous
             %a.pull-left{href: show_user_profile_path(i.question.user.screen_name)}
-              %img.img-rounded.img-answerbox{src: gravatar_url(i.question.user)}
+              %img.img-rounded.answerbox--img{src: gravatar_url(i.question.user)}
           .media-body
-            %h6.text-muted.media-heading.answerbox-question-user
+            %h6.text-muted.media-heading.answerbox--question-user
               = user_screen_name i.question.user, i.question.author_is_anonymous
               asked
               = time_ago_in_words(i.question.created_at)
@@ -18,7 +18,7 @@
                   ·
                   %a{href: show_user_question_path(i.question.user.screen_name, i.question.id)}
                     #{i.question.answer_count} response(s)
-            %p.answerbox-question-text= i.question.content
+            %p.answerbox--question-text= i.question.content
       .panel-body
         %textarea.form-control{name: 'ib-answer', data: { id: i.id }}
         %br/

app/views/question/show.html.haml

@@ -4,14 +4,14 @@
     .media
       - unless @question.author_is_anonymous
         %a.pull-left{href: show_user_profile_path(@question.user.screen_name)}
-          %img.img-rounded.img-answerbox{src: gravatar_url(@question.user)}
+          %img.img-rounded.answerbox--img{src: gravatar_url(@question.user)}
         .media-body
-          %h6.text-muted.media-heading.answerbox-question-user
+          %h6.text-muted.media-heading.answerbox--question-user
             = user_screen_name @question.user, @question.author_is_anonymous
             asked
             = time_ago_in_words(@question.created_at)
             ago
-          %p.answerbox-question-text= @question.content
+          %p.answerbox--question-text= @question.content
 
   - @answers.each do |a|
     = render 'shared/answerbox', a: a, show_question: false

app/views/shared/_answerbox.html.haml

@@ -1,12 +1,12 @@
-.panel.panel-default.answer-box{data: { id: a.id }}
+.panel.panel-default.answerbox{data: { id: a.id }}
   - if @question.nil?
     .panel-heading
       .media
         - unless a.question.author_is_anonymous
           %a.pull-left{href: show_user_profile_path(a.question.user.screen_name)}
-            %img.img-rounded.img-answerbox{src: gravatar_url(a.question.user)}
+            %img.img-rounded.answerbox--img{src: gravatar_url(a.question.user)}
         .media-body
-          %h6.text-muted.media-heading.answerbox-question-user
+          %h6.text-muted.media-heading.answerbox--question-user
             = user_screen_name a.question.user, a.question.author_is_anonymous
             asked
             %a{href: show_user_answer_path(a.user.screen_name, a.id)}
@@ -17,7 +17,7 @@
                 ·
                 %a{href: show_user_question_path(a.question.user.screen_name, a.question.id)}
                   #{a.question.answer_count} answers
-          %p.answerbox-question-text
+          %p.answerbox--question-text
             = a.question.content
   .panel-body
     %p= a.content
@@ -26,7 +26,7 @@
         .col-md-6.col-sm-4.col-xs-7.text-left.text-muted
           Answered by
           %a{href: show_user_profile_path(a.user.screen_name)}
-            %img.img-rounded.img-answerbox-small{src: gravatar_url(a.user)}
+            %img.img-rounded.answerbox--img-small{src: gravatar_url(a.user)}
             %span= a.user.screen_name
           %span= time_ago_in_words(a.created_at)
           ago

app/views/shared/_comments.html.haml

@@ -1,13 +1,13 @@
 - if a.comments.all.count == 0
   There are no comments yet.
-- else # TODO: some design guy (i.e. pixeldesu) should make some black magic here
+- else
   %ul.comments
     - a.comments.all.each do |comment|
       %li{data: { comment_id: comment.id }}
-        %img.img-answerbox-small{src: gravatar_url(comment.user)}
+        %img.answerbox--img-small{src: gravatar_url(comment.user)}
         %b= user_screen_name comment.user
         = comment.content
 - if user_signed_in?
   .form-group.has-feedback{name: 'ab-comment-new-group', 'data-a-id' => a.id}
     %input.form-control{type: :text, placeholder: 'Comment...', name: 'ab-comment-new', data: {a_id: a.id }}
-    %span.text-muted.form-control-feedback.comment-count{id: "ab-comment-charcount-#{a.id}"} 160
+    %span.text-muted.form-control-feedback.comments--count{id: "ab-comment-charcount-#{a.id}"} 160

app/views/shared/_userbox.html.haml

@@ -4,17 +4,17 @@
   .panel-body
     .media
       .pull-left
-        %img.img-rounded.img-profile{src: gravatar_url(user)}
+        %img.img-rounded.profile--img{src: gravatar_url(user)}
       .media-body
         - if user.display_name.blank?
           %h2
             %a{href: show_user_profile_path(user.screen_name)}
               = user.screen_name
         - else
-          %h2.user-displayname
+          %h2.profile--displayname
             %a{href: show_user_profile_path(user.screen_name)}
               = user.display_name
-          %h4.text-muted.user-username= user.screen_name
+          %h4.text-muted.profile--username= user.screen_name
     .row
       .col-md-6.col-sm-6.col-xs-6
         %h4.entry-text#asked-count= user.asked_count

app/views/static/index.html.haml

@@ -16,7 +16,7 @@
             %a{href: show_user_followers_path(current_user.screen_name)}
               .col-md-6.col-sm-6.col-xs-6
                 %h4.entry-text#follower-count= current_user.follower_count
-                %h6.entry-subtext Follower
+                %h6.entry-subtext= pluralize(current_user.follower_count, 'Follower')
             %a{href: show_user_friends_path(current_user.screen_name)}
               .col-md-6.col-sm-6.col-xs-6
                 %h4.entry-text#friend-count= current_user.friend_count
@@ -24,17 +24,17 @@
           .row
             .col-md-6.col-sm-6.col-xs-6
               %h4.entry-text#asked-count= current_user.asked_count
-              %h6.entry-subtext Questions
+              %h6.entry-subtext= pluralize(current_user.asked_count, 'Question')
             .col-md-6.col-sm-6.col-xs-6
               %h4.entry-text#answered-count= current_user.answered_count
-              %h6.entry-subtext Answers
+              %h6.entry-subtext= pluralize(current_user.answered_count, 'Answer')
           .row
             .col-md-6.col-sm-6.col-xs-6
               %h4.entry-text#asked-count= current_user.commented_count
-              %h6.entry-subtext Comments
+              %h6.entry-subtext= pluralize(current_user.commented_count, 'Comment')
             .col-md-6.col-sm-6.col-xs-6
               %h4.entry-text#answered-count= current_user.smiled_count
-              %h6.entry-subtext Smiles
+              %h6.entry-subtext= pluralize(current_user.smiled_count, 'Smile')
       = render 'shared/links'
     .col-md-9.col-xs-12.col-sm-9
       = render 'layouts/messages'

app/views/user/_profile_info.html.haml

@@ -2,32 +2,32 @@
   .panel-body
     .media
       .pull-left
-        %img.img-rounded.img-profile{src: gravatar_url(@user)}
+        %img.img-rounded.profile--img{src: gravatar_url(@user)}
       .media-body
         - if @user.display_name.blank?
           %h2= @user.screen_name
         - else
-          %h2.user-displayname= @user.display_name
-          %h4.text-muted.user-username= @user.screen_name
+          %h2.profile--displayname= @user.display_name
+          %h4.text-muted.profile--username= @user.screen_name
         - if @user.admin?
-          %p.user-admin
+          %p.profile--admin
             %i.fa.fa-flask
             Admin
     - unless @user.bio.blank?
-      %p.user-profiletext= @user.bio
+      %p.profile--text= @user.bio
     - unless @user.website.blank?
-      %p.user-profiletext
+      %p.profile--text
         %i.fa.fa-globe
         %a{href: @user.website}= @user.display_website
     - unless @user.location.blank?
-      %p.user-profiletext
+      %p.profile--text
         %i.fa.fa-location-arrow
         = @user.location
     .row
       %a{href: show_user_followers_path(@user.screen_name)}
         .col-md-6.col-sm-6.col-xs-6
           %h4.entry-text#follower-count= @user.follower_count
-          %h6.entry-subtext Follower
+          %h6.entry-subtext= pluralize(@user.follower_count, 'Follower')
       %a{href: show_user_friends_path(@user.screen_name)}
         .col-md-6.col-sm-6.col-xs-6
           %h4.entry-text#friend-count= @user.friend_count
@@ -35,8 +35,8 @@
     .row
       .col-md-6.col-sm-6.col-xs-6
         %h4.entry-text#asked-count= @user.asked_count
-        %h6.entry-subtext Questions
+        %h6.entry-subtext= pluralize(@user.asked_count, 'Question')
       .col-md-6.col-sm-6.col-xs-6
         %h4.entry-text#answered-count= @user.answered_count
-        %h6.entry-subtext Answers
+        %h6.entry-subtext= pluralize(@user.answered_count, 'Answer')
     = render 'user/actions', user: @user, type: :follower