standardize modal sizes

Signed-off-by: szaimen <szaimen@e.mail.de>
nextcloud-libraries · Aug 16, 2021 · b8a64f9 · b8a64f9
1 parent 69ca1d8
commit b8a64f9
Showing 1 changed file with 50 additions and 31 deletions.
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
@@ -295,7 +295,7 @@ export default {
  type: String,
  default: 'normal',
  validator: size => {
- return ['normal', 'large', 'full'].indexOf(size) !== -1
+ return ['small', 'medium', 'normal', 'large', 'full'].indexOf(size) !== -1
  },
  },
  /**
@@ -673,9 +673,10 @@ $header-size: 50px;
  display: flex !important;
  align-items: center;
  justify-content: center;
- width: 15%;
- min-width: 60px;
- height: 100%;
+ width: 8%;
+ min-width: $clickable-area;
+ height: 35vw;
+ position: absolute;
  transition: opacity 250ms,
  visibility 250ms;
 
@@ -688,6 +689,12 @@ $header-size: 50px;
  visibility: hidden;
  }
  }
+ .prev {
+ left: 0;
+ }
+ .next {
+ right: 0;
+ }
 
  // buttons/icons
  .icon-next,
@@ -703,51 +710,63 @@ $header-size: 50px;
  /* Content */
  .modal-container {
  display: block;
- overflow: hidden;
+ overflow: auto; // avoids unecessary hacks if the content should be bigger than the modal
  padding: 0;
  transition: transform 300ms ease;
  border-radius: var(--border-radius-large);
  background-color: var(--color-main-background);
  box-shadow: 0 0 40px rgba(0, 0, 0, .2);
  }
- &:not(&--large):not(&--full) .modal-container {
- max-width: 900px;
- max-height: 80%;
- }
 
  // Sizing
- &--full {
+ &--small {
  .modal-container {
- max-width: 100%;
- max-height: 100%;
- border-radius: 0;
+ width: 350px;
+ height: 200px;
  }
  }
- &--full,
- &--spread-navigation {
- .prev,
- .next {
- position: absolute;
- width: 8%;
- height: 35vw;
- }
- .prev {
- left: 0;
+ &--medium {
+ .modal-container {
+ width: 500px;
+ height: 600px;
  }
- .next {
- right: 0;
+ }
+ &--normal {
+ .modal-container {
+ max-width: 70%;
+ width: 700px;
+ max-height: 80%;
+ height: 600px;
  }
  }
  &--large {
  .modal-container {
- max-width: 85%;
+ max-width: 90%;
+ width: 900px;
  max-height: 90%;
+ height: 700px;
+ }
+ }
+ &--full {
+ .modal-container {
+ width: 100%;
+ height: calc(100% - $header-size);
+ position: absolute;
+ top: $header-size;
+ border-radius: 0;
  }
- .prev,
- .next {
- width: 8%;
- min-width: $clickable-area;
- height: 35vw;
+ }
+
+ // Make modal always full screen on mobile independent from modal size
+ @media only screen and (max-width: $breakpoint-mobile/2) {
+ &:not(&--small) .modal-container {
+ max-width: initial;
+ width: 100%;
+ max-height: initial;
+ height: calc(100% - $header-size);
+ position: absolute;
+ top: $header-size;
+ border-radius: 0;
  }
  }
 }