pages_core 3.4.3 → 3.7.0

data/app/assets/stylesheets/pages/admin/components/image_editor.scss

@@ -0,0 +1,195 @@
+.editable-image {
+  cursor: pointer;
+  display: block;
+  transition: transform 200ms, box-shadow 200ms, border-color 200ms ease-out;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.0);
+  border: 1px solid #fff;
+  position: relative;
+  -webkit-perspective: 1000;
+
+  .alt-warning {
+    position: absolute;
+    bottom: 5px;
+    right: 6px;
+    font-size: 14px;
+    color: $c-warn-light;
+    text-shadow: 0px 0px 5px rgba(0, 0, 0, 1.0);
+  }
+
+  img {
+    display: block;
+  }
+
+  &:hover {
+    border-color: rgba(20, 20, 20, 0.5);
+    transform: scale(1.01) translate(0px, -1px);
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.image-editor {
+  width: 80vw;
+  height: 80vh;
+  display: flex;
+  @include breakpoint-mobile {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  .toolbars {
+    .aspect-ratios {
+      border-top: 0px;
+    }
+  }
+
+  .visual {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .image-container {
+    flex: 1 1 auto;
+    width: 100%;
+    height: 100%;
+    background: #ddd;
+    background-image: image-url("pages/admin/image-editor-bg.png");
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid $c-border;
+    border-top: 0px;
+
+    .image-wrapper {
+      position: absolute;
+      flex-grow: 0;
+
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        position: relative;
+      }
+
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+      .ReactCrop {
+        width: 100%;
+        background-color: transparent;
+      }
+      .ReactCrop__crop-selection {
+        &:before, &:after {
+          content: "";
+          position: absolute;
+          border: 0px solid rgb(200, 200, 200);
+          opacity: 0.25;
+          transition: opacity 200ms ease-out;
+        }
+        &:before {
+          border-left-width: 1px;
+          border-right-width: 1px;
+          width: 33.33%;
+          height: 100%;
+          left: 33.33%;
+        }
+        &:after {
+          border-top-width: 1px;
+          border-bottom-width: 1px;
+          width: 100%;
+          height: 33.33%;
+          top: 33.33%;
+        }
+      }
+      .ReactCrop--active .ReactCrop__crop-selection {
+        &:before, &:after {
+          opacity: 0.75;
+        }
+      }
+    }
+
+    .loading {
+      color: $c-text-light;
+    }
+  }
+
+  form {
+    width: 300px;
+    display: block;
+    margin-left: 20px;
+
+    textarea {
+      max-width: 100%;
+      &.caption {
+        height: 100px;
+      }
+    }
+
+    .embed-code {
+      input {
+        width: 50%;
+        margin-right: 8px;
+      }
+    }
+
+    @include breakpoint-mobile {
+      width: 100%;
+      margin-left: 0px;
+      padding-bottom: 20px;
+      textarea.caption {
+        height: inherit;
+      }
+    }
+  }
+
+  .focal-editor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+    overflow: hidden;
+
+    .focal-point {
+      &:after {
+        content: "";
+        display: block;
+        width: 32px;
+        height: 32px;
+        border-radius: 16px;
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        margin-left: -4px;
+        margin-top: -4px;
+        transition: all 200ms ease-out;
+      }
+
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      border: 3px solid rgba(222, 255, 255, 0.5);
+      border-radius: 15px;
+      margin-left: -15px;
+      margin-top: -15px;
+      top: 0px;
+      left: 0px;
+      touch-action: none;
+      user-select: none;
+      cursor: pointer;
+      transition: border-radius 200ms, margin 200ms, width 200ms, height 200ms,
+                  border-color 200ms ease-out;
+      &:hover {
+        &:after {
+          width: 42px;
+          height: 42px;
+          border-radius: 21px;
+        }
+        border-color: rgba(222, 255, 255, 0.9);
+        width: 40px;
+        height: 40px;
+        border-radius: 20px;
+        margin-left: -20px;
+        margin-top: -20px;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pages/admin/components/image_grid.scss

@@ -0,0 +1,181 @@
+$grid-image-padding: 7px;
+
+.image-grid {
+  margin-bottom: 40px;
+  display: flex;
+
+  @include breakpoint-mobile {
+    flex-direction: column;
+  }
+
+  input[type=file] {
+    display: none;
+  }
+
+  h3 {
+    margin: 10px $grid-image-padding 10px $grid-image-padding;
+    border-bottom: 1px solid $c-border;
+    padding-bottom: 5px;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+    min-height: 1px; // Hack for IE11
+  }
+
+  .grid-image {
+    padding: $grid-image-padding;
+    &.placeholder {
+      opacity: 0.25;
+    }
+    &.uploading {
+      -webkit-user-select: none;
+      user-select: none;
+      opacity: 0.5;
+      overflow: hidden;
+      .temp-image {
+        position: relative;
+        cursor: pointer;
+        overflow: hidden;
+        background: #000;
+      }
+      img {
+        filter: blur(20px);
+        opacity: 0.75;
+      }
+      span {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 40px;
+        height: 40px;
+        border-radius: 20px;
+        margin-top: -20px;
+        margin-left: -20px;
+        border: 5px solid transparentize(#fff, 0.1);
+        border-right-color: transparent;
+        text-indent: -9000px;
+        overflow: hidden;
+        animation: rotate-spinner 0.8s infinite linear;
+      }
+    }
+    .file-placeholder,
+    .placeholder {
+      position: relative;
+      vertical-align: middle;
+      background: $c-background-disabled;
+      border: 2px dashed $c-border;
+      width: 100%;
+      padding-bottom: 100%;
+      span {
+        color: $c-text-light;
+        text-shadow: none;
+      }
+    }
+    .actions {
+      margin-top: 7px;
+      display: flex;
+      flex-direction: row;
+      visibility: hidden;
+
+      @include breakpoint-mobile {
+        visibility: visible;
+      }
+
+      button {
+        cursor: pointer;
+        border: 1px solid $c-border;
+        border-radius: 3px;
+        background: $c-button;
+        display: flex-item;
+        flex: 1;
+        padding: 5px;
+        font-size: 12px;
+        color: $c-text;
+        &:hover, &:focus {
+          background: #fff;
+        }
+      }
+    }
+    &:hover {
+      .actions {
+        visibility: visible;
+      }
+    }
+  }
+
+  .primary-image {
+    width: 33.33%;
+    @include breakpoint-mobile {
+      width: 100%;
+    }
+
+    .drop-target {
+      position: relative;
+      width: 100%;
+      padding-bottom: 66.67%;
+      text-align: center;
+      line-height: 1.6;
+      > .upload-button {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        top: $grid-image-padding;
+        bottom: $grid-image-padding;
+        left: $grid-image-padding;
+        right: $grid-image-padding;
+        min-height: 150px;
+        background: $c-background-disabled;
+      }
+    }
+  }
+
+  .grid {
+    width: 66.67%;
+    @include breakpoint-mobile {
+      width: 100%;
+    }
+    .images {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+
+      .grid-image {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        width: 25%;
+        @include breakpoint-max(1150px) {
+          width: 50%;
+        }
+
+        @include breakpoint-mobile {
+          width: 50%;
+        }
+      }
+    }
+
+    .drop-target {
+      margin: 10px $grid-image-padding;
+      padding-top: 10px;
+      button {
+        margin: 0px 7px;
+      }
+    }
+  }
+
+  .drag-image {
+    position: absolute;
+    width: 150px;
+    z-index: 100;
+  }
+}
+
+@keyframes rotate-spinner {
+  0%    { transform: rotate(0deg); }
+  100%  { transform: rotate(360deg); }
+}

data/app/assets/stylesheets/pages/admin/components/image_uploader.scss

@@ -0,0 +1,53 @@
+.image-uploader {
+  border: 2px solid transparent;
+  background: $c-background-disabled;
+  max-width: 500px;
+  min-height: 150px;
+  display: flex;
+  color: $c-text-light;
+  line-height: 1.6;
+  box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1);
+  padding: 1px;
+
+  @include breakpoint-mobile {
+    flex-direction: column;
+  }
+
+  &.uploading {}
+
+  &.dragover {
+    border: 2px dashed $c-border;
+  }
+
+  .image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 250px;
+    max-height: 400px;
+    .editable-image img {
+      width: auto;
+      max-height: 400px;
+    }
+    @include breakpoint-mobile {
+      max-width: 100%;
+    }
+  }
+
+  .ui-wrapper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ui {
+    text-align: center;
+    padding: 20px;
+  }
+
+  .remove-image {
+    display: block;
+    margin-top: 20px;
+  }
+}

data/app/assets/stylesheets/pages/admin/components/layout.scss

@@ -0,0 +1,44 @@
+*,
+*:before,
+*:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0px;
+  padding: 0px;
+  height: 100vh;
+}
+
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100vh;
+  > * {
+    flex-shrink: 0;
+  }
+}
+
+.main-wrapper {
+  flex: 1 0 auto;
+  display: flex;
+  flex-flow: row nowrap;
+  @include breakpoint-mobile {
+    flex-flow: column nowrap;
+  }
+  > main {
+    flex: 1;
+    padding: 0px 0px 60px 0px;
+  }
+  > aside {
+    min-width: 300px;
+    width: 20%;
+    padding: 0px 16px;
+    @include breakpoint-mobile {
+      width: 100%;
+    }
+  }
+}