[zotonic] 3 new revisions pushed by profile.url on 2010-05-08 21:03 GMT

[zot...@googlecode.com]

3 new revisions:

Revision: 9e71c6aad8
Author: Marc Worrell <ma...@worrell.nl>
Date: Sat May 8 14:00:06 2010
Log: Simple input with background text. Hides background text when the
inpu...
http://code.google.com/p/zotonic/source/detail?r=9e71c6aad8

Revision: dde8a302df
Author: Marc Worrell <ma...@worrell.nl>
Date: Sat May 8 14:02:38 2010
Log: Added content_area block for full width content. Also includes
jquery-...
http://code.google.com/p/zotonic/source/detail?r=dde8a302df

Revision: 5c46193475
Author: Marc Worrell <ma...@worrell.nl>
Date: Sat May 8 14:03:06 2010
Log: A bit nicer looking log on dialog.
http://code.google.com/p/zotonic/source/detail?r=5c46193475

==============================================================================
Revision: 9e71c6aad8
Author: Marc Worrell <ma...@worrell.nl>
Date: Sat May 8 14:00:06 2010
Log: Simple input with background text. Hides background text when the
input has content.
http://code.google.com/p/zotonic/source/detail?r=9e71c6aad8

Added:
/modules/mod_base/lib/js/modules/z.inputoverlay.js

=======================================
--- /dev/null
+++ /modules/mod_base/lib/js/modules/z.inputoverlay.js Sat May 8 14:00:06
2010
@@ -0,0 +1,109 @@
+/* inputoverlay js
+----------------------------------------------------------
+
+@package: Zotonic 2010
+@Author: Marc Worrell <ma...@worrell.nl>
+
+Copyright 2010 Marc Worrell
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+---------------------------------------------------------- */
+
+/*
+This widget overlays a label field with an input field. When the input
+is empty the label is visible. When there is content then the label is
hidden.
+
+HTML:
+
+<p class="do_inputoverlay">
+ <span>Username</span>
+ <input type="text" id="username" name="username" value="" />
+</p>
+
+CSS:
+
+p.do_inputoverlay {
+ margin: 0px;
+ padding: 0px;
+ position: relative;
+ height: 40px;
+ font-size: 18px;
+}
+
+p.do_inputoverlay input {
+ position: absolute;
+ left: 0px;
+ background: none;
+ font-size: 18px;
+}
+
+p.do_inputoverlay span {
+ position: absolute;
+ left: 8px;
+ top: 5px;
+ color: #aaa;
+}
+
+p.do_inputoverlay span.focus {
+ color: #d8d8d8;
+}
+
+p.do_inputoverlay span.hidden {
+ display: none;
+}
+
+*/
+
+$.widget("ui.inputoverlay",
+{
+ _init: function()
+ {
+ var self = this;
+ var obj = this.element;
+ var input = $('input', obj);
+ var span = $('span', obj);
+
+ var func = function(focus) {
+ if ($(input).val() == "") {
+ if (focus) {
+ $(span).removeClass('hidden').addClass('focus');
+ } else {
+ $(span).removeClass('hidden').removeClass('focus');
+ }
+ } else {
+ $(span).removeClass('focus').addClass('hidden');
+ }
+ };
+
+ input.change(function() {
+ func(true);
+ }).focus(function() {
+ func(true);
+ }).blur(function() {
+ func(false);
+ }).keyup(function() {
+ func(true);
+ });
+
+ if (input.attr('autocomplete') == 'on') {
+ setInterval(function() {
+ if ($(input).val() == "") {
+ $(span).removeClass('hidden');
+ } else {
+ $(span).addClass('hidden');
+ }
+ }, 500);
+ }
+ }
+});

==============================================================================
Revision: dde8a302df
Author: Marc Worrell <ma...@worrell.nl>
Date: Sat May 8 14:02:38 2010
Log: Added content_area block for full width content. Also includes
jquery-ui for the widget manager. Added include of input overlay widget.
http://code.google.com/p/zotonic/source/detail?r=dde8a302df

Modified:
/priv/sites/default/templates/base.tpl

=======================================
--- /priv/sites/default/templates/base.tpl Mon Apr 19 08:13:36 2010
+++ /priv/sites/default/templates/base.tpl Sat May 8 14:02:38 2010
@@ -35,6 +35,7 @@

<section id="content-area" class="clearfix">

+ {% block content_area %}
{% block chapeau %}{% endblock %}

<article id="content" class="zp-65">
@@ -50,6 +51,8 @@
{% include "_sidebar.tpl" %}
{% endblock %}
</section>
+
+ {% endblock %}

</section>

@@ -63,8 +66,15 @@
</section>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-
- {%
lib "js/apps/zotonic-1.0.js" "js/apps/z.widgetmanager.js" "js/modules/livevalidation-1.3.js" %}
+ <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
+
+
+ {% lib
+ "js/apps/zotonic-1.0.js"
+ "js/apps/z.widgetmanager.js"
+ "js/modules/livevalidation-1.3.js"
+ "js/modules/z.inputoverlay.js"
+ %}

<script type="text/javascript">
$(function() { $.widgetManager(); });

==============================================================================
Revision: 5c46193475
Author: Marc Worrell <ma...@worrell.nl>
Date: Sat May 8 14:03:06 2010
Log: A bit nicer looking log on dialog.
http://code.google.com/p/zotonic/source/detail?r=5c46193475

