Changeset 5574


Ignore:
Timestamp:
08/20/14 09:10:24 (10 years ago)
Author:
Twan Goosen
Message:

Styling of the wizard
Refs #594

Location:
VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main
Files:
3 added
1 deleted
7 edited

Legend:

Unmodified
Added
Removed

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/java/eu/clarin/cmdi/virtualcollectionregistry/gui/wizard/CreateVirtualCollectionWizard$CreatorsStep.html

    r5531 r5574  
    99            <div style="display: none" wicket:id="editCreatorDialog"></div>
    1010            <div style="display: none" wicket:id="deleteCreatorDialog"></div>
    11             <div class="fieldset">
     11            <div id="creatorfields" class="fieldset">
    1212                <div class="extrainfo">
    1313                    <a href="#" class="extrainfotoggle"><span>[info]</span></a>
    … …  
    2929                    <a id="addme" href="#" wicket:id="addme" class="add tooltipparent"><span>[add me]</span><span class="tooltip">Add a new creator with the available user details already filled in</span></a>
    3030                </label>
    31                 <table wicket:id="creatorsTable" class="creatorsTable"></table>
     31                <table wicket:id="creatorsTable" class="creatorsTable display"></table>
    3232            </div>
    3333        </wicket:panel>

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/java/eu/clarin/cmdi/virtualcollectionregistry/gui/wizard/CreateVirtualCollectionWizard$ResourcesStep.html

    r5531 r5574  
    1010            <div style="display: none" wicket:id="deleteResourceDialog"></div>
    1111            <div style="display: none" wicket:id="addResourcesDialog"></div>
    12             <div wicket:id="resourcesContainer" class="fieldset">
     12            <div id="resourcesfields" class="fieldset">
    1313                <div class="extrainfo">
    1414                    <a href="#" class="extrainfotoggle"><span>[info]</span></a>
    … …  
    2727                    </div>
    2828                </div>
    29                 <label class="required">Resources<br />
    30                     <a id="add" wicket:id="add" href="#" class="add tooltipparent"><span>[add]</span><span class="tooltip">Add a single new resource or metadata reference with an optional label and/or description</span></a><br />
    31                     <a id="addmore" wicket:id="addMore" href="#" class="addMore tooltipparent"><span>[add more]</span><span class="tooltip">Add one or reference of the same type</span></a>
    32                 </label>
    33                 <table wicket:id="resourcesTable" class="resourcesTable"></table>
     29                <div wicket:id="resourcesContainer">
     30                    <label class="required">Resources<br />
     31                        <a id="add" wicket:id="add" href="#" class="add tooltipparent"><span>[add]</span><span class="tooltip">Add a single new resource or metadata reference with an optional label and/or description</span></a><br />
     32                        <a id="addmore" wicket:id="addMore" href="#" class="addMore tooltipparent"><span>[add more]</span><span class="tooltip">Add one or reference of the same type</span></a>
     33                    </label>
     34                    <table wicket:id="resourcesTable" class="resourcesTable display"></table>
     35                </div>
    3436            </div>
    3537        </wicket:panel>

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/_feedback.scss

    r5572 r5574  
    1818#feedback ul {
    1919    padding-left: 0px;
     20
     21    $feedbackiconsize: 16px;
     22
     23    li {
     24        font-weight: bold;
     25        padding: 5px 5px 5px $feedbackiconsize + 8;
     26        list-style: none;
     27        margin: 1em;
     28        min-height: $feedbackiconsize;
     29        background-size: $feedbackiconsize;
     30        background-repeat: no-repeat;
     31        background-position-x: 4px;
     32        background-position-y: 50%;
     33
     34        @include roundborder(6px);
     35
     36        &.feedbackPanelERROR {
     37            background-image: url(../icons/glyphicons_078_warning_sign.png);
     38            background-color: $red;
     39            color: wheat;
     40        }
     41    }
    2042}
    2143
    22 #feedback ul li {
    23     font-weight: bold;
    24     padding: 5px;
    25     list-style: none;   
    26 }
    27 
    28 #feedback ul li.feedbackPanelERROR {
    29     background: red;
    30 }

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/_table.scss

    r5573 r5574  
    3030
    3131    tr:hover td {
    32         border-top: 6px solid #ccc;
     32        border-top: 6px solid $red !important;
    3333    }
    3434
    3535    tr.moving:hover td {
    36         border-top: 0px;
     36        border-top: 0px !important;
    3737    }
    3838}
    … …  
    4040table.resourcesTable {
    4141
     42    width: 800px;
     43    table-layout: fixed;     
     44   
    4245    td.move {
    4346        width: 5em;
    … …  
    4548
    4649    tr.moving {
    47         background: #ccc;
     50        background-color: $red !important;
    4851
    4952        td, td a {
    50             color: #333;
     53            background-color: $red !important;
     54            color: white !important;
    5155        }
    5256    }
    … …  
    5660table.creatorsTable {
    5761
    58     width: 805px;
     62    width: 800px;
     63    table-layout: fixed;
    5964
    6065    td {

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/_toggleborder.scss

    r5571 r5574  
    2828        background-color: $clarin_blue;
    2929
    30         border-top-left-radius: 6px !important;
    31         border-bottom-left-radius: 6px !important;
    32         -webkit-border-top-left-radius: 6px !important;
    33         -webkit-border-bottom-left-radius: 6px !important;
    34         -moz-border-top-left-radius: 6px !important;
    35         -moz-border-bottom-left-radius: 6px !important; 
    36 
    37         border-top-right-radius: 6px !important;
    38         border-bottom-right-radius: 6px !important;
    39         -webkit-border-top-right-radius: 6px !important;
    40         -webkit-border-bottom-right-radius: 6px !important;
    41         -moz-border-top-right-radius: 6px !important;
    42         -moz-border-bottom-right-radius: 6px !important;
     30        @include roundborder(6px);
    4331
    4432        span {

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/_wizard.scss

    r5572 r5574  
    1616*/
    1717
    18 div.wizard .wicketExtensionsWizardHeaderTitle {
    19     padding: 0px 10px;
    20     font-size: 16px;
    21     font-weight: bold;
    22 }
    23 
    24 div.wizard .wicketExtensionsWizardHeaderSummary {
    25     padding: 5px 10px 0 10px;
    26     font-style: italics;
    27 }
    28 
    29 div.wizard .wizardHeader {
    30     border-bottom: 1px solid #000000;
    31     margin: 0 0 10px 0;
    32     padding: 0 0 10px 0;
     18div.wizard {
     19
     20    .wicketExtensionsWizardHeaderTitle {
     21        padding: 0px 10px;
     22        font-size: 16px;
     23        font-weight: bold;
     24    }
     25
     26    .wicketExtensionsWizardHeaderSummary {
     27        padding: 5px 10px 0 10px;
     28        font-style: italics;
     29    }
     30
     31    .wizardHeader {
     32        border-bottom: 1px solid #000000;
     33        margin: 0 0 10px 0;
     34        padding: 0 0 10px 0;
     35    }
     36
     37    .wizardFeedback {
     38        // redundant because of global feedback, suppress
     39        display: none !important;
     40    }
     41
    3342}
    3443
    … …  
    6574}
    6675
     76$help-icon-size: 16px;
     77
    6778form.wizard .extrainfo a.extrainfotoggle {
    6879    display: inline-block;
    6980    float: right;
    7081    vertical-align: top;
    71     width: 16px;
    72     height: 16px;
    73     background-image: url(help-128.png); /* from http://www.iconsdb.com/ */
    74     background-size: 16px 16px;
     82    width: $help-icon-size;
     83    height: $help-icon-size;
     84    /* icon from GLYPHICONS.com */
     85    background-image: url(../icons/glyphicons_194_circle_question_mark.png);
     86    background-size: $help-icon-size;
    7587    background-repeat: no-repeat;
    7688}
    7789
    78 form.wizard .extrainfo a.extrainfotoggle span {
    79     display: none;
    80 }
    81 
    82 form.wizard div.notes, form.wizard div.sidenotes {
    83     display: inline-block;
    84     height: auto;
    85     padding: 5px;
    86     border: 1px solid #666666;
    87     background-color: #ffffe1;
    88     color: #666666;
    89 }
    90 
    91 form.wizard div.notes {
    92     width: 80%;
    93     margin: 0 0 10px 70px;
    94 }
    95 
    96 form.wizard div.sidenotes {
    97     float: right;
    98     width: 198px;
    99     margin: 0 0 10px 10px;
    100 }
    101 
    102 form.wizard div.notes h4 {
    103     /*
    104     background-image: url(/images/icon_info.gif);
    105     background-repeat: no-repeat;
    106     background-position: top left;
    107     */
    108     text-align: center;
    109     padding: 3px 0 3px 0; /*27px; */
    110     margin: 0 0 3px 0;
    111     border-width: 0 0 1px 0;
    112     border-style: solid;
    113     border-color: #666666;
    114     color: #666666;
    115     font-size: 100%;
    116 }
    117 
    118 form.wizard div.notes p {
    119     margin: 0em 0em 0.5em 0em;
    120     color: #666666;
    121     font-size: 80%;
    122 }
    123 
    124 form.wizard div.notes p.last {
    125     margin: 0em;
    126 }
    127 
    128 form.wizard div label {
    129     display: block;
    130     float: left;
    131     width: 140px;
    132     padding: 3px 10px;
    133     margin: 0 0 5px 0;
    134     text-align: right;
    135     font-weight: normal;
     90form.wizard {
     91
     92    .extrainfo a.extrainfotoggle span {
     93        display: none;
     94    }
     95
     96    div.notes, div.sidenotes {
     97        display: inline-block;
     98        height: auto;
     99        padding: 5px;
     100        border: 1px solid #666666;
     101        background-color: #ffffe1;
     102        color: #666666;
     103    }
     104
     105    div.notes {
     106        width: 80%;
     107        margin: 0 0 10px 70px;
     108    }
     109
     110    div.sidenotes {
     111        float: right;
     112        width: 198px;
     113        margin: 0 0 10px 10px;
     114    }
     115
     116    div.notes h4 {
     117        /*
     118        background-image: url(/images/icon_info.gif);
     119        background-repeat: no-repeat;
     120        background-position: top left;
     121        */
     122        text-align: center;
     123        padding: 3px 0 3px 0; /*27px; */
     124        margin: 0 0 3px 0;
     125        border-width: 0 0 1px 0;
     126        border-style: solid;
     127        border-color: #666666;
     128        color: #666666;
     129        font-size: 100%;
     130    }
     131
     132    div.notes p {
     133        margin: 0em 0em 0.5em 0em;
     134        color: #666666;
     135        font-size: 80%;
     136    }
     137
     138    div.notes p.last {
     139        margin: 0em;
     140    }
     141
     142    div label {
     143        display: block;
     144        float: left;
     145        width: 140px;
     146        padding: 3px 10px;
     147        margin: 0 0 5px 0;
     148        text-align: right;
     149        font-weight: normal;
     150    }
     151
     152
     153    textarea {
     154        font-family: Verdana, sans-serif;
     155        font-size: 100%;
     156        width: 570px;
     157        overflow: auto;
     158        margin-bottom: 5px;
     159    }
     160
     161    .wizardButtons {
     162        border-top: 1px solid #000000;
     163        margin: 10px 0 0 0;
     164        clear: both;
     165    }
     166
     167    .buttonbar {
     168        margin: 10px 220px 0 0;
     169        padding: 0 10px 0 0;
     170        text-align: right;
     171    }
     172} //form.wizard
     173
     174
     175form.wizard .buttonbar, div.modalDialog div.modalDialogButtons {
     176
     177    input.button:hover {
     178        color: #AE0000;
     179        background-color: #E9EEF7;
     180    }
     181
     182    input.button[disabled],input.button[disabled]:hover {
     183        color: #AFAFAF;
     184        border-color: #EFEFEF;
     185    }
    136186}
    137187
    … …  
    139189label.required {
    140190    font-weight: bold !important;
    141 }
    142 
    143 form.wizard textarea {
    144     font-family: Verdana, sans-serif;
    145     font-size: 100%;
    146     width: 570px;
    147     overflow: auto;
    148     margin-bottom: 5px;
    149 }
    150 
    151 form.wizard .wizardButtons {
    152     border-top: 1px solid #000000;
    153     margin: 10px 0 0 0;
    154     clear: both;
    155 }
    156 
    157 form.wizard .buttonbar {
    158     margin: 10px 220px 0 0;
    159     padding: 0 10px 0 0;
    160     text-align: right;
    161 }
    162 
    163 form.wizard .buttonbar input.button:hover,
    164 div.modalDialog div.modalDialogButtons input.button:hover {
    165     color: #AE0000;
    166     background-color: #E9EEF7;
    167 }
    168 
    169 form.wizard .buttonbar  input.button[disabled],
    170 form.wizard .buttonbar  input.button[disabled]:hover,
    171 div.modalDialog div.modalDialogButtons input.button[disabled],
    172 div.modalDialog div.modalDialogButtons input.button[disabled]:hover {
    173     color: #AFAFAF;
    174     border-color: #EFEFEF;
    175191}
    176192
    … …  
    181197    margin: 0;
    182198    padding: 0;
    183 }
    184 
    185 div.modalDialog div.modalDialogContent {
    186     margin: 10px;
    187 }
    188 
    189 div.modalDialog div.modalDialogContent p {
    190     margin: 1em;
    191 }
    192 
    193 div.modalDialog div.modalDialogButtons {
    194     border-top: 1px solid #BBBBBB;
    195     margin: 0 5px 5px 5px;
    196     padding: 5px 0 0 0;
    197     text-align: center;
    198 }
     199
     200    div.modalDialogContent {
     201        margin: 10px;
     202       
     203        p {
     204            margin: 1em;
     205        }
     206    }
     207
     208    div.modalDialogButtons {
     209        border-top: 1px solid #BBBBBB;
     210        margin: 0 5px 5px 5px;
     211        padding: 5px 0 0 0;
     212        text-align: center;
     213    }
     214}
     215
    199216
    200217div.confirmationDialog {
    … …  
    221238}
    222239
    223 
    224240/*
    225241 * dialog customizations
    226242 */
    227 div.editCreatorDialog  fieldset label {
    228     width: 90px;
    229 }
    230 
    231 div.editCreatorDialog fieldset input,
    232 div.editCreatorDialog fieldset textarea {
    233     width: 255px;
    234 }
    235 
    236 div.editResourceDialog fieldset label {
    237     width: 70px;
    238 }
    239 
    240 div.editResourceDialog fieldset input,
    241 div.editResourceDialog fieldset textarea {
    242     width: 475px;
    243 }
    244 
    245 div.addResourcesDialog fieldset label {
    246     width: 85px;
    247 }
    248 
    249 div.addResourcesDialog fieldset input,
    250 div.addResourcesDialog fieldset textarea {
    251     width: 460px;
     243div.editCreatorDialog fieldset {
     244
     245    label {
     246        width: 7em;
     247    }
     248
     249    input, textarea {
     250        width: 17em;
     251    }
     252}
     253
     254div.editResourceDialog fieldset {
     255
     256    label {
     257        width: 6em;
     258    }
     259
     260    input, textarea {
     261        width: 30em;
     262    }
     263}
     264
     265div.addResourcesDialog fieldset {
     266
     267    label {
     268        width: 6em;
     269    }
     270
     271    input, textarea {
     272        width: 30em;
     273    }
    252274}
    253275
    254276div.addKeywordDialog fieldset input {
    255     width: 285px;
     277    width: 20em;
    256278}
    257279
    … …  
    268290    margin-left: 160px;
    269291    padding: 3px 0;
    270 }
    271 
    272 div.keywordsList div {
    273     clear: none;
    274 }
    275 
    276 div.keywordsList ul {
    277     list-style-type: square;
    278     margin: 0;
    279     padding: 0 0 0 16px;
    280 }
    281 
    282 div.keywordsList ul li {
    283     margin-top: 2px;
    284 }
    285 
    286 div.keywordsList ul li.first {
    287     margin-top: 0;
    288 }
     292
     293
     294    div {
     295        clear: none;
     296    }
     297
     298    ul {
     299        list-style-type: square;
     300        margin: 0;
     301        padding: 0 0 0 16px;
     302
     303        li {
     304            margin-top: 2px;
     305        }
     306
     307        li.first {
     308            margin-top: 0;
     309        }
     310    }
     311}
     312
    289313
    290314input.button {

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/vcr.scss

    r5572 r5574  
    44$iconsize: 12px;
    55
     6@import 'mixins';
    67@import 'toggleborder';
    78@import 'table';
Note: See TracChangeset for help on using the changeset viewer.