Merge pull request #222 from mozilla/ui

add footer
This commit is contained in:
Erica 2017-07-18 11:27:29 -04:00 committed by GitHub
commit 22b1c3a286
11 changed files with 231 additions and 40 deletions

View File

@ -32,20 +32,16 @@ $(document).ready(function() {
$('.percent-number').html(`${Math.floor(percent * 100)}`);
if (progress[1] < 1000000) {
$('.progress-text').html(
`${filename} (${(progress[0] / 1000).toFixed(1)}KB of
`${filename} (${(progress[0] / 1000).toFixed(1)}KB of
${(progress[1] / 1000).toFixed(1)}KB)`
);
} else if (progress[1] < 1000000000) {
$('.progress-text').html(
`${filename} (${(progress[0] / 1000000).toFixed(
1
)}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
`${filename} (${(progress[0] / 1000000).toFixed(1)}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
);
} else {
$('.progress-text').html(
`${filename} (${(progress[0] / 1000000).toFixed(
1
)}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
`${filename} (${(progress[0] / 1000000).toFixed(1)}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
);
}
//on complete

View File

@ -11,20 +11,11 @@ html {
}
body {
height: 100%;
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
font-size: 15px;
color: #858585;
}
#all {
.all {
padding-top: 12%;
overflow-y: scroll;
}
@ -33,6 +24,10 @@ input, select, textarea, button {
font-family: inherit;
}
a {
text-decoration: none;
}
span {
cursor: pointer;
}
@ -371,7 +366,6 @@ tbody {
justify-content: center;
align-items: center;
line-height: 1;
text-decoration: none;
}
#dl-firefox-text {
@ -442,3 +436,45 @@ tbody {
width: 283px;
height: 196px;
}
/* footer */
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
font-size: 15px;
display: flex;
align-items: flex-end;
}
.mozilla-logo {
width: 112px;
height: 32px;
margin-bottom: -5px;
}
.legal-links > a {
margin-right: 30px;
color: #858585;
}
.legal-links > a:visited {
color: #858585;
}
.social-links {
display: flex;
justify-content: flex-end;
flex: 1;
}
.social-links > a {
margin-left: 30px;
}
.github, .twitter {
width: 32px;
height: 32px;
margin-bottom: -5px;
}

View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="438.549px" height="438.549px" viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;"
xml:space="preserve">
<g>
<path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365
c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63
c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996
c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559
c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559
c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997
c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136
c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41
c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126
c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994
c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849
c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24
c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146
c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995
c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906
C438.536,184.851,428.728,148.168,409.132,114.573z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 578.55 185.54">
<path d="M503.5 117.21c0 4.92 2.37 8.82 9 8.82 7.8 0 16.11-5.6 16.61-18.31a80.86 80.86 0 0 0-11-1c-7.83-.01-14.61 2.19-14.61 10.49z"/>
<path d="M0 0v185.54h578.55V0zm163.78 139.93h-32V96.87c0-13.22-4.41-18.31-13.05-18.31-10.51 0-14.75 7.46-14.75 18.14v26.64h10.12v16.61h-32V96.87c0-13.22-4.4-18.31-13.05-18.31-10.51 0-14.75 7.46-14.75 18.14v26.64h14.54v16.61H22.22v-16.61h10.17V80.09h-11V63.48h32.87V75c4.58-8.13 12.55-13.05 23.22-13.05 11 0 21.19 5.26 24.92 16.45 4.24-10.17 12.88-16.45 24.92-16.45 13.73 0 26.28 8.31 26.28 26.45v34.94h10.17zm48.65 1.69c-23.56 0-39.84-14.41-39.84-38.82 0-22.38 13.56-40.86 41-40.86s40.86 18.48 40.86 39.84c.02 24.42-17.61 39.85-42.02 39.85zm121.72-1.69h-66.8l-2.2-11.53 42-48.32h-23.9l-3.39 11.87-15.77-1.69 2.71-26.79H334L335.69 75l-42.4 48.34H318l3.56-11.87 17.29 1.69zm41.36 0h-22.89v-27.46h22.89zm0-49h-22.89V63.48h22.89zm12 49L420.6 23.34h21.53l-33.06 116.59zm44.42 0L465 23.34h21.53l-33.04 116.59zm113.92 1.69c-10.17 0-15.76-5.94-16.78-15.26-4.41 7.8-12.21 15.26-24.58 15.26-11 0-23.56-5.94-23.56-21.87 0-18.82 18.14-23.22 35.6-23.22a100.23 100.23 0 0 1 12.55.68v-2.54c0-7.8-.17-17.12-12.55-17.12-4.58 0-8.14.34-11.7 2.2L502 90.6l-17.46-1.87 3.39-19.83c13.39-5.43 20.17-7 32.72-7 16.45 0 30.35 8.48 30.35 25.94v33.23c0 4.41 1.69 5.94 5.26 5.94a11.5 11.5 0 0 0 3.22-.51l.17 11.53a29.57 29.57 0 0 1-13.77 3.6z"/>
<path d="M213.27 78.73c-11.19 0-18.14 8.3-18.14 22.72 0 13.22 6.1 23.39 18 23.39 11.36 0 18.82-9.15 18.82-23.73-.03-15.43-8.33-22.38-18.68-22.38z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="30px" height="27px" viewBox="0 0 30 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
<title>send logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Send_logo_FINAL" transform="translate(-30.000000, -124.000000)" stroke="#3E3D40">
<g id="PageShots-Copy" transform="translate(31.000000, 116.000000)">
<g id="icon_01-copy" transform="translate(14.000000, 22.000000) rotate(-360.000000) translate(-14.000000, -22.000000) translate(0.000000, 9.000000)">
<g id="send-logo">
<g id="icon" transform="translate(0.800000, 0.376744)">
<path d="M20.5639947,18.6120569 L18.4111528,16.5092811 C17.681129,15.7962346 16.5375329,15.7519656 15.7459993,16.3582923 L19.1476513,19.6816267 C19.3645542,19.8926948 19.3645542,20.2357793 19.1476513,20.4468474 L16.6824046,22.8547628 C16.466311,23.0666214 16.1150579,23.0666214 15.898155,22.8547628 L12.4997403,19.5361716 C11.9137789,20.3077164 11.9712419,21.3986301 12.6883163,22.0990284 L14.8411582,24.2018042 C15.6286451,24.9717679 16.9065915,24.9717679 17.6956971,24.2018042 L20.5639947,21.4002111 C21.3522909,20.6302474 21.3522909,19.3820207 20.5639947,18.6120569 M6.97033593,13.3685562 C6.7542424,13.5804149 6.7542424,13.9227088 6.97033593,14.1345674 L10.3687506,17.4539492 C9.5788357,18.0270742 8.46113846,17.9701569 7.74406406,17.2705492 L5.59122218,15.1677734 C4.80292594,14.3970191 4.80292594,13.149583 5.59122218,12.3788287 L8.45951979,9.57723567 C9.24862536,8.80806242 10.5265717,8.80806242 11.3140586,9.57723567 L13.4669005,11.6800115 C14.1969243,12.393058 14.2422473,13.5100588 13.6214843,14.2831847 L10.2198322,10.9606408 C10.0029294,10.7495727 9.65248555,10.7495727 9.43558269,10.9606408 L6.97033593,13.3685562 Z M16.4342612,19.0505568 C16.7507128,19.3596491 16.7507128,19.8592559 16.4342612,20.1683482 C16.1178097,20.4774404 15.6063074,20.4774404 15.2898558,20.1683482 L9.68922955,14.697969 C9.37277798,14.3896673 9.37277798,13.8892699 9.68922955,13.5801777 C10.0056811,13.2710855 10.5171834,13.2710855 10.833635,13.5801777 L16.4342612,19.0505568 Z" id="Fill-1" stroke-width="0.61812" fill="#3E3D40"></path>
<path d="M4.26479492,19.2293105 C1.35166016,17.6433242 0.277490234,15.5730807 0.277490234,12.7617324 C0.277490234,9.95038403 2.5418457,6.33646439 6.06289062,6.47253134 C6.16279736,6.47639213 6.61272996,6.46664776 6.71166992,6.47253134 C7.60652694,3.20243504 9.22035098,0.119592569 13.6099121,0.119592569 C18.1668756,0.119592569 20.9464355,3.83546512 20.3599121,7.90445358 C20.4390641,7.89974671 21.5923993,8.07389043 21.6708008,8.09019917 C24.7664551,8.73414449 26.585498,11.3654433 26.585498,13.2704726 C26.585498,15.1755019 26.4779785,16.2990371 24.5618164,18.2176894" id="Stroke-4" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.8 KiB

View File

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path style="fill:#010002;" d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411
c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513
c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101
c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104
c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194
c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485
c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -12,7 +12,7 @@
{{/if}}
</head>
<body>
<div>
<div class="all">
<div id="download">
{{#if filename}}
<div id="download-page-one">
@ -51,7 +51,6 @@
Try Firefox Send
</div>
{{else}}
<div class="title">
This link has expired or never existed in the first place.
</div>

View File

@ -14,7 +14,8 @@
{{/if}}
</head>
<body>
<div id="all">
<div class="all">
<div id="page-one">
<div class="title">
Private, Encrypted File Sharing
@ -32,8 +33,8 @@
<label for="file-upload" id="browse" title="Upload file">Select a file on your computer</label>
<input id="file-upload" type="file" name="fileUploaded" />
</form>
</div>
<div id="file-list">
<table id="uploaded-files">
<thead>
@ -105,23 +106,23 @@
</div>
</div>
</div>
<div id="unsupported-browser">
<div class="title">
Your browser is not supported.
</div>
<div class="description">
Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
</div>
<a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">
<img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/>
<div id="dl-firefox-text">Firefox<br><span>Free Download</span></div>
</a>
<div class="unsupported-description">
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
<div id="unsupported-browser">
<div class="title">
Your browser is not supported.
</div>
<div class="description">
Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
</div>
<a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">
<img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/>
<div id="dl-firefox-text">Firefox<br><span>Free Download</span></div>
</a>
<div class="unsupported-description">
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
</div>
</div>
</div>
</div>
<!-- <div class="footer"><img src="/resources/mozilla-logo.jpg"/>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div> -->
</body>
</html>

View File

@ -1 +1,15 @@
{{{body}}}
{{{body}}}
<div class="footer">
<div class="legal-links">
<a href="https://www.mozilla.org"><img class="mozilla-logo" src="/resources/mozilla-logo.svg"/></a>
<a href="https://www.mozilla.org/about/legal/">Legal</a>
<a href="https://testpilot.firefox.com/about">About Test Pilot</a>
<a href="https://testpilot.firefox.com/privacy">Privacy</a>
<a href="https://testpilot.firefox.com/terms">Terms</a>
<a href="https://www.mozilla.org/en-US/privacy/websites/#cookies">Cookies</a>
</div>
<div class="social-links">
<a href="https://github.com/mozilla/testpilot" target="_blank"><img class="github" src="/resources/github-icon.svg"/></a>
<a href="https://twitter.com/FxTestPilot" target="_blank"><img class="twitter" src="/resources/twitter-icon.svg"/></a>
</div>
</div>