diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss index a690a60fab..6bb3e2bd14 100644 --- a/app/assets/stylesheets/alchemy/_variables.scss +++ b/app/assets/stylesheets/alchemy/_variables.scss @@ -108,7 +108,7 @@ $form-right-width: 65% !default; $sitemap-line-height: 32px !default; $sitemap-page-background-color: rgba($white, 0.75) !default; $sitemap-page-hover-color: rgba($light_yellow, 0.5) !default; -$sitemap-info-background-color: rgba($linked-color, 0.5) !default; +$sitemap-info-background-color: rgba($white, 0.5) !default; $sitemap-highlight-color: rgba(#fffba5, 0.5) !default; $main-menu-width: 150px !default; diff --git a/app/assets/stylesheets/alchemy/lists.scss b/app/assets/stylesheets/alchemy/lists.scss index 6463353737..890a52be88 100644 --- a/app/assets/stylesheets/alchemy/lists.scss +++ b/app/assets/stylesheets/alchemy/lists.scss @@ -13,14 +13,6 @@ ul.list { padding: 0; list-style-type: none; - layoutpages { - margin-top: 16px; - - li { - margin-left: 8px; - } - } - li { list-style-type: none; display: block; diff --git a/app/assets/stylesheets/alchemy/nodes.scss b/app/assets/stylesheets/alchemy/nodes.scss index c35731998c..3b587dcb30 100644 --- a/app/assets/stylesheets/alchemy/nodes.scss +++ b/app/assets/stylesheets/alchemy/nodes.scss @@ -18,7 +18,7 @@ .node_page, .node_url { - width: 200px; + width: 250px; max-width: 45%; white-space: nowrap; text-overflow: ellipsis; diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss index a3bf6b9143..5d6071e603 100644 --- a/app/assets/stylesheets/alchemy/sitemap.scss +++ b/app/assets/stylesheets/alchemy/sitemap.scss @@ -1,3 +1,6 @@ +$sitemap-url-large-width: 250px; +$sitemap-url-xlarge-width: 350px; + #sort_panel { background: $light-gray; padding: 47px 0 8px 0; @@ -28,23 +31,35 @@ padding: 0 10px; margin: 2px; text-decoration: none; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; &.inactive { color: #656565; } } -.redirect_url { +.sitemap_url { + display: none; float: right; - text-align: right; background-color: $sitemap-info-background-color; - line-height: $sitemap-line-height; + line-height: $sitemap-line-height - 2px; font-size: $small-font-size; - padding: 0 2*$default-padding; - max-width: 45%; + padding: 0 2 * $default-padding; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + border: 1px solid $sitemap-page-background-color; + + @media screen and (min-width: $large-screen-break-point) { + display: block; + width: $sitemap-url-large-width; + } + + @media screen and (min-width: 1440px) { + width: $sitemap-url-xlarge-width; + } } .sitemap_line_spacer { @@ -55,7 +70,7 @@ .sitemap_page { height: $sitemap-line-height; - margin: 3*$default-margin 0; + margin: 3 * $default-margin 0; position: relative; transition: background-color $transition-duration; @@ -89,13 +104,13 @@ width: 32px; line-height: $sitemap-line-height; float: left; - padding: 0 2*$default-padding; + padding: 0 2 * $default-padding; text-align: center; } .sitemap_right_tools { height: $sitemap-line-height; - padding: 0 2*$default-padding; + padding: 0 2 * $default-padding; float: right; .sitemap_tool { @@ -130,7 +145,9 @@ &.sorting { padding-top: 100px; - .page_icon { cursor: move } + .page_icon { + cursor: move; + } } .page_folder { @@ -183,25 +200,44 @@ } #sitemap_heading { + display: flex; padding: 0; - - .page_infos { - margin-right: 210px; - text-align: left; - float: right; - line-height: 28px; - background: transparent; - } + line-height: 28px; .page_name { - line-height: 28px; margin-left: 43px; } + + .page_urlname { + display: none; + margin-left: auto; + padding-left: 2 * $default-padding; + padding-right: 2 * $default-padding; + + @media screen and (min-width: $large-screen-break-point) { + display: block; + width: $sitemap-url-large-width; + } + + @media screen and (min-width: 1440px) { + width: $sitemap-url-xlarge-width; + } + } + + .page_status { + padding-left: 2 * $default-padding; + margin-right: 214px; + margin-left: auto; + + @media screen and (min-width: $large-screen-break-point) { + margin-left: initial; + } + } } #page_filter_result { display: none; - margin-left: 2*$default-margin; + margin-left: 2 * $default-margin; } .alchemy-dialog { @@ -213,6 +249,8 @@ margin: 0; padding: 0 24px 8px 8px; - .page_icon { cursor: default } + .page_icon { + cursor: default; + } } } diff --git a/app/serializers/alchemy/page_tree_serializer.rb b/app/serializers/alchemy/page_tree_serializer.rb index d831a7fbca..eadaf20500 100644 --- a/app/serializers/alchemy/page_tree_serializer.rb +++ b/app/serializers/alchemy/page_tree_serializer.rb @@ -9,7 +9,7 @@ def attributes def pages tree = [] path = [{id: object.parent_id, children: tree}] - page_list = object.self_and_descendants + page_list = object.self_and_descendants.includes({ language: :site }, :locker) base_level = object.level - 1 # Load folded pages in advance folded_user_pages = FoldedPage.folded_for_user(opts[:user]).pluck(:page_id) @@ -60,6 +60,7 @@ def page_hash(page, has_children, level, folded) redirects_to_external: page.definition['redirects_to_external'], urlname: page.urlname, external_urlname: page.definition['redirects_to_external'] ? page.external_urlname : nil, + url_path: page.url_path, level: level, root: level == 1, root_or_leaf: level == 1 || !has_children, diff --git a/app/views/alchemy/admin/layoutpages/index.html.erb b/app/views/alchemy/admin/layoutpages/index.html.erb index 43e7e1e0aa..9787d4de43 100644 --- a/app/views/alchemy/admin/layoutpages/index.html.erb +++ b/app/views/alchemy/admin/layoutpages/index.html.erb @@ -30,6 +30,10 @@ <% end %> -