pages_core 3.5.1 → 3.6.0

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/links.scss

@@ -38,6 +38,6 @@ a.delete:hover {
 
 button a {
   padding:5px 0;
-  color:#000 !important;
+  color: $c-text !important;
   text-decoration:none;
 }

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

@@ -11,16 +11,19 @@ table.list {
   }
 
   th {
-    @include vertical-gradient(#fff, #f2f2f2);
-    color: #777;
+    @include vertical-gradient($c-background, $c-background-disabled);
+    color: $c-text-light;
     font-weight: bold;
-    border-bottom: 1px solid #bdbdbd;
+    border-bottom: 1px solid $c-border;
   }
 
   td {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $c-border;
     &.note {
-      color: #888;
+      color: $c-text-light;
+    }
+    &.name {
+      font-weight: bold;
     }
   }
 

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

@@ -1,9 +1,3 @@
-body.login {
-  #header {
-    height: 55px;
-  }
-}
-
 main .login-form {
   padding-top: 10px;
 
@@ -12,7 +6,7 @@ main .login-form {
     font-weight: bold;
     margin-bottom: 8px;
     font-size: 1.2em;
-    color: #444;
+    color: $c-text;
   }
 
   ul {
@@ -21,7 +15,7 @@ main .login-form {
     margin-top: 30px;
     list-style-position: inside;
     list-style-type: disc;
-    color: #ccc;
+    color: $c-border;
     line-height: 1.5;
     li {
       margin: 0px;

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

@@ -1,3 +1,94 @@
+body > .wrapper {
+}
+
+body.modal {
+  > .wrapper {
+    transition: filter 1000ms linear;
+    filter: blur(10px);
+    @include breakpoint-mobile {
+      filter: none;
+    }
+  }
+}
+
+.modal-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .background {
+    background: radial-gradient(rgba(255, 255, 255, 0.9),
+                                rgba(255, 255, 255, 0.9) 50%,
+                                rgba(80, 80, 80, 0.9));
+    cursor: pointer;
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    z-index: 1;
+    animation-name: modal-background-appear;
+    animation-duration: 200ms;
+    animation-timing-function: ease-out;
+  }
+
+  .modal {
+    max-width: 90%;
+    background: $c-background;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
+    background: #fff;
+    animation-name: modal-appear;
+    animation-duration: 200ms;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    animation-fill-mode: forwards;
+    z-index: 2;
+
+    @include breakpoint-mobile {
+      max-width: 100%;
+      width: 100vw;
+      height: 100vh;
+      border-radius: 0px;
+    }
+  }
+
+  &.open {
+    display: flex;
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    z-index: 100;
+    opacity: 1;
+  }
+}
+
+@keyframes modal-appear {
+  0% {
+    opacity: 0.1;
+    transform: scale(0.97) translate(0px, 10px);
+  }
+  100% {
+    opacity: 1.0;
+    transform: scale(1.0);
+  }
+}
+
+@keyframes modal-background-appear {
+  0% {
+    opacity: 0.0;
+  }
+  100% {
+    opacity: 1.0;
+  }
+}
+
+
+
+/* Old rules */
+
 #modal-container {
   z-index:20;
   border: 1px solid #555;

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

@@ -11,7 +11,7 @@
   position: relative;
   overflow: hidden;
 
-  margin: 20px 0;
+  margin: 20px 0 40px 0;
   margin-left: -20px;
   margin-right: -10px;
 
@@ -27,7 +27,7 @@
     }
 
     &.placeholder {
-      border: 1px dashed #ccc;
+      border: 1px dashed $c-border;
     }
 
     .inner {
@@ -53,8 +53,14 @@
     //border-radius: 5px;
 
     &:hover {
-      border: 1px solid #f0f0f0;
-      @include vertical-gradient(#ffffff, #f8f8f8);
+      border: 1px solid $c-border-light;
+      @include vertical-gradient($c-background, $c-background-disabled);
+    }
+
+    .date {
+      font-size: 12px;
+      margin-left: 10px;
+      color: $c-text-light;
     }
 
     .name {
@@ -90,7 +96,7 @@
 
     a,
     a:visited {
-      color: #111;
+      color: $c-text;
       text-decoration: none;
     }
     a:hover,
@@ -104,7 +110,7 @@
       &,
       a,
       a:visited {
-        color: #777;
+        color: $c-text-light;
       }
     }
   }

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

@@ -1,31 +1,49 @@
-$link-color: #1d7195;
-
 .pagination {
+  margin: 30px 30px;
   line-height: 20px;
+  font-size: 14px;
+
+  .content & {
+    margin: 20px -2px;
+  }
 
   a,
-  .disabled,
-  .current {
+  .current,
+  .disabled, .gap {
     display: inline-block;
-    border: 1px solid $link-color;
-    text-decoration: none;
-    padding: 0px 5px;
     font-style: normal;
+    margin: 0px 1px;
+    text-decoration: none;
+    padding: 2px;
+    border-radius: 12px;
+    min-width: 24px;
+    text-align: center;
+  }
+
+  a:hover, a:focus {
+    text-decoration: underline;
+  }
+
+  .current {
+    //background: $c-blue;
+    //color: $c-text-invert;
+    font-weight: bold;
   }
 
   .disabled {
-    border-color: #ccc;
+    color: $c-text-light;
   }
 
-  .disabled,
-  .gap {
-    color: #888;
+  .next,
+  .previous {
+    background: none;
   }
 
-  .current,
-  a:hover,
-  a:focus {
-    background: $link-color;
-    color: #fff;
+  .next {
+    margin-left: 10px;
+  }
+
+  .previous {
+    margin-right: 10px;
   }
 }