Add maximized mode to markdown-textarea + CSS improvements (#2660)

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / forms / markdown-textarea.component.scss

@import '_variables';
@import '_mixins';

$nav-preview-tab-height: 30px;
$base-padding: 15px;
$input-border-color: #C6C6C6;
$input-border-radius: 3px;

@mixin in-small-view {
  .root {
    display: flex;
    flex-direction: column;

    textarea {
      @include peertube-textarea(100%, 150px);

      background-color: var(--textareaBackgroundColor);
      font-family: courier, monospace;
      font-size: 13px;
      border-bottom: none;
      border-bottom-left-radius: unset;
      border-bottom-right-radius: unset;
    }

    .nav-preview {
      display: block;
      text-align: right;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      border-top: 1px dashed $input-border-color;
      border-left: 1px solid $input-border-color;
      border-right: 1px solid $input-border-color;
      border-bottom: 1px solid $input-border-color;
      border-bottom-right-radius: $input-border-radius;

      border-bottom-left-radius: $input-border-radius;
      ::ng-deep {
        .nav-link {
          display: none !important;
        }

        .grey-button {
          padding: 0 12px 0 12px;
        }
      }
    }

    ::ng-deep {
      .tab-content {
        display: none;
      }
    }
  }
}

@mixin nav-preview-medium {
  display: flex;
  flex-grow: 1;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
  border-bottom: 2px solid var(--mainColor);

  :first-child {
    margin-left: auto;
  }

  ::ng-deep {
    .nav-link {
      display: flex !important;
      align-items: center;
      height: $nav-preview-tab-height !important;
      padding: 0 15px !important;
      font-size: 85% !important;
      opacity: .7;
    }

    .grey-button {
      margin-left: 5px;
    }
  }
}

@mixin content-preview-base {
  display: block;
  min-height: 75px;
  padding: $base-padding;
  overflow-y: auto;
  font-size: 15px;
  word-wrap: break-word;
}

@mixin maximized-base {
  flex-direction: row;
  z-index: #{z(header) - 1};
  position: fixed;
  top: $header-height;
  left: $menu-width;
  max-height: none !important;
  max-width: none !important;
  width: calc(100% - #{$menu-width});
  height: calc(100vh - #{$header-height}) !important;

  $nav-preview-vertical-padding: 40px;

  .nav-preview {
    @include nav-preview-medium();
    padding-top: #{$nav-preview-vertical-padding / 2};
    padding-bottom: #{$nav-preview-vertical-padding / 2};
    padding-left: 0px;
    padding-right: 0px;
    position: absolute;
    background-color: var(--mainBackgroundColor);
    width: 100% !important;
    border-top: none;
    border-left: none;
    border-right: none;

    :last-child {
      margin-right: $not-expanded-horizontal-margins;
    }
  }

  ::ng-deep .tab-content {
    @include content-preview-base();
    background-color: var(--mainBackgroundColor);
    scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor);
  }

  textarea,
  ::ng-deep .tab-content {
    max-height: none !important;
    max-width: none !important;
    margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
    height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
    width: 50% !important;
    border: none !important;
    border-radius: unset !important;
  }

  :host-context(.expanded) {
    .root.maximized {
      left: 0;
      width: 100%;
    }
  }
}

@mixin maximized-in-small-view {
  .root.maximized {
    @include maximized-base();

    textarea {
      display: none;
    }

    ::ng-deep .tab-content {
      width: 100% !important;
    }
  }
}

@mixin maximized-tabs-in-mobile-view {
  // Ellipsis on tabs for mobile view
  .root.maximized {
    .nav-preview {
      ::ng-deep .nav-link {
        @include ellipsis();

        display: block !important;
        max-width: 45% !important;
        padding: 5px 0 !important;
        margin-right: 10px !important;
        text-align: center;

        &:not(.active) {
          max-width: 15% !important;
        }

        &.active {
          padding: 5px 15px !important;
        }
      }
    }
  }
}

@mixin in-medium-view {
  .root {
    .nav-preview {
      @include nav-preview-medium();
    }

    ::ng-deep .tab-content {
      @include content-preview-base();
      max-height: 210px;
      border-bottom: 1px solid $input-border-color;
      border-left: 1px solid $input-border-color;
      border-right: 1px solid $input-border-color;
      border-bottom-left-radius: $input-border-radius;
      border-bottom-right-radius: $input-border-radius;
    }
  }
}

@mixin maximized-in-medium-view {
  .root.maximized {
    @include maximized-base();

    textarea {
      display: block;
      padding: $base-padding;
      border-right: 1px dashed $input-border-color !important;
      resize: none;
      scrollbar-color: var(--actionButtonColor) var(--textareaBackgroundColor);

      &:focus {
        box-shadow: none;
      }
    }
  }
}

@include in-small-view();
@include maximized-in-small-view();

@media only screen and (max-width: $mobile-view) {
  @include maximized-tabs-in-mobile-view();
}

@media only screen and (max-width: #{$mobile-view + $menu-width}) {
  :host-context(.main-col:not(.expanded)) {
    @include maximized-tabs-in-mobile-view();
  }
}

@media only screen and (min-width: $small-view) {
  :host-context(.expanded) {
    @include in-medium-view();
  }

  @include maximized-in-medium-view();
}

@media only screen and (min-width: #{$small-view + $menu-width}) {
  :host-context(.main-col:not(.expanded)) {
    @include in-medium-view();
  }
}