Changeset 4382


Ignore:
Timestamp:
01/29/14 13:08:54 (10 years ago)
Author:
twagoo
Message:

mockup: collection as facet box

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

Legend:

Unmodified
Added
Removed

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

    r4381 r4382  
    4040    <body>
    4141        <script src="js/jquery-1.10.2.js" type="text/javascript"></script>
    42         <script src="js/vlo-collections.js" type="text/javascript"></script>
    4342        <script src="js/vlo-facets.js" type="text/javascript"></script>
    4443        <script src="js/vlo-search.js" type="text/javascript"></script>
    … …  
    6463            </div>
    6564
    66             <div class="topbar">
     65            <div class="topbar facet collapsedfacet" id="collections">
    6766                <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
     67                <a href="#" class="expandfacet"><span>expand</span></a>
     68                <a href="#" class="collapsefacet"><span>collapse</span></a>
    6869                <h1>Collections</h1>
    69                 <form action="" id="collections">
     70                <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
     71                <form class="filterform">
     72                    <input type="text" />
     73                </form>
     74                <p>
     75                    Searching in all collections (604056 records). Expand to select an individual collection.
     76                </p>
     77                <div class="sbilinks">
    7078                    <ul>
    71                         <li class="allcollections"><input type="checkbox" checked="checked" />Search in all collections (604056) <a href="#" id="showcollections">or select...</a></li>
    72                         <li class="collection"><input type="checkbox"/>Meertens collection: Liederenbank (243129)</li>
    73                         <li class="collection"><input type="checkbox"/>UBU Clarin Set (69311)</li>
    74                         <li class="collection"><input type="checkbox"/>Nederlands Instituut voor Beeld en Geluid Academia collectie (46156)</li>
    75                         <li class="collection"><input type="checkbox"/>TLA: childes (29266)</li>
    76                         <li class="collection"><input type="checkbox"/>TLA: DoBeS archive (24722)</li>
    77                         <li class="collection"><input type="checkbox"/>TLA: Language and Cognition (23535)</li>
    78                         <li class="collection"><input type="checkbox"/>TLA: talkbank (14593)</li>
    79                         <li class="collection"><input type="checkbox"/>Bavarian Archive for Speech Signals (BAS) (14416)</li>
    80                         <li class="collection"><input type="checkbox"/>TLA: Acquisition (14363)</li>
    81                         <li class="collection"><input type="checkbox"/>Institut f&uuml;r Deutsche Sprache, CLARIN-D Zentrum, Mannheim (14320)</li>
    82                         <li class="collection"><input type="checkbox"/>Meertens collection: Liederenbank (243129)</li>
     79                        <li class="collection"><a href="">Meertens collection: Liederenbank (243129)</a></li>
     80                        <li class="collection"><a href="">UBU Clarin Set (69311)</a></li>
     81                        <li class="collection"><a href="">Nederlands Instituut voor Beeld en Geluid Academia collectie (46156)</a></li>
     82                        <li class="collection"><a href="">TLA: childes (29266)</a></li>
     83                        <li class="collection"><a href="">TLA: DoBeS archive (24722)</a></li>
     84                        <li class="collection"><a href="">TLA: Language and Cognition (23535)</a></li>
     85                        <li class="collection"><a href="">TLA: talkbank (14593)</a></li>
     86                        <li class="collection"><a href="">Bavarian Archive for Speech Signals (BAS) (14416)</a></li>
     87                        <li class="collection"><a href="">TLA: Acquisition (14363)</a></li>
     88                        <li class="collection"><a href="">Institut f&uuml;r Deutsche Sprache, CLARIN-D Zentrum, Mannheim (14320)</a></li>
     89                        <li class="collection"><a href="">Meertens collection: Liederenbank (243129)</a></li>
     90                        <li class="more-link"><a href="#">more...</a></li>
    8391                    </ul>
    84                     <div id="collections-end"></div>
    85                 </form>
     92                </div>
    8693                <!-- rounded corners - bottom **** -->
    8794                <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
    … …  
    94101                    <a href="#" class="expandfacet"><span>expand</span></a>
    95102                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    96                     <h1>Language</h1>
     103                    <h1>Language <span class="selectedvaluelabel">[Dutch]</span></h1>
    97104                    <div class="filtertoggle"><span>filter</span></div>
    98105                    <form class="filterform">
    … …  
    380387                    <a href="#" class="expandfacet"><span>expand</span></a>
    381388                    <a href="#" class="collapsefacet"><span>collapse</span></a>
    382                     <h1>National project</h1>
     389                    <h1>National project <span class="selectedvaluelabel">[CLARIN-NL]</a></h1>
    383390                    <a class="filtertoggle" title="Filter values" href="#"><span>filter</span></a>
    384391                    <form class="filterform">

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

    r4381 r4382  
    3131$(document).ready(function() {
    3232    /* facet collapse/expand */
    33     $("a.expandfacet").click(function(event) {
     33    $("a.expandfacet, a#showvalues").click(function(event) {
    3434        event.preventDefault();
    3535        var p = $(this).parent(".collapsedfacet");

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

    r4338 r4382  
    2121*/
    2222
    23 /* collection selection */
    24 
    2523form#collections {
    2624    padding: 0;
    … …  
    2826}
    2927
    30 form#collections ul{
    31     margin-left: 0;
     28#collections > p {
     29    clear: both;
    3230}
    3331
    34 form#collections ul li {
     32#collections ul li {
    3533    display: block;
    3634    width: 28%;
    … …  
    4139}
    4240
    43 form#collections ul li.allcollections{
    44     visibility: visible;
     41#collections ul li.more-link {
    4542    clear: both;
    46     width: 100%;
    47    
     43    float: right;
    4844}
    49 
    50 #collections-end {
    51     clear: left;
    52 }

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

    r4381 r4382  
    5959    float: left;
    6060    width: .5em;
    61     margin: .7em 0em 0em 0em;
    62     padding: 0em 0em 0em .5em;
    63 }
    64 
    65 a.expandfacet:hover, a.collapsefacet:hover {   
     61    margin: .7em 0em 0em .5em;
     62    padding: 0em 0em 0em 0em;
    6663    text-decoration: none;
    6764}
    … …  
    9794.facet h1 {
    9895    float: left;
    99     margin-right: 20px;
     96    max-width: 80%;
     97}
     98
     99.expandedfacet h1 .selectedvaluelabel {
     100    display: none;
    100101}
    101102
Note: See TracChangeset for help on using the changeset viewer.