#418 ClaimedByBothPoets

GanjooRazor/Pages/_QuotedPoemPartial.cshtml

@@ -4,7 +4,12 @@
     Layout = null;
 }
 
-<div class="inlinesimi">
+<div class="@Model.BlockClass">
+    @if(Model.GanjoorQuotedPoem.ClaimedByBothPoets)
+    {
+        <div class="ribbon">منتسب به هر دو سخنور</div>
+    }
+    
     @if (Model.GanjoorQuotedPoem.IsPriorToRelated)
     {
         <div class="poet-pic-wrap">

GanjooRazor/Pages/_QuotedPoemPartial.cshtml.cs

@@ -10,5 +10,13 @@ namespace GanjooRazor.Pages
         public string PoetImageUrl { get; set; }
 
         public string PoetNickName { get; set; }
+
+        public string BlockClass
+        {
+            get
+            {
+                return GanjoorQuotedPoem.ClaimedByBothPoets ? "inlinesimi ribbon-parent" : "inlinesimi";
+            }
+        }
     }
 }

GanjooRazor/wwwroot/css/p8.css

@@ -866,6 +866,7 @@ ol {
     animation: logo-spin 1s 5 cubic-bezier(.6,-0.28,.74,.05);
 }
 
+
 /* Change styles for span and cancel button on extra small screens */
 @media screen and (max-width: 300px) {
     span.psw {
@@ -2020,7 +2021,42 @@ mark {
         background: yellow;
     }
 
+.ribbon-parent {
+    overflow: hidden; /* required */
+    position: relative; /* required  for demo*/
+}
 
+.ribbon {
+    margin: 0;
+    padding: 0;
+    background: rebeccapurple;
+    color: white;
+    padding: 0.5em 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translateX(30%) translateY(0%) rotate(45deg);
+    transform-origin: top left;
+}
+
+    .ribbon:before,
+    .ribbon:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        margin: 0 -1px; /* tweak */
+        width: 100%;
+        height: 100%;
+        background: rebeccapurple;
+    }
+
+    .ribbon:before {
+        right: 100%;
+    }
+
+    .ribbon:after {
+        left: 100%;
+    }
 
 @media(prefers-color-scheme: dark) {
     body {