Changeset 1513


Ignore:
Timestamp:
03/24/08 11:34:05 (4 years ago)
Author:
Heilemann
Message:

Initial work on the Monolith Timeline. Loupe can be resized and moved. The timeline can be clicked and double clicked.

Lots of work still. Please excuse the mess :)

Location:
branches/monolith
Files:
4 added
1 deleted
6 edited

Legend:

Unmodified
Added
Removed

  • branches/monolith/system/admin/css/admin.css

    r1470 r1513  
    718718 
    719719.dashboard .module { 
     720        position: relative; 
    720721        float: left; 
    721722        width: 50%; 
    722723        height: 260px; 
    723         position: relative; 
    724724        } 
    725725 
    … …  
    10311031/* TIMELINE */ 
    10321032 
    1033 .timeline span { 
    1034         float: left; 
    1035         } 
    1036  
    1037 .timeline .newer a, .timeline .older a { 
     1033.navigator { 
     1034        padding: ; 
     1035        } 
     1036 
     1037.navigator span { 
     1038        float: left; 
     1039        } 
     1040 
     1041.navigator .newer a, .navigator .older a { 
    10381042        font-weight: bold; 
    10391043        color: #333; 
    10401044        } 
    10411045 
    1042 .timeline .currentposition { 
     1046.navigator .currentposition { 
    10431047        text-align: center; 
    10441048        } 
    10451049 
    1046 .timeline span input { 
     1050.navigator span input { 
    10471051        width: 90%; 
    10481052        margin: 0 5%; 
    10491053        } 
    1050  
    1051 .timeline .newer { 
     1054         
     1055.navigator .newer { 
    10521056        text-align: right; 
    10531057        } 
     1058 
     1059.timeline { 
     1060        position: relative; 
     1061        background: #111; 
     1062        width: 830px; 
     1063        height: 50px; 
     1064        clear: both; 
     1065        margin-top: 33px; 
     1066        margin-left: -40px; 
     1067        overflow: hidden; 
     1068        } 
     1069 
     1070.timeline .years { 
     1071        display: table; 
     1072        height: 50px; 
     1073        position: absolute; 
     1074        right: 0; 
     1075        cursor: col-resize; 
     1076        background: #222; 
     1077        } 
     1078 
     1079.timeline .years .months { 
     1080        display: table-row; 
     1081        height: inherit; 
     1082        overflow: none; 
     1083        position: relative; 
     1084        } 
     1085 
     1086.timeline .years .months div { 
     1087        display: table-cell; 
     1088        border-right: 1px solid #111; 
     1089        height: inherit; 
     1090        overflow: hidden; 
     1091        } 
     1092 
     1093.timeline .years .months div span { 
     1094        margin: 4px; 
     1095        color: #ddd; 
     1096        text-transform: uppercase; 
     1097        font-size: 9px; 
     1098        } 
     1099 
     1100.timeline .track { 
     1101        position: relative; 
     1102        height: inherit; 
     1103        margin-left: auto; 
     1104        } 
     1105 
     1106 
     1107.timeline .handle { 
     1108        background: url('../images/loupebg.png') repeat-x; 
     1109        height: 50px; 
     1110        width: 20px; 
     1111        position: absolute; 
     1112        top: 0; 
     1113        cursor: move; 
     1114        } 
     1115 
     1116.timeline .handle .resizehandleleft, 
     1117.timeline .handle .resizehandleright { 
     1118        cursor: col-resize; 
     1119        background: url('../images/loupehandle.png') 2px center no-repeat; 
     1120        width: 7px; 
     1121        height: inherit; 
     1122        margin-left: -2px; 
     1123        } 
     1124 
     1125.timeline .handle .resizehandleright { 
     1126        background-position: 2px; 
     1127        position: absolute; 
     1128        right: -2px; 
     1129        } 
     1130 
    10541131 
    10551132/* TAGS */ 

  • branches/monolith/system/admin/dashboard.php

    r1506 r1513  
    6868 
    6969                                        <p class="buttons"> 
    70                                                 <input type="submit" value="Submit"></input> 
     70                                                <input type="submit" value="Submit"> 
    7171                                        </p> 
    7272                                </div> 
    … …  
    117117 
    118118                                        <p class="buttons"> 
    119                                                 <input type="submit" value="Submit"></input> 
     119                                                <input type="submit" value="Submit"> 
    120120                                        </p> 
    121121                                </div> 
    … …  
    194194 
    195195                                        <p class="buttons"> 
    196                                                 <input type="submit" value="Submit"></input> 
     196                                                <input type="submit" value="Submit"> 
    197197                                        </p> 
    198198                                </div> 
    … …  
    205205                                <form> 
    206206                                        <select><option>Feed</option></select> 
    207                                         <input type="button" value="+"></input> 
     207                                        <input type="button" value="+"> 
    208208                                </form> 
    209209                        </div> 

  • branches/monolith/system/admin/entries.php

    r1393 r1513  
    33 
    44 
    5 <div class="container timeline"> 
     5<div class="container navigator"> 
    66        <span class="older pct10"><a href="#">&laquo; Older</a></span> 
    77        <span class="currentposition pct15 minor">0-20 of 480</span> 
    8         <span class="search pct50"><input type="search" placeholder="Type and wait to search for any entry component" autosave="habaricontent" results="10"></input></span> 
     8        <span class="search pct50"><input type="search" placeholder="Type and wait to search for any entry component" autosave="habaricontent" results="10"></span> 
    99        <span class="nothing pct15">&nbsp;</span> 
    1010        <span class="newer pct10"><a href="#">Newer &raquo;</a></span> 
     11 
     12        <div class="timeline"> 
     13                <div class="years"> 
     14                        <div class="months"> 
     15                                <div><span style="width: 33px">Jan</span></div> 
     16                                <div><span style="width: 46px">Feb</span></div> 
     17                                <div><span style="width: 10px">Mar</span></div> 
     18                                <div><span style="width: 24px">Apr</span></div> 
     19                                <div><span style="width: 63px">May</span></div> 
     20                                <div><span style="width: 56px">Jun</span></div> 
     21                                <div><span style="width: 99px">Jul</span></div> 
     22                                <div><span style="width: 34px">Aug</span></div> 
     23                                <div><span style="width: 33px">Sep</span></div> 
     24                                <div><span style="width: 26px">Okt</span></div> 
     25                                <div><span style="width: 45px">Nov</span></div> 
     26                                <div><span style="width: 24px">Dec</span></div> 
     27                                <div><span style="width: 33px">Jan</span></div> 
     28                                <div><span style="width: 76px">Feb</span></div> 
     29                                <div><span style="width: 30px">Mar</span></div> 
     30                        </div> 
     31                </div> 
     32 
     33                <div class="track"> 
     34                        <div class="handle"> 
     35                                <span class="resizehandleleft"></span> 
     36                                <span class="resizehandleright"></span> 
     37                        </div> 
     38                </div> 
     39 
     40        </div> 
     41 
    1142</div> 
    1243 
    … …  
    1748                <div class="head clear"> 
    1849                        <span class="checkboxandtitle pct30"> 
    19                                 <input type="checkbox" class="checkbox"></input> 
     50                                <input type="checkbox" class="checkbox"> 
    2051                                <a href="#" class="title">'Why Habari Rocks'</a> 
    2152                        </span> 
    … …  
    3869                <div class="head clear"> 
    3970                        <span class="checkboxandtitle pct30"> 
    40                                 <input type="checkbox" class="checkbox"></input> 
     71                                <input type="checkbox" class="checkbox"> 
    4172                                <a href="#" class="title">'Why Habari Rocks'</a> 
    4273                        </span> 
    … …  
    6293        <div class="item controls"> 
    6394                <span class="pct25"> 
    64                         <input type="checkbox"></input> 
     95                        <input type="checkbox"> 
    6596                        <span class="selectedtext minor none">None selected</span> 
    6697                </span> 
    … …  
    6899                        <option>Delete</option> 
    69100                </select> 
    70                 <input type="button" value="Submit" class="submitbutton"></input> 
     101                <input type="button" value="Submit" class="submitbutton"> 
    71102        </div> 
    72103 

  • branches/monolith/system/admin/header.php

    r1445 r1513  
    1111        <script src="<?php Site::out_url('scripts'); ?>/jquery.dimensions.js" type="text/javascript"></script> 
    1212        <script src="<?php Site::out_url('scripts'); ?>/ui.mouse.js" type="text/javascript"></script> 
     13        <script src="<?php Site::out_url('scripts'); ?>/ui.slider.js" type="text/javascript"></script> 
    1314        <script src="<?php Site::out_url('scripts'); ?>/ui.tabs.js" type="text/javascript"></script> 
    1415        <script src="<?php Site::out_url('scripts'); ?>/ui.sortable.js" type="text/javascript"></script> 
    … …  
    3536 
    3637        <div id="menu" class="dropbutton"> 
    37                 <h1 id="menubutton"><a href="<?php URL::out( 'admin', 'page=' . $admin_page ); ?>"><?php echo $admin_page; ?> <span class="hotkey">Q</span></span></a></h1> 
     38                <h1 id="menubutton"><a href="<?php URL::out( 'admin', 'page=' . $admin_page ); ?>"><?php echo $admin_page; ?> <span class="hotkey">Q</span></a></h1> 
    3839 
    3940                <div id="menulist" class="dropbuttonlist"> 

  • branches/monolith/system/admin/js/admin.js

    r1470 r1513  
    1616        } 
    1717} 
     18 
     19// TIMELINE 
     20var timeline = { 
     21        init: function() { 
     22                // No Timeline? No runny-runny. 
     23                if (!$('.timeline').length) return; 
     24 
     25                var timelineWidth = $('.years').width(); 
     26                var steps = $('.years').width()/$('.handle').width(); 
     27 
     28                $('.track') 
     29                .width($('.years').width()) 
     30                .slider({ 
     31                        handle: '.handle', 
     32                        maxValue: timelineWidth-20, 
     33                        stop: function(event, ui) { 
     34                                console.log('Loupe Moved To: '+ui.value) 
     35                        } 
     36                }) 
     37                .unbind('click') 
     38                .bind('dblclick', function(e) { // Double-clicking on either side of the handle moves the handle to the clicked position. 
     39                        // Dismiss clicks on handle 
     40                        if ($(e.target).is('.handle')) return false; 
     41 
     42                        timeline.noJump = true; 
     43                        clearTimeout(timeline.t1); 
     44                        $('.track').slider('moveTo', e.layerX) 
     45                }) 
     46                .bind('click', function(e) { // Clicking either side of the handle moves the handle its own length to that side. 
     47 
     48                        // Dismiss clicks on handle 
     49                        if ($(e.target).is('.handle')) return false; 
     50 
     51                        // Click to left or right of handle? 
     52                        if (e.layerX < $('.track').slider("value") ) 
     53                                timeline.t1 = setTimeout('timeline.moveLoupeLeft()', 300); 
     54                        else 
     55                                timeline.t1 = setTimeout('timeline.moveLoupeRight()', 300); 
     56                }) 
     57                .slider('moveTo', timelineWidth) 
     58 
     59                // Spool the timline handle 
     60                timelineHandle.init(); 
     61        }, 
     62        moveLoupeLeft: function(e) { 
     63                console.log('Jump Left') 
     64                if (timeline.noJump == true) { 
     65                        timeline.noJump = null; 
     66                        return false; 
     67                } 
     68                         
     69                $('.handle').css( 'left', parseInt($('.handle').css('left')) - $('.handle').width() ) 
     70 
     71        }, 
     72        moveLoupeRight: function(e) { 
     73                console.log('Jump Right') 
     74                if (timeline.noJump == true) { 
     75                        timeline.noJump = null; 
     76                        return false; 
     77                } 
     78 
     79                $('.handle').css( 'left', parseInt($('.handle').css('left')) + $('.handle').width() ) 
     80        } 
     81} 
     82 
     83 
     84// TIMELINE HANDLE 
     85var timelineHandle = { 
     86        init: function() { 
     87 
     88                // Resize Handle Left 
     89                $('.resizehandleleft') 
     90                        .mousedown(function(e) { 
     91//                              $('.track').slider('destroy') 
     92 
     93                                timelineHandle.firstMousePos = $('.handle').offset().left - $('.track').offset().left; 
     94                                timelineHandle.initialSize = $('.handle').width(); 
     95 
     96                                $(document).mousemove(timelineHandle.doDragLeft).mouseup(timelineHandle.endDrag); 
     97                                return false; 
     98                        }) 
     99                        .mouseup(timelineHandle.endDrag); 
     100 
     101                $('.resizehandleright') 
     102                        .mousedown(function(e) { 
     103//                              $('.track').slider('destroy') 
     104 
     105                                timelineHandle.firstMousePos = e.clientX; 
     106                                timelineHandle.initialSize = $('.handle').width(); 
     107 
     108                                $(document).mousemove(timelineHandle.doDragRight).mouseup(timelineHandle.endDrag); 
     109                                return false; 
     110                        }) 
     111                        .mouseup(timelineHandle.endDrag); 
     112 
     113        }, 
     114        doDragLeft: function(e) { 
     115                $('.handle').css({ 
     116                        'left':         'auto', 
     117                        'right':        $('.handle').parents('.track').width() - (parseInt($('.handle').css('left')) + $('.handle').width()) 
     118                }) 
     119 
     120                // Set Loupe Width (min 20, max 200) 
     121                $('.handle').css('width', Math.min(Math.max(timelineHandle.initialSize + (timelineHandle.firstMousePos - (e.clientX - $('.track').offset().left)), 20), 200)) 
     122 
     123                return false; 
     124        }, 
     125        doDragRight: function(e) { 
     126                $('.handle').css({ 
     127                        'left':         $('.handle').offset().left - $('.track').offset().left, 
     128                        'right':        'auto' 
     129                }) 
     130 
     131//              if (e.clientX > $('.track').) 
     132 
     133                // Set Loupe Width (min 20, max 200) 
     134                $('.handle').css( 'width', Math.min(Math.max(timelineHandle.initialSize + (e.clientX - timelineHandle.firstMousePos), 20), 200) ) 
     135 
     136                return false; 
     137 
     138        }, 
     139        endDrag: function(e) { 
     140                timeline.noJump = true; 
     141                 
     142                // Reset to using 'left'. 
     143                $('.handle').css({ 
     144                        'left':         $('.handle').offset().left - $('.track').offset().left, 
     145                        'right':        'auto' 
     146                }) 
     147 
     148                $(document).unbind('mousemove', timelineHandle.doDrag).unbind('mouseup', timelineHandle.endDrag); 
     149 
     150                // Destroy and Rebuild the Timeline Slider 
     151//              timeline.init() 
     152 
     153                return false; 
     154        } 
     155} 
     156 
     157 
     158 
     159/* TIMELINE TODO: 
     160        - No dragging right edge of loupe out of timeline 
     161        - No jumping loupe's edges out of timeline 
     162        - Consider step'd resize 
     163        - Draggable timeline 
     164        - Float month name if outside view 
     165        - Display and float years 
     166        - Reinit slider (or do away with slider alltogether and gather the info manually) 
     167        -  
     168*/ 
     169 
    18170 
    19171// SPINNER 
    … …  
    251403        theMenu.init(); 
    252404        dashboard.init(); 
     405        timeline.init(); 
    253406 
    254407        // Damn the lack of proper support for pseudo-classes! 

  • branches/monolith/system/admin/login.php

    r1417 r1513  
    2525<body class="login"> 
    2626 
    27 <div id="page"> 
     27        <div id="page"> 
    2828 
    29         <h1><a href="<?php Site::out_url('habari'); ?>" title="Go to Site"><?php Options::out('title'); ?></a></h1> 
     29                <h1><a href="<?php Site::out_url('habari'); ?>" title="Go to Site"><?php Options::out('title'); ?></a></h1> 
    3030 
    31         <div class="container"> 
     31                <div class="container"> 
    3232 
    33                         <form method="post" action="<?php URL::out( 'user', array( 'page' => 'login' ) ); ?>"> 
     33                                <form method="post" action="<?php URL::out( 'user', array( 'page' => 'login' ) ); ?>"> 
    3434 
    35                                 <p> 
    36                                         <label for="habari_username" class="incontent">Name</label><input type="text" name="habari_username" id="habari_username" class="styledformelement"> 
    37                                 </p> 
    38                                 <p> 
    39                                         <label for="habari_password" class="incontent">Password</label><input type="password" name="habari_password" id="habari_password" class="styledformelement"> 
    40                                 </p> 
    41                                 <p> 
    42                                         <!--<span class="remember"><input type="checkbox" name="remember"><label for="remember">Remember Me</label></span>--> 
    43                                         <input class="submit" type="submit" value="Login"> 
    44                                 </p> 
     35                                        <p> 
     36                                                <label for="habari_username" class="incontent">Name</label><input type="text" name="habari_username" id="habari_username" class="styledformelement"> 
     37                                        </p> 
     38                                        <p> 
     39                                                <label for="habari_password" class="incontent">Password</label><input type="password" name="habari_password" id="habari_password" class="styledformelement"> 
     40                                        </p> 
     41                                        <p> 
     42                                                <!--<span class="remember"><input type="checkbox" name="remember"><label for="remember">Remember Me</label></span>--> 
     43                                                <input class="submit" type="submit" value="Login"> 
     44                                        </p> 
    4545 
    46                         </form> 
     46                                </form> 
     47 
     48                </div> 
    4749 
    4850        </div> 
    49  
    50 </div> 
    51  
    5251 
    5352<?php 
    … …  
    5655        include ('db_profiling.php'); 
    5756?> 
    58 </div> 
    5957</body> 
    6058</html> 
Note: See TracChangeset for help on using the changeset viewer.