Skip to content

Commit

Permalink
Merge pull request #199 from frappe/espresso-changes
Browse files Browse the repository at this point in the history 
style: more espresso design changes
  • Loading branch information
@nextchamp-saqib
nextchamp-saqib authored Dec 5, 2023
2 parents ba5dbca + 7658e01 commit a7985ca
Show file tree
Hide file tree
Showing 12 changed files with 345 additions and 202 deletions.
11 changes: 7 additions & 4 deletions wiki/public/js/render_wiki.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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>
`);
Expand Down
2 changes: 1 addition & 1 deletion wiki/public/js/wiki.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down
128 changes: 90 additions & 38 deletions wiki/public/scss/edit_wiki.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
Expand All @@ -267,7 +267,7 @@ $font-sizes-mobile: (
box-sizing: border-box;
position: relative;

>* {
> * {
margin-bottom: 0;
}
}
Expand Down Expand Up @@ -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;
Expand All @@ -331,7 +331,6 @@ $font-sizes-mobile: (
}

.copy-btn {
margin-top: 0.5rem;
visibility: hidden;
right: 0.5rem;
padding: 0.75rem;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
}
}
}
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}
}

}
}
}
Loading

0 comments on commit a7985ca

Please sign in to comment.