Changeset 2072


Ignore:
Timestamp:
27-10-11 15:19:56 (5 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.