Changeset 4413


Ignore:
Timestamp:
01/31/14 09:19:47 (10 years ago)
Author:
twagoo
Message:

facet box headers act as expand/collapse in mockup

Location:
vlo/branches/vlo-3.0/vlo-web-app/src/main/html
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/html/index2.html

    r4412 r4413  
    6666                <a href="#" class="expandfacet"><span>expand</span></a>
    6767                <a href="#" class="collapsefacet"><span>collapse</span></a>
    68                 <h1>Collections</h1>
     68                <h1><a href="#">Collections</a></h1>
    6969                <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    7070                <form class="filterform">
    … …  
    100100                    <a href="#" class="expandfacet"><span>expand</span></a>
    101101                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    102                     <h1>Language</h1>
     102                    <h1><a href="#">Language</a></h1>
    103103                    <a href class="filtertoggle"><span>filter</span></a>
    104104                    <form class="filterform">
    … …  
    127127                    <a href="#" class="expandfacet"><span>expand</span></a>
    128128                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    129                     <h1>Resource type</h1>
     129                    <h1><a href="#">Resource type</a></h1>
    130130                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    131131                    <form class="filterform">
    … …  
    154154                    <a href="#" class="expandfacet"><span>expand</span></a>
    155155                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    156                     <h1>Genre</h1>
     156                    <h1><a href="#">Genre</a></h1>
    157157                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    158158                    <form class="filterform">
    … …  
    182182                    <a href="#" class="expandfacet"><span>expand</span></a>
    183183                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    184                     <h1>Keywords</h1>
     184                    <h1><a href="#">Keywords</a></h1>
    185185                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    186186                    <form class="filterform">
    … …  
    210210                    <a href="#" class="expandfacet"><span>expand</span></a>
    211211                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    212                     <h1>Format</h1>
     212                    <h1><a href="#">Format</a></h1>
    213213                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    214214                    <form class="filterform">
    … …  
    238238                    <a href="#" class="expandfacet"><span>expand</span></a>
    239239                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    240                     <h1>Organisation</h1>
     240                    <h1><a href="#">Organisation</a></h1>
    241241                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    242242                    <form class="filterform">
    … …  
    266266                    <a href="#" class="expandfacet"><span>expand</span></a>
    267267                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    268                     <h1>National project</h1>
     268                    <h1><a href="#">National project</a></h1>
    269269                    <a href="#" class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    270270                    <form class="filterform">
    … …  
    290290                    <a href="#" class="expandfacet"><span>expand</span></a>
    291291                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    292                     <h1>Advanced options</h1>
     292                    <h1><a href="#">Advanced options</a></h1>
    293293                    <div class="sbilinks facetvalues">
    294294                        <form id="advancedoptions" action="">

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/html/index3.html

    r4412 r4413  
    6868                <a href="#" class="expandfacet"><span>expand</span></a>
    6969                <a href="#" class="collapsefacet"><span>collapse</span></a>
    70                 <h1>Collections</h1>
     70                <h1><a href="#">Collections</a></h1>
    7171                <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    7272                <form action="" class="filterform">
    … …  
    102102                    <a href="#" class="expandfacet"><span>expand</span></a>
    103103                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    104                     <h1>Language <span class="selectedvaluelabel">[Dutch]</span></h1>
     104                    <h1><a href="#">Language <span class="selectedvaluelabel">[Dutch]</span></a></h1>
    105105                    <div class="filtertoggle"><span>filter</span></div>
    106106                    <form action="" class="filterform">
    … …  
    129129                    <a href="#" class="expandfacet"><span>expand</span></a>
    130130                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    131                     <h1>Resource type</h1>
     131                    <h1><a href="#">Resource type</a></h1>
    132132                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    133133                    <form action="" class="filterform">
    … …  
    156156                    <a href="#" class="expandfacet"><span>expand</span></a>
    157157                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    158                     <h1>Genre</h1>
     158                    <h1><a href="#">Genre</a></h1>
    159159                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    160160                    <form action="" class="filterform">
    … …  
    184184                    <a href="#" class="expandfacet"><span>expand</span></a>
    185185                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    186                     <h1>Keywords</h1>
     186                    <h1><a href="#">Keywords</a></h1>
    187187                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    188188                    <form action="" class="filterform">
    … …  
    212212                    <a href="#" class="expandfacet"><span>expand</span></a>
    213213                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    214                     <h1>Format</h1>
     214                    <h1><a href="#">Format</a></h1>
    215215                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    216216                    <form action="" class="filterform">
    … …  
    240240                    <a href="#" class="expandfacet"><span>expand</span></a>
    241241                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    242                     <h1>Organisation</h1>
     242                    <h1><a href="#">Organisation</a></h1>
    243243                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    244244                    <form action="" class="filterform">
    … …  
    268268                    <a href="#" class="expandfacet"><span>expand</span></a>
    269269                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    270                     <h1>National project <span class="selectedvaluelabel">[CLARIN-NL]</span></h1>
     270                    <h1><a href="#">National project <span class="selectedvaluelabel">[CLARIN-NL]</span></a></h1>
    271271                    <div class="filtertoggle" title="Filter values"><span>filter</span></div>
    272272                    <form action="" class="filterform">
    … …  
    291291                    <a href="#" class="expandfacet"><span>expand</span></a>
    292292                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    293                     <h1>Advanced options</h1>
     293                    <h1><a href="#">Advanced options</a></h1>
    294294                    <div class="sbilinks facetvalues">
    295295                        <form id="advancedoptions" action="">

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

    r4409 r4413  
    4040        var p = $(this).parents(".expandedfacet");
    4141        collapseFacet(p);
     42    });
     43   
     44    $(".facet h1 a").click(function(event){
     45        event.preventDefault();
     46        if($(this).parents(".expandedfacet").length === 1){
     47             var p = $(this).parents(".expandedfacet");
     48            collapseFacet(p);
     49        } else {
     50            var p = $(this).parents(".collapsedfacet");
     51            expandFacet(p);
     52        }
    4253    });
    4354

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

    r4390 r4413  
    2323/* facet links */
    2424
     25.facet h1 a, .facet h1 a:hover {
     26    text-decoration: none;
     27    color: inherit;
     28    padding: 0px;
     29}
    2530
    2631.facetvalues li
    … …  
    7580    padding: 0em 0em 0em 0em;
    7681    text-decoration: none;
     82    color: inherit;
    7783}
    7884
    … …  
    148154    margin-left: 12px;
    149155}
     156.filterform p {
     157    padding: 0px;
     158    margin: 0px;
     159}
     160
    150161.filterform input {
    151162    width: 90%;
Note: See TracChangeset for help on using the changeset viewer.