Changeset 34698

Show
Ignore:
Timestamp:
08/01/09 19:18:17 (4 years ago)
Author:
arccosine
Message:

・文字サイズをでかくした。
・白黒
・スクロールバー表示方法を変更(overflow:auto)
・その他ちょこちょこ修正

Files:
1 modified

Legend:

Unmodified
Added
Removed

  • websites/modoki/index.html

    r34451 r34698  
    1010      } 
    1111      html, body{ 
    12         height: 100%; 
    1312      } 
    1413      body{ 
    1514        color: #333333; 
    1615        background: #f6f6f6; 
    17         font-size: 9pt; 
     16        font-size: 13pt; 
    1817        font-family: Arial, Verdana; 
     18        overflow: none; 
    1919      } 
    2020      #content{ 
    21         width: 100%; 
    22         height: 100%; 
    2321      } 
    2422      #header{ 
    2523        width: 100%; 
    26         position: fixed; 
    2724        height: 25px; 
    28         top: 0; 
    2925        color : #412109; 
    3026        background: #ffc410; 
    … …  
    3228      } 
    3329      #footer{ 
    34         width: 100%; 
    35         position: fixed; 
    3630        background: #f6f6f6; 
    37         bottom: 0; 
     31        height: 122px; 
    3832      } 
    3933      #out{ 
    40         height: 50px; 
    4134        border-top: 1px solid #aaaaaa; 
    42         font-size: 14px; 
     35        font-size: 12pt; 
     36        height: 64px; 
    4337        background: #f6f6f6; 
    4438        clear : both; 
    4539      } 
    4640      #userInput{ 
    47         height: 40px; 
     41        width: 100%; 
    4842      } 
    4943      #multiple{ 
    5044        width: 100%; 
    51         height: 100%; 
     45        height: 40px; 
    5246        border: 1px solid #aaa; 
    53         background: #ffffff; 
    5447      } 
    5548      .user_icon{ 
    … …  
    5750      } 
    5851      .user_icon img{ 
    59         width: 16px; 
    60         height: 16px; 
    61       } 
    62       #out img{ 
    6352        width: 32px; 
    6453        height: 32px; 
     54      } 
     55      #out img{ 
     56        width: 64px; 
     57        height: 64px; 
    6558      } 
    6659      .blocked{ 
    … …  
    8477      ul{ 
    8578        list-style:none; 
    86         } 
     79      } 
    8780      ul#time_line{ 
    88         width: 100%; 
    89         padding-top: 25px; 
    90         padding-bottom: 115px; 
     81        overflow: auto; 
    9182      } 
    9283      ul#time_line li{ 
    93         height: 16px; 
    94         width: 99%; 
     84        height: 32px; 
    9585        clear: left; 
     86      } 
     87      .odd{ 
     88        background-color: #f6f6f6; 
     89      } 
     90      .even{ 
     91        background-color: #cccccc; 
    9692      } 
    9793      .twid{ 
    … …  
    10096      #time_line .twtext{ 
    10197        overflow: hidden; 
    102         height:16px; 
    103       } 
    104       #out .user_icon{ 
    105         display: block; 
    106         float: left; 
    107       } 
    108       #out .twid{ 
    109         display: block; 
    110         float: left; 
    111         margin-right: 5px; 
    112         font-weight: bold; 
     98        height:32px; 
    11399      } 
    114100      #time_line .twname{ 
    115101        width: 100px; 
    116102        overflow: hidden; 
    117         height:16px; 
     103        height:32px; 
    118104        float:left; 
    119105      } 
     106      #out .user_icon{ 
     107        display: block; 
     108      } 
    120109      #out .twname{ 
     110      } 
     111      #out .twid{ 
    121112        float: left; 
    122         font-weight: bold; 
     113        display: block; 
     114        margin-right: 5px; 
    123115      } 
    124116      #out .twtext{ 
    125117        display: block; 
    126118        clear: both; 
    127         margin-left: 36px; 
     119        margin-left: 70px; 
    128120        position: relative; 
    129         top: -16px; 
     121        top: -48px; 
     122        font-size: 16pt; 
     123        overflow : hidden; 
     124        height: 52px; 
     125      } 
     126      #out .odd{ 
     127        background : none; 
     128      } 
     129      #out .even{ 
     130        background : none; 
     131      } 
     132      #out .nameBlock { 
     133        position: relative; 
     134        margin-left: 0px; 
     135        font-weight : bold; 
     136        height : 1em; 
     137        overflow : hidden; 
    130138      } 
    131139      div#tabBox{ 
    … …  
    170178      div#option_area{ 
    171179        padding-top: 25px; 
    172         padding-bottom: 165px; 
     180        padding-bottom: 215px; 
    173181        display: none; 
    174182      } 
    … …  
    229237        this._altanative = (new Date).getTime(); 
    230238        this._crosspost = 0; 
    231         this._version = "0.41"; 
     239        this._version = "0.45"; 
    232240        this._max_id = 0; 
    233241        this.p_name = ""; 
    … …  
    264272        var _tilme_line = content.appendChild(d.createElement("ul")); 
    265273        _tilme_line.id = "time_line"; 
     274        var _tl_height = window.innerHeight - d.getElementById("header").offsetHeight - d.getElementById("footer").offsetHeight - 40; 
     275        _tilme_line.style.height = _tl_height + "px"; 
     276        window.addEventListener("resize", function(){ 
     277          var _tl_height = window.innerHeight - d.getElementById("header").offsetHeight - d.getElementById("footer").offsetHeight - 40; 
     278          _tilme_line.style.height = _tl_height + "px"; 
     279        }, false ); 
    266280 
    267281        //option 
    … …  
    331345        _userInput.name = "userInput"; 
    332346 
    333         var _multiple = _userInput.appendChild(d.createElement("textarea")); 
     347        var _label = _userInput.appendChild(d.createElement("label")); 
     348        _label.setAttribute("for", "multiple"); 
     349 
     350        var _multiple = _label.appendChild(d.createElement("textarea")); 
    334351        _multiple.id = "multiple"; 
    335352        _multiple.name = "multiple"; 
    336353 
    337354        _multiple.addEventListener("keypress", function(e){ 
    338             if( e.which == 13 ){  //if return 
    339               e.preventDefault(); 
     355            switch( e.which ){ 
     356             case 13: 
     357               e.preventDefault(); 
    340358              _self.postTwitter(); 
    341359              this.blur(); 
    342             }else if( e.which == 9){ //if tab 
     360              break; 
     361             case 9:  
    343362              e.preventDefault(); 
    344363              this.blur(); 
     364              break; 
    345365            } 
    346366 
    … …  
    411431          lasts[lasts.length-1].className =lasts[lasts.length-1].className.replace(/read|unread/,"blocked"); 
    412432          var y = lasts[lasts.length-1].offsetTop; 
    413           window.scroll(0,y); 
     433          d.getElementById("time_line").scrollTop = y; 
    414434        }else{ 
    415435          //go to last unread 
    416436          line[0].className = line[0].className.replace(/read|unread/,"blocked"); 
    417437          var y = line[0].offsetTop; 
    418           window.scroll(0,y); 
     438          d.getElementById("time_line").scrollTop = y; 
    419439        } 
    420440      }, 
    … …  
    485505          d.getElementById("out").innerHTML = this.nt[0].innerHTML; 
    486506          this.nt[0].className = this.nt[0].className.replace(/read|unread/, "blocked read"); 
    487           window.scroll(0,0); 
     507          //window.scroll(0,0); 
     508          d.getElementById("time_line").scrollTop = 0; 
    488509        }else{ 
    489510          for( var i=0, l=this.nt.length; i<l; i++ ){ 
    … …  
    493514              this.nt[i+diff].className = this.nt[i+diff].className.replace(/read|unread/,"blocked"); 
    494515              var sc = (this.nt[i+diff].offsetHeight+1) * diff; 
    495               window.scrollBy(0, sc); 
     516              d.getElementById("time_line").scrollTop += sc; 
    496517              break; 
    497518            } 
    … …  
    509530          node.parentNode.className = node.parentNode.className.replace(/read|unread/, "blocked" ); 
    510531        } 
    511         window.scroll(0,node.offsetTop); 
     532        d.getElementById("out").innerHTML = node.parentNode.innerHTML; 
    512533      }, 
    513534      postTwitter : function(){ 
    … …  
    597618 
    598619        /*//debug 
     620        var rn = function( n ){ 
     621          var a = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ01234567890!@#$%^&*()_+|~'; 
     622          a = a.split(''); 
     623          var s=''; 
     624          var l=a.length; 
     625          for( var i=0; i<n; i++ ){ 
     626            s += a[Math.floor(Math.random()*l)]; 
     627          } 
     628          return s; 
     629        }; 
    599630        for( var i=0; i<200; i++ ){ 
    600631          obj = new Object(); 
    601632          obj.id = i; 
    602633          obj["user"] = new Object();  
    603           obj.user.profile_image_url = "http://s3.amazonaws.com/twitter_production/profile_images/248291925/miku_tome_normal.gif"; 
    604           obj.user.screen_name = "hoge"; 
    605           //obj.user.name = "piyo"; 
    606           obj.user.name = "piyo@piyopiyopiyopiy"; 
    607           //obj.text = "fugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafuga"; 
    608           obj.text = "������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������" + Math.random(i); 
    609           //obj.text = "fugafuga" + Math.random(i); 
    610  
    611           createLiTag(obj); 
     634          obj.user.profile_image_url = "https://s3.amazonaws.com/twitter_production/profile_images/333996414/twitterProfilePhoto_bigger.jpg"; 
     635          obj.user.screen_name = rn(10); 
     636          obj.user.name = rn(20); 
     637          obj.text = rn(140); 
     638 
     639          createLiTag(obj, i); 
    612640        } 
    613641        //*/this.getJSON(url); 
    … …  
    635663 
    636664      var cb = function(data){ 
    637         for( var i=data.length; i-- > 0; createLiTag(data[i]) ); 
     665        for( var i=data.length; i-- > 0; createLiTag(data[i], i) ); 
    638666        var _script = d.getElementsByTagName("script"); 
    639667        _script[_script.length-1].parentNode.removeChild(_script[_script.length-1]); 
    640668      }; 
    641669 
    642       var createLiTag = function(obj){ 
     670      var createLiTag = function(obj, n){ 
    643671        //check obj 
    644672        var o = d.getElementById(obj.id); 
    … …  
    654682          liTag.className += " fav"; 
    655683        } 
    656  
    657684        liTag.addEventListener("click", function(e){  modoki.mousemove(e.target); }, false ); 
    658685 
    … …  
    663690        imgTag.src = obj["user"]["profile_image_url"]; 
    664691 
    665         var twidDiv = liTag.appendChild(d.createElement("div")); 
     692        var nameBlock = liTag.appendChild(d.createElement("div")); 
     693        nameBlock.className = "nameBlock"; 
     694 
     695        var twidDiv = nameBlock.appendChild(d.createElement("div")); 
    666696        twidDiv.appendChild(d.createTextNode(obj["user"]["screen_name"] + "/")); 
    667697        twidDiv.className = "sub twid"; 
    668698 
    669         var nameDiv = liTag.appendChild(d.createElement("div")); 
     699        var nameDiv = nameBlock.appendChild(d.createElement("div")); 
    670700        nameDiv.appendChild(d.createTextNode(obj["user"]["name"])); 
    671701        nameDiv.className = "sub twname"; 
    … …  
    677707        textDiv.innerHTML = text; 
    678708        textDiv.className = "sub twtext"; 
     709 
     710        if( n % 2 == 0 ){ 
     711          nameDiv.className += " even"; 
     712          textDiv.className += " even"; 
     713        }else{ 
     714          nameDiv.className += " odd"; 
     715          textDiv.className += " odd"; 
     716        } 
     717 
    679718      }; 
    680719    </script>