Changeset 4381

Timestamp:

01/29/14 12:27:28 (10 years ago)

Author:

twagoo

Message:

added facet class to mockup for sidebar/topbar

Location:

vlo/branches/vlo-3.0/vlo-web-app/src/main/html

Files:

• index.html (modified) (7 diffs)
• js/vlo-facets.js (modified) (1 diff)
• style/vlo-facets.css (modified) (2 diffs)

vlo/branches/vlo-3.0/vlo-web-app/src/main/html/index.html

@@ -89 +89 @@
 
             <div class="sidebar">
-                <div class="sidebaritem expandedfacet">
+                <div class="sidebaritem facet expandedfacet">
                     <!-- rounded corners - top **** -->
                     <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
@@ -116 +116 @@
                     <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
                 </div>
-                <div class="sidebaritem expandedfacet">
+                <div class="sidebaritem facet expandedfacet">
                     <!-- rounded corners - top **** -->
                     <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
@@ -263 +263 @@
 
             <div class="sidebar">
-                <div class="sidebaritem collapsedfacet">
+                <div class="sidebaritem facet collapsedfacet">
                     <!-- rounded corners - top **** -->
                     <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
@@ -291 +291 @@
                 </div>
 
-                <div class="sidebaritem collapsedfacet">
+                <div class="sidebaritem facet collapsedfacet">
                     <!-- rounded corners - top **** -->
                     <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
@@ -319 +319 @@
                 </div>
 
-                <div class="sidebaritem collapsedfacet">
+                <div class="sidebaritem facet collapsedfacet">
                     <!-- rounded corners - top **** -->
                     <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
@@ -347 +347 @@
                 </div>
 
-                <div class="sidebaritem collapsedfacet">
+                <div class="sidebaritem facet collapsedfacet">
                     <!-- rounded corners - top **** -->
                     <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
@@ -375 +375 @@
                 </div>
 
-                <div class="sidebaritem expandedfacet">
+                <div class="sidebaritem facet expandedfacet">
                     <!-- rounded corners - top **** -->
                     <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>

vlo/branches/vlo-3.0/vlo-web-app/src/main/html/js/vlo-facets.js

@@ -48 +48 @@
         // toggle link clicked, show or hide filter box and focus on input
         event.preventDefault();
-        var form = $(this).parent(".sidebaritem").find(".filterform");
+        var form = $(this).parent(".facet").find(".filterform");
         form.siblings(".sbilinks").find("li").show();
         expandFacet($(this).parent(".collapsedfacet"));

vlo/branches/vlo-3.0/vlo-web-app/src/main/html/style/vlo-facets.css

@@ -82 +82 @@
 }
 
-.expandedfacet a.expandfacet {
+.facet.expandedfacet a.expandfacet {
     display:  none;
 }
 
-.sidebaritem.collapsedfacet .sbilinks, .sidebaritem.collapsedfacet .filterform {
+.facet.collapsedfacet .sbilinks, .facet.collapsedfacet .filterform {
     display:  none;
 }
 
-.sidebaritem.collapsedfacet a.collapsefacet {
+.facet.collapsedfacet a.collapsefacet {
     display:  none;
 }
 
 
-.sidebaritem.expandedfacet h1, .sidebaritem.collapsedfacet h1 {
+.facet h1 {
     float: left;
     margin-right: 20px;
 }
 
-.collapsedfacet .filtertoggle {
+.facet.collapsedfacet .filtertoggle {
     display: none;
 }
 
-.expandedfacet .filtertoggle, .sidebaritem .filtertoggle:hover {
+.facet .filtertoggle, .facet .filtertoggle:hover {
     float: right;
     clear: right;
@@ -116 +116 @@
     background-repeat: no-repeat;
 }
-.expandedfacet a.filtertoggle {
+.facet.expandedfacet a.filtertoggle {
     /* link means enabled */
     background-image: url('filled-filter-128.png'); /* icon from icons8.com */
 }
 
-.expandedfacet div.filtertoggle {
+.facet.expandedfacet div.filtertoggle {
     /* div means disabled */
     background-image: url('empty-filter-128-disabled.png'); /* icon from icons8.com */
 }
 
-.expandedfacet .filtertoggle span {
+.facet.expandedfacet .filtertoggle span {
     display: none;
 }