Make user page's links fully clickable

Lokiedu · Mar 18, 2017 · 27456b8 · 27456b8
1 parent 15a3432
commit 27456b8
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 78 deletions.
diff --git a/src/less/blocks/short_post.less b/src/less/blocks/short_post.less
@@ -1,6 +1,7 @@
 .short_post {
   background: @color__background;
   padding: 13px;
+  display: block;
 
   &-spacing {
     margin-top: 1px;

diff --git a/src/pages/base/user-without_header.js b/src/pages/base/user-without_header.js
@@ -88,50 +88,42 @@ const BaseUserPageWithoutHeader = (props) => {
             </PageContent>
             <SidebarAlt>
               <div className="tabs">
-                <div className="short_post short_post-spacing">
-                  <IndexLink
-                    activeClassName="tabs__link-active color-dark_blue"
-                    className="tabs__link"
-                    to={`/user/${user.get('username')}`}
-                  >
-                    Posts
-                  </IndexLink>
-                </div>
+                <IndexLink
+                  activeClassName="color-dark_blue"
+                  className="short_post short_post-spacing"
+                  to={`/user/${user.get('username')}`}
+                >
+                  Posts
+                </IndexLink>
                 {showLikesLink &&
-                  <div className="short_post short_post-spacing">
-                    <PageContentLink
-                      activeClassName="tabs__link-active color-dark_blue"
-                      className="tabs__link"
-                      to={`/user/${user.get('username')}/likes`}
-                      visible
-                    >
-                      Likes
-                    </PageContentLink>
-                  </div>
+                  <PageContentLink
+                    activeClassName="color-dark_blue"
+                    className="short_post short_post-spacing"
+                    to={`/user/${user.get('username')}/likes`}
+                    visible
+                  >
+                    Likes
+                  </PageContentLink>
                 }
                 {showFavouritesLink &&
-                  <div className="short_post short_post-spacing">
-                    <PageContentLink
-                      activeClassName="tabs__link-active color-dark_blue"
-                      className="tabs__link"
-                      to={`/user/${user.get('username')}/favorites`}
-                      visible
-                    >
-                      Favorites
-                    </PageContentLink>
-                  </div>
+                  <PageContentLink
+                    activeClassName="color-dark_blue"
+                    className="short_post short_post-spacing"
+                    to={`/user/${user.get('username')}/favorites`}
+                    visible
+                  >
+                    Favorites
+                  </PageContentLink>
                 }
                 {showBioLink &&
-                  <div className="short_post short_post-spacing">
-                    <PageContentLink
-                      activeClassName="tabs__link-active color-dark_blue"
-                      className="tabs__link"
-                      to={`/user/${user.get('username')}/bio`}
-                      visible
-                    >
-                      Bio
-                    </PageContentLink>
-                  </div>
+                  <PageContentLink
+                    activeClassName="color-dark_blue"
+                    className="short_post short_post-spacing"
+                    to={`/user/${user.get('username')}/bio`}
+                    visible
+                  >
+                    Bio
+                  </PageContentLink>
                 }
               </div>
             </SidebarAlt>

diff --git a/src/pages/base/user.js b/src/pages/base/user.js
@@ -162,50 +162,42 @@ const BaseUserPage = (props) => {
             </PageContent>
             <SidebarAlt>
               <div className="tabs">
-                <div className="short_post short_post-spacing">
-                  <IndexLink
-                    activeClassName="tabs__link-active color-dark_blue"
-                    className="tabs__link"
-                    to={`/user/${user.get('username')}`}
-                  >
-                    Posts
-                  </IndexLink>
-                </div>
+                <IndexLink
+                  activeClassName="color-dark_blue"
+                  className="short_post short_post-spacing"
+                  to={`/user/${user.get('username')}`}
+                >
+                  Posts
+                </IndexLink>
                 {showLikesLink &&
-                  <div className="short_post short_post-spacing">
-                    <PageContentLink
-                      activeClassName="tabs__link-active color-dark_blue"
-                      className="tabs__link"
-                      to={`/user/${user.get('username')}/likes`}
-                      visible
-                    >
-                      Likes
-                    </PageContentLink>
-                  </div>
+                  <PageContentLink
+                    activeClassName="color-dark_blue"
+                    className="short_post short_post-spacing"
+                    to={`/user/${user.get('username')}/likes`}
+                    visible
+                  >
+                    Likes
+                  </PageContentLink>
                 }
                 {showFavouritesLink &&
-                  <div className="short_post short_post-spacing">
-                    <PageContentLink
-                      activeClassName="tabs__link-active color-dark_blue"
-                      className="tabs__link"
-                      to={`/user/${user.get('username')}/favorites`}
-                      visible
-                    >
-                      Favorites
-                    </PageContentLink>
-                  </div>
+                  <PageContentLink
+                    activeClassName="color-dark_blue"
+                    className="short_post short_post-spacing"
+                    to={`/user/${user.get('username')}/favorites`}
+                    visible
+                  >
+                    Favorites
+                  </PageContentLink>
                 }
                 {showBioLink &&
-                  <div className="short_post short_post-spacing">
-                    <PageContentLink
-                      activeClassName="tabs__link-active color-dark_blue"
-                      className="tabs__link"
-                      to={`/user/${user.get('username')}/bio`}
-                      visible
-                    >
-                      Bio
-                    </PageContentLink>
-                  </div>
+                  <PageContentLink
+                    activeClassName="color-dark_blue"
+                    className="tabs__link short_post short_post-spacing"
+                    to={`/user/${user.get('username')}/bio`}
+                    visible
+                  >
+                    Bio
+                  </PageContentLink>
                 }
               </div>
             </SidebarAlt>