Как я могу создать модал, как у Reddit, с изображением на левой стороне? - PullRequest
Новая
       27

Как я могу создать модал, как у Reddit, с изображением на левой стороне?

0 голосов
/ 10 июня 2019

Я пытаюсь создать модал, такой как Reddit, с изображением без левой стороны, занимающим все стороны.

Я действительно не знаю, как начать / что делать.

Вот мой html-код. 

  <div class="modal-header" style="border-bottom: 0 none">
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <img [src]="FLUENCE_LOGO_GREEN" alt="Fluent Home" height="30px" style="margin-left: 2px"/>
    <form [formGroup]="fluenceLoginForm" (ngSubmit)="onSubmit()">
      <h6 style="margin-left: 2px; margin-top: 10px"> Sign in </h6>
      <div class="group">
        <input ngbAutofocus type="text" formControlName="username" required="required">
        <label>Username</label><span class="highlight"></span><span class="bar"></span>
        <div *ngIf="submitted && fluenceLoginForm.controls.username.errors" class="error">
          <div style="font-size: 10px; color: red" *ngIf="fluenceLoginForm.controls.username.errors.required"> <i class="fas fa-exclamation-circle"></i> Username is required. </div>
          <div style="font-size: 10px; color: red" *ngIf="fluenceLoginForm.controls.username.errors.minlength"> <i class="fas fa-exclamation-circle"></i> Username must be at least 3 characters. </div>
        </div>
        <div style="font-size: 10px; color: red" *ngIf="isWrongCredentials"> <i class="fas fa-exclamation-circle"></i> Incorrect username or password. </div>
      </div>
      <div class="group">
        <input type="password" formControlName="password" required="required">
        <label>Password</label><span class="highlight"></span><span class="bar"></span>
        <div *ngIf="submitted && fluenceLoginForm.controls.password.errors" class="error">
          <div style="font-size: 10px; color: red" *ngIf="fluenceLoginForm.controls.password.errors.required"> <i class="fas fa-exclamation-circle"></i> Password is required. </div>
          <div style="font-size: 10px; color: red" *ngIf="fluenceLoginForm.controls.password.errors.minlength"> <i class="fas fa-exclamation-circle"></i> Password must be at least 5 characters. </div>
        </div>
      </div>
      <button type="submit" class="btn btn-primary btn-sm" style="width: 186px; margin-bottom: 10px"><b>SIGN IN</b></button>
      <br>
      <p style="font-size: 11px; margin-bottom: 30px"> <a href="#"> Forgot username </a> - <a href="#"> Forgot password </a> </p>
      <p style="font-size: 11px"> New to Fluence? <a [routerLink]="" (click)="showSignupModal()" style="font-weight: bold"> SIGN UP </a> </p>
      <div style="margin-bottom: 22px"></div>
    </form>
  </div>

Что я могу сделать?

...