mirror of
https://github.com/JanGross/quicknotes.git
synced 2025-11-30 23:37:16 +01:00
Don't trim long titles, and show them in more lines.
Reserve space for header icons, and so no layout occur when show that icons.
This commit is contained in:
Matias De lellis
@@ -34,11 +34,10 @@
|
||||
min-height: 150px;
|
||||
width: 250px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px #c1c1c1;
|
||||
}
|
||||
|
||||
.quicknote:hover {
|
||||
box-shadow: 0px 0px 6px #808080;
|
||||
box-shadow: 0px 0px 4px #808080;
|
||||
}
|
||||
|
||||
#title-editable:empty:before {
|
||||
@@ -95,11 +94,9 @@
|
||||
}
|
||||
|
||||
#div-content .note-title {
|
||||
margin-right: 52px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.note-content {
|
||||
@@ -117,8 +114,9 @@
|
||||
background-size: 22px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
opacity: 0.54;
|
||||
border-radius: 50%;
|
||||
-moz-transition: opacity 0.218s ease-in;
|
||||
transition: opacity 0.218s ease-in;
|
||||
}
|
||||
|
||||
.icon-header-note:hover {
|
||||
@@ -127,12 +125,12 @@
|
||||
}
|
||||
|
||||
.hide-header-icon {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fixed-header-icon,
|
||||
.show-header-icon {
|
||||
display: block;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
@@ -227,7 +225,7 @@ div[contenteditable="true"] {
|
||||
}
|
||||
|
||||
#title-editable {
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
background: none;
|
||||
color: unset;
|
||||
border: none;
|
||||
|
||||
@@ -1,3 +1,24 @@
|
||||
/*
|
||||
* @copyright 2022 Matias De lellis <mati86dl@gmail.com>
|
||||
*
|
||||
* @author 2022 Matias De lellis <mati86dl@gmail.com>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
function QnColorPick(parentSelector, onSelectColor) {
|
||||
|
||||
@@ -361,7 +361,7 @@ View.prototype = {
|
||||
$('#notes-grid-div').on("click", ".icon-delete-note", function (event) {
|
||||
event.stopPropagation();
|
||||
|
||||
var gridnote = $(this).parent().parent().parent();
|
||||
var gridnote = $(this).parent().parent();
|
||||
var id = parseInt(gridnote.attr('data-id'), 10);
|
||||
|
||||
var note = self._notes.read(id);
|
||||
@@ -408,7 +408,7 @@ View.prototype = {
|
||||
event.stopPropagation();
|
||||
|
||||
var icon = $(this);
|
||||
var gridNote = icon.parent().parent().parent();
|
||||
var gridNote = icon.parent().parent();
|
||||
var id = parseInt(gridNote.attr('data-id'), 10);
|
||||
|
||||
var note = self._notes.read(id);
|
||||
@@ -432,7 +432,7 @@ View.prototype = {
|
||||
event.stopPropagation();
|
||||
|
||||
var icon = $(this);
|
||||
var gridNote = icon.parent().parent().parent();
|
||||
var gridNote = icon.parent().parent();
|
||||
var id = parseInt(gridNote.attr('data-id'), 10);
|
||||
|
||||
var note = self._notes.read(id);
|
||||
|
||||
@@ -10,16 +10,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class='note-body'>
|
||||
<div>
|
||||
{{#if isPinned}}
|
||||
<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
|
||||
{{else}}
|
||||
<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
{{/if}}
|
||||
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
|
||||
<div class='note-title'>
|
||||
{{{ title }}}
|
||||
</div>
|
||||
{{#if isPinned}}
|
||||
<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
|
||||
{{else}}
|
||||
<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
{{/if}}
|
||||
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
|
||||
<div class='note-title'>
|
||||
{{{ title }}}
|
||||
</div>
|
||||
<div class='note-content'>
|
||||
{{{ content }}}
|
||||
|
||||
@@ -13,21 +13,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class='note-body'>
|
||||
<div>
|
||||
{{#if sharedBy}}
|
||||
<div class="icon-header-note icon-share" title="{{tSB sharedBy.0.display_name}}"></div>
|
||||
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Leave this shared note"}}"></div>
|
||||
{{#if sharedBy}}
|
||||
<div class="icon-header-note icon-share" title="{{tSB sharedBy.0.display_name}}"></div>
|
||||
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Leave this shared note"}}"></div>
|
||||
{{else}}
|
||||
{{#if isPinned}}
|
||||
<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
|
||||
{{else}}
|
||||
{{#if isPinned}}
|
||||
<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
|
||||
{{else}}
|
||||
<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
{{/if}}
|
||||
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
|
||||
<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
{{/if}}
|
||||
<div class='note-title'>
|
||||
{{{ title }}}
|
||||
</div>
|
||||
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
|
||||
{{/if}}
|
||||
<div class='note-title'>
|
||||
{{{ title }}}
|
||||
</div>
|
||||
<div class='note-content'>
|
||||
{{{ content }}}
|
||||
@@ -56,10 +54,8 @@
|
||||
<div class='note-attachts'></div>
|
||||
</div>
|
||||
<div class='note-body'>
|
||||
<div>
|
||||
<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
<div contenteditable="true" id='title-editable' class='note-title' data-placeholder="{{t "quicknotes" "Title"}}"></div>
|
||||
</div>
|
||||
<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
<div contenteditable="true" id='title-editable' class='note-title' data-placeholder="{{t "quicknotes" "Title"}}"></div>
|
||||
<div contenteditable="true" id='content-editable' class='note-content'></div>
|
||||
<div class='note-shares'></div>
|
||||
<div class='note-tags'></div>
|
||||
|
||||
Reference in New Issue
Block a user