Browse files

css update

  • Loading branch information...
1 parent 115e0bb commit dfc1a31dc6edc5ea8530c5b32f5747aa778378d0 takeshi committed Jan 22, 2012
Showing with 997 additions and 87 deletions.
  1. +6 −5 s3tree/build.xml
  2. +33 −0 s3tree/css/bluetrip/README.md
  3. +27 −0 s3tree/css/bluetrip/UNLICENSE.md
  4. +29 −0 s3tree/css/bluetrip/css/ie.css
  5. +46 −0 s3tree/css/bluetrip/css/print.css
  6. +322 −0 s3tree/css/bluetrip/css/screen.css
  7. +46 −0 s3tree/css/bluetrip/css/style.css
  8. BIN s3tree/css/bluetrip/images/grid.png
  9. BIN s3tree/css/bluetrip/images/grid.psd
  10. BIN s3tree/css/bluetrip/images/icons/cross.png
  11. BIN s3tree/css/bluetrip/images/icons/doc.png
  12. BIN s3tree/css/bluetrip/images/icons/email.png
  13. BIN s3tree/css/bluetrip/images/icons/external.png
  14. BIN s3tree/css/bluetrip/images/icons/feed.png
  15. BIN s3tree/css/bluetrip/images/icons/im.png
  16. BIN s3tree/css/bluetrip/images/icons/information.png
  17. BIN s3tree/css/bluetrip/images/icons/key.png
  18. BIN s3tree/css/bluetrip/images/icons/pdf.png
  19. BIN s3tree/css/bluetrip/images/icons/tick.png
  20. BIN s3tree/css/bluetrip/images/icons/visited.png
  21. BIN s3tree/css/bluetrip/images/icons/xls.png
  22. BIN s3tree/css/bluetrip/images/test-small.jpg
  23. +447 −0 s3tree/css/bluetrip/index.html
  24. +2 −2 s3tree/js/s3/view/listview/ListView.js
  25. +1 −5 s3tree/js/s3/view/listview/list.css
  26. +1 −1 s3tree/js/s3/view/listview/list.html
  27. +3 −50 s3tree/js/s3/view/listview/ui.s3list.js
  28. +5 −0 s3tree/js/s3/view/login/LoginView.js
  29. +2 −2 s3tree/js/s3/view/login/login.html
  30. +3 −4 s3tree/js/s3/view/treeview/treeview.css
  31. +3 −0 s3tree/js/s3/view/treeview/ui.s3tree.js
  32. +10 −7 s3tree/main.css
  33. +11 −11 s3tree/main.html
View
11 s3tree/build.xml
@@ -6,27 +6,29 @@
<property name="cal.deps" value="${basedir}/js/closure/bin/calcdeps.py" />
+ <property name="target.js" value="s3/app.js" />
+
<target name="compile" depends="create-deps.js">
<mkdir dir="target" />
<exec dir="${basedir}/js" executable="python">
<arg value="${cal.deps}" />
<arg value="-i" />
- <arg value="s3/app.js" />
+ <arg value="${target.js}" />
<arg value="-c" />
<arg value="../dev-lib/compiler.jar" />
<arg value="--externs_lib" />
<arg value="lib" />
-
+
<arg value="-o" />
<arg value="compiled" />
<arg value="--compiler_flags" />
-
+
<arg value="--compilation_level=SIMPLE_OPTIMIZATIONS" />
<!--arg value="compilation_level=ADVANCED_OPTIMIZATIONS" /-->
@@ -36,7 +38,6 @@
<arg value="--output_file" />
<arg value="../target/compiled.js" />
-
</exec>
</target>
@@ -45,7 +46,7 @@
<exec dir="${basedir}/js" executable="python" output="${basedir}/js/s3/deps.js">
<arg value="${cal.deps}" />
<arg value="-i" />
- <arg value="s3/app.js" />
+ <arg value="${target.js}" />
<arg value="-o" />
<arg value="deps" />
</exec>
View
33 s3tree/css/bluetrip/README.md
@@ -0,0 +1,33 @@
+BlueTrip CSS Framework
+=======================================
+
+A CSS grid-based framework born from the best parts of other frameworks, now with a life of its own.
+
+USAGE
+-----
+
+Add the following four links to the <head> of your page::
+
+ <link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection">
+ <link rel="stylesheet" href="../css/print.css" type="text/css" media="print">
+ <!--[if IE]>
+ <link rel="stylesheet" href="../css/ie.css" type="text/css" media="screen, projection">
+ <![endif]-->
+ <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen, projection">
+
+Make sure you have the stylesheet links correct.
+
+Then edit "screen.css" to change `a[href^="http://yourwebsite.com"]` by putting your url in
+place of yourwebsite.com. This ensures that internal links will not show the external link icon.
+
+Now get designing!
+
+INFORMATION
+-----------
+
+Visit bluetrip.org for more detailed information, instructions, and support.
+
+LICENSE
+-------
+
+BlueTrip is licensed under the Unlicense. See the UNLICENSE.md file for more info.
View
27 s3tree/css/bluetrip/UNLICENSE.md
@@ -0,0 +1,27 @@
+THIS CODE IS RELEASED UNDER [THE UNLICENSE](http://unlucense.org)
+----------------------------------------------------------------------
+
+**This is free and unencumbered software released into the public domain.**
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to [unlicense.org/](http://unlicense.org).
View
29 s3tree/css/bluetrip/css/ie.css
@@ -0,0 +1,29 @@
+/*************************************
+ WELCOME TO THE IE STYLESHEET
+--------------------------------------
+ ie.css
+ BlueTrip CSS Framework
+ http://bluetrip.org
+***************************************/
+
+body {text-align:center;}
+.container {text-align:left;}
+* html .column {overflow-x:hidden;}
+* html legend {margin:-18px -8px 16px 0;padding:0;}
+ol {margin-left:2em;}
+sup {vertical-align:text-top;}
+sub {vertical-align:text-bottom;}
+html>body p code {*white-space:normal;}
+hr {margin:-8px auto 11px;}
+ul { list-style: disc outside; margin-left: 2em; } /* IE can't handle :before and :after */
+ul li { text-indent: 0; margin-left: 0; }
+legend { margin-bottom: 1.6em; } /* IE form margin bug */
+sup, sub { font-size: 100%; } /* IE superscript & subscript bug */
+blockquote p, blockquote ul, blockquote ol, blockquote dl, blockquote pre, blockquote address,
+blockquote table, blockquote form, blockquote h1, blockquote h2, blockquote h3, blockquote h4, blockquote h5, blockquote h6 { margin-top: .8em; margin-bottom: .8em; } /* IE can't handle :first-child */
+* html textarea, * html input { padding: 0; } /* IE < 7 form fix */
+input[type='submit'], input[type='button'] { padding: 0; } /* IE 7 button fix */
+legend+* { margin-top: 0; } /* we already added legend margin */
+a abbr, a acronym { text-decoration: underline; } /* IE 7 bug */
+fieldset legend { margin: 0; } /* IE 6 disappearing legend bug */
+
View
46 s3tree/css/bluetrip/css/print.css
@@ -0,0 +1,46 @@
+/*************************************
+ WELCOME TO THE PRINT STYLESHEET
+--------------------------------------
+ print.css
+ BlueTrip CSS Framework
+ Thanks to Priss Print Framework
+ http://github.com/mikecrittenden/priss
+***************************************/
+
+/*** BODY ***/
+body {width:100% !important; margin:0 !important; padding:0 !important; line-height: 1.4; word-spacing:1.1pt; letter-spacing:0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt;}
+
+/*** HEADINGS ***/
+h1,h2,h3,h4,h5,h6 {font-family: Helvetica, Arial, sans-serif;}
+h1{font-size:19pt;}
+h2{font-size:17pt;}
+h3{font-size:15pt;}
+h4,h5,h6{font-size:12pt;}
+
+/*** ELEMENTS ***/
+code {font: 10px monospace;}
+blockquote {margin: 1.3em; padding: 1em; font-size: 10pt;}
+hr {background-color: #ccc;}
+
+/*** IMAGES ***/
+img {float: left; margin: 1em 1.5em 1.5em 0;}
+a img {border: none;}
+
+/*** LINKS ***/
+a:link, a:visited {background: transparent; font-weight: 700; text-decoration: underline;color:#333;}
+a:link[href^="http://"]:after, a[href^="http://"]:visited:after {content: " (" attr(href) ") "; font-size: 90%;}
+a[href^="http://"] {color:#000;}
+
+/*** TABLES ***/
+table {margin: 1px; text-align:left;}
+th {border-bottom: 1px solid #333; font-weight: bold;}
+td {border-bottom: 1px solid #333;}
+th,td {padding: 4px 10px 4px 0;}
+tfoot {font-style: italic;}
+caption {background: #fff; margin-bottom:2em; text-align:left;}
+thead {display: table-header-group;}
+tr {page-break-inside: avoid;}
+
+/*** Add sections here to hide various parts of the site when printing ***/
+#header, #footer, #navigation, #sidebar, button {display:none;}
+
View
322 s3tree/css/bluetrip/css/screen.css
@@ -0,0 +1,322 @@
+/*************************************
+ WELCOME TO THE STYLESHEET
+--------------------------------------
+ screen.css
+ BlueTrip CSS Framework
+ http://bluetrip.org
+***************************************/
+
+/*** MEYER RESET v1.0 ***/
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
+
+/*** BASIC TYPOGRAPHY ***/
+html { font-size: 62.5%; font-family: "Liberation Sans", Helvetica, Arial, sans-serif; }
+strong, th, thead td, h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+cite, em, dfn { font-style: italic; }
+code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size: 92%; font-family: monaco, "Lucida Console", courier, monospace; }
+del { text-decoration: line-through; color: #666; }
+ins, dfn { border-bottom: 1px solid #ccc; }
+small, sup, sub { font-size: 85%; }
+abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; }
+a abbr, a acronym { border: none; }
+abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: 1px solid #ccc; }
+sup { vertical-align: super; }
+sub { vertical-align: sub; }
+
+/*** QUOTES ***/
+blockquote { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #666; }
+blockquote *:first-child:before { content: "\201C"; }
+blockquote *:first-child:after { content: "\201D"; }
+
+/*** FORMS ***/
+fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
+legend { font-weight: bold; font-size:1.2em; }
+label { font-weight: bold; }
+textarea, input[type='text'], input[type='password'], select { border: 1px solid #ccc; background: #fff; }
+textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover { border-color: #aaa; }
+textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus { border-color: #888; outline: 2px solid #ffffaa; }
+input, select { cursor: pointer; }
+input[type='text'],input[type='password'] { cursor: text; }
+
+/*** BASE SIZES ***/
+.container { font-size: 1.2em; line-height: 1.6em; }
+h1 { font-size: 1.9em; }
+h2 { font-size: 1.7em; }
+h3 { font-size: 1.5em; }
+h4 { font-size: 1.3em; }
+h5 { font-size: 1.2em; }
+h6 { font-size: 1em; }
+
+/*** LISTS ***/
+ul li { margin-left: .85em; }
+ul { list-style-type: disc; }
+ul ul { list-style-type: square; }
+ul ul ul { list-style-type: circle; }
+ol { list-style-position: outside; list-style-type: decimal; }
+dt { font-weight: bold; }
+
+/*** TABLES ***/
+table { border-top: 1px solid #ccc; border-left: 1px solid #ccc; }
+th, td { border-bottom: 1px solid #ddd; border-right: 1px solid #ccc; }
+
+/*** MARGINS & PADDINGS ***/
+blockquote *:first-child { margin: .8em 0; }
+hr, p, ul, ol, dl, pre, blockquote, address, table, form { margin-bottom: 1.6em; }
+/*** NOTE: Calulate header margins: TOP: 1.6em/size, BOTTOM: 1.6em/size/2 ***/
+h1 { margin: 1em 0 .5em; }
+h2 { margin: 1.07em 0 .535em; }
+h3 { margin: 1.14em 0 .57em; }
+h4 { margin: 1.23em 0 .615em; }
+h5 { margin: 1.33em 0 .67em; }
+h6 { margin: 1.6em 0 .8em; }
+th, td { padding: .8em; }
+caption { padding-bottom: .8em; } /*** padding instead of margin for IE ***/
+blockquote { padding: 0 1em; margin: 1.6em 0; }
+fieldset { padding: 0 1em 1em 1em; margin: 1.6em 0; } /*** padding-top is margin-top for fieldsets in Opera ***/
+legend { padding-left: .8em; padding-right: .8em; }
+legend+* { margin-top: 1em; } /*** compensates for the opera margin bug ***/
+textarea, input { padding: .3em .4em .15em .4em; }
+select { padding: .1em .2em 0 .2em; }
+option { padding: 0 .4em; }
+a { position: relative; padding: 0.3em 0 .1em 0; } /*** for larger click-area ***/
+dt { margin-top: .8em; margin-bottom: .4em; }
+ul { margin-left: 1.5em; }
+ol { margin-left: 2.35em; }
+ol ol, ul ol { margin-left: 2.5em; }
+form div { margin-bottom: .8em; }
+
+/*** COLORS ***/
+a:link { text-decoration: underline; color: #36c; }
+a:visited { text-decoration: underline; color: #99c; }
+a:hover { text-decoration: underline; color: #c33; }
+a:active, a:focus { text-decoration: underline; color: #000; }
+code, pre { color: #c33; } /*** very optional, but still useful. W3C uses about the same colors for codes ***/
+
+/*** 24 COLUMN GRID ***/
+.container {width:950px;margin:0 auto;}
+.showgrid {background:url(../images/grid.png);}
+body {margin:1.5em 0;}
+div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23 {float:left;margin-right:10px;}
+div.span-24 {float:left;}
+div.last {margin-right:0;}
+.span-1 {width:30px;}
+.span-2 {width:70px;}
+.span-3 {width:110px;}
+.span-4 {width:150px;}
+.span-5 {width:190px;}
+.span-6 {width:230px;}
+.span-7 {width:270px;}
+.span-8 {width:310px;}
+.span-9 {width:350px;}
+.span-10 {width:390px;}
+.span-11 {width:430px;}
+.span-12 {width:470px;}
+.span-13 {width:510px;}
+.span-14 {width:550px;}
+.span-15 {width:590px;}
+.span-16 {width:630px;}
+.span-17 {width:670px;}
+.span-18 {width:710px;}
+.span-19 {width:750px;}
+.span-20 {width:790px;}
+.span-21 {width:830px;}
+.span-22 {width:870px;}
+.span-23 {width:910px;}
+.span-24, div.span-24 {width:950px;}
+.suffix-1 {padding-right:40px;}
+.suffix-2 {padding-right:80px;}
+.suffix-3 {padding-right:120px;}
+.suffix-4 {padding-right:160px;}
+.suffix-5 {padding-right:200px;}
+.suffix-6 {padding-right:240px;}
+.suffix-7 {padding-right:280px;}
+.suffix-8 {padding-right:320px;}
+.suffix-9 {padding-right:360px;}
+.suffix-10 {padding-right:400px;}
+.suffix-11 {padding-right:440px;}
+.suffix-12 {padding-right:480px;}
+.suffix-13 {padding-right:520px;}
+.suffix-14 {padding-right:560px;}
+.suffix-15 {padding-right:600px;}
+.suffix-16 {padding-right:640px;}
+.suffix-17 {padding-right:680px;}
+.suffix-18 {padding-right:720px;}
+.suffix-19 {padding-right:760px;}
+.suffix-20 {padding-right:800px;}
+.suffix-21 {padding-right:840px;}
+.suffix-22 {padding-right:880px;}
+.suffix-23 {padding-right:920px;}
+.prefix-1 {padding-left:40px;}
+.prefix-2 {padding-left:80px;}
+.prefix-3 {padding-left:120px;}
+.prefix-4 {padding-left:160px;}
+.prefix-5 {padding-left:200px;}
+.prefix-6 {padding-left:240px;}
+.prefix-7 {padding-left:280px;}
+.prefix-8 {padding-left:320px;}
+.prefix-9 {padding-left:360px;}
+.prefix-10 {padding-left:400px;}
+.prefix-11 {padding-left:440px;}
+.prefix-12 {padding-left:480px;}
+.prefix-13 {padding-left:520px;}
+.prefix-14 {padding-left:560px;}
+.prefix-15 {padding-left:600px;}
+.prefix-16 {padding-left:640px;}
+.prefix-17 {padding-left:680px;}
+.prefix-18 {padding-left:720px;}
+.prefix-19 {padding-left:760px;}
+.prefix-20 {padding-left:800px;}
+.prefix-21 {padding-left:840px;}
+.prefix-22 {padding-left:880px;}
+.prefix-23 {padding-left:920px;}
+div.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}
+div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
+.pull-1 {margin-left:-40px;}
+.pull-2 {margin-left:-80px;}
+.pull-3 {margin-left:-120px;}
+.pull-4 {margin-left:-160px;}
+.pull-5 {margin-left:-200px;}
+.pull-6 {margin-left:-240px;}
+.pull-7 {margin-left:-280px;}
+.pull-8 {margin-left:-320px;}
+.pull-9 {margin-left:-360px;}
+.pull-10 {margin-left:-400px;}
+.pull-11 {margin-left:-440px;}
+.pull-12 {margin-left:-480px;}
+.pull-13 {margin-left:-520px;}
+.pull-14 {margin-left:-560px;}
+.pull-15 {margin-left:-600px;}
+.pull-16 {margin-left:-640px;}
+.pull-17 {margin-left:-680px;}
+.pull-18 {margin-left:-720px;}
+.pull-19 {margin-left:-760px;}
+.pull-20 {margin-left:-800px;}
+.pull-21 {margin-left:-840px;}
+.pull-22 {margin-left:-880px;}
+.pull-23 {margin-left:-920px;}
+.pull-24 {margin-left:-960px;}
+.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
+.push-1 {margin:0 -40px 1.5em 40px;}
+.push-2 {margin:0 -80px 1.5em 80px;}
+.push-3 {margin:0 -120px 1.5em 120px;}
+.push-4 {margin:0 -160px 1.5em 160px;}
+.push-5 {margin:0 -200px 1.5em 200px;}
+.push-6 {margin:0 -240px 1.5em 240px;}
+.push-7 {margin:0 -280px 1.5em 280px;}
+.push-8 {margin:0 -320px 1.5em 320px;}
+.push-9 {margin:0 -360px 1.5em 360px;}
+.push-10 {margin:0 -400px 1.5em 400px;}
+.push-11 {margin:0 -440px 1.5em 440px;}
+.push-12 {margin:0 -480px 1.5em 480px;}
+.push-13 {margin:0 -520px 1.5em 520px;}
+.push-14 {margin:0 -560px 1.5em 560px;}
+.push-15 {margin:0 -600px 1.5em 600px;}
+.push-16 {margin:0 -640px 1.5em 640px;}
+.push-17 {margin:0 -680px 1.5em 680px;}
+.push-18 {margin:0 -720px 1.5em 720px;}
+.push-19 {margin:0 -760px 1.5em 760px;}
+.push-20 {margin:0 -800px 1.5em 800px;}
+.push-21 {margin:0 -840px 1.5em 840px;}
+.push-22 {margin:0 -880px 1.5em 880px;}
+.push-23 {margin:0 -920px 1.5em 920px;}
+.push-24 {margin:0 -960px 1.5em 960px;}
+.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}
+hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
+hr.space {background:#fff;color:#fff;}
+.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;max-height:0;overflow:hidden;}
+.clearfix, .container {display:inline-block;}
+* html .clearfix, * html .container {height:1%;}
+.clearfix, .container {display:block;}
+.clear {clear:both;}
+
+/*** FANCY SERIF ***/
+.fancy { color: #666; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; font-style: italic; font-weight: normal; }
+
+/*** SMALL CAPS ***/
+.caps { font-variant: small-caps; letter-spacing: 1px; text-transform: lowercase; font-size:1.2em; font-weight:bold; padding:0 2px; }
+
+/*** NO LINK ICON (use class="noicon" to remove the link icon from a specific link) ***/
+body a.noicon { background:none !important; padding:0 !important; margin:0 !important; }
+
+/*** LINK PADDING FOR ICONS ***/
+a[href^="http:"],
+a[href^="mailto:"],
+a[href$=".pdf"],
+a[href$=".doc"],
+a[href$=".xls"],
+a[href$=".rss"],
+a[href$=".rdf"],
+a[href^="aim:"] { padding:2px 22px 2px 0; margin:-2px 0; background-repeat: no-repeat; background-position: right center; }
+
+/*** EXTERNAL LINK ICONS ***/
+a[href^="http:"] { background-image: url(../images/icons/external.png); padding-right: 14px; }
+a[href^="mailto:"] { background-image: url(../images/icons/email.png); }
+a[href^="http:"]:visited { background-image: url(../images/icons/visited.png); }
+
+/*** FILE LINK ICONS ***/
+a[href$=".pdf"] { background-image: url(../images/icons/pdf.png); }
+a[href$=".doc"] { background-image: url(../images/icons/doc.png); }
+a[href$=".xls"] { background-image: url(../images/icons/xls.png); }
+
+/*** MISCELLANEOUS LINK ICONS ***/
+a[href$=".rss"],
+a[href$=".rdf"] { background-image: url(../images/icons/feed.png); }
+a[href^="aim:"] { background-image: url(../images/icons/im.png); }
+a[href^="http://yourwebsite.com"] { background:none; padding:0; margin:0; }
+
+/*** TEXT CLASSES ***/
+.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
+.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
+.hide {display:none;}
+.quiet {color:#666;}
+.loud {color:#000;}
+.highlight {background:#ff0;}
+.top {margin-top:0;padding-top:0;}
+.bottom {margin-bottom:0;padding-bottom:0;}
+.thin {font-weight: lighter;}
+.error, .notice, .success {padding:.8em;margin-bottom:1.6em;border:2px solid #ddd;}
+.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
+.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
+.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
+.error a {color:#8a1f11; background:none; padding:0; margin:0; }
+.notice a {color:#514721; background:none; padding:0; margin:0; }
+.success a {color:#264409; background:none; padding:0; margin:0; }
+.center {text-align: center;}
+
+/*** STYLES FOR BUTTONS ***/
+a.button, button {
+ display: inline-block;
+ float: left;
+ margin:0 0.583em 0.667em 0;
+ padding:5px 10px 5px 7px; /*** Links ***/
+ border:1px solid #dedede;
+ border-top:1px solid #eee;
+ border-left:1px solid #eee;
+ background-color:#f5f5f5;
+ font-family:"Liberation Sans", Helvetica, Arial, sans-serif;
+ font-size:100%;
+ line-height:130%;
+ text-decoration:none;
+ font-weight:bold;
+ color:#565656;
+ cursor:pointer;
+}
+button { width:auto; overflow:visible; padding:4px 10px 3px 7px; }
+button[type] { padding:4px 10px 4px 7px; line-height:17px; }
+*:first-child+html .container button[type] { padding:4px 10px 3px 7px; }
+button img, a.button img{ margin:0 3px -3px 0 !important; padding:0; border:none; width:16px; height:16px; float:none; }
+
+/*** STANDARD BUTTONS ***/
+button:hover, a.button:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; }
+a.button:active, button:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; }
+
+/*** POSITIVE (LIGHT BACKGROUND) ***/
+body .positive { color:#529214; }
+a.positive:hover, button.positive:hover { background-color:#E6EFC2; border:1px solid #C6D880; color:#529214; }
+a.positive:active, button.positive:active { background-color:#529214; border:1px solid #529214; color:#fff; }
+
+/*** NEGATIVE (DARK BACKGROUND)***/
+body .negative { color:#d12f19; }
+a.negative:hover, button.negative:hover { background:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19; }
+a.negative:active, button.negative:active { background-color:#d12f19; border:1px solid #d12f19; color:#fff; }
+
View
46 s3tree/css/bluetrip/css/style.css
@@ -0,0 +1,46 @@
+/*************************************
+ WELCOME TO THE CUSTOM STYLESHEET
+--------------------------------------
+ style.css
+ BlueTrip CSS Framework
+ Put your custom styles in here.
+***************************************/
+
+/**************************************/
+/* COLOR SCHEME */
+/**************************************
+- black #000
+- white #fff
+- #
+- #
+- #
+***************************************/
+
+
+/**************************************/
+/* GLOBALS */
+/**************************************/
+
+
+/**************************************/
+/* HEADER */
+/**************************************/
+
+
+
+/**************************************/
+/* NAVIGATION */
+/**************************************/
+
+
+
+/**************************************/
+/* MAIN CONTENT */
+/**************************************/
+
+
+
+/**************************************/
+/* FOOTER */
+/**************************************/
+
View
BIN s3tree/css/bluetrip/images/grid.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/grid.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/cross.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/doc.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/email.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/external.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/feed.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/im.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/information.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/key.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/pdf.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/tick.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/visited.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/icons/xls.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN s3tree/css/bluetrip/images/test-small.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
447 s3tree/css/bluetrip/index.html
@@ -0,0 +1,447 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+
+ <!------------------------------------
+ WELCOME TO THE EXAMPLE MARKUP
+ --------------------------------------
+ index.html
+ BlueTrip CSS Framework
+ http://bluetrip.org
+ -------------------------------------->
+
+ <title>Grid &amp; Typography Examples | BlueTrip CSS</title>
+ <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+
+ <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
+ <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
+ <!--[if IE]>
+ <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
+ <![endif]-->
+ <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
+
+</head>
+
+<body>
+ <div class="container showgrid">
+ <div class="span-11 colborder">
+ <h1>Level 1 heading</h1>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h1 class="fancy">Level 1 heading class="fancy"</h1>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h1 class="thin">Level 1 heading class="thin"</h1>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h1 class="caps">Level 1 heading class="caps"</h1>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h2>Level 02 Heading</h2>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h2 class="fancy">Level 2 heading class="fancy"</h2>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h2 class="thin">Level 2 heading class="thin"</h2>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h2 class="caps">Level 2 heading class="caps"</h2>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h3>Level 03 Heading</h3>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h3 class="fancy">Level 3 heading class="fancy"</h3>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h3 class="thin">Level 3 heading class="thin"</h3>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h3 class="caps">Level 3 heading class="caps"</h3>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h4>Level 04 Heading</h4>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h4 class="fancy">Level 4 heading class="fancy"</h4>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h4 class="thin">Level 4 heading class="thin"</h4>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h4 class="caps">Level 4 heading class="caps"</h4>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h5>Level 05 Heading</h5>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h5 class="fancy">Level 5 heading class="fancy"</h5>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h5 class="thin">Level 5 heading class="thin"</h5>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h5 class="caps">Level 5 heading class="caps"</h5>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h6>Level 06 Heading</h6>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h6 class="fancy">Level 6 heading class="fancy"</h6>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h6 class="thin">Level 6 heading class="thin"</h6>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <h6 class="caps">Level 6 heading class="caps"</h6>
+ <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
+ <blockquote><p>Paragraph inside Blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.</p></blockquote>
+ </div><div class="span-12 last">
+ <address>Address: Example address 224, Sweden</address>
+ <pre><strong>Preformated:</strong>Testing one row
+ and another</pre>
+ <p>
+ I am <a href="?abc123">the a tag</a> example<br />
+
+ I am <abbr title="test">the abbr tag</abbr> example<br />
+
+ I am <acronym>the acronym tag</acronym> example<br />
+ I am <b>the b tag</b> example<br />
+ I am <big>the big tag</big> example<br />
+
+ I am <cite>the cite tag</cite> example<br />
+
+ I am <code>the code tag</code> example<br />
+ I am <del>the del tag</del> example<br />
+ I am <dfn>the dfn tag</dfn> example<br />
+
+ I am <em>the em tag</em> example<br />
+
+ I am <i>the i tag</i> example<br />
+ I am <ins>the ins tag</ins> example<br />
+
+ I am <kbd>the kbd tag</kbd> example<br />
+
+ I am <q>the q tag</q> example<br />
+ I am <samp>the samp tag</samp> example<br />
+
+ I am <small>the small tag</small> example<br />
+ I am <span>the span tag</span> example<br />
+ I am <strong>the strong tag</strong> example<br />
+
+ I am <sub>the sub tag</sub> example<br />
+ I am <sup>the sup tag</sup> example<br />
+ I am <tt>the tt tag</tt> example<br />
+ I am <var>the var tag</var> example<br />
+
+ I am the <span class="small">small class</span> example<br />
+ I am the <span class="large">large class</span> example<br />
+ I am the <span class="quiet">quiet class</span> example<br />
+ I am the <span class="highlight">highlight class</span> example<br />
+ </p>
+ <hr />
+ <ul>
+ <li>Unordered list 01</li>
+ <li>Unordered list 02</li>
+ <li>Unordered list 03
+ <ul>
+
+ <li>Unordered list inside list level 2</li>
+
+ <li>Unordered list inside list level 2
+ <ul>
+ <li>Unordered list inside list level 3</li>
+ <li>Unordered list inside list level 3</li>
+ </ul>
+ </li>
+
+ </ul>
+ </li>
+
+ </ul>
+ <ol>
+ <li>Ordered list 01</li>
+ <li>Ordered list 02</li>
+ <li>Ordered list 03
+ <ol>
+ <li>Ordered list inside list level 2</li>
+
+ <li>Ordered list inside list level 2
+ <ol>
+
+ <li>Ordered list inside list level 3</li>
+ <li>Ordered list inside list level 3</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+
+ </ol>
+ <dl>
+ <dt>Description list title 01</dt>
+
+ <dd>Description list description 01</dd>
+ <dt>Description list title 02</dt>
+ <dd>Description list description 02</dd>
+ <dd>Description list description 03</dd>
+
+ </dl>
+ <table>
+ <caption>Table Caption</caption>
+
+ <thead>
+ <tr>
+ <th>Table head th</th>
+ <td>Table head td</td>
+ </tr>
+
+ </thead>
+ <tfoot>
+ <tr>
+
+ <th>Table foot th</th>
+ <td>Table foot td</td>
+ </tr>
+ </tfoot>
+
+ <tbody>
+ <tr>
+ <th>Table body th</th>
+
+ <td>Table body td</td>
+ </tr>
+ <tr>
+ <td>Table body td</td>
+
+ <td>Table body td</td>
+ </tr>
+ </tbody>
+
+ </table>
+ <form action="#">
+ <fieldset>
+ <legend>Form legend</legend>
+ <div><label for="f1">Text input:</label><br /><input type="text" id="f1" value="input text" /></div>
+ <div><label for="pw">Password input:</label><br /><input type="password" id="pw" value="password" /></div>
+ <div><label for="f2">Radio input:</label><br /><input type="radio" id="f2" /></div>
+
+ <div><label for="f3">Checkbox input:</label><br /><input type="checkbox" id="f3" /></div>
+ <div><label for="f4">Select field:</label><br /><select id="f4"><option>Option 01</option><option>Option 02</option></select></div>
+
+ <div><label for="f5">Textarea:</label><br /><textarea id="f5" cols="30" rows="5" >Textarea text</textarea></div>
+ <div><label for="f6">Input Button:</label> <br /><input type="button" id="f6" value="button text" /></div>
+ <div><label>Button Elements: <span class="small quiet"> Can use &lt;button&gt; tag or &lt;a class="button"&gt;</span></label><br />
+ <button class="button positive">
+ <img src="images/icons/tick.png" alt=""/> Save
+ </button>
+
+ <a class="button" href="#">
+ <img src="images/icons/key.png" alt=""/> Change Password
+ </a>
+
+ <a href="#" class="button negative">
+ <img src="images/icons/cross.png" alt=""/> Cancel
+ </a></div>
+
+ </fieldset>
+
+ </form>
+ I am <a href="something.doc">a word document</a> link, so readers know that I'm not a normal link.<br />
+ I am <a href="something.pdf">a pdf document</a> link, so readers know that I'm not a normal link.<br />
+ I am <a href="http://www.something.com">an external website</a> link, so readers know that I'm not a normal link.<br />
+ I am <a href="something.rss">an rss feed</a> link, so readers know that I'm not a normal link.<br />
+ I am <a href="something.xls">an excel spreadsheet</a> link, so readers know that I'm not a normal link.<br />
+ I am <a href="aim:something">an AIM screenname</a> link, so readers know that I'm not a normal link.<br />
+ I am <a href="mailto:something">an email address</a> link, so readers know that I'm not a normal link.<br />
+ I am <a href="http://yourwebsite.com">an internal link</a>. Change the stylesheet's "http://yourwebsite.com" to your domain name so I don't look like an external link.
+ <br /><br />
+ <p class="success"><img src="images/icons/tick.png" alt=""/> This is a paragraph with class="success" and <a href="http://www.something.com">a link</a>.</p>
+ <p class="error"><img src="images/icons/cross.png" alt=""/> This is a paragraph with class="error" and <a href="http://www.something.com">a link</a>.</p>
+ <p class="notice"><img src="images/icons/information.png" alt=""/> This is a paragraph with class="notice" and <a href="http://www.something.com">a link</a>.</p>
+ </div>
+
+ <h1>BlueTrip CSS Grid Examples</h1>
+
+ <div class="span-8">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+ </div>
+ <div class="span-8">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+ </div>
+ <div class="span-8 last">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+ </div>
+
+
+ <div class="span-6 suffix-1">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+ </div>
+ <div class="span-6 suffix-2">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+ </div>
+ <div class="span-6 suffix-3 last">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+ </div>
+
+
+ <div class="span-6 prefix-1">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+ </div>
+ <div class="span-6 prefix-2">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+ </div>
+ <div class="span-6 prefix-3 last">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+ </div>
+ <hr/>
+
+ <div class="span-12 border" style="margin:-4px; border:4px solid black;">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ </div>
+ <div class="span-12 last">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ </div>
+ <hr/>
+
+ <div class="span-1 prefix-1"><p>1</p></div>
+ <div class="span-1 prefix-2"><p>2</p></div>
+ <div class="span-1 prefix-3"><p>3</p></div>
+ <div class="span-1 prefix-4"><p>4</p></div>
+
+ <div class="span-1 prefix-5"><p>5</p></div>
+ <div class="span-1 prefix-3 last"><p>3</p></div>
+
+ <div class="span-1 suffix-1"><p>1</p></div>
+ <div class="span-1 suffix-2"><p>2</p></div>
+ <div class="span-1 suffix-3"><p>3</p></div>
+ <div class="span-1 suffix-4"><p>4</p></div>
+
+ <div class="span-1 suffix-5"><p>5</p></div>
+ <div class="span-1 suffix-3 last"><p>3</p></div>
+
+ <div class="span-1 border"><p>1</p></div>
+ <div class="span-1 border"><p>2</p></div>
+ <div class="span-1 border"><p>3</p></div>
+ <div class="span-1 border"><p>4</p></div>
+
+ <div class="span-1 border"><p>5</p></div>
+ <div class="span-1 border"><p>6</p></div>
+ <div class="span-1 border"><p>7</p></div>
+ <div class="span-1 border"><p>8</p></div>
+ <div class="span-1 border"><p>9</p></div>
+ <div class="span-1 border"><p>10</p></div>
+
+ <div class="span-1 border"><p>11</p></div>
+ <div class="span-1 border"><p>12</p></div>
+ <div class="span-1 border"><p>13</p></div>
+ <div class="span-1 border"><p>14</p></div>
+ <div class="span-1 border"><p>15</p></div>
+ <div class="span-1 border"><p>16</p></div>
+
+ <div class="span-1 border"><p>17</p></div>
+ <div class="span-1 border"><p>18</p></div>
+ <div class="span-1 border"><p>19</p></div>
+ <div class="span-1 border"><p>20</p></div>
+ <div class="span-1 border"><p>21</p></div>
+ <div class="span-1 border"><p>22</p></div>
+
+ <div class="span-1 border"><p>23</p></div>
+ <div class="span-1 last"><p>24</p></div>
+
+
+ <div class="span-4"><p>1</p></div>
+ <div class="span-4"><p>2</p></div>
+ <div class="span-4"><p>3</p></div>
+ <div class="span-4"><p>4</p></div>
+
+ <div class="span-4"><p>5</p></div>
+ <div class="span-4 last"><p>6</p></div>
+
+
+ <div class="prefix-23 span-1 last"><p>24</p></div>
+
+
+ <div class="prefix-1 span-1"><p>2</p></div>
+ <div class="prefix-20 span-1 suffix-1 last"><p>23</p></div>
+ <hr/>
+
+
+ <div class="span-24">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ </div>
+
+
+ <div class="span-12">
+ <div class="span-6">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
+ </div>
+
+ <div class="span-6 last">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+
+ <div class="span-12 last">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+ </div>
+
+ <div class="span-12 last">
+ <div class="span-6">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
+ </div>
+
+ <div class="span-6 last">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+
+ <div class="span-12 last">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+ </div>
+
+
+ <div class="span-14 prefix-5 suffix-5 last">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+
+ <hr/>
+
+ <div class="span-12">
+ <h5>LET'S TRY TESTING .PUSH-1 TO .PUSH-5</h5>
+
+ <div class="span-2"><img src="images/test-small.jpg" alt="Test Image" class="push-1"/></div>
+ <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+
+ <div class="span-2"><img src="images/test-small.jpg" alt="Test Image" class="push-2"/></div>
+ <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+
+
+ <div class="span-2"><img src="images/test-small.jpg" alt="Test Image" class="push-3"/></div>
+ <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+
+ <div class="span-2"><img src="images/test-small.jpg" alt="Test Image" class="push-4"/></div>
+ <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+
+ <div class="span-2"><img src="images/test-small.jpg" alt="Test Image" class="push-5"/></div>
+ <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+
+
+ </div>
+
+ <div class="span-12 last">
+ <h5>NOW HOW ABOUT TESTING .PULL-1 TO .PULL-5</h5>
+
+ <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+ <div class="span-2 last"><img src="images/test-small.jpg" alt="Test Image" class="top pull-1"/></div>
+
+ <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+
+ <div class="span-2 last"><img src="images/test-small.jpg" alt="Test Image" class="top pull-2"/></div>
+
+ <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+ <div class="span-2 last"><img src="images/test-small.jpg" alt="Test Image" class="top pull-3"/></div>
+
+ <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+ <div class="span-2 last"><img src="images/test-small.jpg" alt="Test Image" class="top pull-4"/></div>
+
+ <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+ <div class="span-2 last"><img src="images/test-small.jpg" alt="Test Image" class="top pull-5"/></div>
+
+ </div>
+ <div class="span-24 last center">
+ <p>
+ <a href="http://validator.w3.org/check?uri=referer" class="noicon">
+ <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
+ </a>
+ <a href="http://jigsaw.w3.org/css-validator/" class="noicon">
+ <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
+ </a>
+ </p>
+ </div>
+
+ </div> <!-- end .container -->
+
+</body>
+</html>
+
View
4 s3tree/js/s3/view/listview/ListView.js
@@ -45,7 +45,8 @@ goog.inherits(s3.view.listview.ListView, Backbone.View);
$(table).dataTable({
"bScrollInfinite" : true,
"bScrollCollapse" : true,
- "sScrollY" : "200px"
+ "sScrollY" : "480px",
+ "iLength" : 30
});
self.bindEvent();
});
@@ -57,7 +58,6 @@ goog.inherits(s3.view.listview.ListView, Backbone.View);
var key = $(this).attr("key");
var url = self.s3client.createGetUrl(self.bucket, key);
window.open(url);
- // alert(url);
event.preventDefault();
});
};
View
6 s3tree/js/s3/view/listview/list.css
@@ -1,8 +1,4 @@
-.s3listview {
- font-size: 10px;
-}
-
.s3table {
- height: 720px;
+ height: 522px;
overflow: scroll;
}
View
2 s3tree/js/s3/view/listview/list.html
@@ -1,7 +1,7 @@
<div class="s3listview ui-widget">
<div class="s3table ui-widget-content">
<div>
- <input value="{{=Prefix}}" style="width: 99%">
+ <input value="{{=Prefix}}" style="width: 98%; margin: 0px;">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="display"
id="example">
View
53 s3tree/js/s3/view/listview/ui.s3list.js
@@ -1,68 +1,21 @@
goog.provide("s3.view.listview");
goog.require("s3.view.listview.ListView");
+goog.require("downtown.Loader");
-(function($) {
- // var LIST_VIEW = "s3/view/listview/list";
-
- // require([ "jquery", "iemon/iemon", "iemon/EventBus", "s3/parser/XmlParser",
- // "iemon/utils", ],//
- // function($, iemon, EventBus, XmlParser, utils) {
+downtown.Loader.loadCss("s3/view/listview/list");
+(function($) {
$.widget("ui.s3list", {
options : {
eventBus : null
},
- // _updateList : function(prefix) {
- // var self = this;
- // this.options.s3client.list(this.options.bucket, null, prefix, "/", {
- // success : function(data) {
- // var result = XmlParser.parseListBucketResult(data);
- // result.ContentsList.sort(utils.namesort);
- // $(self.element).children().remove();
- //
- // var html = $.render(result, LIST_VIEW);
- // $(html).appendTo(self.element);
- // var table = $(html).find("table");
- //
- // $(table).dataTable({
- // "bScrollInfinite" : true,
- // "bScrollCollapse" : true,
- // "sScrollY" : "200px"
- // });
- //
- // $(self.element).find("a").bind(
- // "dblclick",
- // function(event) {
- // var key = $(this).attr("key");
- // var url = self.options.s3client.createGetUrl(
- // self.options.bucket, key);
- // window.open(url);
- // event.preventDefault();
- // })
- // //
- // .hover(function() {
- // $(this).addClass("hover");
- // }, function() {
- // $(this).removeClass("hover");
- // });
- // }
- // });
- // },
_create : function() {
this.view = new s3.view.listview.ListView({
el : this.element,
eventBus : this.options.eventBus
});
this.view.bindEventBus();
- // var self = this;
- // this.options.eventBus.bind("changePrefix", function(event, prefix) {
- // if (window.location.hash != prefix) {
- // window.location.hash = prefix;
- // }
- // self._updateList(prefix);
- // });
- // this._updateList(this.options.prefix);
}
});
// });
View
5 s3tree/js/s3/view/login/LoginView.js
@@ -36,6 +36,10 @@ goog.inherits(s3.view.login.LoginView, Backbone.View);
s3.view.login.LoginView.prototype.bindEvent = function() {
var self = this;
$(this.el).find(".login").click(function(e) {
+ if (self.clicked) {
+ return;
+ }
+ self.clicked = true;
self.model.accessKey = self.model.accessKey.trim();
self.model.secretKey = self.model.secretKey.trim();
self.model.loadBuckets({
@@ -45,6 +49,7 @@ goog.inherits(s3.view.login.LoginView, Backbone.View);
},
error : function(req, status) {
alert("Login Error status:" + status);
+ self.clicked = false;
}
});
});
View
4 s3tree/js/s3/view/login/login.html
@@ -6,12 +6,12 @@
<span>Access Key Id</span>
<div>
<input class="ui-corner-all" type="text" data-to="[accessKey]"
- data-getFrom="[accessKey]" style="width: 99%" />
+ data-getFrom="[accessKey]" style="width: 95%" />
</div>
<div>Secret Access Key</div>
<div>
<input class="ui-corner-all" type="password" data-to="[secretKey]"
- data-getFrom="[secretKey]" style="width: 99%" />
+ data-getFrom="[secretKey]" style="width: 95%" />
</div>
<div>
View
7 s3tree/js/s3/view/treeview/treeview.css
@@ -1,6 +1,5 @@
-.s3treeview .tree{
- height: 700px;
- width:100%;
- font-size: 10px;
+.tree {
+ height: 500px;
+ width: 100%;
overflow: scroll;
}
View
3 s3tree/js/s3/view/treeview/ui.s3tree.js
@@ -1,6 +1,9 @@
goog.provide("s3.view.treeview");
goog.require("s3.view.treeview.TreeView");
+goog.require("downtown.Loader");
+
+downtown.Loader.loadCss("s3/view/treeview/treeview");
(function($, undefined) {
View
17 s3tree/main.css
@@ -1,8 +1,11 @@
-#navigator{
- width: 300px;
- height: 500px;
-}
-#content{
- width: 700px;
- height: 500px;
+@import "css/bluetrip/css/screen.css";
+
+@import "css/bluetrip/css/style.css";
+
+#navigator {
+ height: 700px;
}
+
+#content {
+ height: 700px;
+}
View
22 s3tree/main.html
@@ -9,7 +9,7 @@
basePath : "js/",
};
</script>
-<link >
+<link rel="STYLESHEET" href="main.css" type="text/css">
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/lib/jquery/jquery-1.7.1.js"></script>
@@ -18,18 +18,18 @@
<script src="js/s3/app.js"></script>
<body>
-<div>
- <div id=login></div>
- <div id="s3main">
- <div id="navigator">
- <div id=buckets></div>
- <div id=tree></div>
- </div>
- <div id="content">
- <div id=list></div>
+ <div>
+ <div class="span-6" id=login></div>
+ <div id="s3main">
+ <div id="navigator" class="span-6" style="margin: 0px">
+ <div id=buckets></div>
+ <div id=tree></div>
+ </div>
+ <div id="content" class="span-15 last" style="margin: 0px">
+ <div id=list></div>
+ </div>
</div>
</div>
-</div>
</body>
</html>

0 comments on commit dfc1a31

Please sign in to comment.