Отзывчивый логин - PullRequest
Новая
       17

Отзывчивый логин

0 голосов
/ 26 сентября 2018

Я столкнулся с досадной проблемой.Я пытаюсь сделать свое веб-приложение отзывчивым, и я почти закончил, осталось только сделать панель входа отзывчивой, и это большая проблема для меня.Я попробовал кое-что, но все выглядит грязно и безобразно.Я не могу заставить его выглядеть так, как я хочу, надеюсь, кто-то здесь может помочь.

Мой код: 

.container {
  width: 85%;
  margin: auto;
  overflow: hidden;
}

header {
  background-color: #262626;
  color: white;
  padding-top: 20px;
  min-height: 70px;
}

header a {
  letter-spacing: 1.5px;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  padding: 8px 16px;
}

header a:hover {
  padding: 8px 16px;
  border-color: #2a2a2a;
  color: #D52B1E;
  letter-spacing: 1.5px;
  border: none;
  cursor: pointer;
  outline: none;
  display: block;
}

header li {
  padding: 0 15px 0 15px;
  display: inline-flex;
}

header #logo {
  float: left;
}

#logo a {
  color: white;
  display: block;
  font-family: 'Dancing Script', cursive;
  text-decoration: none;
  text-transform: none;
  font-size: 25px;
  font-weight: bold;
}

header nav {
  float: right;
  margin-top: 10px;
}

#login {
  text-align: center;
  margin-top: 30px;
  background-color: #f4f4f4;
  color: black;
  font-size: 12px;
  padding: 10px;
}

#login .container .wellcome-user-left {
  float: left;
  margin-top: 5px;
}

#login .container .logout-right {
  float: right;
  margin-top: 5px;
}

#login .container .login-info {
  float: center;
}

#login .container select {
  width: 10%;
  font-size: 12px;
  margin-left: 20px;
  border: none;
}

#login .container input[type="text"],
[type="password"] {
  width: 10%;
  font-size: 12px;
  transition: 0.6s;
  border: 1px solid #cacaca;
  background-color: white;
  transition: 0.2s;
  margin-left: 10px;
  margin-right: 10px;
  padding: 6px 16px;
}

#login .container input[type="text"],
[type="password"]:focus {
  outline: none;
}

#login .container button[type="submit"] {
  width: 6%;
  border: none;
  outline: none;
  background: transparent;
  color: rgb(0, 0, 0);
  cursor: pointer;
  transition: 0.2s;
  padding: 6px 14px;
  font-weight: bold;
  font-size: 12px;
  margin-left: 25px;
}

#login .container button[type="submit"]:hover {
  background: #D52B1E;
  color: white;
}

#login .container .logout-btn {
  background-color: white;
  color: #262626;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 14px;
}

#login .container .logout-btn:hover {
  color: white;
  background-color: #262626;
}

@media(max-width: 736px) {
  header #logo,
  header nav,
  header nav li {
    float: none;
    text-align: center;
    width: 100%;
  }
  #login .container .login-info {
    float: right;
    font-size: 8px;
  }
  #login {
    float: center;
    text-align: center;
    margin-top: 20px;
    color: black;
    font-size: 10px;
  }
  #login .container .login-info button[type="submit"] {
    border: none;
    outline: none;
    background: transparent;
    color: rgb(0, 0, 0);
    cursor: pointer;
    transition: 0.2s;
  }
  #login .container .login-info button[type="submit"]:hover {
    background: #D52B1E;
    color: white;
  }
}
<section id="login">

  <div class="container" style="width:100%">
    <div class="wellcome-user-left">

      <ul>
        <li *ngIf="showLogin">Hello&nbsp;<b>{{username}} </b>, &nbsp;please log in</li>
      </ul>
      <ul>
        <li *ngIf="!showLogin">Wellcome&nbsp;<b>{{username}} </b>, &nbsp;enjoy</li>
      </ul>
    </div>

    <div class="logout-right" *ngIf="!showLogin">
      <button (click)="logout()" class="logout-btn"><i class="fas fa-sign-out-alt"></i>Logout</button>
    </div>
    <div class="login-info" *ngIf="showLogin">
      <i class="fas fa-user"></i> Username
      <input type="text" placeholder="enter username..." #username>

      <i class="fas fa-key"></i> Password
      <input type="password" placeholder="enter password..." #password>

      <select #cType>
        <option selected hidden>Select Client</option>
        <option>ADMIN</option>
        <option>COMPANY</option>
        <option>CUSTOMER</option>
      </select>

      <button type="submit" (click)="loginUser(username,password,cType)">LOGIN</button>
    </div>
  </div>

</section>

Мой результат таков:

how it looks like

И вот как бы я хотел, чтобы это было:

how I wish it was

Обновление после редактирования: (после помощи TsaiKoga) Обновление после помощи @TsaiKoga

1 Ответ

0 голосов
/ 26 сентября 2018

Я думаю, что имя пользователя, пароль и поля выбора должны быть вложены в каждый «div», тогда вы можете управлять всеми этими полями ввода с помощью отображения «div» в строке или в блоке, когда они реагируют или нет.

