diff --git a/resources/frontend_client/app/components/icons/assets/header_rect.svg b/resources/frontend_client/app/components/icons/assets/header_rect.svg
new file mode 100644
index 0000000000000000000000000000000000000000..53a652c35f904ea39a5c5a8026b769cf9c17c4f4
--- /dev/null
+++ b/resources/frontend_client/app/components/icons/assets/header_rect.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="58px" height="57px" viewBox="0 0 58 57" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-393.000000, -53.000000)" fill="#4F9CE0">
+ <g transform="translate(-6.000000, -9.000000)">
+ <g transform="translate(13.000000, -3.000000)">
+ <rect transform="translate(415.000000, 93.715729) rotate(-45.000000) translate(-415.000000, -93.715729) " x="395" y="73.7157288" width="40" height="40"></rect>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/resources/frontend_client/app/css/core/hide.css b/resources/frontend_client/app/css/core/hide.css
index 7c3d0b254b88aa096e0551a99cd60a83d436c158..faafa64de1f50c5304d29f35e35865ca0a885432 100644
--- a/resources/frontend_client/app/css/core/hide.css
+++ b/resources/frontend_client/app/css/core/hide.css
@@ -1,5 +1,5 @@
.hide { display: none !important; }
-.show { display: block; }
+.show { display: inheirt; }
.sm-show,
.md-show,
@@ -12,7 +12,7 @@
.sm-hide { display: none !important; }
}
@media screen and (--breakpoint-min-sm) {
- .sm-show { display: block !important; }
+ .sm-show { display: inherit !important; }
}
/* medium */
@@ -21,7 +21,7 @@
.md-hide { display: none !important; }
}
@media screen and (--breakpoint-min-md) {
- .md-show { display: block !important; }
+ .md-show { display: inherit !important; }
}
/* large */
@@ -29,7 +29,7 @@
.lg-hide { display: none !important; }
}
@media screen and (--breakpoint-min-lg) {
- .lg-show { display: block !important; }
+ .lg-show { display: inherit !important; }
}
/* xl */
@@ -37,5 +37,5 @@
.xl-hide { display: none !important; }
}
@media screen and (--breakpoint-min-xl) {
- .xl-show { display: block !important; }
+ .xl-show { display: inherit !important; }
}
diff --git a/resources/frontend_client/app/css/core/layout.css b/resources/frontend_client/app/css/core/layout.css
index 85f1db10983de656b4f7dea880012cf5835d0788..3f2f6ba693b92bb2d11b2a356c5f236028a19b90 100644
--- a/resources/frontend_client/app/css/core/layout.css
+++ b/resources/frontend_client/app/css/core/layout.css
@@ -7,8 +7,6 @@
.wrapper {
width: 100%;
margin: 0 auto;
- padding-left: 1.5em;
- padding-right: 1.5em;
}
@media screen and (--breakpoint-min-sm) {
diff --git a/resources/frontend_client/app/css/home.css b/resources/frontend_client/app/css/home.css
index 469b0a5392813e778e32b2b60e9509450ccd7e80..6e51784ebad66115ec97d5216fb70a41278eed4e 100644
--- a/resources/frontend_client/app/css/home.css
+++ b/resources/frontend_client/app/css/home.css
@@ -2,6 +2,15 @@
z-index: 2;
}
+.CheckBg {
+ background-image: url('/app/components/icons/assets/header_rect.svg');
+ background-repeat: repeat;
+}
+
+.CheckBg-offset {
+ background-position-y: -15px;
+}
+
.Main {
z-index: 1;
position: relative;
@@ -197,3 +206,29 @@
max-width: 42rem;
line-height: 1.4;
}
+
+@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;
+ }
+}
+
+@media screen and (--breakpoint-min-lg) {
+ .HomeLayout {
+ font-size: 1.08rem;
+ }
+}
diff --git a/resources/frontend_client/app/home/components/Activity.react.js b/resources/frontend_client/app/home/components/Activity.react.js
index 57b0bbb3cab1d0dc8ae64b009467951365eec539..aa254448e3a0e4544644348a54ff78034cc5d0c2 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 aa6924ed1301dcc283c16ce6acfa9a55e85b788e..e72ce0abbc76fc28906f46cf9cc773f7ced7a62b 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'}}/>
@@ -26,7 +21,7 @@ export default class ActivityItem extends Component {
}
</span>
- <div className="ml2 full flex align-center" style={{fontSize: '1rem'}}>
+ <div className="ml2 full flex align-center">
<div className="text-grey-4">
<span className="text-dark">{description.userName}</span>
diff --git a/resources/frontend_client/app/home/components/ActivityStory.react.js b/resources/frontend_client/app/home/components/ActivityStory.react.js
index 75587aa3f5a6bfd00b0360c4a53e19ce53d679ce..dba204bba898f0ae068f4dc4c8343a8fd5cd84fa 100644
--- a/resources/frontend_client/app/home/components/ActivityStory.react.js
+++ b/resources/frontend_client/app/home/components/ActivityStory.react.js
@@ -9,7 +9,6 @@ export default class ActivityStory extends Component {
this.styles = {
borderWidth: '2px',
- fontSize: '1.08rem',
borderColor: '#DFE8EA',
}
}
@@ -22,7 +21,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 41570e92bd65758ee4bb1053fd3393deeea556fd..15093f554eb19dbd880fbd0d44cad2ffca09f76a 100644
--- a/resources/frontend_client/app/home/components/Cards.react.js
+++ b/resources/frontend_client/app/home/components/Cards.react.js
@@ -3,6 +3,7 @@
import React, { Component, PropTypes } from "react";
import Icon from "metabase/components/Icon.react";
+import IconBorder from '../../query_builder/IconBorder.react';
import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.react";
import { fetchCards } from "../actions";
@@ -13,21 +14,6 @@ export default class Cards extends Component {
constructor() {
super();
this.state = { error: null };
-
- this.styles = {
- main: {
- marginRight: "346px"
- },
- mainWrapper: {
- width: "100%",
- margin: "0 auto",
- paddingLeft: "12em",
- paddingRight: "3em"
- },
- headerGreeting: {
- fontSize: "x-large"
- }
- };
}
async componentDidMount() {
@@ -43,10 +29,10 @@ export default class Cards extends Component {
let items = cards.slice().sort((a, b) => b.created_at - a.created_at);
return (
- <ul className="pt2">
+ <ul className="pt2 ml1">
{items.map(item =>
<li key={item.id} className="flex pt2">
- <div className="pb2 mr3">
+ <div className="pb2 mr2">
<img style={{height: "36px"}} src={"/app/components/icons/assets/" + item.icon + ".png"} />
</div>
<div className="flex align-center flex-full border-bottom pb2">
@@ -55,12 +41,14 @@ export default class Cards extends Component {
<div className="text-grey-3">{item.description || "No description yet"}</div>
</div>
<div className="flex-align-right flex-full text-right text-grey-3">
- <div className="mb1">Saved by <span className="text-dark">{item.creator.common_name}</span></div>
+ <div>Saved by <span className="text-dark">{item.creator.common_name}</span></div>
<div>Created {item.created_at.fromNow()}</div>
</div>
<div className="flex-align-right text-right text-grey-3 ml2">
- <a href={'/card/'+item.id} className="flex-align-right IconCircle flex text-grey-1 text-grey-3-hover transition-color layout-centered">
- <Icon name={'pencil'} width={18} height={18}></Icon>
+ <a href={'/card/'+item.id} className="flex-align-right flex text-grey-1 text-grey-3-hover">
+ <IconBorder>
+ <Icon name='pencil' width={16} height={16}></Icon>
+ </IconBorder>
</a>
</div>
</div>
@@ -79,9 +67,9 @@ export default class Cards extends Component {
{() =>
<div>
{ cards.length === 0 ?
- <div className="flex flex-column layout-centered pt4">
+ <div className="flex flex-column layout-centered pt4" style={{fontSize: '1.08rem'}}>
<span className="QuestionCircle">?</span>
- <div className="text-normal mt3 mb1">Hmmm, looks like you don't have any saved questions yet.</div>
+ <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>
</div>
:
diff --git a/resources/frontend_client/app/home/components/HeaderTabs.react.js b/resources/frontend_client/app/home/components/HeaderTabs.react.js
index 705fe690c58c1aa73740dfcc5ab9d9a68bf4ff2a..ee3c2b90f8c3e88caf5e731e95e11b3e9ebde10a 100644
--- a/resources/frontend_client/app/home/components/HeaderTabs.react.js
+++ b/resources/frontend_client/app/home/components/HeaderTabs.react.js
@@ -42,7 +42,7 @@ export default class HeaderTabs extends Component {
});
return (
- <div className="bg-brand text-white">
+ <div className="text-white" style={{backgroundColor: 'transparent'}}>
<a className={activityTab} style={{marginLeft: '10px'}} href="/">Activity</a>
<a className={questionsTab} href="/?questions">Saved Questions</a>
</div>
diff --git a/resources/frontend_client/app/home/components/Homepage.react.js b/resources/frontend_client/app/home/components/Homepage.react.js
index b154c48aa2a58e20538513734b8f89c3ceb61b50..73c7c6b08955b683eb4cbfb3b837fe8d13c0b90e 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="CheckBg bg-brand text-white md-pl4">
+ <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} />
:
diff --git a/resources/frontend_client/index_template.html b/resources/frontend_client/index_template.html
index 20307cdf2669ab1abd2292243b23bc90ef0feeb9..090fa6fb0294951b6477fec3816211717488bbdc 100644
--- a/resources/frontend_client/index_template.html
+++ b/resources/frontend_client/index_template.html
@@ -15,7 +15,7 @@
<body ng-controller="Metabase">
<div class="Nav" ng-controller="Nav" ng-if="user" ng-cloak>
<!-- MAIN NAV -->
- <nav class="py2 sm-py1 xl-py3 relative bg-brand" ng-show="nav === 'main'">
+ <nav class="CheckBg CheckBg-offset sm-py2 sm-py1 xl-py3 relative bg-brand" ng-show="nav === 'main'">
<ul class="wrapper flex align-center">
<li>
<a class="NavItem cursor-pointer text-white flex align-center my1" href="/">
@@ -59,7 +59,7 @@
</div>
</li>
<li class="flex-align-right">
- <a class="rounded inline-block bg-white text-brand cursor-pointer p2 no-decoration" href="/q">New Question</a>
+ <a class="rounded inline-block bg-white text-brand cursor-pointer p2 no-decoration" href="/q">New <span class="hide sm-show">Question</span></a>
<div mb-profile-link class="inline-block text-white" user="user" context="nav"></div>
</li>
</ul>