Project

General

Profile

1
<div class="uk-grid uk-grid-stack">
2
  <div class="uk-width-expand@m uk-first-column">
3
    <div class="gwt-HTML uk-margin-medium-bottom">
4
      <h1 class="uk-article-title">Help Texts Admin</h1>
5
    </div>
6
    <div>
7
      <div class="alert alert-danger" style="display:none;" aria-hidden="true"></div>
8
      <div>
9
        <div class="alert alert-danger" style="display:none;" aria-hidden="true"></div>
10
        <div class="alert alert-success" style="display:none;" aria-hidden="true"></div>
11
        <div class="alert alert-warning" style="display:none;" aria-hidden="true"></div>
12
        <div>
13
          <div class="form-group">
14
            <label class="control-label">Select help item</label>
15
            <select class="form-control">
16
              <option value="none">None selected</option>
17
            </select>
18
          </div>
19
          <div class="form-group">
20
            <label class="control-label">Edit help text</label>
21
            <ckeditor [(ngModel)]="helpTextContent"
22
                      [readonly]="false" ></ckeditor>
23
          </div>
24
        </div>
25
      </div>
26
      <div class="helpAdminActionButtons">
27
        <button class="btn btn-default uk-button-primary" type="button" (click)="showPreview()">Preview</button>
28
        <button class="uk-button uk-button-default" type="button">Submit Changes</button>
29
      </div>
30
    </div>
31
  </div>
32
  <div class="tm-sidebar uk-width-1-4@m">
33
    <div class="previewPanel" [innerHtml]="previewContent"></div>
34
    <div>
35
      <div class="gwt-HTML">
36
        <div class="uk-card uk-card-body uk-card-default sidemenu">
37
          <h3 class="el-title uk-h3 uk-heading-bullet">Info / Help</h3>
38
          <p class="small">
39
            Use the drop down menu to select the target page where you want the help text to appear. Use the editor on the main window to modify the content (html format is accepted).
40
          </p>
41
          <p class="small">
42
            All help content appears in a pane box at the right hand side of the target page.
43
          </p>
44
          <p class="small">
45
            Click on the
46
            <span style="font-family:courier new,courier,monospace">PREVIEW</span>
47
            button and see how the help content will look like on the target page.
48
          </p>
49
          <p class="small">
50
            When you
51
            <span style="font-family:courier new,courier,monospace">SUBMIT CHANGES</span>
52
            these will automatically appear on the target page (refresh the browser page).
53
          </p>
54
          <p class="small"></p>
55
        </div>
56
      </div>
57
    </div>
58
  </div>
59
</div>
(1-1/7)