Refactor entry styling and adjust layouts where used

app/assets/stylesheets/application.css.scss

@@ -103,6 +103,7 @@ $navbar-inverse-toggle-border-color: #512da8;
 @import
 "components/avatars",
 "components/buttons",
+"components/entry",
 "components/jumbotron",
 "components/profile",
 "components/question",

app/assets/stylesheets/base.css.scss

@@ -12,7 +12,6 @@ body {
 @import "scss/generic";
 @import "scss/answerbox";
 @import "scss/comments";
-@import "scss/entry";
 @import "scss/panel";
 @import "scss/notifications";
 

app/assets/stylesheets/components/_entry.scss

@@ -0,0 +1,48 @@
+.entry {
+  $this: &;
+
+  &__value {
+    margin-bottom: 0;
+  }
+
+  &__description {
+    color: var(--primary);
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: .8rem;
+    margin-top: 0px;
+  }
+
+  &--statistics {
+    #{$this}__value,
+    #{$this}__description {
+      display: block;
+      text-align: center;
+    }
+
+    #{$this}__value {
+      margin-top: map-get($spacers, 3);
+    }
+
+    #{$this}__description {
+      margin-bottom: map-get($spacers, 3);
+    }
+  }
+
+  &--users {
+    #{$this}__value,
+    #{$this}__description {
+      display: block;
+      text-align: center;
+    }
+
+    #{$this}__value {
+      font-size: 4rem;
+      margin-top: map-get($spacers, 3);
+    }
+
+    #{$this}__description {
+      margin-bottom: map-get($spacers, 3);
+    }
+  }
+}

app/assets/stylesheets/scss/entry.scss

@@ -1,45 +0,0 @@
-.entry-subtext {
-  color: $navbar-inverse-bg;
-  margin-top: 0px;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 80%;
-}
-
-.entry-text {
-  margin-bottom: 0px;
-}
-
-.entry-about {
-  margin-top: 0px;
-}
-
-.statistics {
-  .entry-text {
-    display: block;
-    text-align: center;
-    margin-top: 5px;
-  }
-
-  .entry-subtext {
-    text-align: center;
-    display: block;
-    margin-bottom: 5px;
-  }
-}
-
-.users {
-  .entry-text {
-    display: block;
-    text-align: center;
-    margin-top: 7px;
-    font-size: 78px;
-    line-height: 1;
-  }
-
-  .entry-subtext {
-    text-align: center;
-    display: block;
-    margin-bottom: 5px;
-  }
-}

app/views/shared/_sidebar.haml

@@ -5,18 +5,9 @@
     .profile__name
       - unless current_user.display_name.blank?
         .profile__display-name
-          = current_user.screen_name
+          = current_user.display_name
       .profile__screen-name
         = current_user.screen_name
-    .row
-      .col-md-6.col-sm-6.col-xs-6
-        %a{href: show_user_followers_path(current_user.screen_name)}
-          %h4.entry-text#follower-count= current_user.follower_count
-          %h6.entry-subtext= t('views.general.follower').pluralize(current_user.follower_count)
-      .col-md-6.col-sm-6.col-xs-6
-        %a{href: show_user_friends_path(current_user.screen_name)}
-          %h4.entry-text#friend-count= current_user.friend_count
-          %h6.entry-subtext= t('views.general.following')
 .card
   .list-group
     = list_group_item t('views.general.timeline'), root_path

app/views/static/about.haml

@@ -43,18 +43,23 @@
         .col-md-3.col-sm-12.col-xs-12
           %h3= t 'views.about.statistics.title'
           %p= t('views.about.statistics.desc', app_title: APP_CONFIG['site_name'])
-        .col-md-3.col-sm-6.col-xs-6.statistics
+        .col-md-3.col-sm-6.col-xs-6
-          %h2.entry-text#asked-count= Question.count
+          .entry.entry--statistics
-          %h4.entry-subtext= t('views.general.question').pluralize(Question.count)
+            %h2.entry__value#asked-count= Question.count
-          %h2.entry-text#answered-count= Answer.count
+            %h4.entry__description= t('views.general.question').pluralize(Question.count)
-          %h4.entry-subtext= t('views.general.answer').pluralize(Answer.count)
+          .entry.entry--statistics
-        .col-md-3.col-sm-6.col-xs-6.statistics
+            %h2.entry__value#answered-count= Answer.count
-          %h2.entry-text#comment-count= Comment.count
+            %h4.entry__description= t('views.general.answer').pluralize(Answer.count)
-          %h4.entry-subtext= t('views.general.comment').pluralize(Comment.count)
+        .col-md-3.col-sm-6.col-xs-6
-          %h2.entry-text#smile-count= Smile.count + CommentSmile.count
+          .entry.entry--statistics
-          %h4.entry-subtext= t('views.general.smile').pluralize(Smile.count)
+            %h2.entry__value#comment-count= Comment.count
-        .col-md-3.col-sm-12.col-xs-12.users
+            %h4.entry__description= t('views.general.comment').pluralize(Comment.count)
-          .entry-text#follower-count= User.count
+          .entry.entry--statistics
-          %h6.entry-subtext= t('views.general.user').pluralize(User.count)
+            %h2.entry__value#smile-count= Smile.count + CommentSmile.count
+            %h4.entry__description= t('views.general.smile').pluralize(Smile.count)
+        .col-md-3.col-sm-12.col-xs-12
+          .entry.entry--users
+            .entry__value#follower-count= User.count
+            %h4.entry__description= t('views.general.user').pluralize(User.count)
 
 = render "shared/links"