mirror of
https://github.com/codex-team/editor.js
synced 2024-06-29 19:02:42 +02:00
css updated
This commit is contained in:
parent
6b69d1f325
commit
56db847a11
|
@ -166,12 +166,6 @@
|
||||||
.ce_redactor li{
|
.ce_redactor li{
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
.ce_redactor blockquote{
|
|
||||||
font-size: 1.3em;
|
|
||||||
line-height: 1.9em;
|
|
||||||
margin: 2.5em 162px !important;
|
|
||||||
padding: 2.5em 3.5em !important;
|
|
||||||
}
|
|
||||||
.ce_redactor code{
|
.ce_redactor code{
|
||||||
display: block;
|
display: block;
|
||||||
font-family: 'monospace', 'monaco', 'consolas', 'courier';
|
font-family: 'monospace', 'monaco', 'consolas', 'courier';
|
||||||
|
|
12
example.html
12
example.html
|
@ -20,11 +20,9 @@
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<<<<<<< HEAD
|
|
||||||
<link rel="stylesheet" href="plugins/ceditor-tool-link.css" />
|
<link rel="stylesheet" href="plugins/ceditor-tool-link.css" />
|
||||||
<link rel="stylesheet" href="plugins/ceditor-tool-quote/ceditor-tool-quote.css" />
|
<link rel="stylesheet" href="plugins/ceditor-tool-quote/ceditor-tool-quote.css" />
|
||||||
=======
|
<link rel="stylesheet" href="plugins/images/plugin.css" />
|
||||||
>>>>>>> master
|
|
||||||
</head>
|
</head>
|
||||||
<body style="padding: 100px">
|
<body style="padding: 100px">
|
||||||
|
|
||||||
|
@ -150,7 +148,7 @@
|
||||||
{
|
{
|
||||||
quote : {
|
quote : {
|
||||||
type : 'withPhoto',
|
type : 'withPhoto',
|
||||||
text : 'git — распределенная система контроля версий файлов.<br> «Распределенная» значит, что каждый репозиторий содержит всю историю изменений, и из него можно развернуть полноценную рабочую копию проекта.',
|
text : '«Распределенная» значит, что каждый репозиторий содержит всю историю изменений, и из него можно развернуть полноценную рабочую копию проекта. Супервизор позволяет следить за состоянием приложений, останавливать, запускать и перезапускать их. Для начала нам нужно создать конфигурационный файл для вашей программы',
|
||||||
photo : '',
|
photo : '',
|
||||||
author : '',
|
author : '',
|
||||||
}
|
}
|
||||||
|
@ -271,11 +269,5 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="plugins/ceditor-tool-link.js"></script>
|
<script src="plugins/ceditor-tool-link.js"></script>
|
||||||
<<<<<<< HEAD
|
|
||||||
<script src="plugins/ceditor-tool-quote/ceditor-tool-quote.js"></script>
|
<script src="plugins/ceditor-tool-quote/ceditor-tool-quote.js"></script>
|
||||||
=======
|
|
||||||
<link rel="stylesheet" href="plugins/ceditor-tool-link.css" />
|
|
||||||
|
|
||||||
<script src="plugins/images/plugin.js"></script>
|
<script src="plugins/images/plugin.js"></script>
|
||||||
<link rel="stylesheet" href="plugins/images/plugin.css" />
|
|
||||||
>>>>>>> master
|
|
||||||
|
|
|
@ -18,62 +18,143 @@
|
||||||
border-bottom-color: #f6d8da;
|
border-bottom-color: #f6d8da;
|
||||||
color: #cc7d74;
|
color: #cc7d74;
|
||||||
}
|
}
|
||||||
.clearfix_quote:after {
|
|
||||||
visibility: hidden;
|
/** Quote Styles */
|
||||||
display: block;
|
|
||||||
font-size: 0;
|
.quoteStyle-withCaption--author:empty {
|
||||||
content: " ";
|
direction: rtl;
|
||||||
clear: both;
|
|
||||||
height: 0;
|
|
||||||
}
|
}
|
||||||
.quoteStyle-withCaption--author {
|
.quoteStyle-withCaption--author {
|
||||||
|
|
||||||
|
margin: 2.5em 100px !important;
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 17px;
|
font-size: 1.38em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #000;
|
color: #000;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.quoteStyle-simple--text,
|
||||||
|
.quoteStyle-withCaption--blockquote,
|
||||||
|
.quoteStyle-withPhoto--quote {
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 1.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-simple--text,
|
||||||
|
.quoteStyle-withCaption--blockquote
|
||||||
|
{
|
||||||
|
margin: 2.5em 100px;
|
||||||
|
padding: 1.5em 2.0em !important;
|
||||||
|
background: #FBFBFB;
|
||||||
|
}
|
||||||
|
|
||||||
.quoteStyle-withCaption--blockquote:focus,
|
.quoteStyle-withCaption--blockquote:focus,
|
||||||
.quoteStyle-withCaption--author:focus {
|
.quoteStyle-withCaption--author:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.quoteStyle-simple--text:empty::before,
|
||||||
|
.quoteStyle-withCaption--blockquote:empty::before,
|
||||||
|
.quoteStyle-withPhoto--quote:empty::before
|
||||||
|
{
|
||||||
|
content : 'Введите цитату';
|
||||||
|
color: #818BA1;
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: opacity 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-withCaption--author:empty::before
|
||||||
|
{
|
||||||
|
content : 'Введите имя автора';
|
||||||
|
color: #A5ABBC;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 200ms ease;
|
||||||
|
}
|
||||||
|
.quoteStyle-withPhoto--author:empty::before {
|
||||||
|
content : 'Введите имя автора';
|
||||||
|
color: #000;
|
||||||
|
opacity: .8;
|
||||||
|
transition: opacity 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-simple--text:focus::before,
|
||||||
|
.quoteStyle-withCaption--blockquote:focus::before,
|
||||||
|
.quoteStyle-withPhoto--quote:focus::before
|
||||||
|
{
|
||||||
|
opacity: .1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-withCaption--author:focus::before,
|
||||||
|
.quoteStyle-withPhoto--author:focus::before
|
||||||
|
{
|
||||||
|
opacity: .1;
|
||||||
|
}
|
||||||
|
|
||||||
/** Quote with photo */
|
/** Quote with photo */
|
||||||
.ce_redactor .quoteStyle-withPhoto--wrapper {
|
.ce_redactor .quoteStyle-withPhoto--wrapper {
|
||||||
margin: 0px !important;
|
margin: 0;
|
||||||
padding: 4.5em 6.5em !important;
|
padding: 4.5em 8.5em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quoteStyle-withPhoto--photo {
|
.quoteStyle-withPhoto--photo {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border: 1px solid #8E8E8E;
|
text-align: center;
|
||||||
|
line-height: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 33px;
|
margin-right: 35px;
|
||||||
|
border: 3px dashed #D7E2EE;
|
||||||
|
}
|
||||||
|
.quoteStyle-withPhoto--photo:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #F0F3F6;
|
||||||
|
border: 3px dashed #D7E2EE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-withPhoto--photo:hover::after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-withPhoto--photo .ce-icon-picture {
|
||||||
|
font-family: "codex_editor";
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #8990AA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quoteStyle-withPhoto--author {
|
.quoteStyle-withPhoto--author {
|
||||||
font-size: 24px;
|
font-size: 1.56em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #000;
|
color: #000;
|
||||||
/*letter-spacing: 0px;*/
|
|
||||||
outline: none;
|
outline: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
.quoteStyle-withPhoto--job {
|
.quoteStyle-withPhoto--job {
|
||||||
font-weight: regular;
|
font-weight: regular;
|
||||||
font-size: 19px;
|
font-size: 1.38em;
|
||||||
color: #818BA1;
|
color: #818BA1;
|
||||||
/*letter-spacing: 0px;*/
|
|
||||||
outline: none;
|
outline: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.quoteStyle-withPhoto--job:empty::before {
|
||||||
|
content : 'Введите должность автора';
|
||||||
|
color: #A5ABBC;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-withPhoto--job:focus::before {
|
||||||
|
opacity: .1;
|
||||||
|
}
|
||||||
|
|
||||||
.quoteStyle-withPhoto--quote {
|
.quoteStyle-withPhoto--quote {
|
||||||
margin-top: 30px;
|
background: #FBFBFB;
|
||||||
|
margin-top: 45px;
|
||||||
|
line-height: 32px;
|
||||||
outline: none;
|
outline: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,8 +5,6 @@
|
||||||
|
|
||||||
var quoteTools = {
|
var quoteTools = {
|
||||||
|
|
||||||
captionPlaceholder : 'Введите имя автора',
|
|
||||||
jobPlacaholder : 'Введите должность',
|
|
||||||
/**
|
/**
|
||||||
* Make Quote from JSON datasets
|
* Make Quote from JSON datasets
|
||||||
*/
|
*/
|
||||||
|
@ -32,10 +30,14 @@ var quoteTools = {
|
||||||
tag = document.createElement('BLOCKQUOTE');
|
tag = document.createElement('BLOCKQUOTE');
|
||||||
|
|
||||||
tag.contentEditable = 'true';
|
tag.contentEditable = 'true';
|
||||||
|
|
||||||
tag.dataset.quoteStyle = 'simple';
|
tag.dataset.quoteStyle = 'simple';
|
||||||
tag.class = 'ce_quote--text';
|
|
||||||
|
tag.classList.add('ce_quote--text');
|
||||||
|
tag.classList.add('quoteStyle-simple--text');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return tag;
|
return tag;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -143,18 +145,12 @@ var quoteTools = {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setBlockHandler : function(block) {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
makeSimpleQuote : function(data) {
|
makeSimpleQuote : function(data) {
|
||||||
|
|
||||||
var wrapper = quoteTools.ui.blockquote();
|
var wrapper = quoteTools.ui.makeBlock('BLOCKQUOTE', ['quoteStyle-simple--text', 'ce_quote--text']);
|
||||||
|
|
||||||
wrapper.innerHTML = data.text || '';
|
wrapper.innerHTML = data.text || '';
|
||||||
|
|
||||||
wrapper.classList.add('ce_quote--text');
|
|
||||||
|
|
||||||
wrapper.dataset.quoteStyle = 'simple';
|
wrapper.dataset.quoteStyle = 'simple';
|
||||||
|
|
||||||
wrapper.contentEditable = 'true';
|
wrapper.contentEditable = 'true';
|
||||||
|
@ -176,11 +172,7 @@ var quoteTools = {
|
||||||
/* make Author contentEditable */
|
/* make Author contentEditable */
|
||||||
author.contentEditable = 'true';
|
author.contentEditable = 'true';
|
||||||
|
|
||||||
author.textContent = data.author || quoteTools.captionPlaceholder;
|
author.textContent = data.author;
|
||||||
|
|
||||||
quoteTools.ui.mousedown(author, quoteTools.captionPlaceholder);
|
|
||||||
quoteTools.ui.keyPressed(author, quoteTools.captionPlaceholder);
|
|
||||||
|
|
||||||
|
|
||||||
/* Appending created components */
|
/* Appending created components */
|
||||||
wrapper.dataset.quoteStyle = 'withCaption';
|
wrapper.dataset.quoteStyle = 'withCaption';
|
||||||
|
@ -195,27 +187,22 @@ var quoteTools = {
|
||||||
makeQuoteWithPhoto : function(data) {
|
makeQuoteWithPhoto : function(data) {
|
||||||
|
|
||||||
var wrapper = quoteTools.ui.blockquote();
|
var wrapper = quoteTools.ui.blockquote();
|
||||||
photo = quoteTools.ui.makeBlock('IMG', ['quoteStyle-withPhoto--photo']),
|
photo = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--photo']),
|
||||||
author = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--author', 'ce_quote--author']),
|
author = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--author', 'ce_quote--author']),
|
||||||
job = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--job', 'ce_quote--job']),
|
job = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--job', 'ce_quote--job']),
|
||||||
quote = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--quote', 'ce_quote--text'])
|
quote = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--quote', 'ce_quote--text'])
|
||||||
|
|
||||||
/* Default Image src */
|
/* Default Image src */
|
||||||
photo.src = data.photo || 'plugins/ceditor-tool-quote/img/codex.png';
|
var icon = quoteTools.ui.makeBlock('SPAN', ['ce-icon-picture']);
|
||||||
|
photo.appendChild(icon);
|
||||||
|
|
||||||
/* make author block contentEditable */
|
/* make author block contentEditable */
|
||||||
author.contentEditable = 'true';
|
author.contentEditable = 'true';
|
||||||
author.textContent = data.author || quoteTools.captionPlaceholder;
|
author.textContent = data.author;
|
||||||
|
|
||||||
quoteTools.ui.mousedown(author, quoteTools.captionPlaceholder);
|
|
||||||
quoteTools.ui.keyPressed(author, quoteTools.captionPlaceholder);
|
|
||||||
|
|
||||||
/* Author's position and job */
|
/* Author's position and job */
|
||||||
job.contentEditable = 'true';
|
job.contentEditable = 'true';
|
||||||
job.textContent = data.job || quoteTools.jobPlacaholder;
|
job.textContent = data.job;
|
||||||
|
|
||||||
quoteTools.ui.mousedown(job, quoteTools.jobPlacaholder);
|
|
||||||
quoteTools.ui.keyPressed(job, quoteTools.jobPlacaholder);
|
|
||||||
|
|
||||||
var authorsWrapper = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--authorWrapper']);
|
var authorsWrapper = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--authorWrapper']);
|
||||||
authorsWrapper.appendChild(author);
|
authorsWrapper.appendChild(author);
|
||||||
|
@ -304,48 +291,8 @@ quoteTools.ui = {
|
||||||
}
|
}
|
||||||
return el;
|
return el;
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
mousedown : function(block, placeholder) {
|
|
||||||
|
|
||||||
block.addEventListener('focus', function() {
|
|
||||||
|
|
||||||
quoteTools.ui.clear(block, placeholder);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
keyPressed : function(block, placeholder) {
|
|
||||||
|
|
||||||
block.addEventListener('keydown', function(){
|
|
||||||
|
|
||||||
quoteTools.ui.fillbyPlaceholder(block, placeholder);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
clear : function(block, placeholder) {
|
|
||||||
|
|
||||||
if ( block.textContent == placeholder) {
|
|
||||||
block.innerHTML = '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
fillbyPlaceholder : function(block, placeholder) {
|
|
||||||
|
|
||||||
quoteTools.ui.clear(block, placeholder);
|
|
||||||
|
|
||||||
setTimeout( function() {
|
|
||||||
|
|
||||||
if (block.textContent == '') {
|
|
||||||
block.textContent = placeholder;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}, 10);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
cEditor.tools.quote = {
|
cEditor.tools.quote = {
|
||||||
|
|
Loading…
Reference in a new issue