Changeset 4349


Ignore:
Timestamp:
01/27/14 14:36:45 (10 years ago)
Author:
twagoo
Message:

facet values pop-up in mockup

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

Legend:

Unmodified
Added
Removed

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

    r4341 r4349  
    346346            </div>
    347347        </div>
     348
     349        <div id="facetvalues">
     350            <div><a href="" id="facetvaluescancel">Cancel</a></div>
     351            <h2>Resource class</h2>
     352            <p>All values in this facet</p>
     353            <div class="alphaNavigation">
     354                <ul>
     355                    <li>Quick navigation to:</li>
     356                    <li>
     357                        <a href="#A"><span>A</span></a>
     358                    </li><li>
     359                        <a href="#B"><span>B</span></a>
     360                    </li><li>
     361                        <a href="#C"><span>C</span></a>
     362                    </li><li>
     363                        <a href="#D"><span>D</span></a>
     364                    </li><li>
     365                        <a href="#E"><span>E</span></a>
     366                    </li><li>
     367                        <a href="#F"><span>F</span></a>
     368                    </li><li>
     369                        <a href="#G"><span>G</span></a>
     370                    </li><li>
     371                        <a href="#H"><span>H</span></a>
     372                    </li><li>
     373                        <a href="#I"><span>I</span></a>
     374                    </li><li>
     375                        <a href="#J"><span>J</span></a>
     376                    </li><li>
     377                        <a href="#L"><span>L</span></a>
     378                    </li><li>
     379                        <a href="#M"><span>M</span></a>
     380                    </li><li>
     381                        <a href="#N"><span>N</span></a>
     382                    </li><li>
     383                        <a href="#O"><span>O</span></a>
     384                    </li><li>
     385                        <a href="#P"><span>P</span></a>
     386                    </li><li>
     387                        <a href="#R"><span>R</span></a>
     388                    </li><li>
     389                        <a href="#S"><span>S</span></a>
     390                    </li><li>
     391                        <a href="#T"><span>T</span></a>
     392                    </li><li>
     393                        <a href="#U"><span>U</span></a>
     394                    </li><li>
     395                        <a href="#V"><span>V</span></a>
     396                    </li><li>
     397                        <a href="#W"><span>W</span></a>
     398                    </li><li>
     399                        <a href="#X"><span>X</span></a>
     400                    </li><li>
     401                        <a href="#Other"><span>Other</span></a>
     402                    </li>
     403                </ul>
     404            </div>
     405            <div>Search: <input type="text" /></div>
     406            <div class="sortedFacet">
     407                <div>
     408                    <div class="anchorpanel"><a href=""></a><span>A</span></div>
     409                </div>
     410                <div>
     411                    <div class="facetLinkPanel"><a href=""><span>A Corpus</span></a> (<span>1</span>)</div>
     412                </div><div>
     413                    <div class="facetLinkPanel"><a href=""><span>A Lexicon</span></a> (<span>4</span>)</div>
     414                </div><div>
     415                    <div class="facetLinkPanel"><a href=""><span>A bundle</span></a> (<span>1</span>)</div>
     416                </div><div>
     417                    <div class="facetLinkPanel"><a href=""><span>Academic dissertations</span></a> (<span>18</span>)</div>
     418                </div><div>
     419                    <div class="facetLinkPanel"><a href=""><span>Addresses</span></a> (<span>11</span>)</div>
     420                </div><div>
     421                    <div class="facetLinkPanel"><a href=""><span>AddressesAnthologiesLinguistic corporaCorpus</span></a> (<span>1</span>)</div>
     422                </div><div>
     423                    <div class="facetLinkPanel"><a href=""><span>Aligned Corpus</span></a> (<span>60</span>)</div>
     424                </div><div>
     425                    <div class="facetLinkPanel"><a href=""><span>Ancient religious texts</span></a> (<span>3</span>)</div>
     426                </div><div>
     427                    <div class="facetLinkPanel"><a href=""><span>Annals</span></a> (<span>4</span>)</div>
     428                </div><div>
     429                    <div class="facetLinkPanel"><a href=""><span>AnnotatedTextCorpus</span></a> (<span>1</span>)</div>
     430                </div><div>
     431                    <div class="facetLinkPanel"><a href=""><span>Anthologies</span></a> (<span>30</span>)</div>
     432                </div><div>
     433                    <div class="facetLinkPanel"><a href=""><span>AnthologiesDevotional literature</span></a> (<span>1</span>)</div>
     434                </div><div>
     435                    <div class="facetLinkPanel"><a href=""><span>AnthologiesLinguistic corporaCorpus</span></a> (<span>2</span>)</div>
     436                </div><div>
     437                    <div class="facetLinkPanel"><a href=""><span>Anthology</span></a> (<span>1</span>)</div>
     438                </div><div>
     439                    <div class="facetLinkPanel"><a href=""><span>Application</span></a> (<span>5</span>)</div>
     440                </div><div>
     441                    <div class="facetLinkPanel"><a href=""><span>Application / Tool</span></a> (<span>174</span>)</div>
     442                </div><div>
     443                    <div class="facetLinkPanel"><a href=""><span>Article</span></a> (<span>139</span>)</div>
     444                </div><div>
     445                    <div class="facetLinkPanel"><a href=""><span>Autobiographies</span></a> (<span>4</span>)</div>
     446                </div><div>
     447                    <div class="facetLinkPanel"><a href=""><span>aligned_sentence</span></a> (<span>3</span>)</div>
     448                </div><div>
     449                    <div class="facetLinkPanel"><a href=""><span>amateurfilm</span></a> (<span>12</span>)</div>
     450                </div><div>
     451                    <div class="facetLinkPanel"><a href=""><span>annotation: Affixes</span></a> (<span>1</span>)</div>
     452                </div><div>
     453                    <div class="facetLinkPanel"><a href=""><span>annotation: Chinese_glosses</span></a> (<span>1</span>)</div>
     454                </div><div>
     455                    <div class="facetLinkPanel"><a href=""><span>annotation: English_glosses</span></a> (<span>1</span>)</div>
     456                </div><div>
     457                    <div class="facetLinkPanel"><a href=""><span>audio</span></a> (<span>35</span>)</div>
     458                </div>
     459            </div>
     460            <div class="sortedFacet">
     461                <div>
     462                    <div class="anchorpanel"><a href=""></a><span>B</span></div>
     463                </div>
     464                <div>
     465                    <div class="facetLinkPanel"><a href=""><span>Ballad operas</span></a> (<span>1</span>)</div>
     466                </div><div>
     467                    <div class="facetLinkPanel"><a href=""><span>Bible storiesLinguistic corporaCorpus</span></a> (<span>1</span>)</div>
     468                </div><div>
     469                    <div class="facetLinkPanel"><a href=""><span>Bibles</span></a> (<span>1</span>)</div>
     470                </div><div>
     471                    <div class="facetLinkPanel"><a href=""><span>Bibliographies</span></a> (<span>1</span>)</div>
     472                </div><div>
     473                    <div class="facetLinkPanel"><a href=""><span>Biographies</span></a> (<span>13</span>)</div>
     474                </div><div>
     475                    <div class="facetLinkPanel"><a href=""><span>Book</span></a> (<span>4</span>)</div>
     476                </div><div>
     477                    <div class="facetLinkPanel"><a href=""><span>Book Chapter</span></a> (<span>39</span>)</div>
     478                </div><div>
     479                    <div class="facetLinkPanel"><a href=""><span>Buddhism</span></a> (<span>2</span>)</div>
     480                </div><div>
     481                    <div class="facetLinkPanel"><a href=""><span>bilingual</span></a> (<span>5</span>)</div>
     482                </div><div>
     483                    <div class="facetLinkPanel"><a href=""><span>bioscoop</span></a> (<span>2956</span>)</div>
     484                </div>
     485            </div>
     486        </div>
    348487    </body>
    349488</html>

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

    r4345 r4349  
    6565   
    6666    $(".filterform input").on('input', filterHandler);
     67   
     68    /* Facet values popup */
     69   
     70    $(".more-link").click(function(event){
     71        event.preventDefault();
     72        $("#facetvalues").toggle();
     73    });
     74   
     75    $("#facetvalues a").click(function(event){
     76        event.preventDefault();
     77        $("#facetvalues").toggle();
     78    });
    6779});

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

    r4340 r4349  
    9595    width: 90%;
    9696}
     97
     98#facetvalues {
     99    display: none;
     100    position: absolute;
     101    left: 15%;
     102    width: 70%;
     103    height: 400px;
     104    overflow: auto;
     105    top: 150px;
     106    padding: 1em;
     107    background: #fff;
     108    opacity: .95;
     109    border: 1px dashed;
     110}
     111
     112#facetvalues input {
     113    width: 300px;
     114}
     115
     116a#facetvaluescancel {
     117    display: block;
     118    float: right;
     119}
     120
     121.alphaNavigation ul {
     122    margin: 0px;
     123    padding: 0px;
     124}
     125
     126.alphaNavigation li {
     127    display: inline-block;
     128    padding: 0px 2px;
     129}
Note: See TracChangeset for help on using the changeset viewer.