Modified:
/modules/mod_authentication/templates/logon.tpl

=======================================
--- /modules/mod_authentication/templates/logon.tpl Sat May 8 06:49:51 2010
+++ /modules/mod_authentication/templates/logon.tpl Sat May 8 14:03:06 2010
@@ -2,57 +2,145 @@

{% block title %}Log on{% endblock %}

-{% block content %}
-
-{% if logon_reason %}
-<p id="logon_reason">{{ logon_reason }}</p>
-{% else %}
- {% if page %}
- <p id="logon_reason">You need to log on to view the page at <a
href="{{page|escape}}">{{ page|truncate:20|escape }}</a>.
+{% block content_area %}
+
+<style>
+div#logon_outer {
+ text-align: center;
+ margin: 100px auto 20px;
+}
+
+p#logon_reason {
+ margin-bottom: 30px;
+}
+
+ul#logon_methods {
+ margin: 30px;
+}
+
+div#logon_box {
+ width: 300px;
+ margin: 0 auto;
+ background: #fff;
+ padding: 10px 30px 10px;
+ border: 1px solid #aaa;
+ border-radius: 8px;
+ box-shadow: 0 0 6px #999;
+
+ -webkit-border-radius: 8px;
+ -webkit-box-shadow: 0 0 6px #999;
+
+ -moz-border-radius: 8px;
+ -moz-box-shadow: 0 0 6px #999;
+
+ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3,
Direction=135, Color='#999999')";
+ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3,
Direction=135, Color='#999999');
+}
+
+div#logon_button button {
+ float: none;
+ display: inline;
+ font-weight: bold;
+ padding: 4px 10px;
+}
+
+div#logon_rememberme {
+ margin-top: 9px;
+}
+
+p.do_inputoverlay {
+ margin: 0px;
+ padding: 0px;
+ position: relative;
+ height: 40px;
+ font-size: 18px;
+}
+
+p.do_inputoverlay input {
+ position: absolute;
+ left: 0px;
+ background: none;
+ font-size: 18px;
+}
+
+p.do_inputoverlay span {
+ position: absolute;
+ left: 8px;
+ top: 5px;
+ color: #aaa;
+}
+
+p.do_inputoverlay span.focus {
+ color: #d8d8d8;
+}
+
+p.do_inputoverlay span.hidden {
+ display: none;
+}
+
+h1#logon_header {
+ margin: 18px 0px;
+}
+
+#logon_rememberme label {
+ float: none;
+ display: inline;
+}
+
+</style>
+
+
+<div id="logon_outer">
+ {% if logon_reason %}
+ <p id="logon_reason">{{ logon_reason }}</p>
{% endif %}
-{% endif %}
-
-<div id="logon">
- <div id="logon_dialog" class="clearfix">
- <form id="logon_form" method="post" action="postback">
- <h1 id="logon_header">Log on using your <span>{{
m.config.site.title.value|default:"Zotonic" }} ID</span></h1>
-
- <p class="error" style="display: none" id="error">Unknown username or
password.</p>
-
- <input type="hidden" name="page" value="{{ page|escape }}" />
- <input type="hidden" name="handler" value="username" />
-
- <div id="logon_username">
- <label for="username">Username</label>
- <input type="text" id="username" name="username" value="" />
- {% validate id="username" type={presence} %}
- </div>
-
- <div id="logon_username">
- <label for="password">Password</label>
- <input type="password" id="password" name="password" value="" />
- {% validate id="password" type={presence} %}
- </div>
-
- <div id="logon_rememberme">
- <input type="checkbox" id="rememberme" name="rememberme" value="1" />
- <label for="rememberme">Remember me</label>
- </div>
-
- <div class="clearfix"></div>
-
- <div id="logon_button">
- <button>Log On</button>
- </div>
- </form>
+
+ <div id="logon_box">
+ <div id="logon_dialog" class="clearfix">
+ <form id="logon_form" method="post" action="postback">
+ <h1 id="logon_header">Log on using your <span>{{
m.config.site.title.value|default:"Zotonic" }} ID</span></h1>
+
+ <p class="error" style="display: none" id="error">Unknown username or
password.</p>
+
+ <input type="hidden" name="page" value="{{ page|escape }}" />
+ <input type="hidden" name="handler" value="username" />
+
+ <div id="logon_username">
+ <p class="do_inputoverlay">
+ <span>Username</span>
+ <input type="text" id="username" name="username" value=""
autocapitalize="off" autocomplete="on" />
+ </p>
+ </div>
+
+ <div id="logon_password">
+ <p class="do_inputoverlay">
+ <span>Password</span>
+ <input type="password" id="password" name="password" value=""
autocomplete="on" />
+ </p>
+ </div>
+
+ <div id="logon_rememberme">
+ <input type="checkbox" id="rememberme" name="rememberme" value="1" />
+ <label for="rememberme">Remember me for two weeks</label>
+ </div>
+
+ <div class="clearfix"></div>
+
+ <div id="logon_button">
+ <button>Log On</button>
+ </div>
+ </form>
+ </div>
</div>

- <!--
+ {% wire action={script script="$('#username').focus();"} %}
+
+<!--
<ul id="logon_methods">
<li><a href="#">Log on using OpenID</a></li>
<li><a href="#">Log on using Facebook</a></li>
</ul>
- -->
+-->
</div>

{% endblock %}