_CSS_related-page-list_left2
エディタ部分と関連ページに個別に position: fixed; を設定しないで flex-direction: row-reverse; を使うバージョン
style.css@media screen and (min-width: 768px) {
/* 見た目調整 */
.grid li.relation-label.empty-links,
.grid li.page-list-item.empty,
.grid li.relation-label a .icon-lg,
.grid li.relation-label .arrow,
.related-page-list .grid li.page-list-item a .description,
.related-page-list .grid li.page-list-item a .icon {
display: none;
}
/* 関連ページを左ペイン化 */
.quick-launch.layout-page {
margin-bottom: 0;
}
.page-wrapper {
display: flex;
position: fixed;
flex-direction: row-reverse;
max-height: 87vh; /* プロジェクトタイトルの位置が通常の場合は78vhくらいが良いかと思います */
left: 3vw;
}
.drag-and-drop-enter {
padding-left: 50px;
overflow-y: auto;
}
.related-page-list {
padding-right: 10px;
padding-left: 20px;
margin-right: 10px;
overflow-y: auto;
}
.related-page-list .grid {
width: 100%;
}
.related-page-list .grid li {
width: 100%;
margin: 2px;
height: auto;
}
.related-page-list .grid li a {
background: unset;
border: unset;
box-shadow: unset !important;
}
.related-page-list .grid li a .header {
padding: 0;
}
.related-page-list .grid li.page-list-item a {
background-color: #fff; /* 当方の環境の都合による設定 */
}
.related-page-list .grid li.page-list-item a .title {
font-size: 12px;
}
.related-page-list .grid li.relation-label {
width: 100%;
min-height: 33px;
border: solid 1px;
}
.related-page-list .grid li.relation-label .title {
display: block;
font-size: 12px;
}
.related-page-list .grid li.relation-label.headword a {
display: block;
background-color: #888;
}
.related-page-list .grid li.relation-label.links {
min-height: unset;
height: auto;
}
.related-page-list .grid li.relation-label.links a {
display: block;
cursor: default;
background: unset;
margin: auto;
color: #444;
}
/* 「・・・」部分の調整 */
.grid li.ellipsis a {
display: block;
text-align: right;
height: 36px;
}
.grid li.ellipsis a .circle {
border-radius: 0;
height: 20px;
width: 40px;
}
/* 関連ページのカウント */
.related-page-list {
counter-reset: label;
}
.related-page-list .grid li.relation-label.headword {
counter-increment: label;
}
.related-page-list .grid li.relation-label.headword::before {
content: counter(label);
position: absolute;
display: block;
left: 0px;
z-index: 10;
text-align: right;
font-size: 12px;
color: #fff;
}
.related-page-list .grid {
counter-reset: item;
}
.related-page-list .grid li.page-list-item {
counter-increment: item;
}
.related-page-list .grid li.page-list-item::before {
content: counter(item);
position: absolute;
display: block;
left: -32px;
z-index: 10;
min-width: 30px;
text-align: right;
font-size: 12px;
color: #bbb;
}
}
/* ウィンドウ幅に応じて余白の計算が変わることに対する大雑把な対処 */
@media screen and (min-width: 1261px) {
.page-wrapper {max-width: 80vw;}
.drag-and-drop-enter {width: 64vw;}
.related-page-list {width: 16vw;}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.page-wrapper {max-width: 82vw;}
.drag-and-drop-enter {width: 62vw;}
.related-page-list {width: 20vw;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.page-wrapper {max-width: 86vw;}
.drag-and-drop-enter {width: 66vw;}
.related-page-list {width: 20vw;}
}