chore: Merge branch 'fix/sticky-sidebar' into dev

Author: mydearxym

containers/JobContent/styles/index.js

@@ -24,7 +24,9 @@ export const MainWrapper = styled.div`
     width: 100%;
   `};
 `
-export const SidebarWrapper = styled.div``
+export const SidebarWrapper = styled.div`
+  min-width: 250px;
+`
 /* background: ${theme('preview.articleBg')}; */
 export const ArticleWrapper = styled.div`
   font-size: 1.1rem;

containers/JobContent/styles/side_cards.js

@@ -4,7 +4,6 @@ import { cs } from '@utils'
 
 export const Wrapper = styled.div`
   ${cs.flexColumn()};
-  width: 90%;
   min-width: 250px;
   ${cs.media.tablet`display: none`};
 `

containers/PostContent/styles/index.js

@@ -25,16 +25,16 @@ export const MainWrapper = styled.div`
     width: 100%;
   `};
 `
-export const SidebarWrapper = styled.div``
-
+export const SidebarWrapper = styled.div`
+  min-width: 250px;
+`
 /* background: ${theme('preview.articleBg')}; */
 export const ArticleWrapper = styled.div`
   font-size: 1.1rem;
   margin-right: 1.6vw;
   background: ${theme('preview.articleBg')};
   border-radius: 5px;
   padding: 35px 40px;
-  min-height: 60vh;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   ${cs.media.mobile`
     padding: 30px 20px;

containers/PostContent/styles/side_cards.js

@@ -4,7 +4,6 @@ import { cs } from '@utils'
 
 export const Wrapper = styled.div`
   ${cs.flexColumn()};
-  width: 90%;
   min-width: 250px;
   ${cs.media.tablet`display: none`};
 `

containers/Preview/store.js

@@ -98,11 +98,11 @@ const PreviewStore = t
       return stripMobx(self.attUser)
     },
     get modalVisible() {
-      return self.visible && Global.innerWidth > cs.mediaBreakPoints.desktop
+      return self.visible && Global.innerWidth > cs.mediaBreakPoints.desktopL
     },
 
     get slideVisible() {
-      return self.visible && Global.innerWidth < cs.mediaBreakPoints.desktop
+      return self.visible && Global.innerWidth <= cs.mediaBreakPoints.desktopL
     },
   }))
   .actions(self => ({

containers/RepoContent/styles/index.js

@@ -24,8 +24,9 @@ export const MainWrapper = styled.div`
     width: 100%;
   `};
 `
-export const SidebarWrapper = styled.div``
-
+export const SidebarWrapper = styled.div`
+  min-width: 250px;
+`
 /* background: ${theme('preview.articleBg')}; */
 export const ArticleWrapper = styled.div`
   font-size: 1.1rem;

containers/RepoContent/styles/side_cards.js

@@ -4,7 +4,6 @@ import { cs } from '@utils'
 
 export const Wrapper = styled.div`
   ${cs.flexColumn()};
-  width: 90%;
   min-width: 250px;
   ${cs.media.tablet`display: none`};
 `

containers/VideoContent/styles/index.js

@@ -24,8 +24,9 @@ export const MainWrapper = styled.div`
     width: 100%;
   `};
 `
-export const SidebarWrapper = styled.div``
-
+export const SidebarWrapper = styled.div`
+  min-width: 250px;
+`
 export const ArticleWrapper = styled.div`
   font-size: 1.1rem;
   margin-right: 1.6vw;

containers/VideoContent/styles/side_cards.js

@@ -5,7 +5,6 @@ import { cs } from '@utils'
 
 export const Wrapper = styled.div`
   ${cs.flexColumn()};
-  width: 90%;
   min-width: 250px;
   ${cs.media.tablet`display: none`};
 `

utils/common_styles.js

@@ -102,6 +102,8 @@ export const mediaBreakPoints = {
   tablet: 768,
   laptop: 992,
   desktop: 1600,
+  // currently used as forms of preview content (slideout/modal)
+  desktopL: 1920,
   // laptopL: '1440px',
   // desktop: '2560px'
 }