Skip to content
This repository has been archived by the owner on Mar 15, 2018. It is now read-only.

Commit

Permalink
address preview desktop responsiveness (bug 1029769)
Browse files Browse the repository at this point in the history
  • Loading branch information
@spasovski
spasovski committed Jun 30, 2014
1 parent 0a820da commit f72ed2e
Showing 1 changed file with 35 additions and 19 deletions.
54 changes: 35 additions & 19 deletions src/media/css/transsonic.styl
View file
Expand Up @@ -10,6 +10,8 @@
to { transform: rotate(1turn); }
}

$fixed-preview-possible = unquote('(min-width: 1360px)');

.spinner {
spinner();

Expand Down Expand Up @@ -57,7 +59,7 @@ h3 {
}
main,
.site-header > nav {
margin: 0 0 0 50px;
margin: 0 auto;
width: 940px;
}
.container {
Expand Down Expand Up @@ -87,32 +89,22 @@ h3 {
}
}
aside.feed-previews {
-moz-transition: -moz-transform .5s;
-webkit-transition: -webkit-transform .5s;
-moz-transform: translateX(0px);
-webkit-transform: translateX(0px);
background: $medium-gray;
height: 100%;
left: 50%;
margin: 0 0 0 150px;
padding-top: 14px;
position: fixed;
right: 0;
top: 0;
position: relative;
top: -220px;
width: 320px;
z-index: 20;

&.active {
-moz-transform: translateX(280px);
-webkit-transform: translateX(280px);
}
&:hover {
cursor: pointer;
}
.preview-header {
color: #fff;
color: $dark-gray;
line-height: 25px;
padding-left: 20px;
}
}
.island.submit {
width: 50%;
}
} // End of Desktop.

.form-errors ul {
Expand Down Expand Up @@ -156,3 +148,27 @@ body.dragging, body.dragging * {
.button.persona {
padding-top: 0;
}

@media $fixed-preview-possible {
main,
.site-header > nav {
margin: 0 0 0 50px;
}
aside.feed-previews {
background: $medium-gray;
border-radius: 0;
height: 100%;
left: inherit;
position: fixed;
right: 0;
top: 0;
z-index: 20;

.preview-header {
color: #fff;
}
}
.island.submit {
width: 100%;
}
}

4 comments on commit f72ed2e

@ngokevin
Copy link

Choose a reason for hiding this comment

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

it could use a background/island and have the header aligned with something

@ngokevin
Copy link

Choose a reason for hiding this comment

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

also, when we have previews on feed builder, i suspect this won't look well

@spasovski
Copy link
Author

Choose a reason for hiding this comment

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

Feed builder will be tricky with the old styles and the new...also I tried making the aside like an island but it looked horrible for brands since they are white anyway.

@ngokevin
Copy link

Choose a reason for hiding this comment

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

i mean the footer preview could use an island (it's just kind of awkwardly positioned).

for feed builder, i like default off with ability to toggle pop out. a curator builds the feed, and at the end wants to preview it. there's no great place to fit a preview otherwise.

Please sign in to comment.