myriation/keyoxide-web
1
0
Fork 0
forked from Mirrors/keyoxide-web
Code Pull requests Activity

Redesign profile, include avatar

Browse source
This commit is contained in:
Yarmo Mackenbach 2020-06-30 08:32:15 +02:00
parent c76fad6ecf
commit b2af1b38b1
5 changed files with 24 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/img/avatar_placeholder.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

2
assets/scripts.js
View file

@ -194,6 +194,8 @@ async function displayProfile(opts) {
let userData = keyData.user.user.userId; let userData = keyData.user.user.userId;
document.body.querySelector('#profileName').innerHTML = userData.name; document.body.querySelector('#profileName').innerHTML = userData.name;
document.body.querySelector('#profileAvatar').style = "";
document.body.querySelector('#profileAvatar').src = `https://www.gravatar.com/avatar/${SparkMD5.hash(userData.email)}?s=128&d=mm`;
document.title = `${userData.name} - Keyoxide`; document.title = `${userData.name} - Keyoxide`;
for (var i = 0; i < keyData.notations.length; i++) { for (var i = 0; i < keyData.notations.length; i++) {

1
assets/spark-md5.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

15
assets/styles.css
View file

@ -118,6 +118,21 @@ input[type="submit"] {
text-align: center; text-align: center;
} }
#profileHeader {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
margin-bottom: 32px;
}
#profileAvatar {
border-radius: 100%;
margin-right: 32px;
}
#profileName {
font-size: 1.6em;
font-weight: bold;
}
.profileDataItem { .profileDataItem {
position: relative; position: relative;
display: flex; display: flex;

7
pages/profile.html
View file

@ -9,10 +9,14 @@
</head> </head>
<body> <body>
<div class="container container--profile"> <div class="container container--profile">
<h1 id="profileName"></h1> <!-- <h1 id="profileName"></h1> -->
<div class="content"> <div class="content">
<span id="profileUid" style="display: none;">%UID%</span> <span id="profileUid" style="display: none;">%UID%</span>
<span id="profileMode" style="display: none;">%MODE%</span> <span id="profileMode" style="display: none;">%MODE%</span>
<div id="profileHeader">
<img id="profileAvatar" src="/assets/img/avatar_placeholder.png" alt="avatar" style="display: none">
<p id="profileName"></p>
</div>
<div id="profileData"><p>Loading keys &amp; verifying proofs&hellip;</p></div> <div id="profileData"><p>Loading keys &amp; verifying proofs&hellip;</p></div>
</div> </div>
@ -24,5 +28,6 @@
</div> </div>
</body> </body>
<script src="/assets/openpgp.min.js"></script> <script src="/assets/openpgp.min.js"></script>
<script src="/assets/spark-md5.min.js"></script>
<script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script> <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
</html> </html>