From 48a5fac71cf291df83ed9d3fc7fae6d3eafaff2c Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kyle.l.doherty@gmail.com>
Date: Thu, 10 Sep 2015 17:32:00 -0700
Subject: [PATCH] first stab at responsive refactor
---
resources/frontend_client/app/css/home.css | 23 ++++++++++++++++
.../app/home/components/Activity.react.js | 2 +-
.../app/home/components/ActivityItem.react.js | 7 +----
.../home/components/ActivityStory.react.js | 2 +-
.../app/home/components/Cards.react.js | 2 +-
.../app/home/components/Homepage.react.js | 27 +++++--------------
6 files changed, 34 insertions(+), 29 deletions(-)
diff --git a/resources/frontend_client/app/css/home.css b/resources/frontend_client/app/css/home.css
index 469b0a53928..f3148389f9d 100644
--- a/resources/frontend_client/app/css/home.css
+++ b/resources/frontend_client/app/css/home.css
@@ -197,3 +197,26 @@
max-width: 42rem;
line-height: 1.4;
}
+
+.HomeLayout {
+}
+
+@media screen and (--breakpoint-min-md) {
+ .HomeLayout {
+ margin-right: 346px;
+ }
+ .HomeLayout-sidebar {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 346px;
+ background-color: #F9FBFC;
+ border-left: 2px solid var(--border-color);
+ }
+ .HomeLayout-mainColumn {
+ max-width: 700px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
diff --git a/resources/frontend_client/app/home/components/Activity.react.js b/resources/frontend_client/app/home/components/Activity.react.js
index 57b0bbb3cab..aa254448e3a 100644
--- a/resources/frontend_client/app/home/components/Activity.react.js
+++ b/resources/frontend_client/app/home/components/Activity.react.js
@@ -156,7 +156,7 @@ export default class Activity extends Component {
let { error } = this.state;
return (
- <LoadingAndErrorWrapper className="" loading={!activity} error={error}>
+ <LoadingAndErrorWrapper loading={!activity} error={error}>
{() =>
<div className="full flex flex-column">
<div className="">
diff --git a/resources/frontend_client/app/home/components/ActivityItem.react.js b/resources/frontend_client/app/home/components/ActivityItem.react.js
index aa6924ed130..75a01259f3d 100644
--- a/resources/frontend_client/app/home/components/ActivityItem.react.js
+++ b/resources/frontend_client/app/home/components/ActivityItem.react.js
@@ -6,16 +6,11 @@ import IconBorder from '../../query_builder/IconBorder.react';
import UserAvatar from 'metabase/components/UserAvatar.react';
export default class ActivityItem extends Component {
-
- constructor(props) {
- super(props);
- }
-
render() {
const { item, description, userColors } = this.props;
return (
- <div className="ml1 flex align-center">
+ <div className="ml1 flex align-center mr2">
<span>
{ item.user ?
<UserAvatar user={item.user} background={userColors} style={{color: '#fff', borderWidth: '0'}}/>
diff --git a/resources/frontend_client/app/home/components/ActivityStory.react.js b/resources/frontend_client/app/home/components/ActivityStory.react.js
index 75587aa3f5a..d3c2d684249 100644
--- a/resources/frontend_client/app/home/components/ActivityStory.react.js
+++ b/resources/frontend_client/app/home/components/ActivityStory.react.js
@@ -22,7 +22,7 @@ export default class ActivityStory extends Component {
}
return (
- <div className="mt1 border-left flex" style={{borderWidth: '3px', marginLeft: '22px', borderColor: '#F2F5F6'}}>
+ <div className="mt1 border-left flex mr2" style={{borderWidth: '3px', marginLeft: '22px', borderColor: '#F2F5F6'}}>
<div className="flex full ml4 bordered rounded p2" style={this.styles}>
{ story.bodyLink ?
<a className="link" href={story.bodyLink}>{story.body}</a>
diff --git a/resources/frontend_client/app/home/components/Cards.react.js b/resources/frontend_client/app/home/components/Cards.react.js
index 78c75462ac5..15093f554eb 100644
--- a/resources/frontend_client/app/home/components/Cards.react.js
+++ b/resources/frontend_client/app/home/components/Cards.react.js
@@ -67,7 +67,7 @@ export default class Cards extends Component {
{() =>
<div>
{ cards.length === 0 ?
- <div className="flex flex-column layout-centered pt4" style=={{fontSize: '1.08rem'}}>
+ <div className="flex flex-column layout-centered pt4" style={{fontSize: '1.08rem'}}>
<span className="QuestionCircle">?</span>
<div className="text-normal mt3 mb1 h2 text-bold">Hmmm, looks like you don't have any saved questions yet.</div>
<div className="text-normal text-grey-2">Save a question and get this baby going!</div>
diff --git a/resources/frontend_client/app/home/components/Homepage.react.js b/resources/frontend_client/app/home/components/Homepage.react.js
index b154c48aa2a..2a6db47c6b1 100644
--- a/resources/frontend_client/app/home/components/Homepage.react.js
+++ b/resources/frontend_client/app/home/components/Homepage.react.js
@@ -25,19 +25,6 @@ export default class Homepage extends Component {
};
this.styles = {
- main: {
- marginRight: "346px",
- },
- mainWrapper: {
- maxWidth: "700px",
- marginLeft: "auto",
- marginRight: "auto",
- },
- sidebar: {
- borderWidth: "2px",
- width: "346px",
- backgroundColor: "#F9FBFC"
- },
headerGreeting: {
fontSize: "x-large"
}
@@ -61,9 +48,9 @@ export default class Homepage extends Component {
</Modal>
: null}
- <div className="bg-brand text-white pl4">
- <div style={this.styles.main}>
- <div style={this.styles.mainWrapper}>
+ <div className="bg-brand text-white md-pl4" style={{backgroundImage: 'url("app/components/icons/assets/rect.svg")', backgroundRepeat: 'repeat'}}>
+ <div className="HomeLayout">
+ <div className="HomeLayout-mainColumn">
<header style={this.styles.headerGreeting} className="flex align-center pb4">
<span className="float-left mr1">
<Smile />
@@ -79,9 +66,9 @@ export default class Homepage extends Component {
</div>
</div>
</div>
- <div className="relative felx flex-column flex-full pl4">
- <div style={this.styles.main}>
- <div style={this.styles.mainWrapper}>
+ <div className="relative felx flex-column flex-full md-pl4">
+ <div className="HomeLayout">
+ <div className="HomeLayout-mainColumn">
{ selectedTab === 'activity' ?
<Activity {...this.props} />
:
@@ -89,7 +76,7 @@ export default class Homepage extends Component {
}
</div>
</div>
- <div style={this.styles.sidebar} className="border-left absolute top right bottom">
+ <div className="HomeLayout-sidebar">
{ selectedTab === 'activity' ?
<RecentViews {...this.props} />
:
--
GitLab