Vuejs и CSS: увеличьте ширину наложения на небольших устройствах с шириной 500 пикселей или меньше - PullRequest
Новая
       0

Vuejs и CSS: увеличьте ширину наложения на небольших устройствах с шириной 500 пикселей или меньше

0 голосов
/ 28 мая 2020

Я пытаюсь увеличить ширину оверлейной навигации для всех небольших устройств. Ширина по умолчанию, которая у меня составляет 25%, установлена ​​для устройств с шириной 1000 пикселей или более, и мне нужен второй набор аргументов с шириной или 35% или более для небольших устройств, чтобы текст мог поместиться или пользователь мог видеть текст лучше. Есть ли способ решить эту проблему с помощью Vue или CSS. 

new Vue({
  el: '#app',
  data: () => ({
    open: false,
  }),
  methods: {
    changeP () {
      this.arrowP = (this.arrowP === 'arrow-right') ? 'angle-down' : 'arrow-right'
    },
    setProperty (event) {
      this.$store.dispatch('display', event)
    },
    toggleOverlay () {
      this.open = !this.open
    }
  },
  
})

$(function () {
  openNav()
  closeNav()
})
.navbar-icon {
    outline: none;
    border: 0;
    box-shadow: none;
    background: inherit;
  }

  .navbar-icon::before {
    content: '\F0C9';
    font-family: 'FontAwesome', serif;
    font-size: 24px;
  }
  
  
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: #393F4D;;
    overflow-x: hidden;
    transition: 0.5s;
    
 }
 
 .profile-image {
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
 }

  .close::before {
    content: '\F057';
    font-family: 'FontAwesome', serif;
    position: absolute;
    top: 20px;
    right: 10px;
    font-size: 25px;
    color: $color-white;
    border: 0;
    box-shadow: none;
    outline: none;
 }
 
 .bottom-border {
      border-bottom: 1px solid #A6A6A6;
      margin-bottom: 1em;
 }
 
 .profile-name h5 {
        font-size: 18px;
        font-family: inherit;
        color: $color-white;
        max-width: 100%;
        padding-left: 0;
        margin-left: 0;
}

.profile-name {
      width: 60%;
      margin-left: -1em;
    }

.profile-row {
        padding-left: 20px;
}

.profile-row .button {
          padding: 0 10px;
          color: $color-white;
          border: 1px solid #A6A6A6;
          margin-left: .5em;
          box-shadow: none;
          margin-top: .2em;

       
}

.profile-row .button::before {
            font-family: FontAwesome, serif;
            font-size: 18px;
}

.profile-row .new-user::before {
          content: '\F007';
}

.profile-row .logout::before {
          content: '\F061';
}

.profile-row .setting::before {
          content: '\f013';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.15.0/bootstrap-vue-icons.common.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="app" class="container-fluid admin-panel p-0">
    <div class="row admin navbar-item-left">
      <div class="col-md-12">
        <button type="button"
                @click="toggleOverlay"
                class="navbar-icon add-right-margin"/>
       
      </div>

    </div>
    <b-container fluid="lg" id="myNav" class="overlay p-0"
                 :style="{ width: open ? '25%': '0' }">
      <b-button class="close" @click="toggleOverlay"/>

      <b-container class="overlay-content">
        <b-row class="bottom-border">
          <b-container fluid="sm" class="image-cropper">
            <img :src="pImage" alt="" class="profile-pic">
          </b-container>
          <b-container fluid="sm" class="profile-name">
            <h5>Shah Rukh Khan</h5>
            <b-row class="profile-row">
              <b-button
                class="button new-user"
                v-b-popover.hover.bottom="'User'" />
              <b-button class="button setting"
                        v-b-popover.hover.bottom="'Setting'" />
              <b-button class="button logout"
                        v-b-popover.hover.bottom="'Logout'"  />
            </b-row>
          </b-container>
        </b-row>
        <b-button @click="changeP()"
                  :class="'sub-title product ' + arrowP"
                  v-b-toggle.collapse-product
                  v-text="'Product'"/>
        <b-collapse id="collapse-product" class="dropdown-list">
          <b-button class="button" v-text="'Product List'"/>
          <br>
          <b-button class="button" v-text="'New Product'"/>
          <br>
          <b-button class="button" v-text="'Update Product'"/>
        </b-collapse>
       
      </b-container>
    </b-container>
  </div>

1 Ответ

0 голосов
/ 28 мая 2020

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

Это позволяет вам использовать CSS и медиа-запросы для определения ширины в зависимости от размера экрана. 

/*  Default */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: #393F4D;
  ;
  overflow-x: hidden;
  transition: 0.5s;
}

