setting up bounds
This commit is contained in:
francois.lutran
+3
-3
@@ -10,12 +10,12 @@
|
||||
<script type="text/javascript" src="scripts/mythoughts.js"></script>
|
||||
<link rel="shortcut icon" href="images/favicon2.ico" />
|
||||
<title>My Thoughts</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script type="text/javascript">
|
||||
var oMyThoughts = new MyThoughts(asGlobalVars);
|
||||
$(document).ready(oMyThoughts.init);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
+11
-2
@@ -5,6 +5,7 @@
|
||||
<span class="page_nb">1</span>
|
||||
<A class="fa fa-next"></a>
|
||||
</div>
|
||||
<div id="editor_container">
|
||||
<div id="editor">
|
||||
<p>So, I'm there, wondering about myself and my future - such a luxury by the way - when suddenly, someone approaches. mid-40s i'd say, elegant cold women, the kind you've learned not to talk to, to eventually avoid feeling repressed, or bad for yourself, or both.</p>
|
||||
<p>Anyhow, it would seem that in this particular situation, the choice wasn't given to me to decide whether or not to talk to that precise women. She seats down next to me and engage a conversation. 'How is it you're here today?' I'm already regretting not having gone away when i still had the chance.</p>
|
||||
@@ -16,6 +17,7 @@
|
||||
<p>In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
oMyThoughts.pageInit = function(asHash, bFirstPage)
|
||||
{
|
||||
@@ -37,10 +39,17 @@
|
||||
}
|
||||
});
|
||||
|
||||
quill.on('text-change', function(delta, oldDelta, source) {
|
||||
oQuill.on('text-change', function(delta, oldDelta, source) {
|
||||
if(source == 'user')
|
||||
{
|
||||
|
||||
var range = oQuill.getSelection();
|
||||
if(range)
|
||||
{
|
||||
var oBound = oQuill.getBounds(range.index, range.length);
|
||||
$('#editor').append($('<div>', {style:'background:red;width:1px;height:'+(oBound.bottom - oBound.top)+'px;position:absolute;top:'+oBound.top+'px;left:'+oBound.left+'px;'}));
|
||||
$('#editor').append($('<div>', {style:'background:red;width:1px;height:10px;position:absolute;top:0px;left:0px;'}));
|
||||
$('#editor').append($('<div>', {style:'background:red;width:1px;height:10px;position:absolute;top:'+($('#editor').height() - 10)+'px;left:'+($('#editor').width() - 1)+'px;'}));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
/* Log on */
|
||||
|
||||
#logon {
|
||||
width: 496px;
|
||||
height: 225px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: auto;
|
||||
background: transparent url('../images/bubble_inverted.png') 0 0 no-repeat;
|
||||
}
|
||||
|
||||
#logon, #logon input {
|
||||
font-size:30px;
|
||||
border:none;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
#logon .credentials {
|
||||
margin:45px 0 0 0 ;
|
||||
}
|
||||
|
||||
#logon .credentials input {
|
||||
width: 305px;
|
||||
padding:0 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
#logon input.connection {
|
||||
position:absolute;
|
||||
left:374px;
|
||||
top:140px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#logon .register {
|
||||
margin-top:60px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,6 +1,94 @@
|
||||
#write {
|
||||
|
||||
height:100%;
|
||||
|
||||
#editor_container {
|
||||
|
||||
padding:1em;
|
||||
height: calc(100% - 4em);
|
||||
overflow: hidden;
|
||||
|
||||
.ql-container {
|
||||
font-family: 'Indie Flower', cursive;
|
||||
font-size: 16px;
|
||||
padding:0;
|
||||
overflow: hidden;
|
||||
|
||||
.ql-editor {
|
||||
padding:0;
|
||||
height:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Write - Editor */
|
||||
|
||||
#write #editor div {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#write #editor p {
|
||||
text-indent: 1.5em;
|
||||
margin:1em 0 0 0;
|
||||
padding:0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
#write .jqte_editor p:FIRST-CHILD, #write .jqte_toolbar {
|
||||
margin-top:0.5em;
|
||||
}
|
||||
|
||||
/* Write - Toolbar */
|
||||
|
||||
#write #nav {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
left:0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#write .fa-prev, #write .page_nb, #write .fa-next {
|
||||
color:#997E60;
|
||||
font-size:1.5em;
|
||||
margin:0 0 0.5em 0;
|
||||
cursor:pointer;
|
||||
}
|
||||
#write .page_nb {
|
||||
font-size: 1em;
|
||||
vertical-align:0.25em;
|
||||
cursor: default;
|
||||
padding-left:0.5em;
|
||||
padding-right:0.5em;
|
||||
}
|
||||
#write .fa-prev:hover, #write .fa-next:hover {
|
||||
color:#584127;
|
||||
}
|
||||
#write .fa-prev.disabled, #write .fa-next.disabled,
|
||||
#write .fa-prev.disabled:hover, #write .fa-next.disabled:hover {
|
||||
color:#EDE0D0;
|
||||
}
|
||||
|
||||
/* Write - Placeholder */
|
||||
|
||||
#write .jqte_placeholder_text {
|
||||
top:1em;
|
||||
left:0;
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
|
||||
#write .jqte_focused .jqte_placeholder_text {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Write - Feedback */
|
||||
|
||||
#write_feedback {
|
||||
position:absolute;
|
||||
top: -1.5em;
|
||||
right:0.5em;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2
-120
@@ -18,8 +18,10 @@ red lines : #EC3B45
|
||||
|
||||
/* Pages */
|
||||
|
||||
@import 'logon';
|
||||
@import 'write';
|
||||
|
||||
|
||||
/* General */
|
||||
|
||||
body {
|
||||
@@ -230,126 +232,6 @@ a.calendar_direction {
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
/* Log on */
|
||||
|
||||
#logon {
|
||||
width: 496px;
|
||||
height: 225px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: auto;
|
||||
background: transparent url('../images/bubble_inverted.png') 0 0 no-repeat;
|
||||
}
|
||||
|
||||
#logon, #logon input {
|
||||
font-size:30px;
|
||||
border:none;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
#logon .credentials {
|
||||
margin:45px 0 0 0 ;
|
||||
}
|
||||
|
||||
#logon .credentials input {
|
||||
width: 305px;
|
||||
padding:0 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
#logon input.connection {
|
||||
position:absolute;
|
||||
left:374px;
|
||||
top:140px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#logon .register {
|
||||
margin-top:60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Write */
|
||||
|
||||
/* Write - Container */
|
||||
|
||||
#write {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
|
||||
/* Write - Editor */
|
||||
|
||||
#write #editor div {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#write #editor p {
|
||||
text-indent: 1.5em;
|
||||
margin:1em 0 0 0;
|
||||
padding:0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
#write .jqte_editor p:FIRST-CHILD, #write .jqte_toolbar {
|
||||
margin-top:0.5em;
|
||||
}
|
||||
|
||||
/* Write - Toolbar */
|
||||
|
||||
#write #nav {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
left:0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#write .fa-prev, #write .page_nb, #write .fa-next {
|
||||
color:#997E60;
|
||||
font-size:1.5em;
|
||||
margin:0 0 0.5em 0;
|
||||
cursor:pointer;
|
||||
}
|
||||
#write .page_nb {
|
||||
font-size: 1em;
|
||||
vertical-align:0.25em;
|
||||
cursor: default;
|
||||
padding-left:0.5em;
|
||||
padding-right:0.5em;
|
||||
}
|
||||
#write .fa-prev:hover, #write .fa-next:hover {
|
||||
color:#584127;
|
||||
}
|
||||
#write .fa-prev.disabled, #write .fa-next.disabled,
|
||||
#write .fa-prev.disabled:hover, #write .fa-next.disabled:hover {
|
||||
color:#EDE0D0;
|
||||
}
|
||||
|
||||
/* Write - Placeholder */
|
||||
|
||||
#write .jqte_placeholder_text {
|
||||
top:1em;
|
||||
left:0;
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
|
||||
#write .jqte_focused .jqte_placeholder_text {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Write - Feedback */
|
||||
|
||||
#write_feedback {
|
||||
position:absolute;
|
||||
top: -1.5em;
|
||||
right:0.5em;
|
||||
}
|
||||
|
||||
/* Read */
|
||||
|
||||
div.read {
|
||||
|
||||
Reference in New Issue
Block a user