diff --git a/wiki/public/js/render_wiki.js b/wiki/public/js/render_wiki.js
index 2af6d832..839da0e5 100644
--- a/wiki/public/js/render_wiki.js
+++ b/wiki/public/js/render_wiki.js
@@ -210,8 +210,11 @@ window.RenderWiki = class RenderWiki extends Wiki {
sidebar_items.each(function (index) {
if ($(this).attr("class")) {
- let dish = $(this).attr("class").split(/\s+/)[1];
- if (dish === "active") {
+ const hasActiveClass = $(this)
+ .attr("class")
+ .split(/\s+/)
+ .includes("active");
+ if (hasActiveClass) {
current_index = index;
}
}
@@ -292,9 +295,9 @@ window.RenderWiki = class RenderWiki extends Wiki {
const groupName = $(this).parent().children("span:first-child").text();
const newWikiPage = $(".sidebar-item[data-name=new-wiki-page]");
const newSidebarItem = $(`
- <li class="sidebar-item active" data-type="Wiki Page" data-name="new-wiki-page" data-group-name="${groupName}">
+ <li class="sidebar-item sidebar-group-item active" data-type="Wiki Page" data-name="new-wiki-page" data-group-name="${groupName}">
<div>
- <a href="#" class="active">New Wiki Page</a>
+ <a href="#">New Wiki Page</a>
</div>
</li>
`);
diff --git a/wiki/public/js/wiki.js b/wiki/public/js/wiki.js
index 21ccdcb1..b725b56d 100644
--- a/wiki/public/js/wiki.js
+++ b/wiki/public/js/wiki.js
@@ -115,7 +115,7 @@ window.Wiki = class Wiki {
$("pre code")
.parent("pre")
.prepend(
- `<button title="Copy Code" class="btn copy-btn" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button>`,
+ `<button title="Copy Code" class="btn copy-btn" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button>`,
);
$(".copy-btn").on("click", function () {
diff --git a/wiki/public/scss/edit_wiki.scss b/wiki/public/scss/edit_wiki.scss
index 825f8f3b..f4cee3fa 100644
--- a/wiki/public/scss/edit_wiki.scss
+++ b/wiki/public/scss/edit_wiki.scss
@@ -111,17 +111,17 @@ $font-sizes-mobile: (
}
}
- li>ul,
- li>ol {
+ li > ul,
+ li > ol {
padding-left: 1.5rem;
}
- ul>li:first-child {
+ ul > li:first-child {
margin-top: 3px !important;
}
- ul>*+*,
- ol>*+* {
+ ul > * + *,
+ ol > * + * {
margin-top: 2px !important;
}
@@ -169,13 +169,13 @@ $font-sizes-mobile: (
font-weight: 600;
// for byline
- &+p {
+ & + p {
margin-top: 1.5rem !important;
line-height: 1.4;
}
}
- &>p {
+ & > p {
margin-top: 1.5rem !important;
}
@@ -220,8 +220,8 @@ $font-sizes-mobile: (
margin-top: 1rem !important;
}
- tr>td,
- tr>th {
+ tr > td,
+ tr > th {
font-size: $font-size-sm;
padding: 0.5rem;
}
@@ -236,14 +236,14 @@ $font-sizes-mobile: (
margin-top: 0.5rem !important;
}
- .screenshot+em {
+ .screenshot + em {
text-align: center;
display: block;
margin-top: 0.5rem !important;
margin-bottom: 2rem !important;
}
- p>code:not(.hljs) {
+ p > code:not(.hljs) {
padding: 0 0.25rem;
background-color: var(--code-bg-color);
color: var(--code-text-color);
@@ -267,7 +267,7 @@ $font-sizes-mobile: (
box-sizing: border-box;
position: relative;
- >* {
+ > * {
margin-bottom: 0;
}
}
@@ -321,7 +321,7 @@ $font-sizes-mobile: (
pre {
margin: 1rem 0;
background: #011627;
- color: #D6DEEB;
+ color: #d6deeb;
border-radius: 0.5rem;
overflow: hidden;
position: relative;
@@ -331,7 +331,6 @@ $font-sizes-mobile: (
}
.copy-btn {
- margin-top: 0.5rem;
visibility: hidden;
right: 0.5rem;
padding: 0.75rem;
@@ -355,15 +354,13 @@ $font-sizes-mobile: (
background: none !important;
del {
-
&.diffmod,
&.diffdel {
- background-color: #8B0000;
+ background-color: #8b0000;
}
}
ins {
-
&.diffmod,
&.diffins {
background-color: #006400;
@@ -374,24 +371,67 @@ $font-sizes-mobile: (
}
.wiki-editor {
- margin: 1rem auto;
- border-radius: 1rem;
- border: 1px solid $gray-200;
+ margin-left: -1rem;
+ width: 800px;
+
+ @include media-breakpoint-down(md) {
+ margin: 0;
+ width: 100%;
+ max-width: none;
+ }
pre {
padding: 0.75rem 1rem;
}
h1 {
+ font-size: 24px;
+ font-weight: 600;
+ line-height: 28px;
+ letter-spacing: 0.005em;
+ text-align: left;
margin-top: 0.75rem;
}
+ h2 {
+ margin-top: 2.5rem;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 23px;
+ letter-spacing: 0.01em;
+ text-align: left;
+ }
+
+ h3 {
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 18px;
+ letter-spacing: 0.015em;
+ text-align: left;
+ }
+
+ p {
+ font-size: 14px;
+ font-weight: 420;
+ line-height: 21px;
+ letter-spacing: 0.02em;
+ text-align: left;
+ }
+
button:not(.btn-primary) {
all: unset;
cursor: pointer;
- padding: 0.25rem;
- margin: 0.25rem;
+ margin: 0 0.25rem;
border-radius: 0.25rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 1.75rem;
+ }
+
+ a.btn-primary-light {
+ background-color: var(--btn-secondary-color) !important;
}
button:hover {
@@ -414,6 +454,7 @@ $font-sizes-mobile: (
height: 80vh;
overflow-y: auto;
padding: 0 1rem;
+ padding-right: 120px;
@include media-breakpoint-down(md) {
padding-right: 1rem;
@@ -434,39 +475,50 @@ $font-sizes-mobile: (
}
img.ProseMirror-selectednode {
- border: 2px solid #7CBCF5;
+ border: 2px solid #7cbcf5;
}
> :last-child {
overflow: auto;
margin-top: 0 !important;
- border-top: 1px solid $gray-200;
+ border: 1px solid $gray-200;
+ border-radius: 0.5rem;
}
> :first-child {
- padding: 0 1rem;
+ padding-bottom: 0.5rem;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: space-between;
+ width: 800px;
+
+ @include media-breakpoint-down(md) {
+ width: 100%;
+ flex-wrap: nowrap;
+ align-items: flex-start;
+ }
.wiki-edit-controls {
flex-wrap: wrap;
display: inline-flex;
-
- .vertical-sep {
- border-right: 1px solid $gray-200;
- }
+ row-gap: 0.5rem;
}
.wiki-edit-control-btn {
margin-left: auto;
display: inline-flex;
- >* {
+ > * {
margin: 0.5rem 0.25rem;
}
+
+ @include media-breakpoint-down(md) {
+ margin-left: 0;
+ flex-direction: column;
+ align-items: flex-start;
+ }
}
}
}
@@ -478,7 +530,7 @@ $font-sizes-mobile: (
max-width: calc(100vw - 3rem);
}
- div>p:first-child {
+ div > p:first-child {
margin-top: 1.5rem !important;
line-height: 1.4;
}
@@ -518,14 +570,14 @@ ul[data-type="taskList"] {
li {
display: flex;
- >label {
+ > label {
flex: 0 0 auto;
margin-right: 0.25rem;
margin-bottom: 0;
user-select: none;
}
- >div {
+ > div {
flex: 1 1 auto;
}
@@ -534,25 +586,25 @@ ul[data-type="taskList"] {
display: list-item;
}
- ul[data-type="taskList"]>li {
+ ul[data-type="taskList"] > li {
display: flex;
}
input {
color: #000;
- margin: .1rem;
+ margin: 0.1rem;
margin-top: 0.4rem;
border: 1px solid var(--gray-500);
accent-color: black;
&:checked {
background-color: var(--primary);
- background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"), var(--checkbox-gradient);
+ background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
+ var(--checkbox-gradient);
background-size: 57%, 100%;
box-shadow: none;
border: none;
}
}
-
}
-}
\ No newline at end of file
+}
diff --git a/wiki/public/scss/wiki.scss b/wiki/public/scss/wiki.scss
index 2234debd..cb5bb922 100644
--- a/wiki/public/scss/wiki.scss
+++ b/wiki/public/scss/wiki.scss
@@ -3,8 +3,8 @@
body {
--gray-700: #242a30;
- --gray-800: #1C2126;
- --gray-900: #161A1F;
+ --gray-800: #1c2126;
+ --gray-900: #161a1f;
// light mode vars
--background-color: white;
@@ -40,7 +40,10 @@ body {
// ------------------------------------------
- font-family: InterVar, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+ font-family: InterVar, ui-sans-serif, system-ui, -apple-system,
+ BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
+ sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol,
+ "Noto Color Emoji";
background-color: var(--background-color);
color: var(--text-color);
@@ -72,7 +75,7 @@ body.dark {
--code-bg-color: var(--purple-900);
--code-text-color: var(--purple-50);
- --input-bg-color: #242A30;
+ --input-bg-color: #242a30;
--sidebar-text-color: var(--gray-400);
--sidebar-hover-color: #242a30;
@@ -84,7 +87,7 @@ body.dark {
--text-on-green: var(--green-50);
--htmldiff-ins-color: #006400;
- --htmldiff-del-color: #8B0000;
+ --htmldiff-del-color: #8b0000;
--editor-button-text-color: var(--gray-400);
--editor-hover-button-color: var(--gray-700);
@@ -92,7 +95,6 @@ body.dark {
.navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
-
}
.nav-tabs {
@@ -111,7 +113,7 @@ body.dark {
padding: 11px 16px 13px !important;
width: 48%;
height: 100%;
- transition: border-color .25s;
+ transition: border-color 0.25s;
box-shadow: unset;
margin-bottom: 3.5rem;
@@ -129,7 +131,7 @@ body.dark {
font-size: 14px;
font-weight: 500;
color: var(--primary);
- transition: color .25s;
+ transition: color 0.25s;
}
}
@@ -166,7 +168,7 @@ body.dark {
// sidebar
.sidebar-column {
- margin-top: -4.5rem;
+ margin-top: -60px;
}
.sortable-chosen,
@@ -175,30 +177,54 @@ body.dark {
cursor: grabbing !important;
}
-.web-sidebar {
- .list-unstyled:first-child>* {
- padding: 0.75rem 0;
-
- &::before {
- content: '';
- position: relative;
- top: -0.75rem;
- left: 0.5rem;
- border-top: 1px solid var(--border-color);
- width: 99.8%;
- display: block;
-
- @include media-breakpoint-down(md) {
- width: 95%;
- }
- }
-
- &:first-child {
- padding-top: 0.7rem;
- border-top: 0;
- }
+.sidebar-group-list {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ list-style-type: none;
+ padding: 0px;
+}
+.sidebar-group-container {
+ height: 32px;
+ padding: 5px 10px;
+ border-radius: 8px;
+ gap: 8px;
+}
+.sidebar-group-title {
+ font-size: 14px;
+ font-weight: 450;
+ line-height: 16px;
+ letter-spacing: 0.015em;
+ text-align: left;
+}
+.sidebar-group-item-list {
+ display: flex;
+ flex-direction: column;
+ list-style-type: none;
+ padding: 0px 10px;
+ margin-left: 10px;
+ margin-bottom: 10px !important;
+ border-left: 1px solid var(--border-color);
+}
+.sidebar-group-item {
+ display: flex;
+ align-items: center;
+ height: 26px;
+ padding: 5px 8px;
+ border-radius: 8px;
+}
+.sidebar-item-active {
+ a {
+ background-color: transparent !important;
+ color: var(--text-color) !important;
}
}
+.sidebar-group-item-title {
+ color: var(--text-light);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
.sidebar-group {
margin: 0;
@@ -210,8 +236,11 @@ body.dark {
letter-spacing: -0.011em;
+ ul {
+ padding-left: 0.25rem;
+ }
+
.list-unstyled:empty::after {
- margin: 0.5rem;
font-size: 12px;
font-weight: 400;
font-style: italic;
@@ -219,30 +248,13 @@ body.dark {
content: "This Wiki Group will be deleted automatically";
}
- ul.list-unstyled {
- ul {
- padding-left: 0;
- }
- }
-
- >ul {
- padding-left: 0;
- margin-bottom: 0;
- }
-
.collapsible {
- padding: 4px 0.5rem;
+ padding: 4px 10px;
display: flex;
align-items: center;
width: 100%;
}
- .active {
- border-radius: 4px;
- color: var(--primary);
- background-color: #ebf5ff;
- }
-
div {
.h6 {
font-size: $font-size-sm;
@@ -259,7 +271,7 @@ body.dark {
display: inline-flex;
margin: 0 5px 0 auto;
transition: transform 0.2s ease-in-out;
- transform: rotate(90deg);
+ // transform: rotate(90deg);
color: var(--sidebar-text-color);
&.rotate {
@@ -270,14 +282,12 @@ body.dark {
.sidebar-group .collapsible,
.sidebar-item {
- margin: 2px 0;
-
&:hover {
cursor: pointer;
&:not(.active) {
background-color: var(--sidebar-hover-color);
- border-radius: .625rem;
+ border-radius: 0.625rem;
}
}
}
@@ -289,8 +299,8 @@ body.dark {
&.active {
background-color: var(--sidebar-active-item-color);
- border-radius: .625rem;
- box-shadow: 0 0 #0000, 0 0 #0000, 0px 1px 2px rgba(0, 0, 0, .1);
+ border-radius: 0.625rem;
+ box-shadow: 0 0 #0000, 0 0 #0000, 0px 1px 2px rgba(0, 0, 0, 0.1);
}
div {
@@ -302,6 +312,7 @@ body.dark {
margin: 0;
font-weight: 420;
width: 100%;
+ padding: 0;
&:hover {
color: unset;
@@ -313,7 +324,11 @@ body.dark {
}
}
+.sm-sidebar {
+ width: 100%;
+}
.sm-sidebar .web-sidebar {
+ margin-top: 4px;
padding-bottom: 2rem;
}
@@ -322,27 +337,27 @@ body.dark {
}
.doc-sidebar {
- height: 100vh;
margin-bottom: 0;
+ height: 100vh;
+ padding-top: 60px;
+ display: flex;
+ flex-direction: column;
.web-sidebar {
+ flex: 1;
display: flex;
flex-direction: column;
- margin-bottom: 8px;
- margin-right: -0.5rem;
- padding-top: 0;
- padding-bottom: 0;
+ padding: 0px 8px;
overflow-x: hidden;
- margin-left: 2rem;
+ overflow-y: scroll;
+ height: 100%;
+ width: 17rem;
.sidebar-items {
- width: 17rem;
- padding-top: 4.5rem;
- margin-bottom: auto;
-
- .list-unstyled {
- max-width: 15rem;
- }
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
}
}
}
@@ -358,8 +373,17 @@ body.dark {
.navbar-nav {
width: 100%;
height: 100%;
+ display: flex;
+ align-items: center;
justify-content: flex-end;
background-color: var(--background-color);
+ padding: 0 14px;
+
+ @include media-breakpoint-down(sm) {
+ max-width: 100vw;
+ height: auto;
+ align-items: flex-start;
+ }
.search-item {
margin-right: auto;
@@ -386,23 +410,24 @@ body.dark {
}
}
}
-
}
.nav-item {
- margin-left: 24px;
+ margin-left: 1rem;
+ display: flex;
+ align-items: center;
+
+ @include media-breakpoint-down(md) {
+ // display:;
+ }
#search-container {
- width: 8rem;
- height: 2.25rem;
padding-right: 0px;
padding-left: 0px;
.dropdown {
- height: 100%;
- border-radius: 4px;
- border: 1px solid var(--border-color);
- box-shadow: none;
+ height: 32px;
+ width: 240px;
background-color: var(--searchbar-color);
&:hover {
@@ -411,12 +436,9 @@ body.dark {
kbd {
position: absolute;
- top: 0;
- right: 0;
- margin: 0.5rem;
- border: 1px solid var(--border-color);
+ top: 4px;
+ right: 4px;
padding: 0.1rem 0.4rem;
- border-radius: 5px;
color: var(--sidebar-text-color);
background-color: transparent;
}
@@ -434,7 +456,7 @@ body.dark {
}
#searchModal {
- >div:first-child {
+ > div:first-child {
margin-top: 5rem;
}
@@ -510,7 +532,8 @@ body.dark {
.wiki-navbar {
background-color: transparent;
- padding: 0;
+ padding: 0px !important;
+ border-bottom: 1px solid var(--border-color);
@include media-breakpoint-down(md) {
width: auto;
@@ -518,17 +541,29 @@ body.dark {
}
.wiki-navbar-container {
- padding: 0.5rem 0 1rem;
- margin-left: 1rem;
+ padding-right: 1rem;
+ height: 60px;
+ align-items: center;
+ border-bottom: 1px solid var(--border-color);
background-color: var(--background-color);
- box-shadow: 20px 5px 14px 8px var(--background-color);
@include media-breakpoint-down(md) {
box-shadow: unset;
margin-left: 0;
+
+ .navbar-nav {
+ padding-left: 10px !important;
+ max-width: 100vw;
+ }
}
}
+ // .wiki-navbar-container.collapse {
+ // .navbar-nav {
+
+ // }
+ // }
+
.doc-container .navbar-collapse {
padding-top: 2rem;
background-color: var(--background-color);
@@ -547,7 +582,13 @@ body.dark {
.sun-moon-container {
cursor: pointer;
- margin-left: 1rem;
+ margin-left: 24px;
+ display: flex;
+ align-items: center;
+
+ svg {
+ width: 16px !important;
+ }
@include media-breakpoint-down(md) {
margin: 0.25rem 0 1rem 0.5rem;
@@ -555,12 +596,13 @@ body.dark {
}
.mobile-search-icon {
- margin: 0 2rem 0 auto;
+ margin: 0 1rem 0 auto;
cursor: pointer;
+ display: flex;
+ align-items: center;
}
}
-
.doc-layout {
padding-top: 0rem;
margin: 0;
@@ -568,18 +610,18 @@ body.dark {
}
.navbar-brand {
- padding-bottom: 1rem;
+ padding: 0;
color: var(--text-color) !important;
- border-bottom: 1px solid var(--border-color);
- width: 15rem;
- margin-right: 0.5rem;
+ // border-bottom: 1px solid var(--border-color);
+ // width: 15rem;
+ // margin-right: 0.5rem;
- @include media-breakpoint-down(md) {
- border-bottom: unset;
+ img {
+ height: 24px;
}
- img {
- max-height: 18px;
+ @include media-breakpoint-down(md) {
+ border-bottom: unset;
}
}
@@ -590,15 +632,19 @@ body.dark {
}
.navbar-brand-container {
- padding: 1.4rem 0 0 2.5rem;
+ width: 17rem;
+ display: flex;
+ align-items: center;
+ padding: 10px 18px;
background-color: var(--sidebar-bg-color);
position: sticky;
top: 0;
z-index: 5;
+ height: 60px;
@include media-breakpoint-down(md) {
max-width: 14rem;
- padding: 1rem 0 0 0;
+ // padding: 1rem 0 0 0;
background-color: var(--background-color);
}
}
@@ -620,16 +666,16 @@ body.dark {
// main-content
.main-column {
background-color: var(--background-color);
- flex: 8;
- text-align: left;
- margin: 0 2rem;
+ width: 745px;
+ padding: 10px 40px;
@include media-breakpoint-down(md) {
- margin: 1rem;
+ padding: 20px;
+ width: 100vw;
}
}
-.wiki-content .from-markdown> :first-child {
+.wiki-content .from-markdown > :first-child {
margin-top: 0;
}
@@ -643,11 +689,32 @@ body.dark {
}
p {
- font-size: 1rem;
+ font-size: 14px;
+ font-weight: 420;
+ line-height: 21px;
+ letter-spacing: 0.02em;
+ text-align: left;
}
h2 {
margin-top: 2.5rem;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 23px;
+ letter-spacing: 0.01em;
+ text-align: left;
+ }
+
+ h3 {
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 18px;
+ letter-spacing: 0.015em;
+ text-align: left;
+ }
+
+ a.btn-primary-light {
+ background-color: var(--btn-secondary-color) !important;
}
ul[data-type="taskList"] input {
@@ -667,7 +734,6 @@ body.dark {
// TODO: clear this when website related css is removed
.wiki-page-content .from-markdown {
-
h1,
h2,
h3,
@@ -728,31 +794,49 @@ h6:hover .feather-link {
background-color: var(--gray-700);
}
+.forward-back {
+ a {
+ p {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+ }
+}
+
// toc
.page-toc {
background-color: var(--background-color);
- flex: 2.5;
font-size: $font-size-xs;
position: sticky;
- top: 72px;
+ top: 90px;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
height: 90vh;
+ margin-left: auto;
+ width: 240px;
+ margin-right: 16px;
+ padding-bottom: 10rem;
&::-webkit-scrollbar {
display: none;
}
- .list-unstyled {
- top: 0;
- border-left: 1px solid var(--border-color);
+ .page-toc-title {
+ text-transform: uppercase;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 13px;
+ letter-spacing: 0.09em;
+ text-align: left;
+ margin-bottom: 0.75rem;
}
h5 {
font-size: $font-size-xs;
padding-left: 1rem;
- letter-spacing: .4px;
+ letter-spacing: 0.4px;
line-height: 28px;
font-size: 13px;
font-weight: 600;
@@ -761,12 +845,21 @@ h6:hover .feather-link {
div {
width: 100%;
- margin: 2rem 0;
padding: 0;
+ top: 0;
+ border-left: 1px solid var(--border-color);
ul {
padding-bottom: 0;
margin-bottom: 0;
+
+ li {
+ a {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+ }
}
}
@@ -789,7 +882,7 @@ h6:hover .feather-link {
}
.doc-sidebar {
- padding-right: 0.5rem;
+ // padding-right: 0.5rem;
background-color: var(--sidebar-bg-color);
}
@@ -817,7 +910,7 @@ navbar
.navbar-link {
color: var(--text-color);
- font-size: .875rem;
+ font-size: 0.875rem;
font-weight: 500;
padding: 0.5rem 0;
display: block;
@@ -830,7 +923,7 @@ navbar
.navbar-toggler {
border-color: transparent;
- padding: 0;
+ padding: 18px;
&:focus {
outline: unset;
@@ -843,7 +936,7 @@ navbar
}
.logged-in .nav-avatar {
- padding-left: 0;
+ padding: 0;
}
}
@@ -865,12 +958,11 @@ navbar
padding-top: 0;
}
- .web-sidebar>a {
+ .web-sidebar > a {
display: none;
}
.wiki-footer {
-
.btn.left,
.btn.right {
width: 100%;
@@ -958,7 +1050,7 @@ navbar
}
img::after {
- content: '';
+ content: "";
}
img[alt]::after {
@@ -980,16 +1072,16 @@ strong {
}
h1 {
- font-size: 1.75rem;
- line-height: 1.25;
- letter-spacing: -0.02em;
margin-top: 3rem;
margin-bottom: 0.75rem;
+ font-size: 24px;
+ font-weight: 600;
+ line-height: 28px;
+ letter-spacing: 0.005em;
@include media-breakpoint-up(sm) {
- font-size: 2rem;
- margin-top: 1rem;
- margin-bottom: 0;
+ margin-top: 1.5rem !important;
+ margin-bottom: 0 !important;
}
}
@@ -1060,7 +1152,7 @@ p {
input {
width: 100%;
background: $gray-200;
- border-radius: .375rem;
+ border-radius: 0.375rem;
border: none;
outline: none;
padding: 0.25rem 0.5rem;
@@ -1132,7 +1224,6 @@ p {
}
del {
-
&.diffmod,
&.diffdel {
* {
@@ -1145,7 +1236,6 @@ del {
}
ins {
-
&.diffmod,
&.diffins {
* {
@@ -1160,12 +1250,12 @@ ins {
.text-sm {
font-size: 13px !important;
line-height: 1.15;
- letter-spacing: .02em;
+ letter-spacing: 0.02em;
}
.text-xs {
font-size: 12px;
line-height: 1.15;
- letter-spacing: .02em;
+ letter-spacing: 0.02em;
font-weight: 400;
}
diff --git a/wiki/wiki/doctype/wiki_page/templates/navbar_search.html b/wiki/wiki/doctype/wiki_page/templates/navbar_search.html
index 7a97f58e..0d9c2739 100644
--- a/wiki/wiki/doctype/wiki_page/templates/navbar_search.html
+++ b/wiki/wiki/doctype/wiki_page/templates/navbar_search.html
@@ -1,7 +1,7 @@
{% if navbar_search %}
<li class="nav-item search-item d-none d-lg-block">
<div class="website-search doc-search" id="search-container">
- <button class="dropdown btn" id="dropdownMenuSearch">
+ <button class="dropdown btn data-pill" id="dropdownMenuSearch">
<div class="search-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
diff --git a/wiki/wiki/doctype/wiki_page/templates/show.html b/wiki/wiki/doctype/wiki_page/templates/show.html
index 2e5753ea..bdf4c889 100644
--- a/wiki/wiki/doctype/wiki_page/templates/show.html
+++ b/wiki/wiki/doctype/wiki_page/templates/show.html
@@ -51,19 +51,18 @@ <h5 class="modal-title" id="addGroupModalTitle">Title</h5>
{%- endif -%}
</div>
<div class="wiki-footer hide d-print-none">
- <div class = "forward-back">
- <a href="#" class="btn left">
- <p>Previous Page</p>
- <p>Left</p>
- </a>
- <a href="#" class="btn pull-right right">
- <p>Next Page</p>
- <p>Right</p></a>
- </a>
+ <div class = "forward-back">
+ <a href="#" class="btn left">
+ <p>Previous Page</p>
+ <p>Left</p>
+ </a>
+ <a href="#" class="btn pull-right right">
+ <p>Next Page</p>
+ <p>Right</p></a>
+ </a>
+ </div>
</div>
-</div>
-
<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
<script>
const patchNewCode = `<h1>{{ patch_new_title }}</h1>{{ patch_new_code }}`;
@@ -83,7 +82,7 @@ <h5 class="modal-title" id="addGroupModalTitle">Title</h5>
.children("li");
items.each(function(item) {
- name = $(this).children(".collapsible").children("span.text-sm").text();
+ name = $(this).children(".collapsible").children("span.sidebar-group-title, span.text-sm").text();
side[name] = [];
$(this).children(".list-unstyled").children(".sidebar-item").each(function (item) {
diff --git a/wiki/wiki/doctype/wiki_page/templates/web_sidebar.html b/wiki/wiki/doctype/wiki_page/templates/web_sidebar.html
index 50ad1da9..eef1087b 100644
--- a/wiki/wiki/doctype/wiki_page/templates/web_sidebar.html
+++ b/wiki/wiki/doctype/wiki_page/templates/web_sidebar.html
@@ -1,8 +1,9 @@
{% macro render_sidebar_item(item) %}
-<li class="sidebar-item" data-type="{{item.type}}" data-name="{{item.name}}" data-title="{{item.title or item.name}}"
+<li class="sidebar-item sidebar-group-item {% if item.route == current_route %}sidebar-item-active{% endif %}" data-type="{{item.type}}" data-name="{{item.name}}" data-title="{{item.title or item.name}}"
data-group-name="{{item.group_name or 'sidebar-item'}}" data-route="{{ item.route }}">
<div>
- <a class="text-sm" href="/{{ item.route }}">
+ <a class="text-sm sidebar-group-item-title"
+ href="/{{ item.route }}">
{{ item.title or item.name }}
</a>
</div>
@@ -11,11 +12,11 @@
{% macro render_sidebar_items(sidebar_items) %}
{%- if sidebar_items | len > 0 -%}
-<ul class="list-unstyled" style="min-height: 20px;">
+<ul class="list-unstyled sidebar-group-list" style="min-height: 20px;">
{% for sidebar_group in sidebar_items -%}
<li class="sidebar-group" data-type="Wiki Sidebar" data-title="{{sidebar_group}}">
- <div class="collapsible">
- <span class='text-sm'>{{ sidebar_group }}</span>
+ <div class="sidebar-group-container collapsible">
+ <span class='sidebar-group-title'>{{ sidebar_group }}</span>
<span class='add-sidebar-page hide' data-group-name="{{ sidebar_group }}" data-toggle="tooltip"
data-placement="top" title="New Wiki Page in the group {{ sidebar_group }}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 24 24" fill="none"
@@ -27,14 +28,10 @@
</span>
<span
class='drop-icon {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}rotate{% endif %}'>
- <svg width="16" height="20" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path
- d="M4 8.53967L4 3.46033C4 3.05582 4.45534 2.81874 4.78673 3.05071L8.41483 5.59038C8.69919 5.78943 8.69919 6.21057 8.41483 6.40962L4.78673 8.94929C4.45534 9.18126 4 8.94418 4 8.53967Z"
- fill="currentColor"></path>
- </svg>
+ <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="6 9 12 15 18 9"></polyline></svg>
</span>
</div>
- <ul class="list-unstyled {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}hidden{% endif %}"
+ <ul class="list-unstyled sidebar-group-item-list {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}hidden{% endif %}"
style="min-height: 20px;">
{% for item in sidebar_items[sidebar_group] -%}
{{ render_sidebar_item(item) }}
diff --git a/wiki/wiki/doctype/wiki_page/templates/wiki_doc.html b/wiki/wiki/doctype/wiki_page/templates/wiki_doc.html
index 84a1e9ca..504a259a 100644
--- a/wiki/wiki/doctype/wiki_page/templates/wiki_doc.html
+++ b/wiki/wiki/doctype/wiki_page/templates/wiki_doc.html
@@ -39,8 +39,8 @@
{% if page_toc_html %}
<div class="page-toc d-none d-xl-block">
{% if page_toc_html %}
+ <p class="page-toc-title">On this page</p>
<div class='list-unstyled'>
- <h5>On this page</h5>
<ul>
{{ page_toc_html }}
</ul>
diff --git a/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html b/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html
index 028cb9b2..93107db9 100644
--- a/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html
+++ b/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html
@@ -21,7 +21,7 @@
{% if navbar_search %}
<div class="d-lg-none mobile-search-icon">
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+ <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
diff --git a/wiki/wiki/doctype/wiki_page/wiki_page.py b/wiki/wiki/doctype/wiki_page/wiki_page.py
index 07a58268..5629132f 100644
--- a/wiki/wiki/doctype/wiki_page/wiki_page.py
+++ b/wiki/wiki/doctype/wiki_page/wiki_page.py
@@ -294,6 +294,7 @@ def get_items(self, sidebar_items):
context.active_sidebar_group = frappe.get_value(
"Wiki Group Item", {"wiki_page": self.name}, ["parent_label"]
)
+ context.current_route = self.route
context.collapse_sidebar_groups = wiki_settings.collapse_sidebar_groups
context.sidebar_items = sidebar_items
context.wiki_search_scope = self.get_space_route()
diff --git a/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.js b/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.js
index b3f1df8b..b5bd709c 100644
--- a/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.js
+++ b/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.js
@@ -31,7 +31,7 @@ frappe.ui.form.on("Wiki Page Patch", {
background-color: #dcfce7;
text-decoration: none;
}
- </style>`
+ </style>`,
);
}
},
diff --git a/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.py b/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.py
index 99205feb..b0570e32 100644
--- a/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.py
+++ b/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.py
@@ -98,6 +98,7 @@ def approve_patch(self):
self.save()
return True
+
@frappe.whitelist()
def add_comment_to_patch(reference_name, content):
email = frappe.session.user