Projects / lithium_anologue

diff --git a/views/anologue/index.html.php b/views/anologue/index.html.php index 14b77ee..9333beb 100644 --- a/views/anologue/index.html.php +++ b/views/anologue/index.html.php @@ -37,7 +37,7 @@ <h2 class="sub">let's make this better, together</h2> - <p>perhaps best of all: <?php echo $this->html->link('this is open source', 'http://rad-dev.org/lithium_anologue'); ?>. built with <?php echo $this->html->link('php 5.3', 'http://php.net'); ?>, using the most non-heinous, totally rad <?php echo $this->html->link('lithium framework', 'http://li3.rad-dev.org'); ?>, <?php echo $this->html->link('couchdb', 'http://couchdb.apache.org'); ?>, <?php echo $this->html->link('jquery', 'http://jquery.com'); ?> and a few other scripts; all coming together for the creamy goodness you're about to experience.</p> + <p>perhaps best of all: <?php echo $this->html->link('this is open source', 'http://rad-dev.org/lithium_anologue'); ?>. built with <?php echo $this->html->link('php 5.3.1', 'http://php.net'); ?>, using the most non-heinous, totally rad <?php echo $this->html->link('lithium framework', 'http://li3.rad-dev.org'); ?>, <?php echo $this->html->link('couchdb', 'http://couchdb.apache.org'); ?>, <?php echo $this->html->link('jquery', 'http://jquery.com'); ?>, a few other scripts as well as some classy, original and <?php echo $this->html->link('established', 'http://www.pinvoke.com/'); ?> iconography for ui; all coming together for the conversational goodness you're about to experience.</p> <p class="last">contribute to the core or download the source and setup your own. this one's for you, internets.</p> </article> </div> diff --git a/views/anologue/view.html.php b/views/anologue/view.html.php index 5d07ac4..05f3b79 100644 --- a/views/anologue/view.html.php +++ b/views/anologue/view.html.php @@ -26,10 +26,13 @@ ?> </h3> </div> -<div class="anologue-help"> +<div id="anologue-help"> + <div class="padding"> <h2>hello.</h2> - <p>to get started type your name, then your message, in the boxes at the very bottom. <br />markdown is supported, to an extent.</p> + <p>to get started type your name, then your message in the appropriate boxes below. <br /><?php echo $this->html->link('markdown', 'http://daringfireball.net/projects/markdown/syntax'); ?> is supported, to an extent.</p> <p><strong>for your privacy,</strong> your email is only used to generate your <?php echo $this->html->link('gravatar', 'http://gravatar.com'); ?> and is stored in an unreadable, encoded format.</p> + </div> + <button id="anologue-close-help" class="close" title="Close this help window"><span>close</span></button> </div> @@ -59,43 +62,45 @@ </ul> <div id="anologue-speech-bar"> - <div class="twenty-percent"> - <div class="anologue-settings"> - <div class="input name"> - <label class="icon" for="anologue-author" title="Your name"><span>Your name</span></label> - <input type="text" name="anologue-author" id="anologue-author" /> - </div> - <div class="input email"> - <label class="icon" for="anologue-email" title="Your e-mail address"><span>Your e-mail</span></label> - <input type="text" name="anologue-email" id="anologue-email" /> - </div> - <div class="checkbox first sound"> - <label class="icon" title="Toggle sounds"><span>Toggle sounds</span></label> - </div> - <div class="checkbox auto-scroll"> - <label class="icon" title="Toggle auto-scrolling"><span>Toggle auto-scrolling</span></label> - </div> - <div class="checkbox cookie"> - <label class="icon disabled" title="Toggle cookies"><span>Toggle cookies</span></label> - </div> - <div class="about"> - <?php - echo $this->html->link( - 'what is anologue?', - array('controller' => 'anologue', 'action' => 'index') - ); - ?> + <div class="purple-background"> + <div class="twenty-percent"> + <div class="anologue-settings"> + <div class="input name"> + <label class="icon" for="anologue-author" title="Your name"><span>Your name</span></label> + <input type="text" name="anologue-author" id="anologue-author" /> + </div> + <div class="input email"> + <label class="icon" for="anologue-email" title="Your e-mail address"><span>Your e-mail</span></label> + <input type="text" name="anologue-email" id="anologue-email" /> + </div> + <div class="checkbox first sound"> + <label class="icon" title="Toggle sounds"><span>Toggle sounds</span></label> + </div> + <div class="checkbox auto-scroll"> + <label class="icon" title="Toggle auto-scrolling"><span>Toggle auto-scrolling</span></label> + </div> + <div class="checkbox cookie"> + <label class="icon disabled" title="Toggle cookies"><span>Toggle cookies</span></label> + </div> + <div class="about"> + <?php + echo $this->html->link( + 'what is anologue?', + array('controller' => 'anologue', 'action' => 'index') + ); + ?> + </div> </div> </div> - </div> - <div class="eighty-percent"> - <div class="anologue-speak"> - <div class="input textarea"> - <label class="icon" for="anologue-text" title="Type what you want to say and press enter"><span>you say:</span></label> - <textarea name="anologue-text" id="anologue-text"></textarea> - </div> - <div class="submit"> - <button id="anologue-submit"><span>send</span></button> + <div class="eighty-percent"> + <div class="anologue-speak"> + <div class="input textarea"> + <label class="icon" for="anologue-text" title="Type what you want to say and press enter"><span>you say:</span></label> + <textarea name="anologue-text" id="anologue-text"></textarea> + </div> + <div class="submit"> + <button id="anologue-submit"><span>send</span></button> + </div> </div> </div> </div> diff --git a/webroot/css/anologue.css b/webroot/css/anologue.css index c0a649c..acf8352 100644 --- a/webroot/css/anologue.css +++ b/webroot/css/anologue.css @@ -31,8 +31,16 @@ p.last { padding:.5em 0 4em 0; } .excellence img { margin:0 0 .5em 0; border:1em solid #f0f0f0; } .excellence span { display:block; font-style:italic; font-size:.65em; text-align:center; } .anologue-titling { float:left; } - .anologue-help { float:right; opacity:.5; display:block; padding: .5em 2em; text-align:left; font-size:.85em; } - .anologue-help p { opacity:.5; } + + #anologue-help { position:fixed; z-index:50; bottom:0; left:0; display:block; width:100%; background:black; background:rgba(0,0,0,.95); color:white; text-align:left; font-size:.85em; } + #anologue-help .padding { padding: 2em 2em 13em 2em; } + #anologue-help h2 { font-size:3em; } + #anologue-help p { opacity:.75; } + #anologue-help a { color:#77458c; } + #anologue-close-help { position:absolute; top:.25em; right:.5em; } + button.close { border:none; background:none; display:block; width:28px; height:28px; } + button.close span { display:block; width:28px; height:0; padding:28px 0 0 0; overflow:hidden; background:url(../img/icons/cross.png) no-repeat center center; } + .anologue { position:relative; z-index:10; width:100%; display:block; clear:both; margin:0 0 8.75em 0; padding:2em 0 0; } .anologue .message { position:relative; display:block; background:#fafafa; border-bottom:3px solid white; vertical-align:top; font-size:.85em; min-height:3em; } .anologue .message:hover { background:white; } @@ -49,7 +57,8 @@ p.last { padding:.5em 0 4em 0; } .anologue .text .markdown { } .anologue .text .markdown ul { padding:.25em 1em; } - #anologue-speech-bar { position:fixed; z-index:50; bottom:0; left:0; display:block; width:100%; min-width:1006px; clear:both; background:#4c2c59 url(../img/bg.png); color:white; } + #anologue-speech-bar { position:fixed; z-index:50; bottom:0; left:0; display:block; width:100%; min-width:1006px; clear:both; background:black; background-color:rgba(0,0,0,.85); color:white; } + .purple-background { background:#4c2c59 url(../img/bg.png); background-color:rgba(76,44,89,.75); height:150px; } .twenty-percent { float:left; min-width:275px; } .eighty-percent { float:left; width:70%; min-width:725px; } diff --git a/webroot/img/icons/cross.png b/webroot/img/icons/cross.png new file mode 100644 index 0000000..6b9fa6d Binary files /dev/null and b/webroot/img/icons/cross.png differ diff --git a/webroot/js/anologue.js b/webroot/js/anologue.js index df09dcf..80a36db 100644 --- a/webroot/js/anologue.js +++ b/webroot/js/anologue.js @@ -15,8 +15,13 @@ var anologue = { $(".auto-scroll label").click(function() { anologue.toggleIcon('.auto-scroll'); }); + $("#anologue-close-help").click(function() { + anologue.closeHelp(); + return false; + }); this.setupSubmit(); this.markdown(); + $("#anologue-help").css("bottom", '-400px').animate({bottom: 0}, 2000); $("#anologue-speech-bar").css("bottom", '-200px').animate({bottom: 0}, 2000); $("#anologue-author").focus(); this.setupSpeaker(); @@ -80,6 +85,7 @@ var anologue = { //add message say: function() { clearTimeout(this.timeout); + this.closeHelp(); var data = { author: $('#anologue-author').val(), email: $('#anologue-email').val(), @@ -180,4 +186,12 @@ var anologue = { } }, + closeHelp: function() { + if (!$("#anologue-help").hasClass('closed')) { + $("#anologue-help").animate({bottom: '-400px'}, 1000); + $("#anologue-help").addClass('closed'); + } + return false; + } + }