Changeset 4328


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

added collection selection to mockup

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

Legend:

Unmodified
Added
Removed

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

    r4327 r4328  
    4141
    4242    <body>
     43        <script src="js/jquery-1.10.2.js"></script>
     44        <script>
     45            $(document).ready(function() {
     46                $("li.collection").hide();
     47                $(".allcollections input").change(function(event) {
     48                    if ($(this).is(":checked")) {
     49                        $("li.collection").hide();
     50                        $("li.collection input").attr("checked", false);
     51                    } else {
     52                        $("li.collection").show();
     53                    }
     54                });
     55                $("a#showcollections").click(function(event) {
     56                    $("li.collection").toggle();
     57                });
     58                $("li.collection input").change(function(event) {
     59                    if ($(this).is(":checked")) {
     60                        $(".allcollections input").attr("checked", false);
     61                    }
     62                });
     63            });
     64        </script>
     65
    4366        <div id="main">
    4467            <div id="header">
    … …  
    4669                <!--<div id="address"><p>company name<br />company address 1, company address 2, company address 3<br />tel: 0101 010 010</p></div>-->
    4770            </div>
    48             <!--           
    49             <div id="menu">
    50                 <ul>
    51                      **** INSERT NAVIGATION ITEMS HERE (use id="selected" to identify the page you're on ****
    52                     <li><a id="selected" href="#">welcome</a></li>
    53                     <li><a href="#">page 1</a></li>
    54                     <li><a href="#">page 2</a></li>
    55                     <li><a href="#">page 3</a></li>
    56                     <li><a href="#">contact us</a></li>
    57                 </ul>
    58                 <div id="links">
    59                      **** INSERT LINKS HERE ****
    60                     <a href="#"><img src="style/home.png" alt="home" /></a>&nbsp;<a href="#"><img src="style/email.png" alt="contact us" /></a>
    61                 </div>
     71
     72            <div class="topbar">
     73                <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
     74                <h1>Collections</h1>
     75                <p>Collections to search in:</p>
     76                <form id="collections">
     77                    <ul>
     78                        <li class="allcollections"><input type="checkbox" checked="true">Search in all collections (604056)</input> <a href="#" id="showcollections">or select...</a></li>
     79                        <li class="collection"><input type="checkbox">Meertens collection: Liederenbank (243129)</input></li>
     80                        <li class="collection"><input type="checkbox">UBU Clarin Set (69311)</input></li>
     81                        <li class="collection"><input type="checkbox">Nederlands Instituut voor Beeld en Geluid Academia collectie (46156)</input></li>
     82                        <li class="collection"><input type="checkbox">TLA: childes (29266)</input></li>
     83                        <li class="collection"><input type="checkbox">TLA: DoBeS archive (24722)</input></li>
     84                        <li class="collection"><input type="checkbox">TLA: Language and Cognition (23535)</input></li>
     85                        <li class="collection"><input type="checkbox">TLA: talkbank (14593)</input></li>
     86                        <li class="collection"><input type="checkbox">Bavarian Archive for Speech Signals (BAS) (14416)</input></li>
     87                        <li class="collection"><input type="checkbox">TLA: Acquisition (14363)</input></li>
     88                        <li class="collection"><input type="checkbox">Institut fÃŒr Deutsche Sprache, CLARIN-D Zentrum, Mannheim (14320)</input></li>
     89                        <li class="collection"><input type="checkbox">Meertens collection: Liederenbank (243129)</input></li>
     90                    </ul>
     91                    <div id="collections-end"></div>
     92                </form>
     93                <!-- rounded corners - bottom **** -->
     94                <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
    6295            </div>
    63             -->
     96
    6497            <div class="sidebar">
    6598                <div class="sidebaritem">
    … …  
    78111                            <li><a href="">Turkish (4968) </a></li>
    79112                            <li><a href="">Chinese (1971)</a></li>
     113                            <li class="more-link"><a href="">more...</a></li>
    80114                        </ul>
    81                         <a class="more-link" href="">more</a>
    82115                    </div>
    83116                    <!-- rounded corners - bottom **** -->
    … …  
    98131                            <li><a href="">Televisie (1695)</a></li>
    99132                            <li><a href="">niet van toepassing (1185)</a></li>
     133                            <li class="more-link"><a href="">more...</a></li>
    100134                        </ul>
    101135                    </div>

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

    r4327 r4328  
    4545}
    4646
    47 .sidebaritem
     47.sidebaritem, .topbar
    4848{ background: #E1E5D5;
    4949  color: #555;
    … …  
    5151
    5252.sbilinks li a, .sidebaritem a
    53 { background: transparent url(arrow.png) no-repeat left center;
     53{
     54    /*background: transparent url(arrow.png) no-repeat left center;*/
    5455  color: #555;
    5556}
    5657
    5758.sbilinks li a:hover, .sidebaritem a:hover
    58 { background: transparent url(arrow_select.png) no-repeat left center;
     59{
     60    /*background: transparent url(arrow_select.png) no-repeat left center;*/
    5961  color: #555;
    6062}

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

    r4327 r4328  
    159159}
    160160
     161/* top bar */
     162.topbar
     163{
     164  margin: 8px 15px 2px 15px;
     165  padding: 0px 0px 0px 0px;
     166}
     167
    161168/* sidebars */
    162169.sidebar
    … …  
    175182}
    176183
    177 .sidebaritem h1, .sidebaritem h2, .sidebaritem p{margin: 0px 10px 0px 10px}
    178 
    179 .sidebaritem h1
     184.sidebaritem h1, .sidebaritem h2, .sidebaritem p, .topbar h1, .topbar p {margin: 0px 10px 0px 10px}
     185
     186.sidebaritem h1, .topbar h1
    180187{ font-weight: normal; padding: 8px 0px 16px 0px;
    181188  text-transform: uppercase;
    182189}
    183190
    184 .sidebaritem p
     191.sidebaritem p, .topbar p
    185192{ line-height: 16px;
    186193  padding: 0px 0px 8px 0px;
    … …  
    192199}
    193200
    194 .sbilinks ul{margin: 0px 0px 18px 10px;}
     201.sbilinks ul{margin: 0px;}
    195202
    196203.sbilinks li

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

    r4327 r4328  
    2020*/
    2121
    22 a.more-link {
     22li.more-link {
    2323    width: 100%;
    2424    text-align: right;
    2525}
    2626
    27  
     27li.more-link a {
     28    margin-right: 1em;
     29}
     30
     31form#collections ul li {
     32    display: block;
     33    width: 28%;
     34    margin: .5em 2%;
     35    margin-top: .2em;
     36    margin-bottom: .2em;
     37    float: left;
     38    overflow: no-content;
     39    height: 3em;
     40}
     41
     42form#collections ul li.allcollections{
     43    visibility: visible;
     44    clear: both;
     45    width: 100%;
     46}
     47
     48#collections-end {
     49    clear: left;
     50}
Note: See TracChangeset for help on using the changeset viewer.