Revision 204536c9

View differences:

src/sunstone/public/app/tabs/provision-tab.js
1047 1047
          show_provision_create_vm();
1048 1048
        });
1049 1049

  
1050
        Foundation.reflow($('#provision_create_vm'), 'accordion');
1051

  
1050 1052

  
1051 1053
        //
1052 1054
        // Create FLOW
src/sunstone/public/app/tabs/provision-tab/vms/create.hbs
17 17
  <div class="row">
18 18
    <div class="large-10 large-centered columns">
19 19
      <h2 class="subheader">{{tr "Create Virtual Machine"}}</h2>
20
      <br>
21
    </div>
20
      <br></div>
22 21
  </div>
23 22
  <div class="row">
24 23
    <div class="large-8 large-centered columns">
25
      <input type="text" id="vm_name"  class="provision-input" placeholder="{{tr "Virtual Machine Name"}}" style="height: 40px !important; font-size: 16px; padding: 0.5rem  !important;"/>
26
      <br>
27
    </div>
24
      <input type="text" id="vm_name" class="provision-input" placeholder="{{tr "Virtual Machine Name"}}"/>
25
      <br></div>
28 26
  </div>
29 27
  <div class="row">
30 28
    <div class="large-10 large-centered columns">
31
      <dl class="accordion provision_accordion_template" data-accordion="provision_accordion_template">
32
        <dd style="border-bottom: 1px solid #efefef;" class="active accordion-navigation">
33
          <a href="#provision_dd_template" style="background: #fff; font-size: 30px">
34
            <span class="select_template" style="color:#555">{{tr "Select a Template"}}</span>
35
            <span class="selected_template" style="display:none; color:#555">
36
              <span class="provision-logo selected_template_logo" style="line-height: 80px"></span>
29
      <ul class="accordion provision_accordion_template" data-accordion data-allow-all-closed="true">
30
        <li class="accordion-item is-active" data-accordion-item>
31
          <a href="#provision_dd_template" class="accordion-title">
32
            <span class="select_template">{{tr "Select a Template"}}</span>
33
            <span class="selected_template" hidden>
34
              <span class="provision-logo selected_template_logo"></span>
37 35
              <span class="selected_template_name"></span>
38
              <span class="has-tip right" style="cursor: pointer; margin-right:10px; line-height: 80px"> <i class="fa fa-pencil"/></span>
36
              <span class="has-tip right"> <i class="fa fa-pencil"/></span>
39 37
            </span>
40 38
          </a>
41
          <div id="provision_dd_template" class="active content">
39
          <div id="provision_dd_template" class="accordion-content" data-tab-content>
42 40
            <div class="row">
43 41
              <div class="medium-8 columns">
44
                <button href="#"  data-options="align:right" data-dropdown="provisionVMInstantiateLabelsDropdown" class="right small secondary button dropdown radius">
45
                  <i class="fa fa-tags"/> {{tr "Labels"}}
42
                <button href="#"  data-options="align:right" data-dropdown="provisionVMInstantiateLabelsDropdown" class="right small secondary button dropdown"> <i class="fa fa-tags"/>{{tr "Labels"}}
46 43
                </button>
47 44
                <ul id="provisionVMInstantiateLabelsDropdown" class="labels-dropdown f-dropdown" data-dropdown-content></ul>
48 45
                <input type="search" class="right provision-search-input" placeholder="Search" id="provision_vm_instantiate_template_search"/>
......
72 69
              </div>
73 70
            </div>
74 71
          </div>
75
        </dd>
76
      </dl>
72
        </li>
73
      </ul>
77 74
    </div>
78 75
  </div>
79
  <br>
80 76
  <div class="row">
81 77
    <div class="large-10 large-centered columns">
82 78
      <div class="provision_capacity_selector"></div>
......
88 84
      <div class="provision_custom_attributes_selector"></div>
89 85
    </div>
90 86
  </div>
91
  <br>
92
  <br>
93
  <br>
94 87
  <div class="row">
95 88
    <div class="large-7 columns large-centered">
96
      <div data-alert class="alert-box alert-box-error radius text-center" hidden></div>
97
      <button href="#" class="button large success radius large-12 small-12" type="submit" style="height: 59px">{{tr "Create"}}</button>
89
      <div data-alert class="alert-box alert-box-error text-center" hidden></div>
90
      <button href="#" class="button large success large-12 small-12" type="submit">{{tr "Create"}}</button>
98 91
    </div>
99 92
  </div>
100
  <br>
101
  <br>
102 93
</form>
src/sunstone/public/app/utils/nics-section.js
172 172
        '</span>';
173 173
    }
174 174

  
175
    var dd_context = $('<dd style="border-bottom: 1px solid #efefef;" class="accordion-navigation">' +
176
      '<a href="#provision_accordion_dd_' + provision_nic_accordion_dd_id + '" style="background: #fff; font-size: 24px">' +
175
    var dd_context = $('<dd class="accordion-item" data-accordion-item>' +
176
      '<a href="#provision_accordion_dd_' + provision_nic_accordion_dd_id + '" class="accordion-title">' +
177 177
        nic_span +
178 178
      '</a>' +
179
      '<div id="provision_accordion_dd_' + provision_nic_accordion_dd_id + '" class="content">' +
179
      '<div id="provision_accordion_dd_' + provision_nic_accordion_dd_id + '" class="accordion-content" data-tab-content>' +
180 180
        '<div class="row">' +
181 181
          '<div class="large-12 large-centered columns">' +
182 182
            '<h3 class="subheader text-right">' +
......
203 203
        '</div>' +
204 204
      '</dd>').appendTo(context);
205 205

  
206
    Foundation.reInit(context);
207

  
206 208
    provision_nic_accordion_dd_id += 1;
207 209

  
208 210
    var provision_networks_datatable = $('.provision_networks_table', dd_context).dataTable({
......
367 369
      '</div>' +
368 370
      '<div class="row">' +
369 371
        '<div class="large-12 large-centered columns">' +
370
          '<dl class="accordion provision_nic_accordion" data-accordion="provision_accordion_' + provision_nic_accordion_id + '">' +
372
          '<dl class="accordion provision_nic_accordion" data-accordion data-allow-all-closed="true">' +
371 373
          '</dl>' +
372 374
          '<br>' +
373
          '<a class="button radius secondary provision_add_network_interface" style="width:inherit; padding: 1rem; color: #555; ' + (options.hide_add_button ? 'display:none;' : '') + '">' +
375
          '<a class="button secondary provision_add_network_interface"' + (options.hide_add_button ? 'hidden' : '') + '>' +
374 376
            Locale.tr("Add another Network Interface") +
375 377
          '</a>' +
376 378
        '</div>' +
377 379
      '</div>' +
378 380
      '<br>')
379 381

  
382
    Foundation.reflow(context, 'accordion');
383

  
380 384
    provision_nic_accordion_id += 1;
381 385

  
382 386
    $(".provision_add_network_interface", context).on("click", function() {
src/sunstone/public/scss/_accordion.scss
2 2
  .accordion-item {
3 3
    &.is-active {
4 4
      .only-not-active {
5
        display: none;
5
        display: none !important;
6 6
      }
7 7
    }
8 8
    &:not(.is-active) {
9 9
      .only-active {
10
        display: none;
10
        display: none !important;
11 11
      }
12 12
    }
13 13
  }

Also available in: Unified diff