Changeset 2072


Ignore:
Timestamp:
Oct 27, 2011, 3:19:56 PM (6 years ago)
Author:
tjeerd@…
Message:

VIS-50, added study-codes, made the study-select wider and added visual cue to the different steps

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/grails-app/views/visualize/index.gsp

    r2071 r2072  
    5151                    <div class="topmenu_item_info">no study selected</div>
    5252                    <img src="${fam.icon( name: 'bullet_arrow_down' )}" style="vertical-align: text-bottom; display: inline-block;"/>
    53                     <div class="formulier">
     53                    <div class="formulier" style="display: block">
     54                        <div class="menu_item_label_count">1</div><div class="menu_item_label">Study</div>
    5455                        <p class="info">Select a study from the list below.</p>
    5556                        <p style="margin-bottom: 0px;">
    56                             <g:select from="${studies}" size="10" optionKey="id" optionValue="title" name="study" onChange="changeStudy();"/>
     57                            <g:select from="${studies}" size="6" optionKey="id" name="study" onChange="changeStudy();"/>
    5758                            <div class="block_search">
    5859                                <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>:
    … …  
    138139                <div id="menu_container">
    139140                    <div class="menu_item" id="menu_column">
    140                         <div class="menu_item_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
     141                        <div class="menu_item_label_count"><span>2</span></div><div class="menu_item_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
    141142                        <p class="info">Select a field for the X-Axis from the list below. This field will be visible as columns in the table visualization.</p>
    142143                        <p>
    … …  
    150151                    </div>
    151152                    <div class="menu_item" id="menu_row">
    152                         <div class="menu_item_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
     153                        <div class="menu_item_label_count">3</div><div class="menu_item_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
    153154                        <p class="info">Select a field for the Y-Axis from the list below. This field will be visible as rows in the table visualization.</p>
    154155                        <p>
    … …  
    162163                    </div>
    163164                    <div class="menu_item" id="menu_vis">
    164                         <div class="menu_item_label">Type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
     165                        <div class="menu_item_label_count">4</div><div class="menu_item_label">Type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
    165166                        <p class="info">Select visualization type.</p>
    166167                        <p>
    … …  
    176177               
    177178                <div id="visualization_container">
    178                     <div id="visualization"><div style="padding: 30px">Select a study to start.</div>
     179                    <div id="visualization"><div style="padding: 30px">Click on the study menu and select a study to start.</div>
    179180                    </div>
    180181                </div>

  • trunk/web-app/css/visualization.css

    r2071 r2072  
    122122
    123123.menu_item_label {
     124    display: inline-block;
     125    font-size: 20px;
     126    color: #006DBA;
     127    vertical-align: bottom;
     128}
     129
     130.menu_item_label_count {
     131    display: inline-block;
     132    height: 22px;
     133    width: 25px;
     134    margin-right: 5px;
    124135    font-size: 16px;
    125     color: #006DBA;
     136    font-weight: bold;
     137    background-color: #006DBA;
     138    color: white;
     139    text-align: center;
     140    padding-top: 3px;
    126141}
    127142
    … …  
    142157    height: 120px;
    143158    font-size: 12px;
     159}
     160
     161.menu_item select#types {
     162    height: 60px;
    144163}
    145164
    … …  
    208227}
    209228
     229#menu_study .formulier {
     230    width: 600px;
     231}
     232
    210233.formulier select {
    211234    width: 100%;
     235    height: 120px;
    212236    font-size: 12px;
    213237}

  • trunk/web-app/js/visualization.js

    r2071 r2072  
    1111
    1212$(document).ready(function() {
     13
     14    openForm = $("#menu_study");
    1315
    1416    $(".topmenu_item").click(
Note: See TracChangeset for help on using the changeset viewer.