metadata-validator-ui/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.html

<div id="page_content">
  <div id="page_content_header" class="uk-blur-background" offset="65">
    <div class="uk-container uk-container-large uk-grid uk-margin-remove-left" uk-grid>
<!--      <div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">-->
<!--      <div class="uk-section uk-width-expand" [formGroup]="form">-->
      <div id="center-content" class="uk-width-expand" [formGroup]="form">
        <ng-container>
          <div class="uk-margin-large-bottom">
            <h6><span class="uk-text-secondary uk-margin-right">1.</span> Select a data source (repository or journal)</h6>
            <div input class="uk-width-xlarge uk-margin-xsmall-left uk-margin-medium-top" inputClass="flat x-small" [formInput]="form.get('url')"
                 placeholder="Give the URL from one of your registered repositories" type="URL" (valueChange)="getSets()"></div>
          </div>

          <div class="uk-margin-large-bottom">
            <h6><span class="uk-text-secondary uk-margin-right">2.</span> Select guidelines</h6>
            <div class="uk-margin-medium-top">
              <div *ngFor="let option of options" class="uk-margin-xsmall-left uk-margin-small-bottom">
                <input [id]="option.value" type="radio" [value]="option.value" name="guidelines" formControlName="guidelines">
                <label [for]="option.value" class="uk-margin-xsmall-left">{{option.label}}</label>
              </div>
            </div>
          </div>

          <div class="uk-margin-large-bottom">
            <h6><span class="uk-text-secondary uk-margin-right">3.</span> Define the number of record to validate</h6>
            <div class="uk-disabled uk-text-muted uk-margin-xsmall-left uk-margin-medium-top uk-margin-small-bottom">
              <input id="all" type="radio" name="recordsNum" value="-1" formControlName="recordsNum">
              <label for="all" class="uk-margin-xsmall-left">All</label>
            </div>
            <div class="uk-flex uk-flex-middle uk-margin-xsmall-left">
              <input id="custom" type="radio" name="recordsNum" [value]="recordsNum" formControlName="recordsNum">
              <label for="custom" class="uk-margin-xsmall-left">
                Custom
              </label>
              <span class="uk-margin-left uk-flex-inline uk-flex-middle">
                <icon class="clickable" name="remove_circle_outline" flex="true" ratio="0.9" type="outlined"
                      [ngClass]="recordsNum <= 10 ? 'uk-disabled uk-text-muted' : ''" (click)="updateRecordsNum(false)"></icon>
                <span class="uk-margin-small-left uk-margin-small-right">{{recordsNum}}</span>
                <icon class="clickable" name="add_circle_outline" flex="true" ratio="0.9" type="outlined"
                      [ngClass]="recordsNum >= 20 ? 'uk-disabled uk-text-muted' : ''" (click)="updateRecordsNum(true)"></icon>
              </span>
            </div>

            <div [disabled]="loadingSets || sets.length == 1" input type="select" placeholder="Select validation set" inputClass="flat x-small"
                 [options]="sets" [formInput]="form.get('set')" class="uk-width-large uk-margin-medium-top uk-margin-xsmall-left"></div>
          </div>

          <div class="uk-margin-medium-top uk-margin-xsmall-left">
            <button class="uk-button uk-flex uk-flex-middle uk-flex-wrap"
                    [class.uk-button-primary]="form.valid" [class.uk-disabled]="!form.valid"
                    (click)="validate();">
              <span>Start Validation</span>
            </button>
          </div>

          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
          <div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
        </ng-container>
      </div>

<!--      <div id="right-sidebar" *ngIf="help" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-background-primary">-->
<!--        <div class="uk-sticky" uk-sticky="bottom: true" [attr.offset]="offset">-->
<!--          <div class="uk-overflow-auto uk-height-1-1">-->
<!--            <div class="uk-h5 uk-light uk-text-center">Help</div>-->
<!--&lt;!&ndash;            <div class="uk-card uk-card-default">&ndash;&gt;-->
<!--&lt;!&ndash;              <div class="uk-card-body">test body</div>&ndash;&gt;-->
<!--&lt;!&ndash;              <div class="uk-card-footer">Dismiss Help</div>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

      <div id="landing-right-sidebar" *ngIf="help" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small uk-visible@m">
        <div class="uk-sticky" uk-sticky="bottom: true" [attr.offset]="offset">
          <div class="uk-overflow-auto uk-height-1-1">
            test
          </div>
        </div>
      </div>

    </div>

    <div *ngIf="!help" class="quick-contact uk-align-right">
      <button class="uk-button uk-box-shadow-default uk-box-shadow-default-hover uk-button-secondary uk-flex uk-flex-middle"
              (click)="help = true">
        <icon name="lightbulb" [flex]="true"></icon>
        <span class="uk-margin-small-left">help</span>
      </button>
    </div>

  </div>
</div>