pages_core 3.12.0 → 3.12.1

data/app/assets/stylesheets/{pages/admin/components/tag_editor.scss → pages_core/admin/components/tag_editor.css}

@@ -2,64 +2,59 @@
   margin-top: 10px;
   margin-bottom: 1.5em;
 
-  .tags {
+  & .tags {
     line-height: 1.5;
   }
 
-  .tag {
+  & .tag {
     font-size: 13px;
     cursor: pointer;
     display: block;
     float: left;
     margin: 0 5px 5px 0;
     padding: 0px;
-    background: $c-background-disabled;
+    background: var(--background-disabled-color);
     border-radius: 5px;
     line-height: 26px;
     line-height: 36px;
     min-width: 40px;
     transition: all 200ms ease-out;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 
-    label {
+    & label {
       margin: 0px;
       padding: 0px 10px;
       color: inherit;
     }
 
-    input {
+    & input {
       margin: 2px 3px 0 0;
     }
 
-    .name {
+    & .name {
       padding: 1px 5px;
       margin: 0;
     }
 
     &.enabled {
       color: #fff;
-      background: $c-link;
-      background: $c-blue-dark;
+      background: var(--blue-dark);
     }
   }
 
-  .add-tag-form {
+  & .add-tag-form {
     float: left;
     width: 178px;
     white-space: nowrap;
   }
 
-  input.add-tag {
+  & input.add-tag {
     margin-top: 0px;
     border-radius: 5px;
     margin: 0 4px 0 0;
 
     &.example {
-      color: $c-text-light;
+      color: var(--text-light-color);
     }
   }
 }

data/app/assets/stylesheets/{pages/admin/components/textarea.scss → pages_core/admin/components/textarea.css}

@@ -1,6 +1,6 @@
 textarea.rich {
   margin-top: -32px;
-  padding-top: 8px + 32px;
+  padding-top: calc(8px + 32px);
   width: 100%;
   max-width: none;
 }

data/app/assets/stylesheets/{pages/admin/components/toast.scss → pages_core/admin/components/toast.css}

@@ -6,10 +6,10 @@
   overflow: hidden;
   z-index: 200;
 
-  .toast {
+  & .toast {
     font-size: 14px;
     display: inline-block;
-    background: $c-background-invert;
+    background: var(--background-invert-color);
     color: white;
     margin: 20px auto 0px auto;
     padding: 15px 30px;
@@ -21,7 +21,7 @@
     animation-fill-mode: forwards;
 
     &.error {
-      background: $c-red;
+      background: var(--red);
     }
 
     &.fadeout {
@@ -36,6 +36,7 @@
   from {
     transform: translateZ(0px) translateY(60px);
   }
+
   to {
     transform: translateZ(0px) translateY(0px);
   }
@@ -45,6 +46,7 @@
   from {
     transform: translateZ(0px) translateY(0px);
   }
+
   to {
     transform: translateZ(0px) translateY(60px);
   }

data/app/assets/stylesheets/{pages/admin/components/toolbar.scss → pages_core/admin/components/toolbar.css}

@@ -1,36 +1,41 @@
 .toolbar {
-  @extend %clearfix;
   position: relative;
   display: block;
   list-style: none;
   margin: 0px;
-  border: 1px solid $c-border;
+  border: 1px solid var(--border-color);
   background-color: #fafafa;
   padding: 0px 10px 0px 0px;
   line-height: 30px;
   width: auto;
 
-  li {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  & li {
     list-style: none;
     margin: 0;
     padding: 0;
   }
 
-  .info {
+  & .info {
     float: right;
-    color: $c-text-lighter;
+    color: var(--text-lighter-color);
     padding: 0px 10px;
   }
 
-  .label {
+  & .label {
     float: left;
     padding: 0px 10px;
-    color: $c-text-light;
-    border-right: 1px solid $c-border;
+    color: var(--text-light-color);
+    border-right: 1px solid var(--border-color);
   }
 
-  .button,
-  button {
+  & .button,
+  & button {
     float: left;
     display: inline;
     margin: 0px;
@@ -44,58 +49,80 @@
     min-width: 35px;
     border: 0px;
     border-left: 1px solid #fff;
-    border-right: 1px solid $c-border;
-    color: $c-text-light;
+    border-right: 1px solid var(--border-color);
+    color: var(--text-light-color);
     font-size: 12px;
-    background-color: $c-button;
+    background-color: #f8f8f8;
     transition: all 200ms ease-out;
 
-    i.fa {
+    & i.fa {
       font-size: 14px;
     }
 
     &:focus,
     &:hover {
-      color: $c-text;
+      color: var(--text-color);
       background: #fdfdfd;
     }
 
     &[disabled] {
       opacity: 0.33;
       cursor: default;
-      &:focus, &:hover {
-        color: $c-text-light;
+
+      &:focus,
+      &:hover {
+        color: var(--text-light-color);
         background: inherit;
       }
     }
 
     &.active {
-      color: $c-text-invert;
+      color: var(--text-invert-color);
       background: #666;
       border-left: 1px solid #555;
       border-right: 1px solid #888;
     }
 
-    // font-awesome doesn't have h1-h6, so we'll apply some tricks
+    /* font-awesome doesn't have h1-h6, so we'll apply some tricks */
     &.header {
       vertical-align: bottom;
-      i {
+
+      & i {
         margin-left: -6px;
       }
-      i:after {
-        font-family: Helvetica, Georgia, serif;
+
+      & i:after {
+        font-family: var(--font-os-sans);
         font-weight: bold;
         font-size: 13px;
         display: inline-block;
         position: absolute;
-        bottom: 3px;
+        bottom: 5px;
+      }
+
+      &.h1 i::after {
+        content: "1";
+      }
+
+      &.h2 i::after {
+        content: "2";
+      }
+
+      &.h3 i::after {
+        content: "3";
+      }
+
+      &.h4 i::after {
+        content: "4";
+      }
+
+      &.h5 i::after {
+        content: "5";
+      }
+
+      &.h6 i::after {
+        content: "6";
       }
-      &.h1 i::after { content: "1" }
-      &.h2 i::after { content: "2" }
-      &.h3 i::after { content: "3" }
-      &.h4 i::after { content: "4" }
-      &.h5 i::after { content: "5" }
-      &.h6 i::after { content: "6" }
     }
   }
 

data/app/assets/stylesheets/{pages/admin/controllers/pages.scss → pages_core/admin/controllers/pages.css}

@@ -6,7 +6,7 @@
   margin-left: 6px;
   width: 13px;
   height: 16px;
-  background-image: image-url("pages/admin/drag-icon.png");
+  background-image: url("pages/admin/drag-icon.png");
 }
 
 td.drag-handle {
@@ -17,48 +17,49 @@ td.drag-handle {
 
 .page-list {
   float: left;
-  list-style-type:  none;
+  list-style-type: none;
   padding: 0;
   margin: 0;
   font-size: 1.2em;
   margin-left: -8px;
   margin-top: 16px;
 
-  .page-listing {
+  & .page-listing {
     border: 1px solid transparent;
     padding: 3px 8px 2px 8px !important;
   }
 
-  ul {
+  & ul {
     border-left: 1px dotted #ccc !important;
     margin-left: 12px !important;
-    padding-left: 8px !important
+    padding-left: 8px !important;
   }
 
-  ul li {
+  & ul li {
     overflow: auto;
   }
 
-  .page {
+  & .page {
     padding: 4px 8px;
     line-height: 17px;
     float: left;
 
-    .status {
+    & .status {
       font-weight: normal;
     }
 
-    a.page-name,
-    a.page-name:visited {
+    & a.page-name,
+    & a.page-name:visited {
       text-decoration: none;
       color: #222;
     }
-    a.page-name:hover {
+
+    & a.page-name:hover {
       text-decoration: underline;
     }
 
     &.hidden {
-      a.page-name {
+      & a.page-name {
         color: #666;
       }
     }
@@ -66,42 +67,43 @@ td.drag-handle {
     &:hover {
       background: #ffd;
       border: 1px solid #dda;
-      .status {
+
+      & .status {
         display: none;
       }
     }
   }
 
-  .page-without-locale {
+  & .page-without-locale {
     color: #888;
   }
 
-  li {
-    font-weight:  bold;
-    margin:  0;
+  & li {
+    font-weight: bold;
+    margin: 0;
     padding: 0;
     clear: both;
   }
 
-  li li {
+  & li li {
     font-weight: normal;
-    font-size:  12px;
+    font-size: 12px;
     padding: 0;
   }
 
-  ul {
+  & ul {
     clear: both;
-    list-style-type:  none;
-    border-left:  1px dashed #ccc;
-    margin:  0 0 0px 12px;
+    list-style-type: none;
+    border-left: 1px dashed #ccc;
+    margin: 0 0 0px 12px;
     padding: 0 0 0 12px;
   }
 
-  .hover {
+  & .hover {
     background: #cef;
   }
 
-  .drag-handle {
+  & .drag-handle {
     display: none;
   }
 
@@ -112,87 +114,96 @@ td.drag-handle {
 
 .news-item-list,
 .calendar-item-list {
-  .name {
+  & .name {
     line-height: 1.5;
-    small {
+
+    & small {
       font-weight: normal;
     }
   }
 
-  .draft,
-  .hidden,
-  .autopublish,
-  .reviewed {
-    background: $c-background-disabled;
+  & .draft,
+  & .hidden,
+  & .autopublish,
+  & .reviewed {
+    background: var(--background-disabled-color);
   }
 
-  .pinned .name {
-    background: transparent image-url("pages/admin/list-table-pin-blue.gif") no-repeat 13px 50%;
+  & .pinned .name {
+    background: transparent radial-gradient(ellipse at center, #92b6c4 50%, transparent 50%) no-repeat left 12px top 50%;
+    background-size: 10px 10px;
   }
 }
 
 .edit-page {
   width: auto;
 
-  main div.content {
+  & main div.content {
     padding-top: 16px;
   }
 
-  .hidden-options {
+  & .hidden-options {
     display: none;
   }
 
-  .autopublish-notice,
-  .published-date,
-  .advanced-options {
+  & .autopublish-notice,
+  & .published-date,
+  & .advanced-options {
     display: none;
+
     &.show {
       display: block;
     }
   }
 
-  main input[type=text],
-  main textarea {
+  & main input[type=text],
+  & main textarea {
     width: 100%;
     max-width: 100%;
   }
 
-  main input.page_title {
+  & main input.page_title {
     font-weight: bold;
     font-size: 1.4em;
-    color: $c-text;
+    color: var(--text-color);
   }
 }
 
-
 .file-list {
   list-style-type: none;
   margin-left: 0;
   margin-right: 0;
   padding: 0;
-  .embed-code {
+
+  & .embed-code {
     display: inline-block;
     width: 60px;
     margin-right: 10px;
   }
-  li {
+
+  & li {
     line-height: 30px;
-    border-top: 1px solid $c-border;
+    border-top: 1px solid var(--border-color);
+
     &:first-child {
       border-top: 0px;
     }
-    .actions {
+
+    & .actions {
       float: right;
     }
-    .drag-handle {
+
+    & .drag-handle {
       margin-right: 10px;
     }
   }
-  .placeholder {
+
+  & .placeholder {
     height: 30px;
   }
-  .ui-sortable-helper {
-    border: 1px solid $c-border !important;
+
+  & .ui-sortable-helper {
+    border: 1px solid var(--border-color) !important;
     background: rgba(250, 250, 250, 0.8);
   }
 }

data/app/assets/stylesheets/pages_core/admin/controllers/users.css

@@ -0,0 +1,3 @@
+table.users tr.invite td {
+  color: var(--text-light-color);
+}

data/app/assets/stylesheets/pages_core/admin/vars.css

@@ -0,0 +1,34 @@
+@custom-media --mobile screen and (max-width: 900px);
+@custom-media --narrow screen and (max-width: 1150px);
+
+:root {
+  --font-os-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif;
+
+  --red: #c00007;
+  --red-transparent: #c0000740;
+  --red-hover: #8d0005;
+  --red-light: #d6a6a8;
+  --red-invert: #fff0f3;
+  --blue: #1d7195;
+  --blue-hover: #15516a;
+  --blue-transparent: #1d719540;
+  --blue-dark: #114055;
+  --green: #19ac1e;
+  --green-hover: #137f16;
+  --green-transparent: #19ac1e40;
+  --background-color: #fff;
+  --background-invert-color: #000;
+  --background-disabled-color: #f8f8f8;
+  --background-warning-color: #ffdfa0;
+  --text-color: #111;
+  --text-light-color: #666;
+  --text-lighter-color: #999;
+  --text-invert-color: #fff;
+  --link-color: var(--blue);
+  --link-hover-color: var(--blue-hover);
+  --border-color: #ddd;
+  --border-color-light: #eee;
+  --button-border-color: #aaa;
+  --button-color: #e8e8e8;
+  --button-color-hover: #d8d8d8;
+}

data/app/assets/stylesheets/pages_core/admin.postcss.css

@@ -0,0 +1,9 @@
+@import "normalize.css";
+@import "react-image-crop/dist/ReactCrop";
+@import "@fortawesome/fontawesome-free/css/fontawesome";
+@import "@fortawesome/fontawesome-free/css/solid";
+@import "@fortawesome/fontawesome-free/css/regular";
+
+@import "admin/vars";
+@import-glob "admin/components/*.css";
+@import-glob "admin/controllers/*.css";

data/app/formatters/pages_core/image_embedder.rb

@@ -21,12 +21,10 @@ module PagesCore
     end
 
     def embed_image(id, size:, class_name:, link:)
-      image = Image.find(id).localize(I18n.locale)
-      class_name = ["image", image_class_name(image), class_name].compact
-      image_tag = dynamic_image_tag(image,
-                                    size: size, crop: false, upscale: false)
-      tag.figure((link ? link_to(image_tag, link) : image_tag) +
-                  image_caption(image), class: class_name)
+      image_figure(
+        Image.find(id).localize(I18n.locale),
+        size: size, class_name: class_name, link: link
+      )
     rescue ActiveRecord::RecordNotFound
       nil
     end
@@ -35,30 +33,10 @@ module PagesCore
       if str =~ /size="(\d*x\d*)"/
         Regexp.last_match(1)
       else
-        "2000x2000"
+        default_image_size
       end
     end
 
-    def image_caption(image)
-      return unless image.caption?
-
-      tag.figcaption(image.caption)
-    end
-
-    def image_class_name(image)
-      if image.size.x == image.size.y
-        "square"
-      elsif image.size.x > image.size.y
-        "landscape"
-      else
-        "portrait"
-      end
-    end
-
-    def link_to(content, href)
-      tag.a(content, href: href)
-    end
-
     def parse_image(str)
       id = str.match(image_expression)[1]
       options = str.match(image_expression)[2]

data/app/helpers/admin/calendars_helper.rb

@@ -8,6 +8,14 @@ module Admin
       ).in_locale(locale)
     end
 
+    def calendar_page_options(locale)
+      options_for_select(
+        calendar_pages(locale).map do |p|
+          [page_name(p, include_parents: true).gsub("»", "»"), p.id]
+        end
+      )
+    end
+
     def calendar_years_with_count
       calendar_counts.each_with_object({}) do |entry, obj|
         obj[entry[:year]] ||= 0

data/app/helpers/admin/news_helper.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Admin
+  module NewsHelper
+    def news_page_options(news_pages)
+      options_for_select(
+        news_pages.map do |p|
+          [news_section_name(p, news_pages).gsub("»", "»"), p.id]
+        end
+      )
+    end
+  end
+end