getting rid of all those ugly tables. i break you now
This commit is contained in:
Bryan Clark
Родитель
d6c4a85f7f
Коммит
fb93b71ede
203
share/index.html
203
share/index.html
|
|
@ -25,135 +25,90 @@
|
|||
<li class="settings"><a class="icon settings" href="#settings"><span class="name">settings</span></a></li>
|
||||
</ul>
|
||||
|
||||
<div id="twitter">
|
||||
<div class="entry">
|
||||
<form name="twitterSend" class="messageForm" action="#">
|
||||
<input type="hidden" name="domain" value="twitter.com" />
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="user">
|
||||
<div class="user inactive">
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Twitter User</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="thumb">
|
||||
<table class="thumb">
|
||||
<tr>
|
||||
<td class="image"><div class="thumb"><img class="thumb"/></div></td>
|
||||
<td>
|
||||
<div class="title">page title</div>
|
||||
<div class="description">page description</div>
|
||||
</td>
|
||||
</table>
|
||||
</td>
|
||||
<td class="message">
|
||||
<textarea class="message canonical" name="message"></textarea>
|
||||
</td>
|
||||
<td class="button">
|
||||
<div><button type="submit">share</button></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<div id="twitter" class="tab">
|
||||
<form name="twitterSend" class="messageForm" action="#">
|
||||
<input type="hidden" name="domain" value="twitter.com" />
|
||||
<div class="user inactive col">
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Twitter User</span>
|
||||
</div>
|
||||
<div class="thumb col">
|
||||
<div class="image"><img class="thumb"/></div>
|
||||
<div class="meta">
|
||||
<div class="title">page title</div>
|
||||
<div class="description">page description</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message col">
|
||||
<textarea class="message canonical" name="message"></textarea>
|
||||
</div>
|
||||
<div class="button col">
|
||||
<div><button type="submit">share</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="resultReason"> </div>
|
||||
</div>
|
||||
|
||||
<div id="facebook">
|
||||
<div class="entry">
|
||||
<form name="facebookSend" class="messageForm" action="#">
|
||||
<input type="hidden" name="domain" value="facebook.com" />
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="user">
|
||||
<div class="user inactive">
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Facebook User</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="thumb">
|
||||
<table class="thumb">
|
||||
<tr>
|
||||
<td class="image"><div class="thumb"><img class="thumb"/></div></td>
|
||||
<td>
|
||||
<div class="title">page title</div>
|
||||
<div class="description">page description</div>
|
||||
</td>
|
||||
</table>
|
||||
</td>
|
||||
<td class="message">
|
||||
<textarea class="message" name="message"></textarea>
|
||||
</td>
|
||||
<td class="button">
|
||||
<div><button>share</button></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="gmail">
|
||||
<div class="entry">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="user">
|
||||
<div class="user inactive">
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Gmail User</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="thumb">
|
||||
<table class="thumb">
|
||||
<tr>
|
||||
<td class="image"><div class="thumb"><img class="thumb"/></div></td>
|
||||
<td>
|
||||
<div class="title">page title</div>
|
||||
<div class="description">page description</div>
|
||||
</td>
|
||||
</table>
|
||||
</td>
|
||||
<td class="message">
|
||||
<div><input id="to" type="text" value="to"/></div>
|
||||
<div><input id="subject" type="text" value="subject"/></div>
|
||||
</td>
|
||||
<td class="message">
|
||||
<div><textarea class="message"></textarea></div>
|
||||
</td>
|
||||
<td class="button">
|
||||
<div><button>share</button></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="debug">
|
||||
<div class="entry">
|
||||
<button onclick="location = '#!close'">Close</button>
|
||||
<button onclick="$('#tabs').addClass('hidden');$('#statusSent').removeClass('hidden');">Show sent status</button>
|
||||
|
||||
<textarea id="debugOutput"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="settings">
|
||||
<div class="entry">
|
||||
<div>
|
||||
<button>Add Twitter</button>
|
||||
<button>Add Facebook</button>
|
||||
<div id="facebook" class="tab">
|
||||
<form name="facebookSend" class="messageForm" action="#">
|
||||
<input type="hidden" name="domain" value="facebook.com" />
|
||||
<div class="user inactive col">
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Facebook User</span>
|
||||
</div>
|
||||
<div>
|
||||
<button>Add Gmail</button>
|
||||
<button>Add FFound</button>
|
||||
<div class="thumb col">
|
||||
<div class="image"><img class="thumb"/></div>
|
||||
<div class="meta">
|
||||
<div class="title">page title</div>
|
||||
<div class="description">page description</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message col">
|
||||
<textarea class="message" name="message"></textarea>
|
||||
</div>
|
||||
<div class="button col">
|
||||
<div><button>share</button></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="gmail" class="tab">
|
||||
<div class="user inactive col">
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Gmail User</span>
|
||||
</div>
|
||||
<div class="thumb col">
|
||||
<div class="image"><img class="thumb"/></div>
|
||||
<div class="meta">
|
||||
<div class="title">page title</div>
|
||||
<div class="description">page description</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="addressing col">
|
||||
<div><input id="to" type="text" value="to"/></div>
|
||||
<div><input id="subject" type="text" value="subject"/></div>
|
||||
</div>
|
||||
<div class="message col">
|
||||
<textarea class="message"></textarea>
|
||||
</div>
|
||||
<div class="button col">
|
||||
<button>share</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="debug" class="tab">
|
||||
<button onclick="location = '#!close'">Close</button>
|
||||
<button onclick="$('#tabs').addClass('hidden');$('#statusSent').removeClass('hidden');">Show sent status</button>
|
||||
</div>
|
||||
|
||||
<div id="settings" class="tab">
|
||||
<div class="col">
|
||||
<button>Add Twitter</button>
|
||||
<button>Add Facebook</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button>Add Gmail</button>
|
||||
<button>Add FFound</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -54,6 +54,11 @@ a {
|
|||
border-bottom: 1px solid #ff5959;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 7px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul.nav {
|
||||
background-color: #ff5959;
|
||||
display: block;
|
||||
|
|
@ -172,83 +177,75 @@ ul.nav li.ui-tabs-selected a {
|
|||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td.user.inactive .username {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
td.user {
|
||||
width: 140px;
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td.thumb {
|
||||
width: 220px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
td.message {
|
||||
width: 300px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
td.button {
|
||||
padding: 1px 20px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
div.user {
|
||||
font-size: small;
|
||||
width: 140px;
|
||||
.col {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.user.inactive {
|
||||
.col.user {
|
||||
width: 140px;
|
||||
margin-left: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.col.thumb {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.col.addressing {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.col.message {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.col.button {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.user.inactive {
|
||||
opacity: 0.5;
|
||||
background: -moz-repeating-linear-gradient(top left -45deg, #aaa, #aaa 5px, #fff 5px, #fff 10px) #aaa no-repeat fixed;
|
||||
-moz-border-radius: 1%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.username {
|
||||
div.user .username {
|
||||
color: #444;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td.image {
|
||||
width: 90px;
|
||||
div.image,
|
||||
div.meta {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.thumb {
|
||||
border: 1px dashed #aaa;
|
||||
div.image {
|
||||
height: 70px;
|
||||
width: 90px;
|
||||
border: 1px dashed #aaa;
|
||||
}
|
||||
|
||||
.thumb .title,
|
||||
.thumb .description {
|
||||
.meta {
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.thumb .title {
|
||||
.meta .title {
|
||||
color: #3B5998;
|
||||
text-decoration: underline;
|
||||
font-size: small;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thumb .description {
|
||||
.meta .description {
|
||||
color: #808080;
|
||||
font-size: x-small;
|
||||
}
|
||||
|
||||
.entry {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 2px 15px;
|
||||
font-family: "helvetica neue", helvetica, arial, sans-serif;
|
||||
|
|
@ -257,6 +254,7 @@ button {
|
|||
background-image: -moz-linear-gradient(top,#fafafa 0%,#e6e6e6 100%);
|
||||
border: 1px solid #fff;
|
||||
outline: 1px solid #bebebe;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
textarea, input[type="text"] {
|
||||
|
|
@ -267,12 +265,12 @@ textarea, input[type="text"] {
|
|||
font-size:14px;
|
||||
line-height:24px;
|
||||
padding: 3px;
|
||||
margin: 0 7px;
|
||||
width: 100%;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
height: 28px;
|
||||
width: 220px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче