Skip to content

Commit

Permalink
style: espresso design
Browse files Browse the repository at this point in the history 
- sidebar changes
- dialog button changes
- text style changes
  • Loading branch information
@BreadGenie
BreadGenie committed Nov 6, 2023
1 parent 63efc8d commit ccb63bf
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 109 deletions.
2 changes: 1 addition & 1 deletion wiki/public/js/render_wiki.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -512,7 +512,7 @@ window.RenderWiki = class RenderWiki extends Wiki {
<li class="sidebar-group" data-type="Wiki Sidebar"
data-name="new-sidebar" data-new=1 data-title="${title}" draggable="false">
<div class="collapsible">
<span class="h6">${title}</span>
<span class="text-sm">${title}</span>
<span class='add-sidebar-page'>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</span>
Expand Down
4 changes: 2 additions & 2 deletions wiki/public/scss/edit_wiki.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ body.dark {
// edit page

.remove-sidebar-item {
float: right;
margin: 4px 15px 2.5px auto;
cursor: pointer;
margin: 0 1rem 0 auto;
}

.collapsible .remove-sidebar-item {
Expand Down
107 changes: 53 additions & 54 deletions wiki/public/scss/wiki.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ body {

// light mode vars
--background-color: white;
--sidebar-bg-color: #f6f6f7;
--sidebar-bg-color: #f8f8f8;
--sidebar-hover-color: #ebebe9;
--toc-hover-text-color: var(--gray-900);

Expand Down Expand Up @@ -75,7 +75,7 @@ body.dark {
--code-text-color: var(--purple-50);
--input-bg-color: #242A30;

--sidebar-text-color: #909090;
--sidebar-text-color: #383838;
--sidebar-text-hover-color: #f4f5f6;

--bg-orange: var(--orange-600);
Expand Down Expand Up @@ -244,8 +244,6 @@ body.dark {
}

div {
cursor: pointer;

.h6 {
font-size: $font-size-sm;
margin-bottom: 0;
Expand All @@ -255,77 +253,60 @@ body.dark {
}
}

.sidebar-item {
a {
margin: 0;
font-weight: 500;
width: 100%;
}
}

.drop-icon,
.add-sidebar-page {
cursor: pointer;
display: inline-flex;
margin: 4px 5px 2.5px auto;
margin: 0 5px 0 auto;
transition: transform 0.2s ease-in-out;
transform: rotate(0deg);
transform: rotate(90deg);
color: var(--sidebar-text-color);

&.rotate {
transform: rotate(-90deg);
}

&:hover {
color: var(--sidebar-text-hover-color);
transform: rotate(0deg);
}
}
}

.sidebar-group .collapsible,
.sidebar-item {
margin: 2px 0;

// hover bg only on edit mode
.sidebar-group:not(.disabled) .collapsible,
.sidebar-item:not(.disabled) {
&:hover {
background-color: var(--sidebar-hover-color);
cursor: pointer;

&:not(.active) {
background-color: #f3f3f3;
border-radius: .625rem;
}
}
}

.sidebar-group .collapsible,
.sidebar-item {
margin: 1px 0;
color: var(--sidebar-text-color);
display: flex;
align-items: center;
min-height: 1.75rem;

&:hover:not(.active) {
color: var(--sidebar-text-hover-color);
border-radius: 4px;
&.active {
background-color: #ffffff;
border-radius: .625rem;
box-shadow: 0 0 #0000, 0 0 #0000, 0px 1px 2px rgba(0, 0, 0, .1);
}
}

.sidebar-item.active {
background-color: transparent;
border-radius: 4px;

a {
background-color: transparent;
color: var(--active-item-text-color);
div {
display: flex;
align-items: center;
}
}

.sidebar-item {
display: flex;

a {
color: inherit;
margin-top: 0 !important;
margin: 0;
font-weight: 400;
width: 100%;
}

:first-child {
margin-right: auto;
}

a:hover {
color: inherit;
}
}

.sm-sidebar .web-sidebar {
Expand All @@ -351,12 +332,12 @@ body.dark {
margin-left: 2rem;

.sidebar-items {
width: 18rem;
width: 17rem;
padding-top: 4.5rem;
margin-bottom: auto;

.list-unstyled {
max-width: 16rem;
max-width: 15rem;
}
}
}
Expand Down Expand Up @@ -533,8 +514,7 @@ body.dark {
}

.wiki-navbar-container {
padding: 0.6rem 0 1rem;
;
padding: 0.5rem 0 1rem;
margin-left: 1rem;
background-color: var(--background-color);
box-shadow: 20px 5px 14px 8px var(--background-color);
Expand Down Expand Up @@ -587,7 +567,7 @@ body.dark {
padding-bottom: 1rem;
color: var(--text-color) !important;
border-bottom: 1px solid var(--border-color);
width: 16rem;
width: 15rem;
margin-right: 0.5rem;

@include media-breakpoint-down(md) {
Expand Down Expand Up @@ -926,6 +906,10 @@ navbar
svg {
margin-bottom: 0.1rem;
}

span {
font-size: 0.75rem;
}
}

.sidebar-options {
Expand Down Expand Up @@ -1060,12 +1044,10 @@ p {

.modal-header {
border-bottom: unset;
flex-direction: column;
}

.modal-body {
padding-top: 0;
padding-bottom: 0;

label {
color: var(--text-color);
Expand All @@ -1092,6 +1074,10 @@ p {
.modal-footer {
border-top: unset;
justify-content: end;

.btn {
width: 100%;
}
}
}

Expand Down Expand Up @@ -1165,4 +1151,17 @@ ins {

all: unset;
}
}

.text-sm {
font-size: 13px !important;
line-height: 1.15;
letter-spacing: .02em;
}

.text-xs {
font-size: 12px;
line-height: 1.15;
letter-spacing: .02em;
font-weight: 400;
}
3 changes: 2 additions & 1 deletion wiki/wiki/doctype/wiki_page/templates/show.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ <h1 class="wiki-title">{{ title }}</h1>
<h5 class="modal-title" id="addGroupModalTitle">Title</h5>
</div>
<div class="modal-body">
<span class="text-muted text-xs">Enter title for the new Wiki Group</span>
<input type="text" id="title" name="title">
</div>
<div class="modal-footer">
Expand Down Expand Up @@ -82,7 +83,7 @@ <h5 class="modal-title" id="addGroupModalTitle">Title</h5>
.children("li");

items.each(function(item) {
name = $(this).children(".collapsible").children("span.h6").text();
name = $(this).children(".collapsible").children("span.text-sm").text();
side[name] = [];

$(this).children(".list-unstyled").children(".sidebar-item").each(function (item) {
Expand Down
116 changes: 65 additions & 51 deletions wiki/wiki/doctype/wiki_page/templates/web_sidebar.html
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,79 @@
{% macro render_sidebar_item(item) %}
<li class="sidebar-item"
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 }}"
>
<li class="sidebar-item" 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 href="/{{ item.route }}">
<a class="text-sm" href="/{{ item.route }}">
{{ item.title or item.name }}
</a>
</div>
</li>
{% endmacro %}

{% macro render_sidebar_items(sidebar_items) %}
{%- if sidebar_items | len > 0 -%}
<ul class="list-unstyled" 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='h6'>{{ 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" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</span>
<span class='drop-icon {% if hide_sidebar_items and sidebar_group != active_sidebar_group %}rotate{% endif %}'>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 10L12 14L16 10" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</div>
<ul class="list-unstyled {% if hide_sidebar_items and sidebar_group != active_sidebar_group %}hidden{% endif %}" style="min-height: 20px;">
{% for item in sidebar_items[sidebar_group] -%}
{{ render_sidebar_item(item) }}
{%- endfor %}
</ul>
</li>
{%- endfor %}
</ul>
<div class="d-none d-lg-block sidebar-options">
<div class="sidebar-edit-mode-btn text-muted" data-toggle="tooltip" data-placement="top" title="Changes to sidebar will be automatically saved">
<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" class="feather feather-edit-3">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
{%- if sidebar_items | len > 0 -%}
<ul class="list-unstyled" 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>
<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"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</span>
<span
class='drop-icon {% if hide_sidebar_items 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>
<span class="small">Edit Sidebar</span>
</div>
<div class="add-sidebar-group text-muted hide">
<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" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
<span class="small">Add Group</span>
</div>
<div class="sidebar-view-mode-btn text-muted hide">
<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" class="feather feather-sidebar"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
<span class="small">View Sidebar</span>
</div>
</span>
</div>
{%- endif -%}
<ul class="list-unstyled {% if hide_sidebar_items and sidebar_group != active_sidebar_group %}hidden{% endif %}"
style="min-height: 20px;">
{% for item in sidebar_items[sidebar_group] -%}
{{ render_sidebar_item(item) }}
{%- endfor %}
</ul>
</li>
{%- endfor %}
</ul>
<div class="d-none d-lg-block sidebar-options">
<div class="sidebar-edit-mode-btn text-muted" data-toggle="tooltip" data-placement="top"
title="Changes to sidebar will be automatically saved">
<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"
class="feather feather-edit-3">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
<span class="small">Edit Sidebar</span>
</div>
<div class="add-sidebar-group text-muted hide">
<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"
class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<span class="small">Add Group</span>
</div>
<div class="sidebar-view-mode-btn text-muted hide">
<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"
class="feather feather-sidebar">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="3" x2="9" y2="21"></line>
</svg>
<span class="small">View Sidebar</span>
</div>
</div>
{%- endif -%}
{% endmacro %}

{% macro my_account() %}
Expand Down

0 comments on commit ccb63bf

Please sign in to comment.