зеркало из https://github.com/mozilla/fxa.git
Merge remote-tracking branch 'origin/ui-overhaul' into oauth
Conflicts: static/index.html static/js/123done.js
This commit is contained in:
Zachary Carter
Коммит
d8418e13f3
|
|
@ -1,12 +1,12 @@
|
|||
*, *:before, *:after {
|
||||
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: #F2F2F2;
|
||||
color: #424f59;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size:85%;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -16,89 +16,185 @@ a {
|
|||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width:960px;
|
||||
min-width:320px;
|
||||
padding:0 20px;
|
||||
max-width: 960px;
|
||||
min-width: 320px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
#splash {
|
||||
display: none;
|
||||
font-family: 'Alegreya Sans', sans-serif;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
#splash header{
|
||||
background: url(../img/landing.jpg) center center;
|
||||
background-size: cover;
|
||||
font-weight: 300;
|
||||
height: 640px;
|
||||
margin: 0 0 100px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#splash-logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
height: 250px;
|
||||
padding: 170px 0 10px 0;
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
#splash h1 {
|
||||
color: #fff;
|
||||
font-size: 72px;
|
||||
font-weight:100;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#splash h2 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.two-col {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
clear: both;
|
||||
margin: 50px auto;
|
||||
padding: 0 0 50px 0;
|
||||
text-align: center;
|
||||
width: 720px;
|
||||
}
|
||||
|
||||
.left-col {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.right-col {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.two-col h3 {
|
||||
font-size: 42px;
|
||||
font-weight: 300;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.two-col p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sign-in-button {
|
||||
background: #5FAD47;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
margin: 20px auto;
|
||||
padding: 15px 90px;
|
||||
}
|
||||
|
||||
#lists {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#header-main {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
padding: 10px 0;
|
||||
box-shadow: 0px 2px 2px #ccc;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
top:0;
|
||||
width:100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
#logout {
|
||||
background: #5FAD47;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
display: block;
|
||||
float:right;
|
||||
font-size: 14px;
|
||||
margin: 7px 0;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
#header-main h1 {
|
||||
float: left;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
margin:0;
|
||||
font-size:24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 0 0 10px;
|
||||
position: relative;
|
||||
top: -8px;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight:lighter;
|
||||
|
||||
}
|
||||
|
||||
#footer-main {
|
||||
background: url(../img/grad@2x.png) repeat-x #304050;
|
||||
background-size: 5px 20px;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
padding:10px 0 0 0;
|
||||
margin: 0;
|
||||
padding: 10px 0 0 0;
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#footer-main p {
|
||||
font-size: .8em;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width:36px;
|
||||
height:35px;
|
||||
background: url(../img/logo@2x.png) no-repeat center center;
|
||||
background-size: 36px 34px;
|
||||
position: relative;
|
||||
margin:5px auto 0 auto;
|
||||
display:inline-block;
|
||||
background: url(../img/logo@2x.png) no-repeat center center;
|
||||
background-size: 36px 34px;
|
||||
display: inline-block;
|
||||
height: 35px;
|
||||
margin: 5px auto 0 auto;
|
||||
position: relative;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
div.logo {
|
||||
display: block;
|
||||
background-size: 26px 25px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.todo {
|
||||
}
|
||||
|
||||
.todo h3 {
|
||||
margin:0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.todo .container {
|
||||
background: #fff;
|
||||
box-shadow: 0px 2px 2px #ccc;
|
||||
border-radius: 3px;
|
||||
padding:40px;
|
||||
box-shadow: 0px 2px 2px #ccc;
|
||||
margin: 84px auto;
|
||||
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
#addform {
|
||||
width:100%;
|
||||
margin: 0 0 5px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul#todolist {
|
||||
|
|
@ -112,25 +208,25 @@ ul#donelist {
|
|||
}
|
||||
|
||||
#todolist li {
|
||||
list-style: none;
|
||||
padding: 15px 50px;
|
||||
box-shadow: 0px 2px 2px #ccc;
|
||||
margin: 0 0 5px 0;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #8a9ba8;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
background: url(../img/todo-item@2x.png) no-repeat 16px center;
|
||||
background-size: 20px 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #8a9ba8;
|
||||
box-shadow: 0px 2px 2px #ccc;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
margin: 0 0 5px 0;
|
||||
padding: 15px 50px;
|
||||
}
|
||||
|
||||
#todolist li:hover {
|
||||
background-image: url(../img/todo-item-hover@2x.png);
|
||||
background-color: #eee;
|
||||
background-image: url(../img/todo-item-done@2x.png);
|
||||
}
|
||||
|
||||
#todolist li.done {
|
||||
background-image: url(../img/todo-item-done@2x.png);
|
||||
background-image: url(../img/todo-item-hover@2x.png);
|
||||
}
|
||||
|
||||
#todolist li.can-delete:hover {
|
||||
|
|
@ -138,12 +234,17 @@ ul#donelist {
|
|||
}
|
||||
|
||||
.todo input {
|
||||
padding: 8px 20px;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.todo input {
|
||||
|
||||
}
|
||||
|
||||
#donelistwrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#donelist {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -153,59 +254,54 @@ ul#donelist {
|
|||
}
|
||||
|
||||
.todo input[type='text'] {
|
||||
border:1px solid #8a9ba8;
|
||||
border-top-left-radius:2px;
|
||||
border-bottom-left-radius:2px;
|
||||
margin:0;
|
||||
float:left;
|
||||
width:85%;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
border: 1px solid #8a9ba8;
|
||||
box-shadow: 0px 1px 1px #eee inset;
|
||||
|
||||
float: left;
|
||||
margin: 0;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.todo input[type='text']:hover,
|
||||
.todo input[type='submit']:hover
|
||||
{
|
||||
{
|
||||
border-color: #424F59;
|
||||
}
|
||||
|
||||
.todo input[type='text']:focus,
|
||||
.todo input[type='submit']:focus
|
||||
{
|
||||
border-color: #0095DD;
|
||||
outline:none;
|
||||
{
|
||||
border-color: #0095DD;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.todo input[type='submit'] {
|
||||
border: 1px solid #8a9ba8;
|
||||
border-left:none;
|
||||
background: #fff;
|
||||
border-top-right-radius:2px;
|
||||
border-bottom-right-radius:2px;
|
||||
margin:0;
|
||||
width:15%;
|
||||
|
||||
border-bottom-right-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
border: 1px solid #8a9ba8;
|
||||
border-left: none;
|
||||
margin: 0;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.container {
|
||||
width:96%;
|
||||
margin: 0 auto;
|
||||
width: 96%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
|
||||
.todo input[type='text'] {
|
||||
width:80%;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.todo input[type='submit'] {
|
||||
width:20%;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
|
|
@ -215,38 +311,42 @@ ul#donelist {
|
|||
}
|
||||
|
||||
#header-main {
|
||||
box-shadow: none;
|
||||
background: #F2F2F2;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.todo .container {
|
||||
width:100%;
|
||||
padding: 10px;
|
||||
box-shadow: none;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -moz-min-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -moz-min-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
|
||||
#logo {
|
||||
background-image: url(../img/logo@2x.png);
|
||||
#logo {
|
||||
background-image: url(../img/logo@2x.png);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
.clearfix { display: inline-block; }
|
||||
/* start commented backslash hack \*/
|
||||
* html .clearfix { height: 1%; }
|
||||
.clearfix { display: block; }
|
||||
/* close commented backslash hack */
|
||||
Двоичный файл не отображается.
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 9.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 100 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>app</key>
|
||||
<string>com.bohemiancoding.sketch</string>
|
||||
<key>build</key>
|
||||
<integer>5355</integer>
|
||||
<key>commit</key>
|
||||
<string>b7d299b0a34651d1a0e066786b75aa36168d5809</string>
|
||||
<key>fonts</key>
|
||||
<array/>
|
||||
<key>length</key>
|
||||
<integer>139967</integer>
|
||||
<key>version</key>
|
||||
<integer>18</integer>
|
||||
</dict>
|
||||
</plist>
|
||||
|
|
@ -0,0 +1 @@
|
|||
18
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.7 MiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.2 KiB |
|
|
@ -7,32 +7,64 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="firefox-accounts" content="supported">
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
|
||||
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:100,300' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="bower_components/normalize-css/normalize.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/main.css" type="text/css">
|
||||
<script src="bower_components/modernizr/modernizr.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id='splash'>
|
||||
<header>
|
||||
<img src="img/transparent-logo.png" id="splash-logo" alt="123done-logo" width='72' height ='70'>
|
||||
<h1>123 Done</h1>
|
||||
<h2>The First Step to Greatness</h2>
|
||||
<button class="btn btn-large btn-info btn-persona sign-in-button signup" type="submit">Get Started</button>
|
||||
<button class="btn btn-large btn-info btn-persona sign-in-button signin" type="submit">Sign In</button>
|
||||
</header>
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="two-col clearfix">
|
||||
<div class="left-col">
|
||||
<h3>Make Todo Lists</h3>
|
||||
<p>With 123 Done, you can make and manage beautiful, world-class todo lists.</p>
|
||||
</div>
|
||||
<div class="right-col"><img src="img/list@2x.png"="123done-logo"></div>
|
||||
</div>
|
||||
<div class="two-col clearfix">
|
||||
<div class="left-col"><img src="img/growth@2x.png"="123done-logo"></div>
|
||||
<div class="right-col">
|
||||
<h3>Discover Yourself</h3>
|
||||
<p>Explore patterns in the way you work and improve your routines.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two-col clearfix">
|
||||
<div class="right-col">
|
||||
<h3>Do The Impossible</h3>
|
||||
<p>Achieve your dreams.</p>
|
||||
</div>
|
||||
<div class="right-col"><img src="img/rocket@2x.png"="123done-logo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="lists">
|
||||
<header id="header-main">
|
||||
<div class="container">
|
||||
<h1><span class="logo"></span><span class="title">123Done</span></h1>
|
||||
<button id="logout">logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="todo">
|
||||
<div class="container">
|
||||
|
||||
<div class="preroll">
|
||||
|
||||
<div class="preroll">
|
||||
<ul id="signinhere" style="font-size: 15pt">
|
||||
<p>Sign in to get started making todo lists!</p>
|
||||
<button class="btn btn-large btn-info btn-persona signin" type="submit">
|
||||
<i class="icon-persona-large"></i> Sign in
|
||||
</button>
|
||||
<button class="btn btn-large btn-info btn-persona signup" type="submit">
|
||||
<i class="icon-persona-large"></i> Sign up
|
||||
</button>
|
||||
</ul>
|
||||
<p>Sign in to get started making todo lists!</p>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3>To Do:</h3>
|
||||
|
|
@ -43,14 +75,15 @@
|
|||
<input class="btn" id="addtask" type="submit" value="Add">
|
||||
</div>
|
||||
</form>
|
||||
<ul id="todolist">
|
||||
<ul id="todolist">
|
||||
<div id="donelistwrapper">
|
||||
<h3>Done:</h3>
|
||||
<ul id="donelist"></ul>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<h3>Done:</h3>
|
||||
<ul id="donelist"></ul>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer id="footer-main">
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -15,11 +15,17 @@ $(document).ready(function() {
|
|||
function updateUI(email) {
|
||||
$("ul.loginarea li").css('display', 'none');
|
||||
if (email) {
|
||||
console.log(email);
|
||||
$('#loggedin span').text(email);
|
||||
$('#loggedin').css('display', 'block');
|
||||
$("#splash").hide();
|
||||
$("#lists").slideDown(500);
|
||||
} else {
|
||||
$('#loggedin span').text('');
|
||||
$('#loggedout').css('display', 'block');
|
||||
$("#splash").show();
|
||||
$("#lists").hide();
|
||||
|
||||
}
|
||||
$("button").removeAttr('disabled').css('opacity', '1');
|
||||
}
|
||||
|
|
@ -41,6 +47,9 @@ $(document).ready(function() {
|
|||
updateUI(loggedInEmail);
|
||||
updateListArea(loggedInEmail);
|
||||
|
||||
$("#splash").show();
|
||||
$("#lists").hide();
|
||||
|
||||
// clear items from the dom at logout
|
||||
$("#todolist > li").remove();
|
||||
State.save();
|
||||
|
|
@ -63,7 +72,7 @@ $(document).ready(function() {
|
|||
});
|
||||
|
||||
// upon click of logout link navigator.id.logout()
|
||||
$("#loggedin a").click(function(ev) {
|
||||
$("#logout").click(function(ev) {
|
||||
ev.preventDefault();
|
||||
logout();
|
||||
});
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче