Commits

Shlomi Fish committed 44c5305

Some CSS Tweaks to make the new jqTree look better.

There are still many quirks. In the process converted treeview.css to
lib/sass/treeview.sass and merged it with the rest of the stylesheet.

  • Participants
  • Parent commits 985d7c6
  • Branches convert-from-jquery-treeview-to-jqtree-plugin

Comments (0)

Files changed (6)

 	cp -f $< $@
 
 # COMMON_CSS_TARGET_DEPS = lib/common-style.css.ttml lib/newsitem.css.ttml lib/smoked-wp-theme.css.ttml lib/lang_switch.css.ttml lib/fortunes.css.ttml lib/fortunes_show.css.ttml lib/screenplay-xml/css/screenplay.css.ttml
-COMMON_CSS_TARGET_DEPS = lib/sass/common-style.sass lib/sass/newsitem.sass lib/sass/smoked-wp-theme.sass lib/sass/lang_switch.sass lib/sass/fortunes.sass lib/sass/fortunes_show.sass lib/sass/screenplay.sass lib/sass/footer.sass lib/sass/common-body.sass lib/sass/code_block.sass
+COMMON_CSS_TARGET_DEPS = lib/sass/common-style.sass lib/sass/newsitem.sass lib/sass/smoked-wp-theme.sass lib/sass/lang_switch.sass lib/sass/fortunes.sass lib/sass/fortunes_show.sass lib/sass/screenplay.sass lib/sass/footer.sass lib/sass/common-body.sass lib/sass/code_block.sass lib/sass/treeview.sass
 
 MOJOLICIOUS_LECTURE_SLIDE1 = $(T2_DEST)/lecture/Perl/Lightning/Mojolicious/mojolicious-slides.html
 
 FORT_SASS_DEPS = lib/sass/fortunes.sass
 COMMON_SASS_DEPS = lib/sass/common-body.sass
 
-$(T2_DEST)/style.css $(T2_DEST)/style-2008.css : lib/sass/common-style.sass $(COMMON_SASS_DEPS) lib/sass/lang_switch.sass $(FORT_SASS_DEPS) lib/sass/code_block.sass
+$(T2_DEST)/style.css $(T2_DEST)/style-2008.css : lib/sass/common-style.sass $(COMMON_SASS_DEPS) lib/sass/lang_switch.sass $(FORT_SASS_DEPS) lib/sass/code_block.sass lib/sass/treeview.sass
 
 $(T2_DEST)/style.css: lib/sass/smoked-wp-theme.sass lib/sass/footer.sass
 

File common/jqtree.css

-/* From jqTree-0.14. */
+/* From jqTree-0.14. Modified by Shlomi Fish */
 ul.jqtree-tree {
-    margin-left: 12px;
+    margin-left: 10px;
 }
 
 ul.jqtree-tree,
 ul.jqtree-tree ul.jqtree_common {
-    list-style: none outside;
+    list-style: square outside none;
     margin-bottom: 0;
     padding: 0;
 }
 
 ul.jqtree-tree ul.jqtree_common {
     display: block;
-    margin-left: 12px;
+    margin-left: 10px;
     margin-right: 0;
 }
 ul.jqtree-tree li.jqtree-closed > ul.jqtree_common {
     left: -1.5em;
     top: 30%;
     *top: 0;  /* fix for ie7 */
-    font-size: 12px;
-    line-height: 12px;
+    font-size: 10px;
+    line-height: 10px;
     font-family: arial;  /* fix for ie9 */
     border-bottom: none;
     color: #333;

File lib/rest-of-template.wml

 {#PAGE_EXTRA_AFFIL#:%body:##}
 </define-tag>
 
+<define-tag remove_extra_head_elements>
+<link rel="stylesheet" href="$(ROOT)/jqtree.css" type="text/css" media="screen, projection" title="Normal" />
+</define-tag>
+
 <define-tag my_extra_head_elements>
 <link rel="alternate stylesheet" type="text/css" href="$(ROOT)/style-2008.css" media="screen, projection" title="Old 2008 Style" />
 <link rel="stylesheet" type="text/css" href="$(ROOT)/js/treeview/jquery.treeview.css" />
-<link rel="stylesheet" href="$(ROOT)/jqtree.css" type="text/css" media="screen, projection" title="Normal" />
 <script type="text/javascript" src="$(ROOT)/js/jq.js"></script>
 <script type="text/javascript" src="$(ROOT)/js/main_nav_menu.js"></script>
 <script type="text/javascript" src="$(ROOT)/js/jquery.treeview.min.js"></script>

File lib/sass/smoked-wp-theme.sass

         margin-bottom: 10px
         color: #01698f
     ul li
-        font-size: 13px
-        list-style: square
-        list-style-position: inside
-        line-height: 18px
         a
             text-decoration: none
+        //font-size: 13px
+        //list-style: square
+        //list-style-position: inside
+        //line-height: 18px
     #searchform .hidden
         display: none
     form#searchform div

File lib/sass/style.sass

             background-color: transparent
 
 @import "footer.sass"
+@import "treeview.sass"

File lib/sass/treeview.sass

+.jqtree-tree
+    padding: 0
+    margin: 0
+    list-style: none
+    ul
+        padding: 0
+        margin: 0
+        list-style: none
+        margin-top: 4px
+    .hitarea
+        background: url(js/treeview/images/treeview-default.gif) -64px -25px no-repeat
+        height: 16px
+        width: 16px
+        margin-left: -16px
+        float: left
+        cursor: pointer
+    li
+        margin: 0
+        padding: 3px 0pt 3px 16px
+    a.selected
+        background-color: #eee
+    .hover
+        color: red
+        cursor: pointer
+    li
+        background: url(js/treeview/images/treeview-default-line.gif) 0 0 no-repeat
+        &.collapsable, &.expandable
+            background-position: 0 -176px
+    .expandable-hitarea
+        background-position: -80px -3px
+    li
+        &.last
+            background-position: 0 -1766px
+        &.lastCollapsable, &.lastExpandable
+            background-image: url(js/treeview/images/treeview-default.gif)
+        &.lastCollapsable
+            background-position: 0 -111px
+        &.lastExpandable
+            background-position: -32px -67px
+    div
+        &.lastCollapsable-hitarea, &.lastExpandable-hitarea
+            background-position: 0
+
+/* fix for IE6
+
+* html .hitarea
+    display: inline
+    float: none
+
+#treecontrol
+    margin: 1em 0
+    display: none
+
+
+.treeview-red
+    li
+        background-image: url(js/treeview/images/treeview-red-line.gif)
+    .hitarea
+        background-image: url(js/treeview/images/treeview-red.gif)
+    li
+        &.lastCollapsable, &.lastExpandable
+            background-image: url(js/treeview/images/treeview-red.gif)
+
+.treeview-black
+    li
+        background-image: url(js/treeview/images/treeview-black-line.gif)
+    .hitarea
+        background-image: url(js/treeview/images/treeview-black.gif)
+    li
+        &.lastCollapsable, &.lastExpandable
+            background-image: url(js/treeview/images/treeview-black.gif)
+
+.treeview-gray
+    li
+        background-image: url(js/treeview/images/treeview-gray-line.gif)
+    .hitarea
+        background-image: url(js/treeview/images/treeview-gray.gif)
+    li
+        &.lastCollapsable, &.lastExpandable
+            background-image: url(js/treeview/images/treeview-gray.gif)
+
+.treeview-famfamfam
+    li
+        background-image: url(js/treeview/images/treeview-famfamfam-line.gif)
+    .hitarea
+        background-image: url(js/treeview/images/treeview-famfamfam.gif)
+    li
+        &.lastCollapsable, &.lastExpandable
+            background-image: url(js/treeview/images/treeview-famfamfam.gif)
+
+.filetree
+    li
+        padding: 3px 0 2px 16px
+    span
+        &.folder, &.file
+            padding: 1px 0 1px 16px
+            display: block
+        &.folder
+            background: url(js/treeview/images/folder.gif) 0 0 no-repeat
+    li.expandable span.folder
+        background: url(js/treeview/images/folder-closed.gif) 0 0 no-repeat
+    span.file
+        background: url(js/treeview/images/file.gif) 0 0 no-repeat