Changeset 232


Ignore:
Timestamp:
08/31/09 08:27:08 (11 years ago)
Author:
sander
Message:

Finished design of the upload page

Location:
branches/design/server/www/app
Files:
2 added
3 edited

Legend:

Unmodified
Added
Removed
  • branches/design/server/www/app/views/requests/add.ctp

    r185 r232  
    7777</script> 
    7878 
    79 <div class="requests form"> 
    8079<?php 
    8180        $javascript->link('jquery-1.3.2.min.js', false); 
    8281        $javascript->link('jquery-ui-accordion-1.6rc6.min.js', false); 
    8382        $javascript->link('jquery.rich-array-min.js', false); 
    84         echo $form->create('Request', array('type' => 'file')); 
    8583?> 
    86         <fieldset style="width: 28%; float: right; margin-top: 0;"> 
    87                 <legend><?php __('About');?></legend> 
    88                 <?php __('These days many excellent office products compete for your attention, thanks to the rise of vendor neutral file formats like ODF.');?> 
    89                 <?php __('Officeshots.org is a place where you can upload your own Office documents to see how they work in different software products.');?> 
    90                 <p><a href="/pages/about"><?php __('Read more');?></a></p> 
    91         </fieldset> 
    92         <fieldset style="width: 60%;"> 
    93                 <legend><?php __('Add Request');?></legend> 
     84 
     85<div id="request-add"> 
     86        <?php echo $form->create('Request', array('type' => 'file')); ?> 
     87        <fieldset id="upload"> 
     88                <legend><?php __('Upload your documents!');?></legend> 
    9489                <?php 
    9590                        if ($can_submit_requests) { 
    9691                                echo $form->file('Request.FileUpload'); 
     92                                echo $form->button(__('Upload', true), array('type' => 'submit', 'id' => 'RequestFileSubmit')); 
    9793                        } else { 
    9894                                __('Officeshots is in closed beta. You need to <a href="/users/login">login</a> or <a href="/users/register">register</a> before you can upload documents.'); 
    9995                                echo $form->file('Request.FileUpload', array('disabled' => true)); 
     96                                echo $form->button(__('Upload', true), array('type' => 'submit', 'disabled' => true, 'id' => 'RequestFileSubmit')); 
    10097                        } 
    10198                ?> 
     
    121118                ?> 
    122119        </fieldset> 
    123         <fieldset id="applications" style="border: 1px solid #ccc; clear: right;"> 
     120        <fieldset id="applications"> 
    124121                <legend><?php __('Choose applications'); ?></legend> 
     122                <div id="applications-container"> 
    125123 
    126                 <span> 
     124                <span id="select"> 
    127125                        <?php __('Select:')?> <a href="javascript:select_apps('all')"><?php __('All');?></a> - 
    128126                        <a href="javascript:select_apps('none')"><?php __('None');?></a> - 
     
    133131                        <?php endforeach; ?> 
    134132                </span> 
    135         <?php foreach ($doctypes as $doctype): ?> 
    136         <div style="margin: 0; padding: 0;"> 
    137                 <h3 style="padding-top: 0.5em; cursor: pointer;" class="<?php echo implode(' ', Set::extract('/Mimetype[doctype_id='.$doctype['Doctype']['id'].']/extension', $mimetypes)); ?>"> 
    138                         <?php echo $doctype['Doctype']['name'];?> 
    139                 </h3> 
    140                 <div style="margin-bottom: 0;"> 
    141                 <table> 
    142                         <tr> 
    143                                 <?php 
    144                                 $width = (int) 100 / sizeof($platforms); 
    145                                 foreach ($platforms as $platform) { 
    146                                         echo '<th style="width: '.$width.'%">' . $platform['Platform']['name'] . '</th>'; 
    147                                 } 
    148                                 ?> 
    149                         </tr> 
    150                         <tr> 
    151                                 <?php foreach ($platforms as $platform): ?> 
    152                                 <td> 
    153                                         <?php  
    154                                                 foreach($workers as $worker) { 
    155                                                         if ($worker['Doctype']['code'] == $doctype['Doctype']['code'] && $worker['Platform']['name'] == $platform['Platform']['name']) { 
    156                                                                 echo "\n" . '<input type="checkbox" name="data[Request][App][]" id="' . $worker['short_id'] . '" value="' . $worker['id'] . '" />' 
    157                                                                         . "\n" . '<label for="' . $worker['short_id'] . '">' 
    158                                                                         . $worker['Application']['name'] . ' ' 
    159                                                                         . $worker['Worker']['version'] 
    160                                                                         . "</label>\n"; 
    161                                                         } 
    162                                                 }  
     133                <?php foreach ($doctypes as $doctype): ?> 
     134                <div> 
     135                        <h3 class="<?php echo implode(' ', Set::extract('/Mimetype[doctype_id='.$doctype['Doctype']['id'].']/extension', $mimetypes)); ?>"> 
     136                                <?php echo $doctype['Doctype']['name'];?> 
     137                        </h3> 
     138                        <div style="margin-bottom: 0;"> 
     139                        <table> 
     140                                <tr> 
     141                                        <?php 
     142                                        $width = (int) 100 / sizeof($platforms); 
     143                                        foreach ($platforms as $platform) { 
     144                                                echo '<th style="width: '.$width.'%"><span class="platform">' . $platform['Platform']['name'] . '</span></th>'; 
     145                                        } 
    163146                                        ?> 
    164                                 </td> 
    165                                 <?php endforeach;?> 
    166                         </tr> 
    167                 </table> 
     147                                </tr> 
     148                                <tr> 
     149                                        <?php foreach ($platforms as $platform): ?> 
     150                                        <td> 
     151                                                <?php  
     152                                                        foreach($workers as $worker) { 
     153                                                                if ($worker['Doctype']['code'] == $doctype['Doctype']['code'] && $worker['Platform']['name'] == $platform['Platform']['name']) { 
     154                                                                        echo "\n" . '<input type="checkbox" name="data[Request][App][]" id="' . $worker['short_id'] . '" value="' . $worker['id'] . '" />' 
     155                                                                                . "\n" . '<label for="' . $worker['short_id'] . '">' 
     156                                                                                . $worker['Application']['name'] . ' ' 
     157                                                                                . $worker['Worker']['version'] 
     158                                                                                . "</label>\n"; 
     159                                                                } 
     160                                                        }  
     161                                                ?> 
     162                                        </td> 
     163                                        <?php endforeach;?> 
     164                                </tr> 
     165                        </table> 
     166                        </div> 
    168167                </div> 
    169         </div> 
    170         <?php endforeach; ?> 
     168                <?php endforeach; ?> 
     169 
     170                </div> 
    171171        </fieldset> 
    172         <?php 
    173                 if ($can_submit_requests) { 
    174                         echo $form->end(__('Submit', true)); 
    175                 } else { 
    176                         echo $form->end(array('label' => __('Submit', true), 'disabled' => true)); 
    177                 } 
    178         ?> 
     172        <?php echo $form->end(); ?> 
    179173</div> 
    180174 
    181 <p><?php __('You want to try which Office software is any good for you or your organisation? It&#8217;s very easy. Five steps:');?></p> 
    182 <ol> 
    183         <li><?php __('Submit a document that contains features you typically require.');?></li> 
    184         <li><?php __('Take a pick from the supported word processors, spreadsheet and presentation packages.');?></li> 
    185         <li><?php __('Select what you would like to see: PDF exports, screen output or ODF roundtrips.');?></li> 
    186         <li><?php __('Wait a bit while we work our magic...');?></li> 
    187         <li><?php __('Grab the results and compare them!');?></li> 
    188 </ol> 
    189  
    190 <p><?php __('Disclaimer:');?></p> 
    191 <ul> 
    192         <li><?php __('Do not submit confidential documents. We don&#8217;t publish them, but there is no protection in the cloud.');?></li> 
    193         <li><?php __('If you get strange results, check if your input document is technically sound through <a href="http://tools.odftoolkit.org/odfvalidator">The ODF Validator</a>.');?></li> 
    194         <li><?php __('If you use your own fonts, you may be unpleasantly surprised to find out that office files don&#8217;t carry any font information. So your beautifully styled pages with hand written fonts have always looked that bad when other people opened them.');?></li> 
    195         <li><?php __('Don&#8217;t forget that the quality of your input document matters! It might be that your current software supplier has an immature implementation of ODF.');?></li> 
    196 </ul> 
    197  
    198 <br /><br /><img src="/img/thanks.png" id="sponsors" /> 
  • branches/design/server/www/app/webroot/css/cake.generic.css

    r50 r232  
    2929/* General Style Info */ 
    3030body { 
    31         background: #003d4c; 
    3231        color: #fff; 
    3332        font-family:'lucida grande',verdana,helvetica,arial,sans-serif; 
     
    3635} 
    3736a { 
    38         background:#fff; 
    3937        color: #003d4c; 
    4038        text-decoration: underline; 
     
    4240} 
    4341a:hover { 
    44         background:#fff; 
    4542        color: #003d4c; 
    4643        text-decoration:none; 
     
    6057h2 { 
    6158        background:#fff; 
    62         color: #e32; 
     59        color: #5a96e6; 
    6360        font-family:'Gill Sans','lucida grande',helvetica, arial, sans-serif; 
    6461        font-size: 190%; 
     
    109106        clear: both; 
    110107        color: #333; 
    111         padding: 10px 20px 40px 20px; 
     108        padding: 10px 20px 20px 20px; 
    112109        overflow: auto; 
    113110} 
     
    125122/* Tables */ 
    126123table { 
    127         background: #fff; 
    128124        border:1px solid #ccc; 
    129125        border-right:0; 
     
    134130} 
    135131th { 
    136         background: #f2f2f2; 
    137132        border:1px solid #bbb; 
    138133        border-top: 1px solid #fff; 
     
    141136} 
    142137th a { 
    143         background:#f2f2f2; 
    144138        display: block; 
    145139        padding: 2px 4px; 
     
    147141} 
    148142th a:hover { 
    149         background: #ccc; 
    150143        color: #333; 
    151144        text-decoration: none; 
    152145} 
    153146table tr td { 
    154         background: #fff; 
    155147        border-right: 1px solid #ccc; 
    156148        padding: 4px; 
     
    159151} 
    160152table tr.altrow td { 
    161         background: #f4f4f4; 
    162153} 
    163154td.actions { 
     
    228219fieldset legend { 
    229220        background:#fff; 
    230         color: #e32; 
     221        color: #5a96e6; 
    231222        font-size: 160%; 
    232223        font-weight: bold; 
     
    271262input, textarea { 
    272263        clear: both; 
    273         font-size: 140%; 
     264        font-size: 110%; 
    274265        font-family: "frutiger linotype", "lucida grande", "verdana", sans-serif; 
    275266        padding: 2px; 
     
    324315} 
    325316p.error { 
    326         background-color: #e32; 
     317        background-color: #5a96e6; 
    327318        color: #fff; 
    328319        font-family: Courier, monospace; 
  • branches/design/server/www/app/webroot/css/cake.override.css

    r231 r232  
    44 
    55body { 
    6         background-color: #fff; 
     6        padding: 32px; 
     7        background-color: #d0d0d0; 
    78} 
    89 
     10#container { 
     11        margin-bottom: 2em; 
     12        background-color: #fff; 
     13        border: 1px solid #fff; 
     14        -moz-box-shadow: #999 0px 0px 24px; 
     15} 
     16 
     17/* Header */ 
    918#header { 
    1019        margin: 10px 20px; 
     
    3140#lang-select { 
    3241        position: absolute; 
    33         top: 10px; 
    34         right: 135px; 
     42        top: 42px; 
     43        right: 167px; 
    3544        text-align: right; 
    3645} 
     
    4453} 
    4554 
     55/* Navigation */ 
     56 
    4657#top-controllers { 
    4758        display: block; 
    4859        position: absolute; 
    49         top: 100px; 
    50         right: 90px; 
     60        top: 132px; 
     61        right: 122px; 
    5162        font-size: 12pt; 
    5263        text-align: right; 
     
    6071} 
    6172 
     73/* Footer */ 
    6274#footer { 
    6375        font-size: 12pt; 
    6476        text-align: left; 
    65         margin-bottom: 2em; 
     77        margin-bottom: 0.5em; 
    6678} 
    6779 
    68 #RequestAddForm #RequestFile { 
    69         margin-top: 1em; 
     80/* Upload request */ 
     81#upload { 
     82        margin: 0; 
     83        border: none; 
    7084} 
    7185 
    72 #RequestAddForm input[type=radio] { 
     86#upload legend { 
     87        font-size: 42pt; 
     88        color: #5a96e6; 
     89        font-weight: normal; 
     90} 
     91 
     92#upload div { margin: 0; } 
     93 
     94#upload ul, #upload li { 
     95        display: inline; 
     96        margin: 0; 
     97} 
     98 
     99#upload input[type=radio] { 
    73100        float: none; 
    74101        margin: 0; 
     
    84111} 
    85112 
    86 #RequestFormatIdList { list-style: none; margin-top: 10px; } 
    87 #RequestFormatIdList li { float: left; } 
     113#RequestFileUpload { 
     114        width: auto; 
     115        display: inline; 
     116        margin-bottom: 0.5em; 
     117} 
    88118 
    89 #sponsors { display: block; width: auto; margin: 0 auto; } 
     119#RequestFileSubmit { 
     120        padding: 0px 10px; 
     121        margin-bottom: 0.5em; 
     122} 
    90123 
     124/* Select applications */ 
     125#applications { 
     126        margin: 0 3em; 
     127        padding: 4px; 
     128        border: 1px double #bbb; 
     129        -moz-border-radius: 5px; 
     130        color: #eee; 
     131} 
     132#applications legend { display: none; } 
     133 
     134#applications-container { 
     135        position: relative; 
     136        margin: 0; 
     137        border: 1px solid #aaa; 
     138        background: #333 url(/img/sand.jpg) no-repeat scroll top center; 
     139} 
     140 
     141#applications-container #select a { 
     142        color: #eee; 
     143        font-weight: normal; 
     144} 
     145 
     146#applications-container div { 
     147        margin: 0; 
     148        padding: 0; 
     149} 
     150 
     151#applications h3 { 
     152        padding-top: 0.5em; 
     153        color: #eee; 
     154        outline-color: #444; 
     155        outline-width: 0px; 
     156        text-align: right; 
     157        font-size: 20pt; 
     158        cursor: pointer; 
     159} 
     160 
     161#applications th { 
     162        border: none; 
     163        padding-left: 10px; 
     164        background: #ffb839 url(/img/platform-header.png) no-repeat scroll top left; 
     165        color: #111; 
     166} 
     167 
     168#applications th span { 
     169        display: block; 
     170        height: 22px; 
     171        padding-top: 2px; 
     172        padding-right: 10px; 
     173        background: #ffb839 url(/img/platform-header.png) no-repeat scroll top right; 
     174} 
     175 
     176#applications table { border-spacing: 8px; } 
     177#applications table, #applications tr td { 
     178        border: none; 
     179        color: #eee; 
     180} 
     181 
     182#applications tr td { font-size: 9pt; } 
     183 
     184#applications input { margin: 0 4px 0 0; } 
     185 
     186/* Generic overrides */ 
    91187form { width: 100%; } 
    92  
    93188ul, ol { margin: 1em 0 0 4em; } 
Note: See TracChangeset for help on using the changeset viewer.