feat(PostDetails): View the content of posts

View Steem content, still need to do actions. Had trouble with turning image URLs into img tags.

client/package.json

@@ -23,7 +23,7 @@
     "remarkable": "^1.7.1",
     "sanitize-html": "^1.20.0",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.84.0",
+    "semantic-ui-react": "^0.85.0",
     "steemconnect": "^2.0.1",
     "xmldom": "^0.1.27"
   },

client/src/App.css

@@ -41,6 +41,17 @@ hr {
   margin: 0 auto;
 }*/
 
+/*Semantic UI modal position fix*/
+.visible.transition {
+  display: unset !important;
+}
+.dimmed.dimmable > .ui.visible.dimmer, .ui.active.dimmer {
+  display: -ms-flexbox;
+  display: flex !important;
+  opacity: 1;
+}
+
+
 
 .ui.container.grid.wrapper {
   max-width: 1020px !important;

client/src/App.js

@@ -36,7 +36,7 @@ class App extends Component {
       children
     } = this.props;
 
-    const scState = `${window.location.pathname}`;
+    const scState = window.location.pathname;
     const loginURL = SteemConnect.getLoginURL(scState);
 
     return (

client/src/actions/recentPostsActions.js

@@ -78,14 +78,15 @@ const fetchPosts = (section, user) => dispatch => {
  *  @returns {bool} Determines if a fetch should be done
  */
 const shouldFetchRecent = (state, section) => {
-  const posts = state.recentActivity[section];
-  if (!posts) {
+  const activity = state.recentActivity[section];
+
+  if (!activity) {
     return true;
   }
-  if (posts.isFetching) {
+  if (activity.isFetching) {
     return false;
   }
-  return posts.didInvalidate;
+  return activity.didInvalidate;
 }
 
 /**
@@ -96,7 +97,7 @@ const shouldFetchRecent = (state, section) => {
  *  @returns {function} Dispatches returned action object
  */
 export const fetchRecentIfNeeded = (section, user) => (dispatch, getState) => {
-  //if (shouldFetchRecent(getState(), section)) {
+  if (shouldFetchRecent(getState(), section)) {
     return dispatch(fetchPosts(section, user));
-  //}
+  }
 }

client/src/components/Content/PostDetails.css

@@ -0,0 +1,114 @@
+@import '../../variables.css';
+
+.PostContent {
+  font-size: 1.3rem;
+  line-height: 2.0rem;
+  font-family: "Georgia";
+}
+
+.PostContent .info {
+  font-family: "Open Sans";
+  font-size: 1.1rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  /*font-family: var(--font-content);*/
+  font-weight: 600;
+}
+
+h1 {
+  margin: 2.5rem 0 .3rem;
+  font-size: 2.5rem;
+}
+h2 {
+  margin: 2.5rem 0 .3rem;
+  font-size: 2.2rem;
+}
+h3 {
+  margin: 2rem 0 0.3rem;
+  font-size: 2.0rem;
+}
+h4 {
+  margin: 1.5rem 0 0.2rem;
+  font-size: 1.8rem;
+}
+h5 {
+  margin: 1rem 0 0.2rem;
+  font-size: 1.6rem;
+}
+h6 {
+  margin: 1rem 0 0.2rem;
+  font-size: 1.4rem;
+}
+
+code {
+  padding: 0.2rem;
+  font-size: 85%;
+  border-radius: 3px;
+  border: none;
+  background-color: #F4F4F4;
+  font-weight: inherit;
+  overflow: scroll;
+}
+
+pre > code {
+  display: block;
+}
+
+strong {
+  font-weight: 600;
+}
+
+ol, ul {
+  margin-left: 2rem;
+}
+
+table td {
+  word-break: normal;
+}
+
+p {
+  font-size: 100%;
+  line-height: 150%;
+  margin: 0 0 1.5rem 0;
+}
+
+img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: none;
+}
+
+iframe {
+  max-width: 100%;
+  max-height: 75vw;
+}
+
+div.pull-right {
+  float: right;
+  padding-left: 1rem;
+  max-width: 50%;
+}
+
+div.pull-left {
+  float: left;
+  padding-right: 1rem;
+  max-width: 50%;
+}
+
+div.text-justify {
+  text-align: justify;
+}
+
+div.text-right {
+  text-align: right;
+}
+
+div.text-center {
+  text-align: center;
+}
+
+div.text-rtl {
+  direction: rtl;
+}