Changeset 98d0960 in github


Ignore:
Timestamp:
Jul 6, 2012 6:53:07 AM (11 months ago)
Author:
Thomas Bruederli <thomas@…>
Children:
3efc746
Parents:
30eb9ee
Message:

Improve iframe form buttons display: fix iframe heights and make footer buttons float if scrolling is active

Location:
skins/larry
Files:
1 added
10 edited

Legend:

Unmodified
Added
Removed

  • skins/larry/styles.css

    r14ee44e r98d0960  
    10371037} 
    10381038 
    1039 body.iframe.footerbuttons { 
    1040         margin-bottom: 42px; 
     1039body.iframe.floatingbuttons { 
     1040        margin-bottom: 40px; 
    10411041} 
    10421042 
    … …  
    10651065} 
    10661066 
    1067 body.iframe .footerbuttons { 
     1067body.iframe .footerleft.floating { 
    10681068        position: fixed; 
    10691069        left: 0; 
    … …  
    10721072        z-index: 110; 
    10731073        background: #fff; 
    1074         padding: 8px; 
     1074        padding-top: 8px; 
     1075        padding-bottom: 12px; 
     1076} 
     1077 
     1078body.iframe .footerleft.floating:before { 
     1079        content: " "; 
     1080        position: absolute; 
     1081        top: -6px; 
     1082        left: 0; 
     1083        width: 100%; 
     1084        height: 6px; 
     1085        background: url(images/overflowshadow.png) top center no-repeat; 
    10751086} 
    10761087 
    … …  
    10881099} 
    10891100 
     1101.iframebox { 
     1102        position: absolute; 
     1103        top: 0; 
     1104        left: 0; 
     1105        right: 0; 
     1106        bottom: 28px; 
     1107} 
     1108 
    10901109.footerleft { 
    1091         padding: 0 12px 10px 12px; 
     1110        padding: 0 12px 4px 12px; 
    10921111} 
    10931112 

  • skins/larry/templates/addressbook.html

    r77fad16 r98d0960  
    6868 
    6969<div id="contacts-box" class="uibox"> 
    70         <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> 
     70        <div class="iframebox"> 
     71                <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> 
     72        </div> 
    7173        <roundcube:object name="message" id="message" class="statusbar" /> 
    7274</div> 

  • skins/larry/templates/contactedit.html

    r0be8bd1 r98d0960  
    55<roundcube:include file="/includes/links.html" /> 
    66</head> 
    7 <body class="iframe footerbuttons"> 
     7<body class="iframe"> 
    88 
    99<h1 class="boxtitle"> 
    … …  
    3737</form> 
    3838 
    39 <div class="footerbuttons formbuttons"> 
     39<div class="footerleft formbuttons"> 
    4040        <roundcube:button command="save" type="input" class="button mainaction" label="save" /> 
    4141        <roundcube:button command="show" type="input" class="button" label="cancel" condition="env:action=='edit'" /> 

  • skins/larry/templates/folderedit.html

    rb540ed1 r98d0960  
    1313</div> 
    1414 
    15 <div id="formfooter"> 
    1615<div class="footerleft formbuttons"> 
    1716        <roundcube:button command="save" type="input" class="button mainaction" label="save" /> 
    … …  
    2019        <roundcube:endif /> 
    2120</div> 
    22 </div> 
    2321 
    2422<roundcube:include file="/includes/footer.html" /> 

  • skins/larry/templates/folders.html

    refaf2e0 r98d0960  
    2929 
    3030<div id="folder-details" class="uibox contentbox"> 
    31         <roundcube:object name="folderframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> 
     31        <div class="iframebox"> 
     32                <roundcube:object name="folderframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> 
     33        </div> 
    3234        <roundcube:object name="message" id="message" class="statusbar" /> 
    3335</div> 

  • skins/larry/templates/identities.html

    rd5fedc3 r98d0960  
    2626 
    2727<div id="identity-details" class="uibox contentbox"> 
    28         <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> 
     28        <div class="iframebox"> 
     29                <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> 
     30        </div> 
    2931        <roundcube:object name="message" id="message" class="statusbar" /> 
    3032</div> 

  • skins/larry/templates/identityedit.html

    r223ae9d r98d0960  
    1313</div> 
    1414 
    15 <div id="formfooter"> 
    1615<div class="footerleft formbuttons"> 
    1716        <roundcube:button command="save" type="input" class="button mainaction" label="save" /> 
    18 </div> 
    1917</div> 
    2018 

  • skins/larry/templates/settings.html

    rd5fedc3 r98d0960  
    2222 
    2323<div id="preferences-box" class="uibox contentbox"> 
    24 <roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> 
    25 <roundcube:object name="message" id="message" class="statusbar" /> 
     24        <div class="iframebox"> 
     25                <roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> 
     26        </div> 
     27        <roundcube:object name="message" id="message" class="statusbar" /> 
    2628</div> 
    2729 

  • skins/larry/templates/settingsedit.html

    r28e18c7 r98d0960  
    1313</div> 
    1414 
    15 <div id="formfooter"> 
    1615<div class="footerleft formbuttons"> 
    17 <roundcube:button command="save" type="input" class="button mainaction" label="save" /> 
    18 </div> 
     16        <roundcube:button command="save" type="input" class="button mainaction" label="save" /> 
    1917</div> 
    2018 

  • skins/larry/ui.js

    r30eb9ee r98d0960  
    219219    // don't use $(window).resize() due to some unwanted side-effects 
    220220    window.onresize = resize; 
     221    resize(); 
    221222  } 
    222223 
    … …  
    256257      layout_composeview(); 
    257258    } 
     259 
     260    // make iframe footer buttons float if scrolling is active 
     261    $('body.iframe .footerleft').each(function(){ 
     262      var footer = $(this), 
     263        body = $(document.body), 
     264        floating = footer.hasClass('floating'), 
     265        overflow = body.outerHeight(true) > $(window).height(); 
     266      if (overflow != floating) { 
     267        var action = overflow ? 'addClass' : 'removeClass'; 
     268        footer[action]('floating'); 
     269        body[action]('floatingbuttons'); 
     270      } 
     271    }) 
     272 
    258273  } 
    259274 
Note: See TracChangeset for help on using the changeset viewer.