stefankoelle/icloud-contacts-sync
1
0
Fork 0
mirror of https://github.com/skoelle/icloud-contacts-sync.git synced 2026-09-17 15:30:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

web clickable photo

Browse Source
This commit is contained in:
stefankoelle
2026-08-05 17:41:49 +02:00
parent eacdefaacf
commit 4155d029bb
1 changed files with 37 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/templates/contact.html
+37 -1
View File
@@ -190,6 +190,36 @@
font-style: italic; font-style: italic;
font-size: 0.875rem; font-size: 0.875rem;
} }
.photo-dialog {
border: none;
border-radius: 12px;
padding: 0;
max-width: 90vw;
max-height: 90vh;
background: transparent;
}
.photo-dialog::backdrop {
background: rgba(0, 0, 0, 0.85);
}
.photo-dialog img {
display: block;
max-width: 90vw;
max-height: 85vh;
border-radius: 8px;
object-fit: contain;
}
.contact-photo {
cursor: pointer;
transition: transform 0.15s ease;
}
.contact-photo:hover {
transform: scale(1.03);
}
</style> </style>
</head> </head>
<body> <body>
@@ -211,7 +241,7 @@
</div> </div>
<div style="display:flex;flex-direction:column;align-items:center;gap:0.3rem"> <div style="display:flex;flex-direction:column;align-items:center;gap:0.3rem">
{% if contact.photo_url %} {% if contact.photo_url %}
<img src="{{ contact.photo_url }}" alt="Foto" class="contact-photo" onerror="this.style.display='none'"> <img src="{{ contact.photo_url }}" alt="Foto" class="contact-photo" onerror="this.style.display='none'" onclick="document.getElementById('photo-dialog').showModal()">
{% endif %} {% endif %}
{% if show_all and contact.account %} {% if show_all and contact.account %}
<span class="badge">Account: {{ contact.account }}</span> <span class="badge">Account: {{ contact.account }}</span>
@@ -320,5 +350,11 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
{% if contact.photo_url %}
<dialog id="photo-dialog" class="photo-dialog" onclick="if(event.target===this)this.close()">
<img src="{{ contact.photo_url }}" alt="Foto" onerror="this.parentElement.close()">
</dialog>
{% endif %}
</body> </body>
</html> </html>