docs: #327 some UI improvements and utilities in the editor

This commit is contained in:
Hamid Reza Mohammadi 2022-06-23 12:06:51 +04:30
parent ceddacfe9e
commit 803e70bec7
26 changed files with 116 additions and 51 deletions

View File

@ -28,7 +28,7 @@
versePositions.push($(newVersePosition).val());
if ($(newElementName).text() != $(oldElementName).text() || $(checkVIndex).is(":checked") || $(newVersePosition).val() != $(oldVersePosition).val()) {
verseOrderText.push(i.toString() + 'TextSeparator' + $(newElementName).text());
if($(checkVIndex).is(":checked")){
if ($(checkVIndex).is(":checked")) {
verseOrderMarkedForDelete.push(i);
}
}
@ -228,10 +228,10 @@ else
{
<tr>
<td>
<p style="color:red">@Model.MyLastEdit.OriginalTitle</p>
<p class="red-color">@Model.MyLastEdit.OriginalTitle</p>
</td>
<td>
<p style="color:green">@Model.MyLastEdit.Title</p>
<p class="green-color">@Model.MyLastEdit.Title</p>
</td>
</tr>
}
@ -239,10 +239,10 @@ else
{
<tr>
<td>
<p style="color:red">@Model.MyLastEdit.OriginalRhythm</p>
<p class="red-color">@Model.MyLastEdit.OriginalRhythm</p>
</td>
<td>
<p style="color:green">@Model.MyLastEdit.Rhythm</p>
<p class="green-color">@Model.MyLastEdit.Rhythm</p>
</td>
</tr>
}
@ -250,10 +250,10 @@ else
{
<tr>
<td>
<p style="color:red">@Model.MyLastEdit.OriginalRhythm2</p>
<p class="red-color">@Model.MyLastEdit.OriginalRhythm2</p>
</td>
<td>
<p style="color:green">@Model.MyLastEdit.Rhythm2</p>
<p class="green-color">@Model.MyLastEdit.Rhythm2</p>
</td>
</tr>
}
@ -267,7 +267,7 @@ else
<p>@verse.OriginalText</p>
</td>
<td>
<p style="color:red">باید حذف شود</p>
<p class="red-color">باید حذف شود</p>
</td>
</tr>
}
@ -275,10 +275,10 @@ else
{
<tr>
<td>
<p style="color:red">@verse.OriginalText</p>
<p class="red-color">@verse.OriginalText</p>
</td>
<td>
<p style="color:green">@verse.Text</p>
<p class="green-color">@verse.Text</p>
</td>
</tr>
}
@ -295,8 +295,8 @@ else
}
<tr>
<td colspan="2">
<a role="button" id="deletecorrections" style="cursor:pointer;width:100%;color:white;background-color:red;display:block" onclick="deletePoemCorrections(@Model.PageInformation.Poem.Id)">انصراف و حذف این ویرایش</a>
<td colspan="2" class="td-button-container">
<a role="button" id="deletecorrections" class="editor-button background-red" onclick="deletePoemCorrections(@Model.PageInformation.Poem.Id)">انصراف و حذف این ویرایش</a>
</td>
</tr>
@ -337,6 +337,23 @@ else
</td>
</tr>
}
@if (Model.CanAssignRhythms)
{
<tr>
<td class="td-button-container">
<a role="button" href="#rhythms-section" class="editor-button background-gray">لغزش به بخش وزن</a>
</td>
</tr>
}
else
{
<tr>
<td class="td-button-container">
<a role="button" href="#poem-sections" class="editor-button background-gray">لغزش به بخش قطعات</a>
</td>
</tr>
}
@if (Model.CanEdit && !Model.ShowAdminOps)
{
<tr>
@ -390,7 +407,7 @@ else
@if (Model.MyLastEdit != null && Model.MyLastEdit.Title != null)
{
<div id="id-0" name="id-0" contenteditable="true" style="background-color:white">@Model.MyLastEdit.Title</div>
<div id="id-0" name="id-0" contenteditable="true" class="background-white">@Model.MyLastEdit.Title</div>
<script>
$(document).ready(function() {
editorcompare(0);
@ -402,7 +419,7 @@ else
}
else
{
<div type="text" id="id-0" name="id-0" contenteditable="true" style="background-color:white">@Model.PageInformation.Poem.Title</div>
<div type="text" id="id-0" name="id-0" contenteditable="true" class="background-white">@Model.PageInformation.Poem.Title</div>
<script>
document.getElementById("id-0").addEventListener("input", function() {
editorcompare(0)
@ -453,7 +470,7 @@ else
<td>
@if (Model.MyLastEdit != null && Model.MyLastEdit.VerseOrderText != null && Model.MyLastEdit.VerseOrderText.Where(v => v.VORder == verse.VOrder).Any())
{
<div id="id-@($"{verse.VOrder}")" name="name-@($"{verse.VOrder}")" contenteditable="true" style="background-color:white">@Model.MyLastEdit.VerseOrderText.Where(v => v.VORder == verse.VOrder).First().Text</div>
<div id="id-@($"{verse.VOrder}")" name="name-@($"{verse.VOrder}")" contenteditable="true" class="background-white">@Model.MyLastEdit.VerseOrderText.Where(v => v.VORder == verse.VOrder).First().Text</div>
<script>
@ -467,7 +484,7 @@ else
}
else
{
<div id="id-@($"{verse.VOrder}")" name="name-@($"{verse.VOrder}")" contenteditable="true" style="background-color:white">@verse.Text</div>
<div id="id-@($"{verse.VOrder}")" name="name-@($"{verse.VOrder}")" contenteditable="true" class="background-white">@verse.Text</div>
<script>
document.getElementById("id-@($"{verse.VOrder}")").addEventListener("input", function() {
editorcompare(@verse.VOrder)
@ -501,14 +518,14 @@ else
</td>
</tr>
<tr>
<tr>
<td>
نوع
</td>
</tr>
<tr>
<td>
<select id="versepostion-@($"{verse.VOrder}")" name="versepostion-@($"{verse.VOrder}")">
@if (Model.MyLastEdit != null && Model.MyLastEdit.VerseOrderText != null && Model.MyLastEdit.VerseOrderText.Where(v => v.VORder == verse.VOrder).Any())
{
@ -543,16 +560,22 @@ else
{
<input type="hidden" id="versepostion-original-@($"{verse.VOrder}")" name="versepostion-original-@($"{verse.VOrder}")" value="@verse.VersePosition" />
}
</td>
</tr>
<tr>
<td class="td-button-container">
<a role="button" href="#savecorrections" class="editor-button background-gray">لغزش به دکمهٔ ذخیره</a>
</td>
</tr>
@if (Model.ShowAdminOps && verse.VOrder > 1 && verse.VersePosition != RMuseum.Models.Ganjoor.VersePosition.Left)
{
<tr>
<td>
<a role="button" id="breakpoem-@verse.VOrder" style="cursor:pointer;width:100%;color:white;background-color:red;display:block" onclick="breakPoem(@Model.PageInformation.Poem.Id, @verse.VOrder, '@verse.Text')">شکستن از اینجا</a>
<td class="td-button-container">
<a role="button" id="breakpoem-@verse.VOrder" class="editor-button background-red" onclick="breakPoem(@Model.PageInformation.Poem.Id, @verse.VOrder, '@verse.Text')">شکستن از اینجا</a>
</td>
</tr>
}
@ -567,7 +590,7 @@ else
</td>
</tr>
}
<tr>
<tr id="rhythms-section">
<td>
وزن فعلی:
</td>
@ -774,7 +797,8 @@ else
}
else
if (Model.PageInformation.Poem.Sections.Count(s => s.SectionType == RMuseum.Models.Ganjoor.PoemSectionType.WholePoem && s.VerseType == RMuseum.Models.Ganjoor.VersePoemSectionType.First) == 1)
foreach (var poemSetion in Model.PageInformation.Poem.Sections.Where(s => s.SectionType == RMuseum.Models.Ganjoor.PoemSectionType.WholePoem && s.VerseType == RMuseum.Models.Ganjoor.VersePoemSectionType.First).ToList())
{
foreach (var poemSetion in Model.PageInformation.Poem.Sections.Where(s => s.SectionType == RMuseum.Models.Ganjoor.PoemSectionType.WholePoem && s.VerseType == RMuseum.Models.Ganjoor.VersePoemSectionType.First).ToList())
{
<tr>
<td>
@ -784,8 +808,9 @@ else
</td>
</tr>
}
}
<tr>
<tr id="poem-sections">
<td>
<a href="/User/AllPoemSections?id=@Model.PageInformation.Id" class="pagebutton">
همهٔ قطعات شعر
@ -813,7 +838,7 @@ else
}
@if (Model.PageInformation.Poem.Next != null)
{
<tr>
<tr>
<td>
@if (Model.ShowAdminOps)
{
@ -856,14 +881,20 @@ else
}
<tr>
<td>
<a role="button" id="savecorrections" style="cursor:pointer;width:100%;color:white;background-color:green;display:block" onclick="savePoemCorrections(@Model.PageInformation.Poem.Id, @Model.PageInformation.Poem.Verses.Length)">ذخیره</a>
<td class="td-button-container">
<a role="button" id="savecorrections" class="editor-button background-green" onclick="savePoemCorrections(@Model.PageInformation.Poem.Id, @Model.PageInformation.Poem.Verses.Length)">ذخیره</a>
</td>
</tr>
<tr>
<td><p id="saving">&nbsp;</p></td>
</tr>
<tr>
<td class="td-button-container">
<a role="button" href="#" class="editor-button background-gray">لغزش به بالای صفحه</a>
</td>
</tr>
</table>

View File

@ -15,7 +15,7 @@
گنجور » نمایش خوانش
</title>
<link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
<link href="~/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="~/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
<script>

View File

@ -11,7 +11,7 @@
<title>انتخاب قطعهٔ موسیقی مرتبط با شعر از بیپتونز</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/spotify.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery/dist/jquery.min.js"></script>

View File

@ -14,7 +14,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -12,7 +12,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -10,7 +10,7 @@
<title>انتخاب قطعه‌ای از برنامهٔ گلها مرتبط با این شعر</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/spotify.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/golha.js"></script>

View File

@ -14,7 +14,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -12,7 +12,7 @@
<title>
@Html.Raw(ViewData["Title"])
</title>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -13,7 +13,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hdr">

View File

@ -12,7 +12,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="شاعران و نویسندگان گنجور روی نقشهٔ جغرافیایی" />
<meta charset="utf-8" />
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/css/leaflet.css" />
<style>
.leaflet-container {

View File

@ -11,7 +11,7 @@
<title>
@Html.Raw(ViewData["Title"])
</title>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -11,7 +11,7 @@
<title>پیشنهاد شعر مرتبط با تصویر</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/spotify.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery/dist//jquery.min.js"></script>

View File

@ -12,7 +12,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<title>اطلاعات رتبه‌بندی خوانش‌های شعر</title>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
</head>
<body>

View File

@ -11,7 +11,7 @@
<meta name="robots" content="noindex, nofollow" />
<title>درخواست حذف حاشیه</title>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<style>
label {
width: 100px;

View File

@ -13,7 +13,7 @@
<meta name="robots" content="noindex, nofollow" />
<title>گزارش خطا در خوانش</title>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<style>
label {
width: 100px;

View File

@ -12,7 +12,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hdr">

View File

@ -15,7 +15,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -10,7 +10,7 @@
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -9,7 +9,7 @@
</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -12,7 +12,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hdr">

View File

@ -13,7 +13,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -11,7 +11,7 @@
<title>انتخاب قطعهٔ موسیقی مرتبط با شعر از اسپاتیفای</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link href="/css/spotify.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery/dist/jquery.min.js"></script>

View File

@ -14,7 +14,7 @@
گنجور » برگردان‌ها و نویس‌های شعر
</title>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<link href="~/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="~/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
</head>

View File

@ -14,7 +14,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -15,7 +15,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=42" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=43" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -1652,4 +1652,38 @@ fieldset {
.padding-20px{
padding: 20px;
}
.td-button-container {
padding: 4px;
}
.editor-button {
cursor: pointer;
color: white !important;
display: block;
text-align: center;
border-color: #300;
border-radius: 5px;
box-shadow: 0 5px 0.3rem rgba(0, 0, 0, 0.3);
width: 100%;
padding: 3px;
}
.background-green {
background-color: green;
}
.background-red {
background-color: red;
}
.background-gray {
background-color: slategray;
}
.background-white {
background-color: white;
}