pages_core 3.12.2 → 3.12.3

data/app/assets/builds/pages_core/admin.css

@@ -83,10 +83,11 @@ a {
  */
 
 abbr[title] {
-  border-bottom: none; /* 1 */ /* 2 */
+  border-bottom: none; /* 1 */
+  -webkit-text-decoration: underline; /* 2 */
   text-decoration: underline;
-  -webkit-text-decoration: underline dotted currentColor;
-          text-decoration: underline dotted currentColor; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
 }
 
 /**
@@ -7454,6 +7455,7 @@ header .site-name h1 {
 
 header .site-name h1 a {
         font-weight: bold;
+        -webkit-text-decoration: none;
         text-decoration: none;
         padding-right: 6px;
       }
@@ -7517,6 +7519,7 @@ header .tabs a,
       line-height: 32px;
       height: 32px;
       margin: 0 2px 0 0;
+      -webkit-text-decoration: none;
       text-decoration: none;
     }
 
@@ -7553,6 +7556,7 @@ header .tabs a:hover,
 
 .content-tabs li.current a,
     .content-tabs li.current a:visited {
+      -webkit-text-decoration: none;
       text-decoration: none;
       color: #444;
     }
@@ -7590,6 +7594,7 @@ header .tabs a:hover,
 
 .page-description .links a.current {
         font-weight: bold;
+        -webkit-text-decoration: none;
         text-decoration: none;
         color: #111;
         color: var(--text-color);
@@ -7778,18 +7783,6 @@ main .page-description h3 {
     overflow: hidden;
   }
 
-.image-editor .focal-editor .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;
-      }
-
 .image-editor .focal-editor .focal-point {
       position: absolute;
       width: 30px;
@@ -7808,11 +7801,17 @@ main .page-description h3 {
       transition: border-radius 200ms, margin 200ms, width 200ms, height 200ms, border-color 200ms ease-out;
     }
 
-.image-editor .focal-editor .focal-point:hover:after {
-          width: 42px;
-          height: 42px;
-          border-radius: 21px;
-        }
+.image-editor .focal-editor .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;
+      }
 
 .image-editor .focal-editor .focal-point:hover {
         border-color: rgba(222, 255, 255, 0.9);
@@ -7823,6 +7822,12 @@ main .page-description h3 {
         margin-top: -20px;
       }
 
+.image-editor .focal-editor .focal-point:hover:after {
+          width: 42px;
+          height: 42px;
+          border-radius: 21px;
+        }
+
 .image-grid {
   --image-padding: 7px;
   margin-bottom: 40px;
@@ -8197,6 +8202,7 @@ a,
 a:visited {
   color: #1d7195;
   color: var(--link-color);
+  -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
@@ -8241,6 +8247,7 @@ button a {
 
 button a {
   padding: 5px 0;
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 
@@ -8543,11 +8550,13 @@ body.modal > .wrapper {
     .page-tree .page a:visited {
       color: #111;
       color: var(--text-color);
+      -webkit-text-decoration: none;
       text-decoration: none;
     }
 
 .page-tree .page a:hover,
     .page-tree .page a:focus {
+      -webkit-text-decoration: underline;
       text-decoration: underline;
     }
 
@@ -8652,6 +8661,7 @@ body.modal > .wrapper {
     display: inline-block;
     font-style: normal;
     margin: 0px 1px;
+    -webkit-text-decoration: none;
     text-decoration: none;
     padding: 2px;
     border-radius: 12px;
@@ -8661,6 +8671,7 @@ body.modal > .wrapper {
 
 .pagination a:hover,
   .pagination a:focus {
+    -webkit-text-decoration: underline;
     text-decoration: underline;
   }
 
@@ -9097,11 +9108,13 @@ td.drag-handle {
 
 .page-list .page a.page-name,
     .page-list .page a.page-name:visited {
+      -webkit-text-decoration: none;
       text-decoration: none;
       color: #222;
     }
 
 .page-list .page a.page-name:hover {
+      -webkit-text-decoration: underline;
       text-decoration: underline;
     }
 

data/app/assets/stylesheets/pages_core/admin/components/attachments.css

@@ -105,7 +105,7 @@
   width: 60vw;
   min-height: 450px;
 
-  @media --mobile {
+  @media (--mobile) {
     width: 100%;
     height: 100%;
   }

data/app/assets/stylesheets/pages_core/admin/components/image_editor.css

@@ -33,7 +33,7 @@
   height: 80vh;
   display: flex;
 
-  @media --mobile {
+  @media (--mobile) {
     width: 100%;
     height: 100%;
     flex-direction: column;
@@ -145,7 +145,7 @@
       }
     }
 
-    @media --mobile {
+    @media (--mobile) {
       width: 100%;
       margin-left: 0px;
       padding-bottom: 20px;

data/app/assets/stylesheets/pages_core/admin/components/image_grid.css

@@ -3,7 +3,7 @@
   margin-bottom: 40px;
   display: flex;
 
-  @media --mobile {
+  @media (--mobile) {
     flex-direction: column;
   }
 
@@ -87,7 +87,7 @@
       flex-direction: row;
       visibility: hidden;
 
-      @media --mobile {
+      @media (--mobile) {
         visibility: visible;
       }
 
@@ -106,7 +106,7 @@
   & .primary-image {
     width: 33.33%;
 
-    @media --mobile {
+    @media (--mobile) {
       width: 100%;
     }
 
@@ -147,11 +147,11 @@
         justify-content: flex-end;
         width: 16.66%;
 
-        @media --narrow {
+        @media (--narrow) {
           width: 50%;
         }
 
-        @media --mobile {
+        @media (--mobile) {
           width: 50%;
         }
       }
@@ -185,7 +185,7 @@
     & .grid {
       width: 66.67%;
 
-      @media --mobile {
+      @media (--mobile) {
         width: 100%;
       }
     }
@@ -193,11 +193,11 @@
     & .images .grid-image {
       width: 25%;
 
-      @media --narrow {
+      @media (--narrow) {
         width: 50%;
       }
 
-      @media --mobile {
+      @media (--mobile) {
         width: 50%;
       }
     }

data/app/assets/stylesheets/pages_core/admin/components/image_uploader.css

@@ -9,7 +9,7 @@
   box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1);
   padding: 1px;
 
-  @media --mobile {
+  @media (--mobile) {
     flex-direction: column;
   }
 
@@ -29,7 +29,7 @@
       max-height: 400px;
     }
 
-    @media --mobile {
+    @media (--mobile) {
       max-width: 100%;
     }
   }

data/app/assets/stylesheets/pages_core/admin/components/layout.css

@@ -28,7 +28,7 @@ body {
   display: flex;
   flex-flow: row nowrap;
 
-  @media --mobile {
+  @media (--mobile) {
     flex-flow: column nowrap;
   }
 
@@ -42,7 +42,7 @@ body {
     width: 20%;
     padding: 0px 16px;
 
-    @media --mobile {
+    @media (--mobile) {
       width: 100%;
     }
   }

data/app/assets/stylesheets/pages_core/admin/components/modal.css

@@ -3,7 +3,7 @@ body.modal {
     transition: filter 1000ms linear;
     filter: blur(10px);
 
-    @media --mobile {
+    @media (--mobile) {
       filter: none;
     }
   }
@@ -41,7 +41,7 @@ body.modal {
     animation-fill-mode: forwards;
     z-index: 2;
 
-    @media --mobile {
+    @media (--mobile) {
       max-width: 100%;
       width: 100vw;
       height: 100vh;

data/app/helpers/pages_core/images_helper.rb

@@ -20,13 +20,22 @@ module PagesCore
       tag.figcaption(caption)
     end
 
-    def image_figure(image, size: nil, class_name: nil, link: nil, caption: nil)
-      class_name = ["image", image_class_name(image), class_name].compact
-      size ||= default_image_size
-      image_tag = dynamic_image_tag(image,
-                                    size: size, crop: false, upscale: false)
-      tag.figure((link ? image_link_to(image_tag, link) : image_tag) +
-                 image_caption(image, caption: caption),
+    # Renders an image figure tag with caption.
+    #
+    # ==== Options
+    # * <tt>:caption</tt>: Override caption with a string, or set to false to
+    #   disable captions.
+    # * <tt>:class_name</tt>: Class name to add to figure tag.
+    # * <tt>:link</tt>: Link target for image.
+    # * <tt>:ratio</tt>: Ratio to constrain image by.
+    # * <tt>:size</tt>: Max size for image.
+    def image_figure(image, opts = {})
+      class_name = ["image", image_class_name(image), opts[:class_name]].compact
+      image_tag = image_figure_image_tag(image,
+                                         size: opts[:size], ratio:
+                                         opts[:ratio])
+      content = opts[:link] ? image_link_to(image_tag, opts[:link]) : image_tag
+      tag.figure(content + image_caption(image, caption: opts[:caption]),
                  class: class_name)
     end
 
@@ -57,6 +66,11 @@ module PagesCore
       { alt: record.alternative }
     end
 
+    def fit_ratio(size, ratio)
+      v = Vector2d(size)
+      Vector2d.new(v.y * ratio, v.y).fit(v)
+    end
+
     def image_class_name(image)
       if image.size.x == image.size.y
         "square"
@@ -67,6 +81,13 @@ module PagesCore
       end
     end
 
+    def image_figure_image_tag(image, size: nil, ratio: nil)
+      size ||= default_image_size
+      size = fit_ratio(size, ratio) if ratio
+
+      dynamic_image_tag(image, size: size, crop: ratio && true, upscale: false)
+    end
+
     def image_link_to(content, href)
       tag.a(content, href: href)
     end

data/app/javascript/features/{RichText.jsx → RichText.tsx}

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import RichTextArea from "../components/RichTextArea";
 import readyHandler from "../lib/readyHandler";
 
@@ -11,10 +11,10 @@ class RichText {
     });
   }
 
-  enhance (elem) {
+  enhance (elem: HTMLTextAreaElement) {
     const container = document.createElement("div");
     elem.parentNode.appendChild(container);
-    ReactDOM.render(
+    createRoot(container).render(
       <RichTextArea value={elem.value}
                     name={elem.name}
                     rows={elem.rows}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/typography.css

@@ -58,7 +58,7 @@ html {
   @media screen and (max-width: 1440px) {
     @mixin font-scale 14, 16, $breakpoint-mobile-small, 1440;
   }
-  @media --mobile-small {
+  @media (--mobile-small) {
     @mixin font-scale 12, 16, 1, $breakpoint-mobile-small;
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pages_core
 version: !ruby/object:Gem::Version
-  version: 3.12.2
+  version: 3.12.3
 platform: ruby
 authors:
 - Inge Jørgensen
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-24 00:00:00.000000000 Z
+date: 2023-05-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -509,7 +509,7 @@ files:
 - app/javascript/controllers/LoginController.ts
 - app/javascript/controllers/MainController.ts
 - app/javascript/controllers/PageOptionsController.js
-- app/javascript/features/RichText.jsx
+- app/javascript/features/RichText.tsx
 - app/javascript/hooks.ts
 - app/javascript/index.ts
 - app/javascript/lib/Tree.ts