anas/divan
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

#433 improvement

Browse Source 
Related Work Items: #4
This commit is contained in:
Hamid Reza Mohammadi 2024-04-10 13:54:30 +03:30
parent ac78ab76fc
commit 65960e9d9f
2 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
GanjooRazor/Pages/_GanjoorPagePartial.cshtml
View File

@ -757,13 +757,14 @@
<div class="width-100per">
<div class="related-image-container-main">
<a target="_blank" href="@Html.Raw(image.TargetPageUrl)">
<img src="@Html.Raw(image.ThumbnailImageUrl)" alt="@image.AltText" loading="lazy" class="related-image-main">
<div class="main-image-container">
<div class="main-image-ribbon">منبع کاغذی گنجور</div>
<img src="@Html.Raw(image.ThumbnailImageUrl)" alt="@image.AltText" loading="lazy" class="main-image-source">
<div class="related-image-is-text-source">
<div class="width-100per">@image.AltText.ToPersianNumbers()</div>
</div>
</div>
</a>
<div class="related-image-is-text-source">
<div class="width-100per background-darkgreen"><strong>منبع کاغذی گنجور</strong></div>
<hr />
<div class="width-100per"><a target="_blank" href="@Html.Raw(image.TargetPageUrl)">@image.AltText.ToPersianNumbers()</a></div>
</div>
</div>
</div>

29
GanjooRazor/wwwroot/css/p8.css
View File

@ -2137,6 +2137,35 @@ mark {
color: white !important;
}
.main-image-container {
position: relative;
display: inline-block; /* Changed to inline-block for better control */
width: fit-content;
border: 5px solid darkgreen;
}
.main-image-ribbon {
position: absolute; /* Changed to absolute for precise positioning */
top: 0; /* Align to the top edge of the container */
right: 0; /* Align to the right edge of the container */
background-color: darkgreen;
color: white;
padding: 5px 20px;
font-size: 16px;
font-weight: bold;
/* Clip the corners */
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%, 10% 50%);
z-index: 10;
}
.main-image-source {
display: block;
max-width: 100%;
height: auto;
}
@media(prefers-color-scheme: dark) {
body {
background: rgba(0, 0, 0, 0.9);