twisterarmy
/
twister-html
mirror of https://github.com/twisterarmy/twister-html.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

add button to switch beetween reply and retransmit on the fly; fix of modal prompt CSS

master
Simon Grim 9 years ago
parent
dd41d62e49
commit
b12d3d450e
9 changed files with 143 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      css/style.css
  2. 31
      following.html
  3. 31
      home.html
  4. 57
      js/interface_common.js
  5. 26
      js/interface_localization.js
  6. 43
      theme_calm/css/style.css
  7. 16
      theme_nin/css/style.css
  8. 2
      theme_nin/sass/_postboard.sass
  9. 12
      theme_nin/sass/style.sass

36
css/style.css
Unescape View File

@ -1091,13 +1091,13 @@ ol.toptrends-list { @@ -1091,13 +1091,13 @@ ol.toptrends-list {
text-align: right;
height: 23px;
}
.post-interactions span,
.post-expand
{
.post-interactions span, .post-expand, .prompt-wrapper .switch-mode {
color: #e34f42;
cursor: pointer;
font-size: 12px;
font-size: 11px;
}
.post-expand
{
position: absolute;
@ -1702,12 +1702,14 @@ ol.toptrends-list { @@ -1702,12 +1702,14 @@ ol.toptrends-list {
}
.prompt-wrapper .modal-buttons {
padding: 10px;
margin: 4px 16px;
text-align: right;
}
.prompt-wrapper .modal-buttons button:last-child {
padding: 5px 20px;
.prompt-wrapper .switch-mode {
display: inline-block;
float: left;
margin: 4px;
}
/*************************************
@ -1723,10 +1725,6 @@ ol.toptrends-list { @@ -1723,10 +1725,6 @@ ol.toptrends-list {
text-align: center;
}
.following-config-modal .modal-buttons {
display: none;
}
.following-config-method-buttons {
padding: 10px;
}
@ -1745,13 +1743,13 @@ ol.toptrends-list { @@ -1745,13 +1743,13 @@ ol.toptrends-list {
}
.reTwist .post {
margin: 5px;
padding: 5px;
margin: 8px;
padding: 4px;
min-height: 68px;
}
.reTwist .post-area-extras {
margin-right: 10px;
margin: 4px 16px;
}
/*************************************
@ -1762,10 +1760,6 @@ ol.toptrends-list { @@ -1762,10 +1760,6 @@ ol.toptrends-list {
margin-top: -140px;
}
.reply .modal-buttons {
display: none;
}
.reply .post-expand,
.reply .post-interactions {
display: none;
@ -1781,12 +1775,12 @@ ol.toptrends-list { @@ -1781,12 +1775,12 @@ ol.toptrends-list {
}
.reply .post-area-extras {
margin-right: 10px;
margin: 4px 16px;
}
.reply .post {
margin: 10px;
padding: 5px;
margin: 8px;
padding: 4px;
min-height: 68px;
}

31
following.html
Unescape View File

@ -289,9 +289,7 @@ @@ -289,9 +289,7 @@
</a>
<li class="descendant module post">
</li>
<!-- TEMPLATE INVÓLUCRO DO POST EXPANDIDO END -->
<!-- TEMPLATE DO MODAL GENÉRICO INIT -->
<div class="modal-wrapper">
<div class="modal-header">
<h3></h3>
@ -302,40 +300,45 @@ @@ -302,40 +300,45 @@
<div class="modal-content"></div>
<div class="modal-blackout cancel"></div>
</div>
<!-- TEMPLATE DO MODAL GENÉRICO END -->
<!-- TEMPLATE GENERAL PROMPT -->
<div class="prompt-wrapper">
<div class="modal-header">
<h3></h3>
<span class="modal-close prompt-close">&times;</span>
</div>
<div class="modal-content"></div>
<div class="modal-buttons">
<button class="modal-cancel prompt-close">Cancel</button>
<button class="modal-propagate">Retransmit</button>
</div>
</div>
<!-- TEMPLATE GENERAL PROMPT END-->
<!-- MODAL DE RETWEET INIT -->
<!-- MODAL DE RETWEET END -->
<div id="reTwist-modal-template">
<div class="post-area">
<form class="post-area-new open">
<textarea placeholder="New Post..."></textarea>
<div class="post-area-extras">
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled="true">undo</button>
<button class="post-submit disabled" disabled="true">post</button>
</div>
<div class="modal-buttons">
<span class="switch-mode">Switch to Reply</span>
<button class="modal-propagate">Retransmit</button>
</div>
</form>
</div>
</div>
<!-- MODAL DE REPLY INIT -->
<div id="reply-modal-template">
<div class="post-area">
<form class="post-area-new open">
<textarea placeholder="New Post..."></textarea>
<div class="post-area-extras">
<span class="switch-mode">Switch to Retransmit</span>
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled="true">undo</button>
<button class="post-submit disabled" disabled="true">post</button>
</div>
</form>
</div>
<!-- use "module post" here -->
</div>
<!-- MODAL DE REPLY END -->
<!-- MODAL DE DIRECT MESSAGES INIT -->
<!-- Este modal possui dois templates, o primeiro da lista de pessoas que enviaram mensagens e o segundo

31
home.html
Unescape View File

@ -381,9 +381,7 @@ @@ -381,9 +381,7 @@
<li class="descendant module post">
</li>
<!-- TEMPLATE INVÓLUCRO DO POST EXPANDIDO END -->
<!-- TEMPLATE DO MODAL GENÉRICO INIT -->
<div class="modal-wrapper">
<div class="modal-header">
<h3></h3>
@ -394,40 +392,45 @@ @@ -394,40 +392,45 @@
<div class="modal-content"></div>
<div class="modal-blackout cancel"></div>
</div>
<!-- TEMPLATE DO MODAL GENÉRICO END -->
<!-- TEMPLATE GENERAL PROMPT -->
<div class="prompt-wrapper">
<div class="modal-header">
<h3></h3>
<span class="modal-close prompt-close">&times;</span>
</div>
<div class="modal-content"></div>
<div class="modal-buttons">
<button class="modal-cancel prompt-close">Cancel</button>
<button class="modal-propagate">Retransmit</button>
</div>
</div>
<!-- TEMPLATE GENERAL PROMPT END-->
<!-- MODAL DE RETWEET INIT -->
<!-- MODAL DE RETWEET END -->
<div id="reTwist-modal-template">
<div class="post-area">
<form class="post-area-new open">
<textarea placeholder="New Post..."></textarea>
<div class="post-area-extras">
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled="true">undo</button>
<button class="post-submit disabled" disabled="true">post</button>
</div>
<div class="modal-buttons">
<span class="switch-mode">Switch to Reply</span>
<button class="modal-propagate">Retransmit</button>
</div>
</form>
</div>
</div>
<!-- MODAL DE REPLY INIT -->
<div id="reply-modal-template">
<div class="post-area">
<form class="post-area-new open">
<textarea placeholder="New Post..."></textarea>
<div class="post-area-extras">
<span class="switch-mode">Switch to Retransmit</span>
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled="true">undo</button>
<button class="post-submit disabled" disabled="true">post</button>
</div>
</form>
</div>
<!-- use "module post" here -->
</div>
<!-- MODAL DE REPLY END -->
<!-- MODAL DE DIRECT MESSAGES INIT -->
<!-- Este modal possui dois templates, o primeiro da lista de pessoas que enviaram mensagens e o segundo

57
js/interface_common.js
Unescape View File

@ -373,13 +373,17 @@ function initHashWatching() { @@ -373,13 +373,17 @@ function initHashWatching() {
setTimeout(watchHashChange, 1000);
}
function reTwistPopup(e) {
e.stopPropagation();
function reTwistPopup(event, post, textArea) {
event.stopPropagation();
if (!defaultScreenName) {
alert(polyglot.t('You have to log in to retransmit messages.'));
return;
}
if (typeof post === 'undefined')
post = $.evalJSON($(event.target).parents('.post-data').attr('data-userpost'));
var modal = openModal({
classBase: '.prompt-wrapper',
classAdd: 'reTwist',
@ -387,22 +391,31 @@ function reTwistPopup(e) { @@ -387,22 +391,31 @@ function reTwistPopup(e) {
});
modal.content
.append(postToElem($.evalJSON($(this).parents('.post-data').attr('data-userpost')), ''))
.append($('#reply-modal-template').children().clone(true)) // FIXME retwist-reply-modal-template
.append(postToElem(post, ''))
.append($('#reTwist-modal-template').children().clone(true))
;
var replyArea = modal.content.find('.post-area .post-area-new');
var textArea = replyArea.find('textarea');
var textAreaPostInline = modal.content.find('.post .post-area-new textarea');
$.each(['placeholder', 'data-reply-to'], function(i, attribute) {
textArea.attr(attribute, textAreaPostInline.attr(attribute));
});
modal.content.find('.switch-mode')
.text(polyglot.t('Switch to Reply'))
.on('click', (function(event) {replyInitPopup(event, post,
$(event.target).parents('form').find('textarea').detach());}).bind(post))
;
var replyArea = modal.content.find('.post-area .post-area-new');
if (typeof textArea === 'undefined') {
textArea = replyArea.find('textarea');
var textAreaPostInline = modal.content.find('.post .post-area-new textarea');
$.each(['placeholder', 'data-reply-to'], function(i, attribute) {
textArea.attr(attribute, textAreaPostInline.attr(attribute));
});
} else {
replyArea.find('textarea').replaceWith(textArea);
}
replyArea.find('.post-submit').addClass('with-reference');
}
// Expande Área do Novo post
function replyInitPopup(e, post) {
function replyInitPopup(e, post, textArea) {
var modal = openModal({
classBase: '.prompt-wrapper',
classAdd: 'reply',
@ -416,14 +429,22 @@ function replyInitPopup(e, post) { @@ -416,14 +429,22 @@ function replyInitPopup(e, post) {
.append($('#reply-modal-template').children().clone(true))
;
// FIXME passing data through attributes may result in a mess like following
var replyArea = modal.content.find('.post-area .post-area-new').addClass('open');
var textArea = replyArea.find('textarea');
var textAreaPostInline = modal.content.find('.post .post-area-new textarea');
$.each(['placeholder', 'data-reply-to'], function(i, attribute) {
textArea.attr(attribute, textAreaPostInline.attr(attribute));
});
modal.content.find('.switch-mode')
.text(polyglot.t('Switch to Retransmit'))
.on('click', (function(event) {reTwistPopup(event, post,
$(event.target).parents('form').find('textarea').detach())}).bind(post))
;
var replyArea = modal.content.find('.post-area .post-area-new').addClass('open');
if (typeof textArea === 'undefined') {
textArea = replyArea.find('textarea');
var textAreaPostInline = modal.content.find('.post .post-area-new textarea');
$.each(['placeholder', 'data-reply-to'], function(i, attribute) {
textArea.attr(attribute, textAreaPostInline.attr(attribute));
});
} else {
replyArea.find('textarea').replaceWith(textArea);
}
composeNewPost(e, replyArea);
}

26
js/interface_localization.js
Unescape View File

@ -130,6 +130,8 @@ if(preferredLanguage == "en"){ @@ -130,6 +130,8 @@ if(preferredLanguage == "en"){
"Retransmit": "Retransmit",
"Retransmits": "Retransmits",
"Retransmitted by": "Retransmitted by",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "search",
"seconds": "%{smart_count} second |||| %{smart_count} seconds",
"send": "send",
@ -428,6 +430,8 @@ if(preferredLanguage == "es"){ @@ -428,6 +430,8 @@ if(preferredLanguage == "es"){
"Retransmit": "Retransmicion",
"Retransmits": "Retransmiciones",
"Retransmitted by": "Retransmitido por",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "search",
"seconds": "%{smart_count} segundo |||| %{smart_count} segundos",
"send": "send",
@ -711,6 +715,8 @@ if(preferredLanguage == "uk"){ @@ -711,6 +715,8 @@ if(preferredLanguage == "uk"){
"Retransmit": "Переслати",
"Retransmits": "Пересилання",
"Retransmitted by": "Переслано ",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "пошук",
"seconds": "%{smart_count} секунда |||| %{smart_count} секунд",
"send": "відіслати",
@ -991,6 +997,8 @@ if(preferredLanguage == "zh-CN"){ @@ -991,6 +997,8 @@ if(preferredLanguage == "zh-CN"){
"Retransmit": "转发",
"Retransmits": "转发",
"Retransmitted by": "转发于",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "搜索",
"seconds": "%{smart_count} 秒",
"send": "发送",
@ -1289,6 +1297,8 @@ if(preferredLanguage == "nl"){ @@ -1289,6 +1297,8 @@ if(preferredLanguage == "nl"){
"Retransmit": "Retransmit",
"Retransmits": "Retransmits",
"Retransmitted by": "Retransmitted door",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "Zoeken",
"seconds": "%{smart_count} seconde |||| %{smart_count} seconden",
"send": "Verstuur",
@ -1571,6 +1581,8 @@ if(preferredLanguage == "it"){ @@ -1571,6 +1581,8 @@ if(preferredLanguage == "it"){
"Retransmit": "Ripubblica",
"Retransmits": "Ripubblicati",
"Retransmitted by": "Ripubblicato da",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "Cerca",
"seconds": "%{smart_count} secondo |||| %{smart_count} secondi",
"send": "Invia",
@ -1850,6 +1862,8 @@ if(preferredLanguage == "fr"){ @@ -1850,6 +1862,8 @@ if(preferredLanguage == "fr"){
"Retransmit": "Retransmission",
"Retransmits": "Retransmissions",
"Retransmitted by": "Retransmis par",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "recherche",
"seconds": "%{smart_count} seconde |||| %{smart_count} secondes",
"send": "envoyer",
@ -2134,6 +2148,8 @@ if(preferredLanguage == "ru"){ @@ -2134,6 +2148,8 @@ if(preferredLanguage == "ru"){
"Retransmit": "Перепостить",
"Retransmits": "Репосты",
"Retransmitted by": "Перепощено ",
"Switch to Reply": "Переключиться на ответ",
"Switch to Retransmit": "Переключиться на ретвист",
"search": "найти",
"seconds": "%{smart_count} секунда |||| %{smart_count} секунд",
"send": "отправить",
@ -2422,6 +2438,8 @@ if(preferredLanguage == "de"){ @@ -2422,6 +2438,8 @@ if(preferredLanguage == "de"){
"Retransmit": "Weiterleiten",
"Retransmits": "Weiterleitungen",
"Retransmitted by": "Weitergeleitet von",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "suchen",
"seconds": "%{smart_count} Sekunde |||| %{smart_count} Sekunden",
"send": "senden",
@ -2705,6 +2723,8 @@ if(preferredLanguage == "ja"){ @@ -2705,6 +2723,8 @@ if(preferredLanguage == "ja"){
"Retransmit": "リトランスミット",
"Retransmits": "リトランスミット",
"Retransmitted by": "リトランスミットしたユーザー",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "検索",
"seconds": "%{smart_count} 秒 |||| %{smart_count} 秒",
"send": "送信",
@ -2986,6 +3006,8 @@ if(preferredLanguage == "pt-BR"){ @@ -2986,6 +3006,8 @@ if(preferredLanguage == "pt-BR"){
"Retransmit": "Retransmitir",
"Retransmits": "Retransmissões",
"Retransmitted by": "Retransmitido por",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "procurar",
"seconds": "%{smart_count} segundo |||| %{smart_count} segundos",
"send": "enviar",
@ -3269,6 +3291,8 @@ if(preferredLanguage == "tr"){ @@ -3269,6 +3291,8 @@ if(preferredLanguage == "tr"){
"Retransmit": "Tekar ilet",
"Retransmits": "Tekrar iletenler",
"Retransmitted by": "Tekrar ileten",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "ara",
"seconds": "%{smart_count} saniye |||| %{smart_count} saniye",
"send": "gönder",
@ -3551,6 +3575,8 @@ if(preferredLanguage == "cs"){ @@ -3551,6 +3575,8 @@ if(preferredLanguage == "cs"){
"Retransmit": "Přeposlat",
"Retransmits": "Přeposlání",
"Retransmitted by": "Přeposlal(a)",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "hledat",
"seconds": "%{smart_count} vteřinou |||| %{smart_count} vteřinami |||| %{smart_count} vteřinami",
"send": "odeslat",

43
theme_calm/css/style.css
Unescape View File

@ -861,9 +861,7 @@ textarea.splited-post { @@ -861,9 +861,7 @@ textarea.splited-post {
.mini-profile .post-submit {
margin-right: 0;
}
.reply .post-submit {
margin-right: 35px;
}
.post-submit.disabled {
opacity: .6;
-webkit-transition: all 200ms;
@ -1453,9 +1451,8 @@ textarea.splited-post { @@ -1453,9 +1451,8 @@ textarea.splited-post {
text-align: right;
height: 25px;
}
.post-interactions span,
.post-expand
{
.post-interactions span, .post-expand, .prompt-wrapper .switch-mode {
color: #b2b2b2;
cursor: pointer;
font-size: 12px;
@ -1465,6 +1462,7 @@ textarea.splited-post { @@ -1465,6 +1462,7 @@ textarea.splited-post {
-o-transition: all 200ms;
transition: all 200ms;
}
.post-expand
{
position: absolute;
@ -2094,12 +2092,14 @@ textarea.splited-post { @@ -2094,12 +2092,14 @@ textarea.splited-post {
}
.prompt-wrapper .modal-buttons {
padding: 10px;
margin: 4px 16px;
text-align: right;
}
.prompt-wrapper .modal-buttons button:last-child {
padding: 5px 20px;
.prompt-wrapper .switch-mode {
display: inline-block;
float: left;
margin: 4px;
}
/*************************************
@ -2115,10 +2115,6 @@ textarea.splited-post { @@ -2115,10 +2115,6 @@ textarea.splited-post {
text-align: center;
}
.following-config-modal .modal-buttons {
display: none;
}
.following-config-method-buttons {
padding: 10px;
}
@ -2137,13 +2133,13 @@ textarea.splited-post { @@ -2137,13 +2133,13 @@ textarea.splited-post {
}
.reTwist .post {
margin: 5px;
padding: 5px;
margin: 8px;
padding: 4px;
min-height: 68px;
}
.reTwist .post-area-extras {
margin-right: 10px;
margin: 4px 16px;
}
/*************************************
@ -2154,10 +2150,6 @@ textarea.splited-post { @@ -2154,10 +2150,6 @@ textarea.splited-post {
margin-top: -140px;
}
.reply .modal-buttons {
display: none;
}
.reply .post-expand,
.reply .post-interactions {
display: none;
@ -2173,12 +2165,12 @@ textarea.splited-post { @@ -2173,12 +2165,12 @@ textarea.splited-post {
}
.reply .post-area-extras {
margin-right: 10px;
margin: 4px 16px;
}
.reply .post {
margin: 10px;
padding: 5px;
margin: 8px;
padding: 4px;
min-height: 68px;
}
@ -2518,11 +2510,6 @@ p.post-text img { @@ -2518,11 +2510,6 @@ p.post-text img {
height: 20px;
}
.reply textarea{
margin-top: 20px;
}
.post-rt-reference {
background-color: #FAFAFA;
border: 1px solid #ccc;

16
theme_nin/css/style.css
Unescape View File

@ -925,7 +925,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, @@ -925,7 +925,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
line-height: 12px;
}
/* line 171, ../sass/_postboard.sass */
.post-interactions span {
.post-interactions span, .prompt-wrapper .switch-mode {
color: #b3b5b7;
cursor: pointer;
font-size: 12px;
@ -2747,12 +2747,14 @@ ol.toptrends-list a:hover { @@ -2747,12 +2747,14 @@ ol.toptrends-list a:hover {
}
.prompt-wrapper .modal-buttons {
padding: 10px;
margin: 4px 0;
text-align: right;
}
.prompt-wrapper .modal-buttons button:last-child {
padding: 5px 20px;
.prompt-wrapper .switch-mode {
display: inline-block;
float: left;
margin: 4px;
}
/****** FOLLOWING-CONFIG PROMPT ******/
@ -2766,10 +2768,6 @@ ol.toptrends-list a:hover { @@ -2766,10 +2768,6 @@ ol.toptrends-list a:hover {
text-align: center;
}
.following-config-modal .modal-buttons {
display: none;
}
.following-config-modal h2 {
text-transform: none;
}
@ -2810,7 +2808,7 @@ ol.toptrends-list a:hover { @@ -2810,7 +2808,7 @@ ol.toptrends-list a:hover {
margin-top: -110px;
}
/* line 719, ../sass/style.sass */
.reply .modal-buttons, .reply .post-expand, .reply .post-interactions {
.reply .post-expand, .reply .post-interactions {
display: none;
}
/* line 721, ../sass/style.sass */

2
theme_nin/sass/_postboard.sass
Unescape View File

@ -171,7 +171,7 @@ @@ -171,7 +171,7 @@
text-align: right
height: 12px
line-height: 12px
span
span, .prompt-wrapper .switch-mode
color: lighten($dark-grey,30%)
cursor: pointer
font-size: 12px

12
theme_nin/sass/style.sass
Unescape View File

@ -753,10 +753,12 @@ ol.toptrends-list @@ -753,10 +753,12 @@ ol.toptrends-list
margin-left: -300px
box-shadow: 0 0 30px rgba( 0, 0, 0, .6 )
.modal-buttons
padding: 10px
margin: 4px 0
text-align: right
button:last-child
padding: 5px 20px;
.switch-mode
display: inline-block
float: left
margin: 4px
/************ FOLLOWING-CONFIG MODAL **********/
@ -765,8 +767,6 @@ ol.toptrends-list @@ -765,8 +767,6 @@ ol.toptrends-list
.modal-content
padding: 10px
text-align: center
.modal-buttons
display: none
h2
text-transform: none
.following-config-method-buttons
@ -793,7 +793,7 @@ ol.toptrends-list @@ -793,7 +793,7 @@ ol.toptrends-list
.prompt-wrapper.reply
&.prompt-wrapper
margin-top: -110px
.modal-buttons, .post-expand, .post-interactions
.post-expand, .post-interactions
display: none
.post-area
padding-bottom: 6px

Write Preview
Loading…
Cancel
Save