mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-19 05:09:41 +02:00
* feat: update document editor styles (#180) * fix: fix flexbox property * fix: fix label name in the edit mode * fix: change padding and bottom arrow as Figma size * fix: change padding and bottom arrow as Figma size * fix: add universal input, select directive * fix: fix layout shift, class name * fix: fix text cutting and change usage of svg in css * fix: add missing css property
This commit is contained in:
YeoKyung Yoon
GitHub
parent
5c4183b717
commit
69b61a2c87
5 changed files with 91 additions and 35 deletions
|
|
@ -13,14 +13,18 @@
|
|||
}
|
||||
</textarea>
|
||||
<header class="writing-header">
|
||||
<span class="writing-header__left">
|
||||
<span>
|
||||
New Page at the
|
||||
<div class="writing-header__inner-container">
|
||||
{% set currentPageId = 0 %}
|
||||
{% if page is not empty %}
|
||||
{% set currentPageId = page._id %}
|
||||
{% endif %}
|
||||
<select name="parent">
|
||||
<div class="select-wrapper">
|
||||
{% if parentsChildrenOrdered is not empty %}
|
||||
<label for="parent">Parent Page</label>
|
||||
{% else %}
|
||||
<label for="parent">New Page at the</label>
|
||||
{% endif %}
|
||||
<select id="parent" name="parent">
|
||||
<option value="0">Root</option>
|
||||
{% for _page in pagesAvailableGrouped %}
|
||||
{% if _page._id != currentPageId %}
|
||||
|
|
@ -34,24 +38,25 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
{% if parentsChildrenOrdered is not empty %}
|
||||
<span>
|
||||
Put Above
|
||||
<select name="above">
|
||||
<div class="select-wrapper">
|
||||
<label for="above">Put Above</label>
|
||||
<select id="above" name="above">
|
||||
<option value="0">—</option>
|
||||
{% for _page in parentsChildrenOrdered %}
|
||||
<option value="{{ _page._id }}">{{ _page.title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
{% if page is not empty %}
|
||||
<p><input type="text" class="uri-input" name="uri-input" placeholder="URI (Optional)" value="{{ page.uri }}"></p>
|
||||
<div class="uri-input-wrapper">
|
||||
<label for="uri-input">Alias</label>
|
||||
<input type="text" id="uri-input" class="uri-input" name="uri-input" placeholder="URI (Optional)" value="{{ page.uri }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
<div class="writing-editor">
|
||||
<div id="editorjs"></div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.writing-header {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 15px 0;
|
||||
|
|
@ -15,18 +14,32 @@
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
&__left {
|
||||
&__inner-container {
|
||||
margin: auto 0;
|
||||
display: flex;
|
||||
color: var(--color-text-second);
|
||||
gap: 10px;
|
||||
|
||||
& span {
|
||||
margin-right: 10px;
|
||||
@media(--mobile) {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
& > * {
|
||||
flex: 0 1 33.3%;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
select {
|
||||
max-width: 100px;
|
||||
vertical-align: bottom;
|
||||
@apply --select;
|
||||
}
|
||||
|
||||
input {
|
||||
@apply --input;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,16 +51,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.uri-input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(201, 201, 204, 0.48);
|
||||
box-shadow: inset 0 1px 2px 0 rgba(35, 44, 72, 0.06);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.writing-editor {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
--color-link-hover: #F3F6F8;
|
||||
--color-bg-light: #f8f7fa;
|
||||
--color-page-active: #ff1767;
|
||||
--color-input-primary: #F3F6F8;
|
||||
--color-input-border: #477CFF;
|
||||
|
||||
--color-button-primary: #3389FF;
|
||||
--color-button-primary-hover: #2E7AE6;
|
||||
|
|
@ -77,6 +79,49 @@
|
|||
}
|
||||
}
|
||||
|
||||
--select {
|
||||
position: relative;
|
||||
padding: 10px 30px 10px 10px;
|
||||
width: 100%;
|
||||
border: solid 1px transparent;
|
||||
border-radius: 8px;
|
||||
background-color: var(--color-input-primary);
|
||||
box-sizing: border-box;
|
||||
appearance: none;
|
||||
line-height: 18px;
|
||||
background-image: url("../svg/arrow-down.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 15px center;
|
||||
|
||||
&:focus {
|
||||
border: solid 1px var(--color-input-border);
|
||||
box-shadow: 0 0 0 3px rgba(18, 155, 255, 0.33);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
--input {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
line-height: 18px;
|
||||
border: solid 1px transparent;
|
||||
border-radius: 8px;
|
||||
background-color: var(--color-input-primary);
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border: solid 1px var(--color-input-border);
|
||||
box-shadow: 0 0 0 3px rgba(18, 155, 255, 0.33);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
--squircle {
|
||||
border-radius: 8px;
|
||||
|
||||
|
|
@ -95,4 +140,4 @@
|
|||
@custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
|
||||
@custom-media --mobile all and (max-width: 980px);
|
||||
@custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
|
||||
@custom-media --can-hover all and (hover:hover)
|
||||
@custom-media --can-hover all and (hover:hover);
|
||||
|
|
|
|||
3
src/frontend/svg/arrow-down.svg
Normal file
3
src/frontend/svg/arrow-down.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.83053 0.193862C6.70562 0.0696944 6.53666 0 6.36053 0C6.18441 0 6.01544 0.0696944 5.89053 0.193862L3.4972 2.55386L1.1372 0.193862C1.01229 0.0696944 0.843323 0 0.667199 0C0.491075 0 0.322107 0.0696944 0.197199 0.193862C0.134713 0.255837 0.0851169 0.329571 0.0512711 0.410811C0.0174253 0.49205 0 0.579187 0 0.667195C0 0.755203 0.0174253 0.84234 0.0512711 0.92358C0.0851169 1.00482 0.134713 1.07855 0.197199 1.14053L3.02387 3.9672C3.08584 4.02968 3.15957 4.07928 3.24081 4.11312C3.32205 4.14697 3.40919 4.16439 3.4972 4.16439C3.58521 4.16439 3.67234 4.14697 3.75358 4.11312C3.83482 4.07928 3.90856 4.02968 3.97053 3.9672L6.83053 1.14053C6.89302 1.07855 6.94261 1.00482 6.97646 0.92358C7.0103 0.84234 7.02773 0.755203 7.02773 0.667195C7.02773 0.579187 7.0103 0.49205 6.97646 0.410811C6.94261 0.329571 6.89302 0.255837 6.83053 0.193862Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 958 B |
|
|
@ -40,7 +40,7 @@ module.exports = () => {
|
|||
options: {
|
||||
// you can specify a publicPath here
|
||||
// by default it use publicPath in webpackOptions.output
|
||||
publicPath: '../',
|
||||
// publicPath: '../',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue