prevent header movement from home to hub page

ResearchHub · Feb 4, 2021 · 093514d · 093514d
1 parent 0780a45
commit 093514d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 67 deletions.
diff --git a/components/ContentPage/SidebarList.js b/components/ContentPage/SidebarList.js
@@ -16,17 +16,13 @@ class SidebarList extends React.Component {
   }
 
   render() {
-    let { overrideStyle } = this.props;
+    const { overrideStyle } = this.props;
 
     return (
       <div className={css(styles.container, overrideStyle && overrideStyle)}>
-        <div className={css(styles.hubsListContainer)}>
-          <div className={css(styles.listLabel)} id={"hubListTitle"}>
-            {this.props.sidebarName}
-          </div>
-          <div
-            className={css(styles.hubsList, this.state.reveal && styles.reveal)}
-          >
+        <div className={css(styles.column)}>
+          <div className={css(styles.listLabel)}>{this.props.sidebarName}</div>
+          <div className={css(styles.list, this.state.reveal && styles.reveal)}>
             {this.props.sidebarItems.length > 0 ? (
               this.props.renderSidebarEntry()
             ) : (
@@ -59,7 +55,7 @@ const styles = StyleSheet.create({
     paddingTop: 60,
     paddingBottom: 30,
   },
-  hubsListContainer: {
+  column: {
     height: "100%",
     width: "100%",
     display: "flex",
@@ -80,7 +76,6 @@ const styles = StyleSheet.create({
     marginBottom: 15,
     textAlign: "left",
     color: "#a7a6b0",
-    transition: "all ease-out 0.1s",
     width: "90%",
     paddingLeft: 35,
     boxSizing: "border-box",
@@ -109,7 +104,7 @@ const styles = StyleSheet.create({
       backgroundColor: "#EAEAEA",
     },
   },
-  hubsList: {
+  list: {
     opacity: 0,
     width: "90%",
     boxSizing: "border-box",

diff --git a/components/Home/MainHeader.js b/components/Home/MainHeader.js
@@ -27,7 +27,7 @@ const MainHeader = (props) => {
         home && styles.row
       )}
     >
-      <h1 className={css(styles.feedTitle)}>
+      <h1 className={css(styles.feedTitle, home && styles.feedTitleMargin)}>
         <span className={css(styles.fullWidth)}>
           {title}
           <span className={css(styles.hubName)}>{hubName}</span>
@@ -129,7 +129,6 @@ const styles = StyleSheet.create({
     margin: 0,
     "@media only screen and (min-width: 800px)": {
       textAlign: "left",
-      paddingRight: 16,
     },
     "@media only screen and (max-width: 1149px)": {
       fontSize: 30,
@@ -144,6 +143,9 @@ const styles = StyleSheet.create({
       fontSize: 20,
     },
   },
+  feedTitleMargin: {
+    marginTop: -3,
+  },
   fullWidth: {
     width: "100%",
     boxSizing: "border-box",
@@ -219,7 +221,7 @@ const styles = StyleSheet.create({
   },
   hubInputContainer: {
     width: "100%",
-    marginTop: 16,
+    paddingTop: 15,
   },
   homeInputContainer: {
     justifyContent: "flex-end",

diff --git a/components/Hubs/HubPage.js b/components/Hubs/HubPage.js
@@ -908,7 +908,6 @@ var styles = StyleSheet.create({
     boxShadow: "0 0 15px rgba(0, 0, 0, 0.14)",
   },
   sidebar: {
-    // display: "flex",
     display: "table-cell",
     flexDirection: "column",
     alignItems: "flex-start",
@@ -973,58 +972,6 @@ var styles = StyleSheet.create({
     marginTop: 10,
     marginBottom: 0,
   },
-  iconStyle: {
-    height: 33,
-    width: 33,
-  },
-  coinIcon: {
-    height: 20,
-    marginLeft: 8,
-    "@media only screen and (max-width: 760px)": {
-      height: 18,
-    },
-    "@media only screen and (max-width: 415px)": {
-      height: 16,
-    },
-  },
-  /**
-   * MAIN FEED STYLES
-   */
-
-  feedTitle: {
-    display: "flex",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    color: "#241F3A",
-    fontWeight: 400,
-    fontSize: 30,
-    flexWrap: "wrap",
-    whiteSpace: "pre-wrap",
-    width: "100%",
-    textAlign: "center",
-    padding: 0,
-    margin: 0,
-    "@media only screen and (min-width: 800px)": {
-      textAlign: "left",
-      paddingRight: 16,
-    },
-    "@media only screen and (max-width: 1149px)": {
-      fontSize: 30,
-    },
-    "@media only screen and (max-width: 767px)": {
-      fontSize: 25,
-    },
-  },
-  feedSubtitle: {
-    fontSize: 14,
-    "@media only screen and (max-width: 665px)": {
-      display: "none",
-    },
-  },
-  fullWidth: {
-    width: "100%",
-    boxSizing: "border-box",
-  },
   titleBoxShadow: {
     boxShadow: "0 4px 41px -24px rgba(0,0,0,0.16)",
   },