Skip to content

Commit

Permalink
Flexify pages sitemap
Browse files Browse the repository at this point in the history
  • Loading branch information
@tvdeyen
tvdeyen committed Mar 8, 2024
1 parent 55914c5 commit e57a983
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 193 deletions.
3 changes: 3 additions & 0 deletions app/assets/stylesheets/alchemy/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,5 +190,8 @@ $thumbnail-background:
linear-gradient(-45deg, transparent 75%, $medium-gray 75%) 0 0.5em/1em 1em
$white !default;

$small-screen-break-point: 500px;
$medium-screen-break-point: 700px;
$large-screen-break-point: 1000px;
$xlarge-screen-break-point: 1440px;
$xxlarge-screen-break-point: 1680px;
304 changes: 146 additions & 158 deletions app/assets/stylesheets/alchemy/sitemap.scss
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,55 @@
$sitemap-url-large-width: 250px;
$sitemap-url-xlarge-width: 350px;
$sitemap-url-header-offset: 110px;

#sort_panel {
background: $light-gray;
padding: 47px 0 8px 0;
position: fixed;
top: 29px;
left: 0;
z-index: 1;
width: 100%;
border-bottom: $default-border;

div.info {
margin: 16px 12px 8px 163px;
:root {
--sitemap-url-width: 420px;
--sitemap-url-header-offset: 0;
--sitemap-status-width-base: 90px;
--sitemap-status-length: 2;

@media screen and (min-width: $large-screen-break-point) {
--sitemap-url-width: 520px;
}

@media screen and (min-width: $xlarge-screen-break-point) {
--sitemap-url-width: 620px;
}

.buttons {
margin: 0 12px 0 163px;
text-align: right;
@media screen and (min-width: $xxlarge-screen-break-point) {
--sitemap-url-width: 820px;
}
}

#sitemap_heading {
display: flex;
padding: 0;
line-height: 28px;

.page_name {
margin-left: 43px;
}

.page_urlname {
display: none;
margin-left: auto;
padding-left: $default-padding;
width: calc(var(--sitemap-url-width) - 60px);

@media screen and (min-width: $large-screen-break-point) {
display: block;
}
}

.page_status {
display: none;
padding-left: 2 * $default-padding;
margin-right: 190px;
margin-left: auto;

@media screen and (min-width: $medium-screen-break-point) {
display: block;
}

@media screen and (min-width: $large-screen-break-point) {
margin-left: initial;
}
}
}

Expand All @@ -27,49 +58,45 @@ $sitemap-url-header-offset: 110px;
min-height: calc(100vh - 148px);
}

