Changeset 337


Ignore:
Timestamp:
05/31/12 17:03:19 (13 years ago)
Author:
tjcschipper
Message:
 
Location:
Dev/branches/rest-dojo-ui/client
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/mockup.html

    r336 r337  
    5151    </head>
    5252    <body class="dijitReset gamelab">
    53         <div class="header">
    54             <div class="mainLogo">Research Tool</div>
     53        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     54            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     55                <h1>ResearchTool</h1>
     56                <!-- And now the menu! -->
     57                <div data-dojo-type="dijit.MenuBar">
     58                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Sessions</div>
     59                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Content</div>
     60                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Results</div>
     61                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Log out</div>
     62                </div>
     63                <div class="breadcrumbs">
     64                    <span class="breadcrumb">User > </span>
     65                    <span class="breadcrumb">Session > </span>
     66                    <span class="breadcrumbCurrent">Survey A [editing]</span>
     67                </div>
     68            </div>
    5569
    56             <div data-dojo-type="dijit.MenuBar" class="mainMenu">
    57                 <div data-dojo-type="dijit.MenuBarItem" >Sessions</div>
    58                 <div data-dojo-type="dijit.MenuBarItem" >Content</div>
    59                 <div data-dojo-type="dijit.MenuBarItem" >Results</div>
    60                 <div data-dojo-type="dijit.MenuBarItem" >Log out</div>
    61             </div>
    62             <div class="breadcrumbs">
    63                 <span class="breadcrumb">Home > </span>
    64                 <span class="breadcrumb">Sessions > </span>
    65                 <span class="breadcrumb">Session A > </span>
    66                 <span class="breadcrumb breadcrumbCurrent">Survey 123 [Editing]</span>
    67             </div>
    68         </div>  <!-- HEADER -->
    69         <div class="content" data-dojo-type="dijit.layout.ContentPane">
    70             <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    71                 <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    72                     Title and icon
    73                 </div>
    74                 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
     70            <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     71                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    7572                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    76                         Presets
     73                        <h2>
     74                            <span class="rftIcon rftIconSurvey"></span>
     75                            <span class="headerText">Survey A [editing]</span>
     76                        </h2>
    7777                    </div>
    78                     <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition:'left-h',region:'center'">
    79                         <div data-dojo-type="dijit.layout.ContentPane" title="Category One">
    80                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
    81                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
     78                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
     79                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     80                            Presets
    8281                        </div>
    83                         <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
    84                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'orange'"></div>
    85                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'orange'"></div>
     82                        <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition:'left-h',region:'center'">
     83                            <div data-dojo-type="dijit.layout.ContentPane" title="Category One">
     84                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
     85                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
     86                            </div>
     87                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
     88                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
     89                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
     90                            </div>
     91                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
     92                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
     93                            </div>
     94                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
     95                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
     96                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
     97                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'blue'"></div>
     98                            </div>
     99                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
     100                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'purple'"></div>
     101                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'purple'"></div>
     102                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'purple'"></div>
     103                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four', color: 'purple'"></div>
     104
     105                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Properties</button>
     106                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</button>
     107                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Discard</button>
     108                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
     109                            </div>
    86110                        </div>
    87                         <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
    88                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'green'"></div>
    89                         </div>
    90                         <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
    91                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'red'"></div>
    92                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'red'"></div>
    93                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'red'"></div>
    94                         </div>
    95                         <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
    96                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'purple'"></div>
    97                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'purple'"></div>
    98                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'purple'"></div>
    99                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four', color: 'purple'"></div>
    100 
     111                    </div>
     112                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
     113                        <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
     114                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
     115                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
    101116                        </div>
    102117                    </div>
    103118                </div>
    104                 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
    105                     <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
    106                         <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
    107                         <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
    108                     </div>
    109                 </div>
    110119            </div>
    111 
    112             <!--
    113             <div class="title">
    114                 <div class="rftIcon rftMainIcon rftMainIconSurvey"></div><h2 class="titleText">Survey 123 [Editing]</h2>
    115             </div>
    116             <div data-dojo-type="dijit.layout.BorderContainer" style="height: 500px;">
    117                 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    118                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    119                         <span>Load preset</span>
    120                         <select data-dojo-type="dijit.form.ComboBox">
    121                             <option>Preset A</option>
    122                             <option>Preset B</option>
    123                         </select>
    124                     </div>
    125                     <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
    126                         <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
    127                         <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
    128                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Intrinsic motivation', color: 'blue'"></div>
    129                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Extrinsic motivation', color: 'blue'"></div>
    130                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Motivation to participate', color: 'blue'"></div>
    131                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Experience with games', color: 'blue'"></div>
    132                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Participant context', color: 'blue'"></div>
    133                         </div>
    134                         <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
    135                         <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
    136                         <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
    137                     </div>
    138                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    139                         <div>Legend</div>
    140                         <div>Selected question is included in survey.</div>
    141                         <div>Selected question is not yet in survey. These van be included in the survey.</div>
    142                         <div>Selected question conflicts with an included question. You can only swap these.</div>
    143                        
    144 
    145                     </div>
    146                 </div>
    147                 <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
    148                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    149                         <span>Included questions</span>
    150                         <div data-dojo-type="rft.ui.List">
    151                             <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Why are you participating in this session?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
    152                             <div class="conflictedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Is this a long-term goal or immediate?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
    153                             <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Have you played &quot;serious games&quot; before?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
    154                         </div>
    155                     </div>
    156                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    157                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconSettings'">Properties</button>
    158                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</button>
    159                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Discard</button>
    160                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
    161                     </div>
    162                 </div>
    163             </div>
    164             -->
    165120        </div>
    166121    </body>

  • Dev/branches/rest-dojo-ui/client/rft/css/general.css

    r335 r337  
     1/* General.css contains general fixes that are not strongly related to any other stylesheets.
     2They are typically small fixes or tweaks to adjust spacing and/or borders/colours */
     3
    14.gamelab .dijitTabPaneWrapper {
    25    border: none;

  • Dev/branches/rest-dojo-ui/client/rft/css/layout.css

    r336 r337  
    11*:focus {
     2    /* Disabled Chrome focus outlines! */
    23    outline: none;
    34}
    … …  
    56    width: 100%;
    67    height: 100%;
    7     font-size: .813em;
     8    font-size: 13px;
    89    background-color: #333333;
    910}
    … …  
    1415
    1516/* Headings */
    16 .gamelab h1 {
    17     font-size: 3em;
    18     margin-bottom: 0.727em;
     17.gamelab h1 {   
     18    /* Main logo */
     19    float: left;
     20    clear: left;
     21    font-size: 48px;
     22    color: #999999;
     23    margin: 0 10px 8px 10px;
     24    padding: 0;
     25    line-height: 48px;
    1926    font-weight: normal !important;
     27    -webkit-user-select: none;
     28    -moz-user-select: none;
    2029}
    2130.gamelab h2 {
    22     font-size: 1.375em;
    23     line-height: 1.5em;
    24     margin-top: 1em;
    25     margin-bottom: 0.60em;
    26     font-weight: normal;
     31    /* Content pane title */
     32    font-size: 22px;
     33    line-height: 30px;
     34    margin: 0;
     35    padding: 0;
    2736}
    28 .gamelab h3,
    29 .gamelab h4,
    30 .gamelab h5,
    31 .gamelab h6 {
    32     font-size: 1.125em;
    33     font-weight: normal;
     37.gamelab h2 .rftIcon {
     38    float: left;
     39    width: 32px;
     40    height: 32px;
     41    background-image: url('images/icons/rftIcons32.png');
     42    margin-right: 8px;
    3443}
    35 .mainLogo {
    36     float: left;
    37     height: 50px;
    38     font-size: 50px;
    39     width: auto;
    40     -webkit-margin: 5px 20px 5px 20px !important;
    41     padding: 0 !important;
    42     line-height: 50px;
    43     color: #999999;
     44.gamelab h3 {
     45    /* Section headers */
     46    font-size: 18px;
    4447}
    45 .gamelab .dijitMenuBar.mainMenu {
    46     width: auto;
     48.gamelab h4 {
     49    /* Small text headers/paragraph headers */
     50    font-size: 16px;
     51}
     52
     53/* Topbar  */
     54.topbar {
     55    overflow-y: hidden;
     56}
     57.topbar .dijitMenuBar {
    4758    float: right;
    48     margin: 10px 50px 10px 20px;
     59    clear: right;
     60    margin-top: 16px;
    4961}
     62
     63/* Breadcrumbs */
    5064.breadcrumbs {
    5165    float: left;
    … …  
    5367    width: 100%;
    5468    text-align: center;
     69    height: 16px;
     70    line-height: 16px;
    5571}
    5672.breadcrumb {
    … …  
    6278    font-size: 14px;
    6379}
    64 .menuItem {
    65     margin: 0px 5px 0px 5px;
     80
     81/* Content */
     82.dijitContentPane.page {
     83    padding: 0;
    6684}
    67 .content {
     85.content.dijitContentPane {
    6886    display: block;
    6987    clear: both;
     88    padding: 0;
    7089    background-color: #555555;
    7190    /* Background gradient time! */
    … …  
    83102        );
    84103}
     104.content.dijitContentPane .dijitBorderContainer {
     105    padding: 2px;
     106}
     107
     108/* General */
    85109.loginLabel {
    86110    float: left;
    … …  
    110134    width: 30px;
    111135}
    112 
    113 /* Basic layout */
    114 .gamelab .header {
    115     background-color: #333333;
    116     height: 80px;
    117     font-size: 16px;
    118 }
    119 .title {
    120     height: 24px;
    121     padding: 4px 0;
    122     margin: 4px;
    123 }
    124 .title .titleIcon {
    125     float: left;
    126     width: 32px;
    127     height: 32px;
    128     clear: none;
    129     margin-right: 8px;
    130     margin-top: -4px;
    131     margin-bottom: -4px;
    132 }
    133 .title .titleText {
    134     float: left;
    135     line-height: 24px;
    136     font-size: 24px;
    137     margin: 0;
    138 }
    139136.verticalTabList {
    140137    width: 190px;

  • Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css

    r335 r337  
    153153    margin: 2px 4px -2px 4px;
    154154}
     155
     156/* MainMenuButton */
     157.gamelab .dijitMenuBar .rftMainMenuButton {
     158    border: none;
     159    height: 30px;
     160    width: auto;
     161    background-image: none;
     162    background: transparent;
     163    text-align: center;
     164    color: #999999;
     165    font-size: 24px;
     166    line-height: 30px;
     167    padding: 0 4px;
     168    margin: 0 5px;
     169    box-shadow: none;
     170    transition: all 0.3s;
     171    -moz-transition: all 0.3s;
     172    -webkit-transition: all 0.3s;
     173    -o-transition: all 0.3s;
     174}
     175.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
     176    color: #ffffff;
     177    font-size: 26px;
     178    transition: all 0.1s;
     179    -moz-transition: all 0.1s;
     180    -webkit-transition: all 0.1s;
     181    -o-transition: all 0.1s;
     182}
     183.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
     184    color: #0794d1 !important;
     185    font-size: 26px;
     186    transition: all 0.1s;
     187    -moz-transition: all 0.1s;
     188    -webkit-transition: all 0.1s;
     189    -o-transition: all 0.1s;
     190}
     191.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
     192    color: #ffffff;
     193    font-size: 26px;
     194}
Note: See TracChangeset for help on using the changeset viewer.