/* When open class is applied */
.overlay.open {
  width: 25%;
}

@media screen and (max-width: 992px) {
  .overlay.open {
    width: 35%;
  }
}

@media screen and (max-width: 768px) {
  .overlay.open {
    width: 50%;
  }
}

@media screen and (max-width: 548px) {
  .overlay.open {
    width: 90%;
  }
}


new Vue({
  el: '#app',
  data: () => ({
    open: false,
  }),
  methods: {
    changeP() {
      this.arrowP = (this.arrowP === 'arrow-right') ? 'angle-down' : 'arrow-right'
    },
    setProperty(event) {
      this.$store.dispatch('display', event)
    },
    toggleOverlay() {
      this.open = !this.open
    }
  },

})

$(function() {
  openNav()
  closeNav()
})
.navbar-icon {
  outline: none;
  border: 0;
  box-shadow: none;
  background: inherit;
}

.navbar-icon::before {
  content: '\F0C9';
  font-family: 'FontAwesome', serif;
  font-size: 24px;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: #393F4D;
  ;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay.open {
  width: 25%;
}

@media screen and (max-width: 992px) {
  .overlay.open {
    width: 35%;
  }
}

@media screen and (max-width: 768px) {
  .overlay.open {
    width: 50%;
  }
}

@media screen and (max-width: 548px) {
  .overlay.open {
    width: 90%;
  }
}


.profile-image {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.close::before {
  content: '\F057';
  font-family: 'FontAwesome', serif;
  position: absolute;
  top: 20px;
  right: 10px;
  font-size: 25px;
  color: $color-white;
  border: 0;
  box-shadow: none;
  outline: none;
}

.bottom-border {
  border-bottom: 1px solid #A6A6A6;
  margin-bottom: 1em;
}

.profile-name h5 {
  font-size: 18px;
  font-family: inherit;
  color: $color-white;
  max-width: 100%;
  padding-left: 0;
  margin-left: 0;
}

.profile-name {
  width: 60%;
  margin-left: -1em;
}

.profile-row {
  padding-left: 20px;
}

.profile-row .button {
  padding: 0 10px;
  color: $color-white;
  border: 1px solid #A6A6A6;
  margin-left: .5em;
  box-shadow: none;
  margin-top: .2em;
}

.profile-row .button::before {
  font-family: FontAwesome, serif;
  font-size: 18px;
}

.profile-row .new-user::before {
  content: '\F007';
}

.profile-row .logout::before {
  content: '\F061';
}

.profile-row .setting::before {
  content: '\f013';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.15.0/bootstrap-vue-icons.common.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="app" class="container-fluid admin-panel p-0">
  <div class="row admin navbar-item-left">
    <div class="col-md-12">
      <button type="button" @click="toggleOverlay" class="navbar-icon add-right-margin" />
    </div>
  </div>
  <b-container fluid="lg" id="myNav" class="overlay p-0" :class="{ 'open': open }">
    <b-button class="close" @click="toggleOverlay" />

    <b-container class="overlay-content">
      <b-row class="bottom-border">
        <b-container fluid="sm" class="image-cropper">
          <img :src="pImage" alt="" class="profile-pic">
        </b-container>
        <b-container fluid="sm" class="profile-name">
          <h5>Shah Rukh Khan</h5>
          <b-row class="profile-row">
            <b-button class="button new-user" v-b-popover.hover.bottom="'User'" />
            <b-button class="button setting" v-b-popover.hover.bottom="'Setting'" />
            <b-button class="button logout" v-b-popover.hover.bottom="'Logout'" />
          </b-row>
        </b-container>
      </b-row>
      <b-button @click="changeP()" :class="'sub-title product ' + arrowP" v-b-toggle.collapse-product v-text="'Product'" />
      <b-collapse id="collapse-product" class="dropdown-list">
        <b-button class="button" v-text="'Product List'" />
        <br>
        <b-button class="button" v-text="'New Product'" />
        <br>
        <b-button class="button" v-text="'Update Product'" />
      </b-collapse>

    </b-container>
  </b-container>
</div>

Небольшое примечание.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...