Merge branch 'new-design' into new-design

CONTRIBUTING.md

@@ -0,0 +1,51 @@
+## Contributing to Busy
+
+Want to get involved in Busy developement? Thanks! There are plenty of ways you can help!
+
+Please take a moment to review this document in order to make the contribution process easy and
+effective for everyone involved.
+
+Following these guidelines helps to communicate that you respect the time of the developers
+managing and developing this open source project. In return, they should reciprocate that respect in
+addressing your issue or assessing patches and features.
+
+### Using the issue tracker
+
+The [issue tracker](https://github.com/busyorg/busy/issues) is the preferred channel
+for [bug reports](#bugs), [features requests](#features) and [submitting pull requests](#pull-requests).
+
+### Bug reports
+
+A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are
+extremely helpful - thank you!
+
+Guidelines for bug reports:
+
+1. **Use the GitHub issue search** — check if the issue has already been reported.
+
+2. **Check if the issue has been fixed** — try to reproduce it using the latest `new-design` branch in the repository.
+
+3. **Isolate the problem** — ideally create a reduced test case and a live example.
+
+A good bug report shouldn't leave others needing to chase you up for more information. Please try to
+be as detailed as possible in your report. What is your environment? What steps will reproduce the
+issue? What browser(s) and OS experience the problem? What would you expect to be the outcome? All
+these details will help people to fix any potential bugs.
+
+## Feature requests
+
+Feature requests are welcome. But take a moment to find out whether your idea fits with the scope
+and aims of the project. It's up to *you* to make a strong case to convince the project's developers
+of the merits of this feature. Please provide as much detail and context as possible.
+
+## Pull requests
+
+Good pull requests - patches, improvements, new features - are a fantastic help. They should remain
+focused in scope and avoid containing unrelated commits.
+
+**Please ask first** before embarking on any significant pull request (e.g. implementing features,
+refactoring code, porting to a different language), otherwise you risk spending a lot of time
+working on something that the project's developers might not want to merge into the project.
+
+Please adhere to the coding conventions used throughout a project (indentation, accurate comments,
+etc.) and any other requirements (such as test coverage).

src/components/Story/Body.less

@@ -174,6 +174,7 @@
     max-height: none;
     display: inline-block;
     vertical-align: middle;
+    margin-top: 20px;
   }
 
   hr {

src/components/Story/Story.less

@@ -1,10 +1,15 @@
 @import (reference) "../../styles/custom.less";
+@import (reference) "../../styles/modules/variables.less";
 
 .Story {
-  border-radius: 4px;
   background-color: @white;
   color: #353535;
-  border: solid 1px #e9e7e7;
+  border-top: solid 1px #e9e7e7;
+  border-bottom: solid 1px #e9e7e7;
+  @media @small {
+    border-radius: 4px;
+    border: solid 1px #e9e7e7;
+  }
 
   &__content {
     position: relative;

src/components/Story/StoryFooter.js

@@ -116,7 +116,10 @@ class StoryFooter extends React.Component {
 
     const upVotesPreview = take(upVotes, 10).map(vote => (
       <p key={vote.voter}>
-        {vote.voter}
+        <Link to={`/@${vote.voter}`}>
+          {vote.voter}
+        </Link>
+
         {vote.rshares * ratio > 0.01 && (
           <span style={{ opacity: '0.5' }}>
             {' '}

src/components/Story/StoryLoading.less

@@ -1,13 +1,19 @@
 @import (reference) "../../styles/custom.less";
+@import (reference) "../../styles/modules/variables.less";
 
 .StoryLoading {
   position: relative;
-  border-radius: 4px;
   background-color: @white;
   color: #353535;
-  border: solid 1px #e9e7e7;
+  border-top: solid 1px #e9e7e7;
+  border-bottom: solid 1px #e9e7e7;
   margin-bottom: 12px;
 
+  @media @small {
+    border-radius: 4px;
+    border: solid 1px #e9e7e7;
+  }
+
   &:not(:first-child) {
     margin-top: 12px;
   }

src/components/UserCard.js

@@ -5,27 +5,22 @@ import FollowButton from '../widgets/FollowButton';
 import Avatar from '../components/Avatar';
 import './UserCard.less';
 
-const UserCard = ({ username, alt }) =>
-  (<div className="UserCard">
+const UserCard = ({ username, alt }) => (
+  <div className="UserCard">
     <div className="UserCard__left">
       <Link to={`/@${username}`}>
         <Avatar username={username} size={40} />
       </Link>
-      <Link to={`/@${username}`}>
-        {username}
-      </Link>
-      {alt &&
-        <span className="UserCard__alt">
-          {alt}
-        </span>
-      }
+      <Link to={`/@${username}`}>{username}</Link>
+      {alt && <span className="UserCard__alt">{alt}</span>}
     </div>
     <FollowButton username={username} />
-  </div>);
+  </div>
+);
 
 UserCard.propTypes = {
   username: PropTypes.string.isRequired,
-  alt: PropTypes.oneOf(PropTypes.string, PropTypes.bool),
+  alt: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 };
 
 UserCard.defaultProps = {

src/styles/common.less

@@ -26,6 +26,9 @@ body {
 
 .ant-tooltip-content {
   font-weight: 500;
+  a {
+    color: @white;
+  }
 }
 
 .ant-popover-title {
@@ -40,4 +43,4 @@ video {
 
 .iconfont {
   font-size: 26px;
-}
+}

src/styles/modules/feed-layout.less

@@ -2,6 +2,9 @@
 
 .feed-layout {
   position: relative;
+  @media only screen and (min-width: 768px) and (max-width: 998px) {
+    padding: 0 @mobile-padding
+  }
 
   &:after {
     content: "";

src/styles/modules/post-layout.less

@@ -2,6 +2,9 @@
 
 .post-layout {
   position: relative;
+  @media @medium-max-width {
+    padding: 0 @mobile-padding
+  }
 
   &:after {
     content: "";
@@ -11,12 +14,6 @@
 
   .right {
     width: @right-width;
-
-    padding-right: @mobile-padding;
-
-    @media @medium {
-      padding-right: 0;
-    }
   }
 
   .rightContainer {
@@ -32,16 +29,9 @@
   .center {
     float: left;
     width: 100%;
-    padding-right: @mobile-padding;
-    padding-left: @mobile-padding;
 
     @media @small {
       width: calc(100% ~"-" (@right-width + @margin));
-      padding-right: 0;
-    }
-
-    @media @medium {
-      padding-left: 0;
     }
   }
 }

src/styles/modules/settings-layout.less

@@ -2,6 +2,9 @@
 
 .settings-layout {
   position: relative;
+  @media only screen and (max-width: 998px) {
+    padding: 0 @mobile-padding
+  }
 
   &:after {
     content: "";

src/styles/modules/topnav-layout.less

@@ -29,7 +29,7 @@
 
     @media @small {
       display: block;
-      width: calc(100% ~"-" (@right-width + @margin)); 
+      width: calc(100% ~"-" (@right-width + 2 * @margin));
       margin-right: @right-width + @margin;
     }