Вы можете попробовать это (ps: вы можете исправить стиль, который вам нужен): 

    .container {
      width: 85%;
      margin: auto;
      overflow: hidden;
    }

    header {
      background-color: #262626;
      color: white;
      padding-top: 20px;
      min-height: 70px;
    }

    header a {
      letter-spacing: 1.5px;
      color: white;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 16px;
      padding: 8px 16px;
    }

    header a:hover {
      padding: 8px 16px;
      border-color: #2a2a2a;
      color: #D52B1E;
      letter-spacing: 1.5px;
      border: none;
      cursor: pointer;
      outline: none;
      display: block;
    }

    header li {
      padding: 0 15px 0 15px;
      display: inline-flex;
    }

    header #logo {
      float: left;
    }

    #logo a {
      color: white;
      display: block;
      font-family: 'Dancing Script', cursive;
      text-decoration: none;
      text-transform: none;
      font-size: 25px;
      font-weight: bold;
    }

    header nav {
      float: right;
      margin-top: 10px;
    }

    #login {
      text-align: center;
      margin-top: 30px;
      background-color: #f4f4f4;
      color: black;
      font-size: 12px;
      padding: 10px;
    }

    #login .container .wellcome-user-left {
      float: left;
      margin-top: 5px;
    }

    #login .container .logout-right {
      float: right;
      margin-top: 5px;
    }

    #login .container .login-info {
      float: center;
    }

    #login .container select {
      width: 60%;
      font-size: 12px;
      margin-left: 20px;
      border: none;
    }
    #login .login-field-container {
      display: inline-block;
    }
    #login .login-field-container .login-field {
      display: inline-block;
    }
    #login .login-btn {
      display: inline-block;
    }

    #login .container input[type="text"],
    [type="password"] {
      width: 50%;
      font-size: 12px;
      transition: 0.6s;
      border: 1px solid #cacaca;
      background-color: white;
      transition: 0.2s;
      margin-left: 10px;
      margin-right: 10px;
      padding: 6px 16px;
    }

    #login .container input[type="text"],
    [type="password"]:focus {
      outline: none;
    }

    #login .container button[type="submit"] {
      width: 6%;
      border: none;
      outline: none;
      background: transparent;
      color: rgb(0, 0, 0);
      cursor: pointer;
      transition: 0.2s;
      padding: 6px 14px;
      font-weight: bold;
      font-size: 12px;
      margin-left: 25px;
    }

    #login .container button[type="submit"]:hover {
      background: #D52B1E;
      color: white;
    }

    #login .container .logout-btn {
      background-color: white;
      color: #262626;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 6px 14px;
    }

    #login .container .logout-btn:hover {
      color: white;
      background-color: #262626;
    }

    @media(max-width: 736px) {
      header #logo,
      header nav,
      header nav li {
        float: none;
        text-align: center;
        width: 100%;
      }
      #login .container .login-info {
        font-size: 8px;
        clear: both;
        display: -webkit-flex;
        display: flex;
        width: 100%;
      }
      #login {
        float: center;
        text-align: center;
        margin-top: 20px;
        color: black;
        font-size: 10px;
        text-align: left;
      }
      #login .login-field-container {
        height: 100%;
        width: 60%;
        text-align: right;
      }
      #login .login-field-container .login-field {
        display: block;
        margin-bottom: 8px;
      }
      #login .login-btn {
        vertical-align: middle;
        width: 30%;
        text-align: left;
      }
      #login .container select {
        margin-right: 10px;
      }
      #login .container .login-info button[type="submit"] {
        border: none;
        outline: none;
        background: transparent;
        color: rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.2s;
        width: 100%;
        height: 100%;
      }
      #login .container .login-info button[type="submit"]:hover {
        background: #D52B1E;
        color: white;
      }
    }
    <section id="login">

      <div class="container" style="width:100%">
        <div class="wellcome-user-left">

          <ul>
            <li *ngIf="showLogin">Hello&nbsp;<b>{{username}} </b>, &nbsp;please log in</li>
          </ul>
          <ul>
            <li *ngIf="!showLogin">Wellcome&nbsp;<b>{{username}} </b>, &nbsp;enjoy</li>
          </ul>
        </div>

        <div class="logout-right" *ngIf="!showLogin">
          <button (click)="logout()" class="logout-btn"><i class="fas fa-sign-out-alt"></i>Logout</button>
        </div>

        <div class="login-info" *ngIf="showLogin">

          <div class="login-field-container">
            <div class="login-field">
              <i class="fas fa-user"></i> Username
              <input type="text" placeholder="enter username..." #username>
            </div>

            <div class="login-field">
              <i class="fas fa-key"></i> Password
              <input type="password" placeholder="enter password..." #password>
            </div>

            <div class="login-field">
              <select #cType>
                <option selected hidden>Select Client</option>
                <option>ADMIN</option>
                <option>COMPANY</option>
                <option>CUSTOMER</option>
              </select>
            </div>
          </div>

          <div class="login-btn">
            <button type="submit" (click)="loginUser(username,password,cType)">LOGIN</button>
          </div>
        </div>
      </div>

    </section>
...