Changeset 208 in t29-www for en


Ignore:
Timestamp:
Oct 24, 2010, 7:46:33 PM (13 years ago)
Author:
sven
Message:

Fully implemented the fixed navigation box. Functional highlights:

  • Contributers can tell their name + location (not yet transfered to server), nice expandable form
  • Whole page can be edited at once (simple wrapper around #content)
  • Feedback form, expandable form (not yet with server transfer)
  • Buttons for help system and exit, always visible

Design highlights:

  • Fixed (at scrolling)/absolute (while at top) layout
  • Buttons (css table design)
  • Low-overhead Pseudo-tabs with all neccessary effects

Bugfixes:

  • content: programmable.shtm (paragraph was not editable via system)
  • minor things (like #tr-editorbox wrong positions - now fixed)

All server side part improvements (merging into SVN, etc.) are still missing.

Sven

Location:
en
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • en/computer/programmable.shtm

    r184 r208  
    5252    <div class="box left clear-after">
    5353       <img src="/shared/photos/rechnertechnik/olivetti_programma101.jpg" alt="Programma 101" width="379" height="301" />
    54        <div class="bildtext">The legendary <b>PROGRAMMA 101</b> by Olivetti. In the middle you see the magnetic program card. The <a class="go" href="storage-media.shtm#delay-line-memory">delay line memory</a> was used as storage media.</div>
     54       <p class="bildtext">The legendary <b>PROGRAMMA 101</b> by Olivetti. In the middle you see the magnetic program card. The <a class="go" href="storage-media.shtm#delay-line-memory">delay line memory</a> was used as storage media.</p>
    5555    </div>
    5656

  • en/dev/translation/editor.css

    r207 r208  
    1717}
    1818
     19div.tr-editing, /* spricht irgendwas gegen div.tr-editing? Die sind doch viel cooler*/
    1920span.tr-editing {
    2021        margin: -8px;
    … …  
    161162/* The most important *always-there* top notice */
    162163#tr-topbox {
    163         background-color: #ACDCA1;
    164         padding: 0.1em 1em; margin-bottom: 1em;
     164        background-color: rgba(172, 220, 161, .95);
     165        margin-bottom: 1em;
    165166        -moz-box-shadow: 1px 0 8px #999999;
    166167       
     168        width: 100%;
     169        display: relative;
     170}
     171
     172#tr-topbox.fixed {
    167173        position: fixed;
    168174        top: 0; left: 0;
    169         width: 100%;
    170175        z-index: 1000;
    171176}
    172177
    173178body.tr-disabled #tr-topbox { display: none; }
     179
     180#tr-topbox .buttons { display: table; width: 100%; }
     181#tr-topbox .buttons .row  { display: table-row; }
     182
     183#tr-topbox .left {
     184        padding: 15px;
     185        float: left;
     186        display: none;
     187}
     188
     189#tr-topbox .left  h3 {
     190        margin: 0;
     191        color:white;
     192        font-size:146%;
     193        font-weight:bold;
     194        text-decoration:none;
     195        text-shadow:1px 1px 2px #555555;
     196}
     197
     198#tr-topbox .left p {
     199        color: #666;
     200        margin: .3em 0;
     201        font-weight: bold;
     202        text-align: left;
     203        font-size: 90%;
     204}
     205
     206#tr-topbox .field {
     207        /*float: right;*/
     208        background-color: rgba(255,255,255,0.2);
     209        padding: 12px;
     210        /*max-width: 123px;*/
     211        display: table-cell;
     212        cursor: pointer;
     213}
     214
     215#tr-topbox .field ~ .field { /* avoid the rightmost border */
     216        border-left: 1px solid rgba(255,255,255,0.5);
     217}
     218
     219#tr-topbox .field h4 {
     220        margin: 0; padding: 0;
     221        font: normal 100%;
     222        color: white;
     223        text-shadow: 1px 1px 2px #555555;
     224}
     225
     226#tr-topbox .field p {
     227        color: #666666;
     228        font-size: 90%;
     229        margin: 3px 0;
     230        text-align: left;
     231}
     232
     233#tr-topbox  input {
     234        background-color:rgba(255, 255, 255, 0.9);
     235        border:1px solid #ACDCA1;
     236        font: 90% Verdana;
     237}
     238
     239#tr-topbox input:focus { border-color: black; }
     240
     241#tr-topbox .field:hover { background-color: rgba(255,255,255,0.5); }
     242#tr-topbox .field.active { background-color: rgba(255,255,255,0.8); }
     243#tr-topbox .field.active h4 { color: black; text-shadow: none; }
     244
     245#tr-topbox .extender {
     246        background-color: rgba(255,255,255,0.8);
     247        color: #666666;
     248        font-size: 90%;
     249}
     250
     251#tr-topbox .extender > div {
     252        display: none; /* default value */
     253        padding: 14px;
     254}
    174255
    175256.tr-body-borders {

  • en/dev/translation/editor.js

    r207 r208  
    5454        t29.tr.sidebar.find(".tr-enabled .button").attr("href","#back_to_normal_mode").click(t29.tr.call("set_enabled",false));
    5555        t29.tr.load_messages();
     56        t29.tr.defaultvalue(); // as general system
    5657        // initial value
    57         //t29.tr.set_enabled(true);
     58        //t29.tr.set_enabled(true); // won't work any more (call t29.tr.preloader.start)
    5859};
    5960
    … …  
    6162//         foobar.call(function(){ t29.tr.anything(value); });
    6263t29.tr.call = function(f, v){ return function(){ t29.tr[f](v);} };
     64
     65// helper: default value input elements. highly compressed selfwritten :)
     66// usage: <input value="my default value bla" class="defaultvalue"/>
     67t29.tr.defaultvalue = function(){
     68        $("input.defaultvalue").live('focus', function(){
     69                if(!(dv=(t=$(this)).data('dv'))) t.data('dv', t.val());
     70                if(t.val()==dv) t.val('');
     71        }).live('blur', function(){
     72                if((dv=((t=$(this)).data('dv'))) && /^\s*$/.test(t.val())) t.val(dv);
     73        });
     74};
    6375
    6476/**
    … …  
    135147                // create Infobox, editorbox, topnoticebox, design elements
    136148                $("body").append(t29.tr.msg.create_ui_body_append);
     149                $("#content").before(t29.tr.msg.create_ui_topbox);
    137150                $.each(["infobox", "editorbox", "topbox"], function(){ t29.tr[this] = $("#tr-"+this); });
     151               
     152                // make topbox being fixed at top scrolling
     153                var top = t29.tr.topbox.offset().top; // - parseFloat($('#comment').css('marginTop').replace(/auto/, 0))
     154                $(window).scroll(function(e) {
     155                        var now_fixed = $(this).scrollTop() >= top;
     156                        // since topbox was embedded in content (not sidebar), place is
     157                        // removed there when switching from static to fixed. Setting the
     158                        // height is a workaround.
     159                        (p=t29.tr.topbox.parent()).css('height', now_fixed ? p.height() : '');
     160                        t29.tr.topbox.toggleClass('fixed', now_fixed);
     161                });
     162               
     163                // create all event handlers in the topbox
     164               
     165                // Fields where clicking yields extender bar (poor man tab bar)
     166                var hideall_tabs = function() {
     167                        t29.tr.topbox.find(".field.extends").removeClass('active');
     168                        t29.tr.topbox.find(".extender > div").slideUp();
     169                }
     170                t29.tr.topbox.find(".field.extends").toggle(function(){
     171                        hideall_tabs(); // make sure no other is shown
     172                        var extender = $(this).hasClass('name') ? 'name' : 'feedback';
     173                        t29.tr.topbox.find('.extender .'+extender).slideDown()
     174                        $(this).addClass('active');
     175                }, hideall_tabs);
     176
     177                // User name box form
     178                t29.tr.topbox.find(".name :text").keyup(function(){
     179                        t29.tr.settings[$(this).attr('name')] = $(this).val();
     180                        t29.tr.topbox.find('.name .feedback').html("<b>"+t29.tr.settings.name+"</b> from <b>"+t29.tr.settings.location+"</b>");
     181                        t29.tr.topbox.find('.name .stored').text(' - Thank you');
     182                });
     183               
     184                // Edit whole page button
     185                t29.tr.topbox.find('.field.editwhole').click(t29.tr.edit_whole_page);
     186                t29.tr.topbox.find('.field.help').click(t29.tr.help);
     187                t29.tr.topbox.find('.field.exit').click(t29.tr.call('set_enabled', false));
     188               
     189
     190                // Create Editor UI (only once)
     191                t29.tr.editorbox.html(t29.tr.msg.create_editorui_editorbox); // remove all possible old classes
     192                t29.tr.editorbox.find(".cancel").click(t29.tr.stop_editing);
     193                t29.tr.editorbox.find(".submit").click(t29.tr.submit_editing);
     194                t29.tr.editorbox.find(".help").click(t29.tr.help);
     195
    138196                       
    139197                // create all wrapper elements (most important step)
    … …  
    299357                return false;
    300358        }
     359};
     360
     361/**
     362 * Shorthand method to start editing the whole #content area. May be called with
     363 * callbacks, directly, etc. Will make sure that there is no other editor.
     364 **/
     365t29.tr.edit_whole_page = function() {
     366        t29.tr.set_editing(false); // make sure there is no other editor
     367        $("#content").wrapInner("<div class='tr-editable'/>");
     368        t29.tr.set_editing( $("#content > .tr-editable") );
    301369};
    302370
    … …  
    370438 **/
    371439t29.tr.create_editorui = function() {
    372         t29.tr.editorbox.append(t29.tr.msg.create_editorui_editorbox).removeClass(); // remove all possible old classes
    373         t29.tr.editorbox.find(".cancel").click(t29.tr.stop_editing);
    374         t29.tr.editorbox.find(".submit").click(t29.tr.submit_editing);
    375         t29.tr.editorbox.find(".help").click(t29.tr.help);
    376        
    377         t29.tr.editorbox.css({
    378                 top: t29.tr.editor.offset().top - t29.tr.editorbox.outerHeight(),
    379                 left: t29.tr.editor.offset().left,
    380                 width: t29.tr.editor.width()
     440        // Basic initial setup of the editorbox (HTML, callbacks) is already done in general UI)
     441
     442       
     443        t29.tr.editorbox.removeClass()
     444                .css('width', t29.tr.editor.width()) // IMPORTANT - to be done before outerHeight() call
     445                .css({
     446                        top: t29.tr.editor.offset().top - t29.tr.editorbox.outerHeight(),
     447                        left: t29.tr.editor.offset().left
    381448        }).show();
    382449};

  • en/dev/translation/editor.php

    r190 r208  
    4949<input type="hidden" name="out_text" value="Your edit was mailed to the translation team and will be published on the website in the next days. <a href=http://www.technikum29.de<?php print $input; ?>>Return to website</a>">
    5050
    51 <textarea cols="100" rows="30">
     51<textarea name="text" cols="100" rows="30">
    5252<?php print html2text($content); ?>
    5353</textarea>

  • en/dev/translation/messages.xml

    r207 r208  
    3636                <div id="tr-infobox"></div>
    3737                <div id="tr-editorbox"></div>
    38                 <div id="tr-topbox">
    39                         <h3>Thank you for improving this page</h3>
    40                         <p>Simply hover the text with your mouse and edit a paragraph by clicking on it.</p>
    41                 </div>
    4238               
    4339                <!--
    … …  
    4642                <div class="tr-body-borders tr-enabled" style="left:0;right:0;bottom:0;width:10px"></div>
    4743                -->
     44        </section>
     45       
     46        <section id="create_ui_topbox">
     47        <div class="external-content tr-enabled"><!-- to be placed before #content -->
     48                <div id="tr-topbox">
     49                        <div class="left">
     50                                <h3>Thank you for improving this page</h3>
     51                                <p>Simply hover the text with your mouse and edit a paragraph by clicking on it.</p>
     52                        </div>
     53                        <div class="buttons"><div class="row">
     54                                <div class="field name extends" title="You can enter your name and location to be honoured in the sidebar of this page">
     55                                        <h4>Insert your name</h4>
     56                                    <p class="feedback">Optional: Be mentioned in the credits!</p>
     57                                        <!--<p>You are <input type="text" value="your name" />
     58                                        from <input type="text" value="your location" />. Get
     59                                        credits the way you submit!</p>--></div>
     60                                <div class="field editwhole" title="Edit the whole page at once">
     61                                        <h4>Edit whole Page</h4>
     62                                        <p>You have major plans?</p>
     63                                </div>
     64                                <div class="field feedback extends" title="Give us any feedback about this system or the website">
     65                                        <h4>Feedback</h4>
     66                                        <p>Tell us anything</p>
     67                                </div>
     68                                <div class="field help" title="This is where we can help you">
     69                                        <h4>Help</h4>
     70                                        <p>How to edit</p>
     71                                </div>
     72                                <div class="field exit" title="Return to normal static website">
     73                                        <h4>Exit</h4>
     74                                        <p>Get me out of this</p>
     75                                </div>
     76                        </div></div><!-- buttons -->
     77                        <div class="extender">
     78                                <div class="name">
     79                                        If you want, you can publish your name at the end of this page.
     80                                        <br/>Your Name: <input type="text" name="name" class="defaultvalue" value="e.g. H. Omaba" />,
     81                                        your Location: <input type="text" name="location" class="defaultvalue" value="e.g. Chicago, IL" />
     82                                        <span class="stored"></span>
     83                                </div>
     84                                <div class="feedback">
     85                                        Use this text field to report bugs, make suggestions or comment this language
     86                                        improvement system. You can also look at the
     87                                        <a href="http://dev.technikum29.de" target="_blank">Development Portal</a> for
     88                                        the backyard of technikum29 homepage engineering and translation.
     89                                       
     90                                        <form method="post" action="http://dev.technikum29.de/cgi-bin/mail.php">
     91                                                <input type="hidden" name="to" value="dev" />
     92                                                <input type="hidden" name="subject" value="t29 translation system feedback" />
     93                                                <input type="hidden" name="out_heading" value="Thank you for your corrections" />
     94                                                <input type="hidden" name="out_text" value="ARGHL this is not yet AJAXIFIED!!!" />
     95
     96                                                <textarea name="text">Your text here</textarea>
     97
     98                                                <p><input type="Submit" value="Submit" style="font-weight: bold;" /></p>
     99                                        </form>
     100                                </div>
     101                        </div><!-- extender -->
     102                </div><!-- tr-topbox -->
     103        </div><!-- external-content (wrapper for topbox) -->
    48104        </section>
    49105       

  • en/inc/head.inc.shtm

    r205 r208  
    2121    <script type="text/javascript" src="/shared/js/tools.js"></script>
    2222    <script type="text/javascript" src="/shared/js/common.js"></script>
     23       
     24        <!-- for testing -->
     25        <!--
     26        <script type="text/javascript" src="/en/dev/translation/editor.js"></script>
     27        <script type="text/javascript"> $(t29.tr.preloader.start) </script>
     28        -->
    2329
    2430    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
Note: See TracChangeset for help on using the changeset viewer.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License