Skip to content
This repository has been archived by the owner on Nov 6, 2020. It is now read-only.

Simplify status + content display overlaps/page fixing #7264

Merged
merged 1 commit into from
Dec 12, 2017
Merged

Simplify status + content display overlaps/page fixing #7264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 22 additions & 17 deletions js/src/Application/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,18 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
min-height: 100vh;
height: 100vh;
overflow: hidden;
width: 100%;

.logo {
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0.2;
position: fixed;
padding: 7em;
position: absolute;
padding: 2em;
text-align: center;
z-index: 0;

Expand All @@ -37,21 +39,24 @@
margin: 0 auto;
}
}
}

.container {
box-sizing: border-box;
display: flex;
flex-grow: 1;
flex-direction: column;
}
.content {
box-sizing: border-box;
display: flex;
flex-grow: 1;
overflow: hidden;
position: relative;

.content {
padding: 0;
}
> div:not(.logo) {
display: flex;
flex-grow: 1;
overflow-y: scroll;
}
}

.error {
padding: 2em;
background: red;
color: white;
.error {
padding: 2em;
background: red;
color: white;
}
}
28 changes: 13 additions & 15 deletions js/src/Application/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,32 +109,30 @@ class Application extends Component {
renderApp () {
const { children } = this.props;

return (
<div className={ styles.container }>
<Extension />
<FirstRun />
<Snackbar />
<UpgradeParity upgradeStore={ this.upgradeStore } />
<Errors />
<div className={ styles.content }>
{ children }
</div>
return [
<Extension key='extension' />,
<FirstRun key='firstrun' />,
<Snackbar key='snackbar' />,
<UpgradeParity key='upgrade' upgradeStore={ this.upgradeStore } />,
<Errors key='errors' />,
<div key='content' className={ styles.content }>
{ children }
</div>
);
];
}

renderMinimized () {
const { children } = this.props;

return (
<div className={ styles.container }>
return [
<Errors key='errors' />,
<div key='content' className={ styles.content }>
<div className={ styles.logo }>
<img src={ parityLogo } />
</div>
<Errors />
{ children }
</div>
);
];
}
}

Expand Down
10 changes: 4 additions & 6 deletions js/src/Dapp/dapp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,20 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/

.frame {
.frame,
.full {
background: white;
box-sizing: border-box;
border: 0;
flex-grow: 1;
margin: 0;
padding: 0;
opacity: 0;
width: 100%;
z-index: 1;
}

.full {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
Expand Down
24 changes: 11 additions & 13 deletions js/src/Dapps/dapps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,19 +50,17 @@ class Dapps extends Component {
const applications = [].concat(this.store.visibleLocal, this.store.visibleViews, this.store.visibleBuiltin, this.store.visibleNetwork);

return (
<Page>
<div className={ styles.dapps }>
{
applications.map((app, index) => (
<DappCard
app={ app }
availability={ availability }
className={ styles.dapp }
key={ `${index}_${app.id}` }
/>
))
}
</div>
<Page className={ styles.dapps }>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm modifying this heavily in #7266, I think you can remove it from this PR. It would save some time for me or you resolving conflicts

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, just made a comment - think we need this one in first and then make sure that your still works 100% as expected. I'm worried since the top layout is now not a fixed bar anymore, rather a proper layout. (Needed to get done since we have had complaints about overlaps)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, i'll rebase mine on yours.

{
applications.map((app, index) => (
<DappCard
app={ app }
availability={ availability }
className={ styles.dapp }
key={ `${index}_${app.id}` }
/>
))
}
{
this.store.externalOverlayVisible
? (
Expand Down
11 changes: 3 additions & 8 deletions js/src/Status/status.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
*/

$textColor: #ccc;
$statusHeight: 2.75em;

.home {
color: $textColor !important;
Expand All @@ -26,15 +27,9 @@ $textColor: #ccc;
.container {
flex: 0;
box-sizing: border-box;
height: 2.75em;

.fixed {
box-sizing: border-box;
position: fixed;
top: 0;
right: 0;
left: 0;
height: 2.75em;
.bar {
height: $statusHeight;
z-index: 1000;
border-bottom: 1px solid #405161;
color: $textColor;
Expand Down
4 changes: 2 additions & 2 deletions js/src/Status/status.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function Status ({ className = '', upgradeStore }, { api }) {

return (
<div className={ `${styles.container} ${className}` }>
<GradientBg className={ styles.fixed }>
<GradientBg className={ styles.bar }>
<div className={ styles.status }>
<a href='#/' className={ styles.home }>
<HomeIcon />
Expand Down Expand Up @@ -93,8 +93,8 @@ function Status ({ className = '', upgradeStore }, { api }) {
<NetChain className={ styles.chain } />
</div>
</div>
<SyncWarning className={ styles.warning } />
</GradientBg>
<SyncWarning className={ styles.warning } />
</div>
);
}
Expand Down