.sitemap_pagename_link {
display: block;
padding: 0 10px;
margin: 2px;
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
#sitemap {
padding: 0 0 104px 0;

&.inactive {
color: #656565;
.handle {
cursor: move;
}
}

.sitemap_url {
display: none;
float: right;
background-color: $sitemap-info-background-color;
line-height: $sitemap-line-height - 2px;
font-size: $small-font-size;
padding: 0 2 * $default-padding;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid $sitemap-page-background-color;
.page_folder {
position: absolute;
left: -$sitemap-line-height;
top: 0;
width: $sitemap-line-height;
height: $sitemap-line-height;
}

@media screen and (min-width: $large-screen-break-point) {
display: block;
width: $sitemap-url-large-width;
.placeholder {
background-color: $medium-gray;
margin-bottom: 0px;
margin-left: 22px;
}

@media screen and (min-width: 1440px) {
width: $sitemap-url-xlarge-width;
ul {
margin: 0;
padding: 0;
}
}

.sitemap_line_spacer {
float: left;
width: 20px;
height: 28px;
li {
padding-left: 0;

li {
padding-left: $sitemap-line-height;
padding-right: 0;
}
}
}

.sitemap_page {
display: flex;
align-items: center;
height: $sitemap-line-height;
margin: 3 * $default-margin 0;
position: relative;
Expand All @@ -87,100 +114,76 @@ $sitemap-url-header-offset: 110px;
background-color: $sitemap-page-hover-color;
border-radius: $default-border-radius;
}
}

.sitemap_sitename {
@include border-left-radius($default-border-radius);
line-height: $sitemap-line-height - 4;
overflow: hidden;
background-color: $sitemap-page-background-color;

&.without-status {
@include border-right-radius($default-border-radius);
&:has(.page_infos :nth-child(3)) {
--sitemap-status-length: 3;
}

--sitemap-status-width: calc(
var(--sitemap-status-width-base) * var(--sitemap-status-length)
);
}

.sitemap_left_images {
position: relative;
width: 32px;
line-height: $sitemap-line-height;
float: left;
text-align: center;
}

.sitemap_right_tools {
justify-content: center;
display: flex;
align-items: center;
gap: $default-padding;
flex-shrink: 0;
width: 32px;
height: $sitemap-line-height;
padding: 0 2 * $default-padding;
float: right;

.sitemap_tool {
width: $sitemap-line-height;
height: $sitemap-line-height;
line-height: $sitemap-line-height;
text-align: center;
margin: 0;

&.disabled .icon {
opacity: 0.25;
filter: grayscale(100%);
}
}

.icon.blank {
margin-left: 2px;
float: left;
margin-top: 3px;
margin-right: 3px;
}
}

#sitemap {
padding: 0 0 104px 0;

.handle {
cursor: move;
}
.sitemap_sitename {
flex-grow: 1;
@include border-left-radius($default-border-radius);
line-height: $sitemap-line-height - 4;
overflow: hidden;
background-color: $sitemap-page-background-color;

.page_folder {
position: absolute;
left: -$sitemap-line-height;
top: 0;
width: $sitemap-line-height;
height: $sitemap-line-height;
&.without-status {
@include border-right-radius($default-border-radius);
}

.placeholder {
background-color: $medium-gray;
margin-bottom: 0px;
margin-left: 22px;
}
.sitemap_pagename_link {
display: block;
padding: 0 10px;
margin: 2px;
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

ul {
margin: 0;
padding: 0;
&.inactive {
color: #656565;
}
}
}

li {
padding-left: 0;
.sitemap_url {
display: none;
background-color: $sitemap-info-background-color;
line-height: $sitemap-line-height - 2px;
font-size: $small-font-size;
padding: 0 2 * $default-padding;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid $sitemap-page-background-color;
width: calc(var(--sitemap-url-width) - var(--sitemap-status-width));

li {
padding-left: $sitemap-line-height;
padding-right: 0;
}
@media screen and (min-width: $large-screen-break-point) {
display: block;
}
}

.page_infos {
@extend .right-rounded-border;
background-color: $sitemap-page-background-color;
border-left: 1px solid $light-gray;
float: right;
display: none;
justify-content: end;
width: 170px;
width: var(--sitemap-status-width);
height: $sitemap-line-height;
line-height: $sitemap-line-height;

Expand All @@ -195,55 +198,40 @@ $sitemap-url-header-offset: 110px;
}
}

.page_status_and_name .page_status {
margin-left: 2px;
}

.page_status {
display: inline-block;

.alchemy-dialog & {
display: block;
}
}

#sitemap_heading {
display: flex;
padding: 0;
line-height: 28px;
.sitemap_right_tools {
display: none;
align-items: center;
gap: $default-padding;
height: $sitemap-line-height;
padding: 0 2 * $default-padding;

.page_name {
margin-left: 43px;
@media screen and (min-width: $small-screen-break-point) {
display: flex;
}

.page_urlname {
display: none;
margin-left: auto;
padding-left: $default-padding;

@media screen and (min-width: $large-screen-break-point) {
display: block;
width: $sitemap-url-large-width + $sitemap-url-header-offset;
}
.sitemap_tool {
width: $sitemap-line-height;
height: $sitemap-line-height;
line-height: $sitemap-line-height;
text-align: center;
margin: 0;

@media screen and (min-width: 1440px) {
width: $sitemap-url-xlarge-width + $sitemap-url-header-offset;
&.disabled .icon {
opacity: 0.25;
filter: grayscale(100%);
}
}
}

.page_status {
display: none;
padding-left: 2 * $default-padding;
margin-right: 190px;
margin-left: auto;
.page_status_and_name .page_status {
margin-left: 2px;
}

@media screen and (min-width: $medium-screen-break-point) {
display: block;
}
.page_status {
display: inline-block;

@media screen and (min-width: $large-screen-break-point) {
margin-left: initial;
}
.alchemy-dialog & {
display: block;
}
}

Expand Down
Loading

0 comments on commit e57a983

Please sign in to comment.