зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1724970 - CTA Only variant r=thecount
Differential Revision: https://phabricator.services.mozilla.com/D122497
This commit is contained in:
Gavin Lazar Suntop
Родитель
7d7b1585e9
Коммит
7fc511eb30
|
|
@ -1248,6 +1248,12 @@ AboutReader.prototype = {
|
|||
|
||||
// TODO: Show the corresponding CTA version. This is just a placeholder visualization.
|
||||
elPocketCTAWrapper.classList.add(`pocket-cta-container-${ctaVersion}`);
|
||||
|
||||
this._doc
|
||||
.querySelector(`.pocket-dismiss-cta`)
|
||||
.addEventListener(`click`, e => {
|
||||
elPocketCTAWrapper.hidden = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
|
||||
<meta name="viewport" content="width=device-width; user-scalable=0" />
|
||||
<link rel="stylesheet" href="chrome://global/skin/aboutReader.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="chrome://global/skin/aboutReaderPocket.css" type="text/css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -69,8 +70,17 @@
|
|||
<div class="reader-message"></div>
|
||||
</div>
|
||||
<div aria-owns="toolbar"></div>
|
||||
</div>
|
||||
|
||||
<div id="pocket-cta-container" hidden></div>
|
||||
<div id="pocket-cta-container" hidden>
|
||||
<div class="pocket-cta-inner" id="pocket-cta-only">
|
||||
<div class="pocket-cta">
|
||||
<header class="pocket-cta-header">Save anything from across the web in Pocket, your personal library.</header>
|
||||
<p class="pocket-cta-subhead">As part of the Firefox family, Pocket provides a quiet, calm space that’s perfect for reading. It strips away all the distractions of the internet so you can really focus.</p>
|
||||
<a href="https://getpocket.com/signup" class="pocket-button pocket-sign-up"><strong>Sign Up</strong> - it's free</a>
|
||||
</div>
|
||||
<button class="pocket-dismiss-cta"></button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
#pocket-cta-container {
|
||||
box-shadow: 0 2px 8px var(--toolbar-box-shadow);
|
||||
margin: calc(var(--body-padding) * -1);
|
||||
margin-top: 20px;
|
||||
padding: 24px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#pocket-cta-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pocket-cta-container-cta-only #pocket-cta-only {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pocket-cta {
|
||||
padding-inline-start: 90px;
|
||||
background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat 16px 4px;
|
||||
}
|
||||
|
||||
.pocket-cta-inner {
|
||||
width: 936px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.pocket-cta-header {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.pocket-button {
|
||||
background: #008078;
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
color: #FBFBFE;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
.pocket-dismiss-cta {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
inset-inline-end: 80px;
|
||||
top: 80px;
|
||||
border: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: no-repeat center/contain url("chrome://global/skin/icons/close.svg");
|
||||
}
|
||||
|
||||
/* Medium breakpoint */
|
||||
@media (max-width: 1128px) {
|
||||
.pocket-cta-inner {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.pocket-dismiss-cta {
|
||||
inset-inline-end: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small breakpoint */
|
||||
@media (max-width: 790px) {
|
||||
.pocket-cta-inner {
|
||||
width: 330px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pocket-cta-header,
|
||||
.pocket-cta-subhead {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.pocket-cta {
|
||||
padding: 66px 0 0;
|
||||
background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat center 0;
|
||||
}
|
||||
|
||||
.pocket-button {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.pocket-dismiss-cta {
|
||||
inset-inline-end: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css)
|
||||
skin/classic/global/aboutNetworking.css (../../shared/aboutNetworking.css)
|
||||
skin/classic/global/aboutReader.css (../../shared/aboutReader.css)
|
||||
skin/classic/global/aboutReaderPocket.css (../../shared/aboutReaderPocket.css)
|
||||
skin/classic/global/aboutRights.css (../../shared/aboutRights.css)
|
||||
skin/classic/global/aboutLicense.css (../../shared/aboutLicense.css)
|
||||
skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css)
|
||||
|
|
@ -98,6 +99,7 @@
|
|||
skin/classic/global/reader/RM-Serif.svg (../../shared/reader/RM-Serif.svg)
|
||||
skin/classic/global/reader/RM-Minus-24x24.svg (../../shared/reader/RM-Minus-24x24.svg)
|
||||
skin/classic/global/reader/RM-Plus-24x24.svg (../../shared/reader/RM-Plus-24x24.svg)
|
||||
skin/classic/global/reader/RM-Pocket-Glyph.svg (../../shared/reader/RM-Pocket-Glyph.svg)
|
||||
skin/classic/global/reader/RM-Type-Controls-24x24.svg (../../shared/reader/RM-Type-Controls-24x24.svg)
|
||||
skin/classic/global/reader/RM-Type-Controls-Arrow.svg (../../shared/reader/RM-Type-Controls-Arrow.svg)
|
||||
skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg (../../shared/reader/RM-Content-Width-Minus-42x16.svg)
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 20 KiB |
Загрузка…
Ссылка в новой задаче