Merge pull request #302 from youwenliang/ux-tweak

UX Refine WIP
This commit is contained in:
Danny Coates 2017-07-25 11:42:25 -07:00 committed by GitHub
commit 0761fcf902
4 changed files with 105 additions and 18 deletions

View File

@ -8,10 +8,12 @@ html {
Arial,
sans-serif;
font-weight: 200;
background-size: 100%;
background-size: 110%;
background-repeat: no-repeat;
background-position: center top;
height: 100%;
max-width: 1440px;
margin: auto;
}
body {
@ -37,6 +39,11 @@ body {
align-items: center;
}
.send-logo > a {
display: flex;
flex-direction: row;
}
.site-title {
color: #3e3d40;
font-size: 32px;
@ -44,6 +51,8 @@ body {
margin: 0;
position: relative;
top: -1px;
letter-spacing: 1px;
margin-left: 8px;
}
.site-subtitle {
@ -65,9 +74,9 @@ body {
.feedback {
background-color: #0297f8;
background-image: url('resources/feedback.svg');
background-position: 4px 6px;
background-position: 2px 4px;
background-repeat: no-repeat;
background-size: 14px;
background-size: 18px;
border-radius: 3px;
border: 1px solid #0297f8;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
@ -78,12 +87,20 @@ body {
font-size: 12px;
line-height: 12px;
opacity: 0.9;
padding: 6px 6px 5px 20px;
padding: 5px;
overflow: hidden;
width: 12px;
text-indent: 17px;
transition: all 150ms ease-in-out;
}
.feedback:hover,
.feedback:focus {
width: 57px;
text-indent: 2px;
padding: 5px 5px 5px 20px;
background-color: #0287e8;
transition: all 150ms ease-in-out;
}
.feedback:active {
@ -97,6 +114,8 @@ body {
justify-content: flex-start;
max-width: 630px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
width: 96%;
}
@ -112,6 +131,7 @@ a {
}
/** page-one **/
.title {
font-size: 33px;
line-height: 40px;
@ -163,6 +183,10 @@ a {
text-decoration: none;
}
.link:hover {
color: #0287e8;
}
#upload-text {
font-size: 22px;
color: #737373;
@ -391,8 +415,9 @@ tbody {
font-family: 'SF Pro Display', sans-serif;
letter-spacing: 0;
line-height: 23px;
padding-left: 5px;
padding-right: 5px;
font-weight: 300;
padding-left: 10px;
padding-right: 10px;
}
#link:disabled {
@ -414,6 +439,10 @@ tbody {
white-space: nowrap;
}
#copy-btn:hover {
background-color: #0287e8;
}
#copy-btn:disabled {
background: #05a700;
border: 1px solid #05a700;
@ -433,6 +462,10 @@ tbody {
color: #313131;
}
#delete-file:hover {
background: #efeff1;
}
.send-new {
font-size: 15px;
margin: auto;
@ -442,6 +475,12 @@ tbody {
text-decoration: underline;
}
.send-new:hover,
.send-new:focus,
.send-new:active {
color: #0287e8;
}
/* upload-error */
#upload-error {
display: flex;
@ -457,8 +496,7 @@ tbody {
}
#upload-error-img {
margin-bottom: 90px;
margin-top: 5px;
margin: 51px 0 71px;
}
/* unsupported-browser */
@ -528,6 +566,10 @@ tbody {
cursor: pointer;
}
#download-btn:hover {
background-color: #0287e8;
}
#download-btn:disabled {
background: #47b04b;
cursor: auto;
@ -580,7 +622,11 @@ tbody {
font-size: 15px;
display: flex;
align-items: flex-end;
padding: 50px 10px 10px;
flex-direction: row;
justify-content: space-between;
padding: 50px 31px 41px;
width: 100%;
box-sizing: border-box;
}
.mozilla-logo {
@ -589,9 +635,22 @@ tbody {
margin-bottom: -5px;
}
.legal-links {
max-width: 600px;
width: 80vw;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.legal-links > a {
margin-right: 30px;
color: #858585;
opacity: 0.9;
}
.legal-links > a:hover {
opacity: 1;
}
.legal-links > a:visited {
@ -600,12 +659,16 @@ tbody {
.social-links {
display: flex;
justify-content: flex-end;
flex: 1;
justify-content: space-between;
width: 94px;
}
.social-links > a {
margin-left: 30px;
opacity: 0.9;
}
.social-links > a:hover {
opacity: 1;
}
.github,
@ -615,7 +678,7 @@ tbody {
margin-bottom: -5px;
}
@media (max-device-width: 768px) {
@media (max-device-width: 768px), (max-width: 768px) {
.description {
margin: 0 auto 25px;
}
@ -628,17 +691,38 @@ tbody {
font-size: 18px;
}
.footer {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
max-width: 630px;
margin: auto;
}
.mozilla-logo {
margin-left: -7px;
}
.legal-links {
flex-direction: column;
margin: auto;
width: 100%;
max-width: 100%;
}
.legal-links > * {
display: block;
padding: 10px 0;
align-self: flex-start;
}
.social-links {
margin-top: 20px;
align-self: flex-start;
}
}
@media (max-device-width: 520px) {
@media (max-device-width: 520px), (max-width: 520px) {
.header {
flex-direction: column;
justify-content: flex-start;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@ -9,14 +9,17 @@
<meta name="defaultLanguage" content="en-US">
<meta name="availableLanguages" content="en-US">
<link rel="icon" type="image/png" href="/resources/favicon-32x32.png" sizes="32x32" />
<link rel="localization" href="/locales/{locale}/send.ftl">
<script defer src="/l20n.min.js"></script>
</head>
<body>
<header class="header">
<div class="send-logo">
<img src="/resources/send_logo.svg" alt="Send"/>
<h1 class="site-title">Send</h1>
<a href="/">
<img src="/resources/send_logo.svg" alt="Send"/><h1 class="site-title">Send</h1>
</a>
<div class="site-subtitle">
<a href="https://testpilot.firefox.com" target="_blank">Firefox Test Pilot</a>
<div data-l10n-id="siteSubtitle">web experiment</div>