+ enableUserSettings={this.props.enableUserSettings} staticLink={this.props.staticLink}/>
{ this.props.disableSearch ? null : this.renderSearchForm() }
{ this.renderShots() }
@@ -322,7 +322,7 @@ class Card extends React.Component {
;
} else if (this.props.hasFxa) {
favoriteIndicator =
-
+
;
}
@@ -371,7 +371,8 @@ class Card extends React.Component {
isIcon = {true}
clickDeleteHandler={this.clickDeleteHandler.bind(this)}
confirmDeleteHandler={this.confirmDeleteHandler.bind(this, shot)}
- cancelDeleteHandler={this.cancelDeleteHandler.bind(this)} />
+ cancelDeleteHandler={this.cancelDeleteHandler.bind(this)}
+ staticLink={this.props.staticLink} />
{favoriteIndicator}
{syncedShotIndicator}
diff --git a/server/src/signin-button.js b/server/src/signin-button.js
index fe80c94c06..cb747af3ee 100644
--- a/server/src/signin-button.js
+++ b/server/src/signin-button.js
@@ -18,20 +18,17 @@ exports.SignInButton = class SignInButton extends React.Component {
render() {
if (this.state.displaySettings) {
return
-
-
- Settings
-
-
- ;
+
+
+
+ ;
}
const logInURI = "/api/fxa-oauth/login/" + this.props.initialPage;
return
-
-
- Sign In
-
+
+
;
}
@@ -44,4 +41,5 @@ exports.SignInButton = class SignInButton extends React.Component {
exports.SignInButton.propTypes = {
initialPage: PropTypes.string,
isAuthenticated: PropTypes.bool,
+ staticLink: PropTypes.func,
};
diff --git a/static/css/frame.scss b/static/css/frame.scss
index dd9bfa1e90..9d769fa151 100644
--- a/static/css/frame.scss
+++ b/static/css/frame.scss
@@ -10,8 +10,15 @@
.back-to-home {
@include respond-to("small") {
background-size: 24px auto;
- padding-left: 40px;
+ padding-left: 35px;
border: 0;
+ margin: 0 2px;
+ span {
+ font-size: 20px;
+ &.small-text {
+ font-size: 14px;
+ }
+ }
}
background-position: left center;
@@ -30,6 +37,7 @@
&.small-text {
font-size: 17px;
padding-left: 0;
+ padding-right: 5px;
}
}
@@ -40,9 +48,9 @@
.shot-main-actions {
- @include respond-to("medium") {
+ @include respond-to("large") {
@include flex-container(row, flex-start, center);
- margin-right: 10px;
+ flex: initial;
padding-top: 4px;
overflow: hidden;
}
@@ -50,21 +58,23 @@
@include respond-to("small") {
@include flex-container(row, flex-start, center);
background: $light-default;
- border-bottom: 1px solid rgba(#000, 0.1);
- border-top: 1px solid $light-border;
- flex: 0 0 100%;
- height: $grid-unit * 3.6;
- order: 1;
- width: 100%;
+ height: $grid-unit * 3.5;
}
flex: 1;
position: relative;
- .expire-widget {
+ .expire-info {
+ display: block;
@include respond-to("small") {
display: none;
}
+ @include respond-to("large") {
+ display: none;
+ }
+ @media (min-width: 1260px) {
+ display: block;
+ }
}
}
@@ -72,16 +82,28 @@
.edit-shot-button {
position: relative;
}
-
@include flex-container(row, flex-end, center);
- @include respond-to("small") {
- flex-wrap: wrap;
- justify-content: flex-start;
- }
+ @include respond-to("large") {
+ background-color: $light-default;
+ justify-content: flex-end;
+ border: none;
+ flex: 1;
+ order: 0;
+ }
+ background-color: $white;
+ border-bottom: 1px solid rgba(#000, 0.1);
+ border-top: 1px solid $light-border;
+ flex: 0 0 100%;
+ flex-wrap: wrap;
+ justify-content: center;
+ order: 1;
}
.shot-info {
@include flex-container(column, center, flex-start);
+ @include respond-to("small") {
+ padding: 0 0 0 $grid-unit * 0.5;
+ }
color: $black;
padding: 0 0 0 $grid-unit;
@@ -96,20 +118,26 @@
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
- max-width: 600px;
}
.shot-title {
- @include respond-to("small") {
- font-size: 20px;
- line-height: 20px;
- padding-bottom: 4px;
+ @include respond-to("medium") {
+ max-width: 500px;
+ }
+ @include respond-to("large") {
+ font-size: 32px;
+ line-height: 39px;
+ max-width: 250px;
+ padding-bottom: 8px;
+ }
+ @media (min-width: 1260px) {
+ max-width: 500px;
}
-
- font-size: 28px;
font-weight: bold;
- line-height: 28px;
- padding-bottom: 8px;
+ font-size: 24px;
+ line-height: 29px;
+ max-width: 150px;
+ padding-bottom: 4px;
&.saving {
opacity: 0.7;
@@ -120,6 +148,9 @@
padding-right: 28px;
&:hover {
+ @include respond-to("large") {
+ background-size: 24px 24px;
+ }
background-image: url("/static/img/pencil.svg");
background-position: right 5px;
background-repeat: no-repeat;
@@ -130,10 +161,18 @@
.shot-subtitle {
@include flex-container(row, flex-start, center);
- font-size: 15px;
+ @include respond-to("large") {
+ font-size: 14px;
+ line-height: 17px;
+ }
+ font-size: 12px;
+ line-height: 15px;
}
.shot-title-input {
+ @include respond-to("large") {
+ max-width: 200px;
+ }
border-radius: $border-radius;
border: 1px solid $active-blue;
font-size: 24px;
@@ -142,6 +181,7 @@
margin: 0 0 4px -6px;
padding: 0 5px;
overflow: auto;
+ max-width: 100px;
}
.subtitle-link,
@@ -155,9 +195,9 @@
box-shadow: $stroke-box-shadow, $medium-box-shadow;
padding: 5px;
position: absolute;
+ top: 70px;
right: -30px;
text-align: center;
- top: 90px;
width: 150px;
z-index: 999;
@@ -198,72 +238,13 @@
.delete-confirmation-dialog {
&.right-align {
- top: 88px;
- }
-}
-
-.keep-for-form {
- @include flex-container(row, flex-start, center);
-
- select {
- -moz-appearance: none; //sass-lint:disable-line no-vendor-prefixes
- appearance: none;
- background-color: $light-default;
- background-image: url("/static/img/icon-dropdown.svg");
- background-position: right 8px top 8px;
- background-repeat: no-repeat;
- background-size: 10px auto;
- border-radius: $border-radius;
- border: 1px solid $light-border;
- color: $dark-default;
- cursor: pointer;
- font-size: 14px;
- font-weight: 400;
- height: 26px;
- margin-left: 8px;
- outline: none;
- padding: 0 24px 0 4px;
- position: relative;
- text-align: center;
- text-decoration: none;
- transition: background 150ms $bezier, border 150ms $bezier;
- user-select: none;
- white-space: nowrap;
-
- &:hover,
- &:focus {
- background-color: $light-hover;
- border-color: $light-border-active;
- }
-
- &:active {
- background-color: $light-active;
- border-color: $light-border-active;
+ @include respond-to("large") {
+ top: 78px;
}
- }
-
- .button,
- select {
- margin-right: 8px;
+ top:58px;
}
}
-.shot-title-input {
- border-radius: $border-radius;
- border: 1px solid $active-blue;
- font-size: 28px;
- font-weight: 300;
- height: 36px;
- margin: -4px 0 4px -6px;
- padding: 0 5px;
- overflow: auto;
-}
-
-.shot-subtitle {
- @include flex-container(row, flex-start, center);
- font-size: 15px;
-}
-
.clips {
@include flex-container(column, center, center);
position: relative;
@@ -319,12 +300,16 @@
}
.edit-highlight {
+ @include respond-to("large") {
+ left: 50px;
+ top: 25px;
+ }
background-image: url("../img/edit-highlight.svg");
height: 17px;
width: 17px;
position: absolute;
- left: 50px;
- top: 20px;
+ left: 30px;
+ top: 15px;
cursor: pointer;
}
@@ -408,7 +393,7 @@ body {
.editor-header {
@include respond-to("medium") {
- @include flex-container(row, space-between, stretch);
+ @include flex-container(row, space-between, stretch, wrap);
height: $grid-unit * 5;
}
@@ -422,6 +407,33 @@ body {
position: fixed;
width: 100%;
+ .shot-edit-main-actions {
+ @include respond-to("medium") {
+ @include flex-container(row, flex-start, center);
+ margin-right: 10px;
+ padding-top: 4px;
+ overflow: hidden;
+ }
+
+ @include respond-to("small") {
+ @include flex-container(row, flex-start, center);
+ background: $light-default;
+ border-bottom: 1px solid rgba(#000, 0.1);
+ border-top: 1px solid $light-border;
+ flex: 0 0 100%;
+ height: $grid-unit * 3.6;
+ order: 1;
+ width: 100%;
+ }
+
+ flex: 1;
+ position: relative;
+ }
+
+ .shot-edit-alt-actions {
+ @include flex-container(row, flex-end, center);
+ }
+
.button {
margin: $grid-unit * 0.25;
}
@@ -482,7 +494,7 @@ body {
z-index: 1;
@include respond-to("small") {
- top: $grid-unit * 4;
+ top: $grid-unit * 2;
}
}
diff --git a/static/css/home.scss b/static/css/home.scss
index b154073a2c..026db6bc3c 100644
--- a/static/css/home.scss
+++ b/static/css/home.scss
@@ -374,6 +374,11 @@ section .container {
}
@media (max-width: 768px) {
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ }
.banner {
background-image: url("../img/landing-screenshots_mobile.svg");
background-repeat: no-repeat;
diff --git a/static/css/partials/_header.scss b/static/css/partials/_header.scss
index f2b97c737f..06e22933a0 100644
--- a/static/css/partials/_header.scss
+++ b/static/css/partials/_header.scss
@@ -1,7 +1,7 @@
.header-panel {
@include respond-to("medium") {
- @include flex-container(row, space-between, center);
- height: $grid-unit * 4.8;
+ @include flex-container(row, center, center, wrap);
+ height: 100%;
}
@include respond-to("small") {
@@ -13,16 +13,30 @@
@include flex-container(row, center, center);
}
- display: flex;
- height: 96px;
background-color: $light-default;
+ display: flex;
+ height: 70px;
width: 100%;
.logo {
+ @include respond-to("small") {
+ max-width: $grid-unit * 10;
+ }
+
+ @include respond-to("large") {
+ height: $grid-unit * 4.8;
+ }
+ align-items: center;
display: flex;
- padding: 0 16px;
+ padding: 20px 0;
flex: 1;
+ height: $grid-unit * 3.5;
+
.screenshots-logo {
+ @include respond-to("small") {
+ background-position: center 5px;
+ width: $grid-unit * 9;
+ }
background-image: url("../img/landing-Screenshot-logo.svg");
background-repeat: no-repeat;
background-size: contain;
@@ -30,15 +44,14 @@
position: relative;
width: 318px;
}
-
- @include respond-to("small") {
- margin: $grid-unit auto;
- }
}
.alt-actions {
- display: flex;
+ @include respond-to("small") {
+ margin-right: 0;
+ }
align-items: center;
+ display: flex;
margin-right: $grid-unit * 1.5;
}
@@ -50,75 +63,43 @@
.nav-button {
@include flex-container(column, center, center);
- cursor: pointer;
- text-decoration: none;
- background-color: transparent;
- border: 0;
- outline: none;
- display: flex;
- flex-basis: 96px;
- font-size: 14px;
- font-weight: bold;
- height: 96px;
- width: 96px;
- text-align: center;
- background-size: 24px 24px;
- background-position: center 24px;
- background-repeat: no-repeat;
- &:active {
- padding-left: 8px;
- padding-right: 8px;
+ img {
+ width: 24px;
+ height: 24px;
}
- &:active,
- &:hover {
- background-color: $light-hover;
+ @include respond-to("large") {
+ flex-basis: 96px;
+ width: 96px;
+ height: 96px;
+ img {
+ width: 28px;
+ height: 28px;
+ }
}
- &.hidden {
- display: none;
- }
+ display: flex;
+ flex-basis: 60px;
+ height: 60px;
+ width: 60px;
+ border: none;
- &.icon-shots {
- background-image: url("../img/icon-shots.svg");
+ &:active,
+ &:hover {
+ background-color: $light-hover;
}
+ &.icon-shots,
&.icon-settings {
- background-image: url("../img/icon-settings.svg");
- }
-
- .icon-favorite {
- background-image: url("../img/icon-heart-outline.svg");
- }
-
- &.icon-trash {
- background-image: url("../img/icon-trash.svg");
- }
-
- &.icon-edit {
- background-image: url("../img/icon-pen.svg");
- }
-
- &.icon-copy {
- background-image: url("../img/icon-copy.svg");
- }
-
- &.icon-download {
- background-image: url("../img/icon-download.svg");
- }
-
- .icon-favorite {
- &.favorite {
- width: 24px;
- height: 24px;
- margin: 0 0 8px;
- background-size: 24px 24px;
-
- &.is-fav {
- background-image: url("../img/icon-heart.svg");
- }
+ @include respond-to("large") {
+ flex-basis: 96px;
+ height: 96px;
+ width: 96px;
}
+ flex-basis: 70px;
+ height: 70px;
+ width: 70px;
}
&.inactive {
@@ -133,23 +114,13 @@
text-overflow: ellipsis;
width: 96px;
}
-
- .favorite-text {
- &.favorite {
- margin-top: 0;
-
- &.is-fav {
- color: #b5007f;
- }
- }
- }
}
.nav-link {
@include flex-container(column, center, center);
color: $black;
border-right: 1px solid $light-border;
- height: 96px;
+ height: 70px;
&:active,
&:hover {
background-color: $light-hover;
diff --git a/static/css/partials/_partials.scss b/static/css/partials/_partials.scss
index 6bd6523f3f..eeb541a98a 100644
--- a/static/css/partials/_partials.scss
+++ b/static/css/partials/_partials.scss
@@ -10,5 +10,5 @@
@import "buttons";
@import "large-icon-block";
@import "share-panel";
-@import "header";
@import "theme";
+@import "header";