New Profile Header (#10185)
* init * profile header * merge * two headers * centerd * link fix * remove comments * whoops * Fix specs Co-authored-by: rhymes <rhymes@hey.com>
This commit is contained in:
ludwiczakpawel
GitHub
parent
ffd0ce790b
commit
74b398d876
19 changed files with 398 additions and 181 deletions
3
app/assets/images/behance.svg
Normal file
3
app/assets/images/behance.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.443 5.35c.639 0 1.23.05 1.77.198.49.09.958.275 1.377.544.394.247.689.594.885 1.039.197.445.295.99.295 1.583 0 .693-.147 1.286-.491 1.731-.295.446-.787.841-1.377 1.138.836.248 1.475.693 1.868 1.286.394.594.64 1.336.64 2.177 0 .693-.148 1.286-.394 1.781-.246.495-.639.94-1.082 1.237a5.079 5.079 0 01-1.573.692c-.59.149-1.18.248-1.77.248H1V5.35h6.443zm-.394 5.54c.541 0 .984-.148 1.328-.395.344-.247.492-.693.492-1.237 0-.297-.05-.594-.148-.791-.098-.198-.246-.347-.442-.495-.197-.099-.394-.198-.64-.247-.246-.05-.491-.05-.787-.05H4v3.216h3.05l-.001-.001zm.148 5.838c.295 0 .59-.05.836-.099.248-.047.483-.149.688-.297.2-.145.368-.33.492-.544.098-.247.197-.544.197-.89 0-.693-.197-1.188-.59-1.534-.394-.297-.935-.445-1.574-.445H4v3.81h3.197v-.001zm9.492-.05c.393.396.983.594 1.77.594.541 0 1.033-.148 1.426-.395.394-.297.64-.594.738-.891h2.41c-.394 1.187-.984 2.028-1.77 2.572-.788.495-1.722.792-2.853.792a5.754 5.754 0 01-2.115-.396 3.93 3.93 0 01-1.574-1.088 3.93 3.93 0 01-.983-1.633c-.246-.643-.345-1.335-.345-2.127 0-.742.099-1.434.345-2.078a5.34 5.34 0 011.032-1.682c.443-.445.984-.84 1.574-1.088a5.49 5.49 0 012.066-.396c.836 0 1.574.149 2.213.495.64.346 1.131.742 1.525 1.336a6.01 6.01 0 01.885 1.88c.098.692.147 1.385.098 2.176H16c0 .792.295 1.534.689 1.93v-.001zm3.098-5.194c-.344-.346-.885-.544-1.525-.544a2.34 2.34 0 00-1.082.247c-.295.149-.491.347-.688.545-.181.191-.3.432-.344.692-.05.248-.099.445-.099.643h4.426c-.098-.742-.344-1.236-.688-1.583zM15.459 6.29h5.508v1.336H15.46V6.29h-.001z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
3
app/assets/images/cake.svg
Normal file
3
app/assets/images/cake.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 6v3.999h3V6h2v3.999h3V6h2v3.999L19 10a3 3 0 012.995 2.824L22 13v1c0 1.014-.377 1.94-.999 2.645L21 21a1 1 0 01-1 1H4a1 1 0 01-1-1v-4.36a4.025 4.025 0 01-.972-2.182l-.022-.253L2 14v-1a3 3 0 012.824-2.995L5 10l1-.001V6h2zm11 6H5a1 1 0 00-.993.883L4 13v.971l.003.147a2 2 0 003.303 1.4c.363-.312.602-.744.674-1.218l.015-.153.005-.176c.036-1.248 1.827-1.293 1.989-.134l.01.134.004.147a2 2 0 003.992.031l.012-.282c.124-1.156 1.862-1.156 1.986 0l.012.282a2 2 0 003.99 0L20 14v-1a1 1 0 00-.883-.993L19 12zM7 1c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 11-2.898-.776C5.85 2.002 7 2.5 7 1zm5 0c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 01-2.898-.776C10.85 2.002 12 2.5 12 1zm5 0c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 01-2.898-.776C15.85 2.002 17 2.5 17 1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 862 B |
3
app/assets/images/dribbble.svg
Normal file
3
app/assets/images/dribbble.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.989 11.572a7.96 7.96 0 00-1.573-4.351c-.288.31-.595.6-.92.87-1 .83-2.115 1.507-3.313 2.01.167.35.32.689.455 1.009v.003c.038.09.075.18.11.27 1.514-.17 3.11-.108 4.657.101.206.028.4.058.584.088zm-9.385-7.45a46.175 46.175 0 012.692 4.27c1.223-.482 2.234-1.09 3.048-1.767.283-.233.548-.485.796-.755A7.968 7.968 0 0012 4c-.468 0-.935.04-1.396.121v.001zM4.253 9.997a29.21 29.21 0 002.04-.123 31.53 31.53 0 004.862-.822 54.369 54.369 0 00-2.7-4.227 8.018 8.018 0 00-4.202 5.172zm1.53 7.038c.388-.567.898-1.205 1.575-1.899 1.454-1.49 3.17-2.65 5.156-3.29l.062-.018c-.165-.364-.32-.689-.476-.995-1.836.535-3.77.869-5.697 1.042-.94.085-1.783.122-2.403.128a7.967 7.967 0 001.784 5.032h-.001zm9.222 2.38a35.945 35.945 0 00-1.632-5.709c-2.002.727-3.597 1.79-4.83 3.058a9.77 9.77 0 00-1.317 1.655A7.964 7.964 0 0012 20a7.976 7.976 0 003.005-.583v-.002zm1.873-1.075a7.998 7.998 0 002.987-4.87c-.34-.085-.771-.17-1.245-.236a12.02 12.02 0 00-3.18-.033 39.36 39.36 0 011.438 5.14v-.001zM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
app/assets/images/email.svg
Normal file
3
app/assets/images/email.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 3h18a1 1 0 011 1v16a1 1 0 01-1 1H3a1 1 0 01-1-1V4a1 1 0 011-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555 7.581-6.56-1.308-1.513-6.285 5.439h-.001z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 261 B |
3
app/assets/images/external.svg
Normal file
3
app/assets/images/external.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 6v2H5v11h11v-5h2v6a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 233 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"/>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.868 2.75L8 10h8l2.132-7.25a.4.4 0 01.765-.01l3.495 10.924a.5.5 0 01-.173.55L12 22 1.78 14.214a.5.5 0 01-.172-.55L5.103 2.74a.4.4 0 01.765.009v.001z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 509 B After Width: | Height: | Size: 258 B |
3
app/assets/images/linkedin.svg
Normal file
3
app/assets/images/linkedin.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.335 18.339H15.67v-4.177c0-.996-.02-2.278-1.39-2.278-1.389 0-1.601 1.084-1.601 2.205v4.25h-2.666V9.75h2.56v1.17h.035c.358-.674 1.228-1.387 2.528-1.387 2.7 0 3.2 1.778 3.2 4.091v4.715h-.001zM7.003 8.575a1.546 1.546 0 01-1.287-2.409 1.548 1.548 0 111.286 2.409h.001zm1.336 9.764H5.666V9.75H8.34v8.589h-.001zM19.67 3H4.329C3.593 3 3 3.58 3 4.297v15.406C3 20.42 3.594 21 4.328 21h15.338C20.4 21 21 20.42 21 19.703V4.297C21 3.58 20.4 3 19.666 3h.004z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 556 B |
3
app/assets/images/location.svg
Normal file
3
app/assets/images/location.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1112.728 0zM12 13a2 2 0 100-4 2 2 0 000 4z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 194 B |
3
app/assets/images/mastodon.svg
Normal file
3
app/assets/images/mastodon.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.258 13.99c-.274 1.41-2.456 2.955-4.962 3.254-1.306.156-2.593.3-3.965.236-2.243-.103-4.014-.535-4.014-.535 0 .218.014.426.04.62.292 2.215 2.196 2.347 4 2.41 1.82.062 3.44-.45 3.44-.45l.076 1.646s-1.274.684-3.542.81c-1.25.068-2.803-.032-4.612-.51-3.923-1.039-4.598-5.22-4.701-9.464-.031-1.26-.012-2.447-.012-3.44 0-4.34 2.843-5.611 2.843-5.611 1.433-.658 3.892-.935 6.45-.956h.062c2.557.02 5.018.298 6.451.956 0 0 2.843 1.272 2.843 5.61 0 0 .036 3.201-.397 5.424zm-2.956-5.087c0-1.074-.273-1.927-.822-2.558-.567-.631-1.308-.955-2.229-.955-1.065 0-1.871.41-2.405 1.228l-.518.87-.519-.87C11.276 5.8 10.47 5.39 9.405 5.39c-.921 0-1.663.324-2.229.955-.549.631-.822 1.484-.822 2.558v5.253h2.081V9.057c0-1.075.452-1.62 1.357-1.62 1 0 1.501.647 1.501 1.927v2.79h2.07v-2.79c0-1.28.5-1.927 1.5-1.927.905 0 1.358.545 1.358 1.62v5.1h2.08V8.902l.001.001z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 952 B |
3
app/assets/images/medium.svg
Normal file
3
app/assets/images/medium.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 3h16a1 1 0 011 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1zm13.3 12.94c-.1-.05-.15-.2-.15-.301V8.006c0-.1.05-.25.15-.351l.955-1.105V6.5H14.84l-2.56 6.478L9.366 6.5H5.852v.05l.903 1.256c.201.2.251.502.251.753v5.523c.05.302 0 .653-.15.954L5.5 16.894v.05h3.616v-.05L7.76 15.087a1.546 1.546 0 01-.15-.954V9.11c.05.1.1.1.15.301l3.414 7.633h.05L14.54 8.76c-.05.3-.05.652-.05.904v5.925c0 .15-.05.25-.15.351l-1.005.954v.05h4.921v-.05l-.954-.954H17.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 556 B |
3
app/assets/images/stackoverflow.svg
Normal file
3
app/assets/images/stackoverflow.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 20.002V14.67h2v7.333H4V14.67h2v5.333h12v-.001zM7.599 14.736l.313-1.98 8.837 1.7-.113 1.586-9.037-1.306zm1.2-4.532l.732-1.6 7.998 3.733-.733 1.599-7.998-3.732h.001zm2.265-3.932l1.133-1.333 6.798 5.665-1.133 1.333-6.798-5.665zm4.332-4.132l5.265 7.064-1.4 1.067-5.264-7.065 1.4-1.066h-.001zM7.332 18.668v-2h9.33v2h-9.33z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 429 B |
3
app/assets/images/youtube.svg
Normal file
3
app/assets/images/youtube.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.543 6.498C22 8.28 22 12 22 12s0 3.72-.457 5.502c-.254.985-.997 1.76-1.938 2.022C17.896 20 12 20 12 20s-5.893 0-7.605-.476c-.945-.266-1.687-1.04-1.938-2.022C2 15.72 2 12 2 12s0-3.72.457-5.502c.254-.985.997-1.76 1.938-2.022C6.107 4 12 4 12 4s5.896 0 7.605.476c.945.266 1.687 1.04 1.938 2.022zM10 15.5l6-3.5-6-3.5v7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 425 B |
|
|
@ -12,20 +12,16 @@ function hideChatModal(modal) {
|
|||
}
|
||||
|
||||
function toggleModal() {
|
||||
var modal = document.querySelector('.modal');
|
||||
var currentState = modal.style.display;
|
||||
|
||||
if (currentState === 'none') {
|
||||
showChatModal(modal);
|
||||
} else {
|
||||
hideChatModal(modal);
|
||||
}
|
||||
var modal = document.querySelector('.crayons-modal');
|
||||
modal.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
function initModal() {
|
||||
var modal = document.querySelector('.modal');
|
||||
var modal = document.querySelector('.crayons-modal');
|
||||
modal.querySelector('.close-modal').addEventListener('click', toggleModal);
|
||||
modal.querySelector('.overlay').addEventListener('click', toggleModal);
|
||||
modal
|
||||
.querySelector('.crayons-modal__overlay')
|
||||
.addEventListener('click', toggleModal);
|
||||
}
|
||||
|
||||
function handleChatButtonPress(form) {
|
||||
|
|
@ -56,8 +52,8 @@ function addButtonClickHandle(response, button, modalInfo) {
|
|||
linkWrap.removeAttribute('href'); // remove link
|
||||
button.addEventListener('click', toggleModal);
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
button.style.display = 'initial'; // show button
|
||||
linkWrap.style.display = 'initial'; // show button
|
||||
button.classList.remove('hidden'); // show button
|
||||
linkWrap.classList.remove('hidden'); // show button
|
||||
form.onsubmit = () => {
|
||||
handleChatButtonPress(form);
|
||||
return false;
|
||||
|
|
@ -65,8 +61,8 @@ function addButtonClickHandle(response, button, modalInfo) {
|
|||
} else if (response === 'mutual') {
|
||||
button.removeEventListener('click', toggleModal);
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
button.style.display = 'initial'; // show button
|
||||
linkWrap.style.display = 'initial'; // show button
|
||||
button.classList.remove('hidden'); // show button
|
||||
linkWrap.classList.remove('hidden'); // show button
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,33 @@
|
|||
'use strict';
|
||||
|
||||
function initializeUserProfilePage() {
|
||||
const profileDropdownDiv = document.getElementsByClassName("profile-dropdown")[0];
|
||||
const profileDropdownDiv = document.getElementsByClassName(
|
||||
'profile-dropdown',
|
||||
)[0];
|
||||
if (profileDropdownDiv) {
|
||||
const currentUser = userData();
|
||||
if (currentUser && (currentUser.username === profileDropdownDiv.dataset.username)) {
|
||||
if (
|
||||
currentUser &&
|
||||
currentUser.username === profileDropdownDiv.dataset.username
|
||||
) {
|
||||
profileDropdownDiv.hidden = true;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
profileDropdownDiv.hidden = false;
|
||||
const userProfileDropdownButton = document.getElementById('user-profile-dropdown');
|
||||
const userProfileDropdownButton = document.getElementById(
|
||||
'user-profile-dropdown',
|
||||
);
|
||||
if (userProfileDropdownButton) {
|
||||
const userProfileDropdownMenu = document.getElementById('user-profile-dropdownmenu');
|
||||
const userProfileDropdownMenu = document.getElementById(
|
||||
'user-profile-dropdownmenu',
|
||||
);
|
||||
userProfileDropdownButton.addEventListener('click', () => {
|
||||
userProfileDropdownMenu.classList.toggle('showing');
|
||||
userProfileDropdownMenu.classList.toggle('block');
|
||||
|
||||
// Add actual link location (SEO doesn't like these "useless" links, so adding in here instead of in HTML)
|
||||
var reportAbuseLink = profileDropdownDiv.querySelector('.report-abuse-link-wrapper');
|
||||
reportAbuseLink.innerHTML = `<a href="${reportAbuseLink.dataset.path}" class="crayons-link crayons-link--block">Report Abuse</a>`
|
||||
var reportAbuseLink = profileDropdownDiv.querySelector(
|
||||
'.report-abuse-link-wrapper',
|
||||
);
|
||||
reportAbuseLink.innerHTML = `<a href="${reportAbuseLink.dataset.path}" class="crayons-link crayons-link--block">Report Abuse</a>`;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,5 +32,6 @@
|
|||
@import 'views/article-form';
|
||||
@import 'views/listings';
|
||||
@import 'views/dashboard';
|
||||
@import 'views/profile';
|
||||
@import 'views/signin';
|
||||
@import 'views/sponsors';
|
||||
|
|
|
|||
138
app/assets/stylesheets/views/profile.scss
Normal file
138
app/assets/stylesheets/views/profile.scss
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
@import '../config/import';
|
||||
|
||||
.profile-header {
|
||||
--padding: var(--su-3);
|
||||
border-radius: 0;
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
--padding: var(--su-4);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
border-radius: var(--radius);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-l) {
|
||||
--padding: var(--su-6);
|
||||
}
|
||||
|
||||
&__top {
|
||||
margin-top: calc(-1 * var(--su-7));
|
||||
margin-bottom: var(--su-4);
|
||||
position: relative;
|
||||
padding: 0 var(--padding);
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
margin-top: calc(-1 * var(--su-9));
|
||||
margin-bottom: var(--su-3);
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: var(--su-7);
|
||||
position: absolute;
|
||||
padding: var(--padding) var(--padding) 0 0;
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
top: var(--su-9);
|
||||
}
|
||||
}
|
||||
|
||||
&__details {
|
||||
padding: var(--padding);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
font-size: var(--fs-s);
|
||||
color: var(--base-60);
|
||||
margin-bottom: var(--su-2);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-left: calc(-1 * var(--su-1));
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
justify-content: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color-secondary);
|
||||
|
||||
&:hover {
|
||||
color: var(--link-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
padding: var(--su-2) var(--su-2);
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
padding: var(--su-1) var(--su-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
border-top: 1px solid var(--base-10);
|
||||
padding: calc(var(--padding) / 2);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.crayons-definition {
|
||||
padding: calc(var(--padding) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-avatar {
|
||||
width: var(--su-9);
|
||||
height: var(--su-9);
|
||||
border: var(--su-1) solid var(--profile-brand-color);
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
border-width: var(--su-2);
|
||||
width: var(--su-10);
|
||||
height: var(--su-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-definition {
|
||||
font-size: inherit;
|
||||
|
||||
&__title {
|
||||
font-size: 85%;
|
||||
font-weight: var(--fw-medium);
|
||||
color: var(--base-60);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-bg {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--profile-brand-color) var(--su-9),
|
||||
transparent var(--su-9)
|
||||
);
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--profile-brand-color) var(--su-10),
|
||||
transparent var(--su-10)
|
||||
);
|
||||
}
|
||||
}
|
||||
34
app/views/users/_metadata.html.erb
Normal file
34
app/views/users/_metadata.html.erb
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<% if @user.employment_title.present? || (@user.looking_for_work_publicly == true && @user.looking_for_work == true) || @user.education.present? %>
|
||||
<div class="profile-header__bottom fs-base">
|
||||
<% if @user.education.present? %>
|
||||
<div class="crayons-definition">
|
||||
<strong class="crayons-definition__title">Education</strong>
|
||||
<p class="crayons-definition__value"><%= @user.education %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @user.employment_title.present? %>
|
||||
<div class="crayons-definition">
|
||||
<strong class="crayons-definition__title">Work</strong>
|
||||
<p class="crayons-definition__value">
|
||||
<%= @user.employment_title %>
|
||||
<% if @user.employer_name.present? %>
|
||||
<span class="opacity-50"> at </span>
|
||||
<% if @user.employer_url.present? %>
|
||||
<a href="<%= @user.employer_url %>" class="crayons-link crayons-link--brand" target="_blank" rel="noopener"><%= @user.employer_name %></a>
|
||||
<% else %>
|
||||
<%= @user.employer_name %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @user.looking_for_work_publicly == true && @user.looking_for_work == true %>
|
||||
<div class="crayons-definition">
|
||||
<strong class="crayons-definition__title">Work status</strong>
|
||||
<p class="crayons-definition__value">I'm looking for work!</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -13,169 +13,174 @@
|
|||
<% end %>
|
||||
<% cache "main-user-profile-header-area-#{@user.id}-#{@user.profile_updated_at}-#{user_signed_in?}", expires_in: 10.days do %>
|
||||
<style>
|
||||
.widget header {
|
||||
color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
|
||||
:root {
|
||||
--profile-brand-color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
|
||||
}
|
||||
.night-theme .widget header {
|
||||
color: #cedae2;
|
||||
}
|
||||
|
||||
<% if user_colors(@user)[:bg].downcase.start_with?("#fff") %>
|
||||
.user-profile-follow-button {
|
||||
border: 1px solid <%= user_colors(@user)[:text] %> !important;
|
||||
}
|
||||
<% end %>
|
||||
</style>
|
||||
<div class="user-profile-header" style="<%= user_colors_style(@user) %>">
|
||||
<div class="user-profile-header-container">
|
||||
<div class="profile-pic-wrapper">
|
||||
<img class="profile-pic" src="<%= ProfileImage.new(@user).get(width: 320) %>" alt="<%= @user.username %> profile" style="border-color:<%= user_colors(@user)[:bg] %>;background:<%= user_colors(@user)[:bg] %>" />
|
||||
</div>
|
||||
<div class="profile-details">
|
||||
<h1>
|
||||
<span><%= @user.name %></span>
|
||||
<span class="user-profile-follow-button-wrapper">
|
||||
<button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" style="color:<%= user_colors(@user)[:text] %>;background-color:<%= user_colors(@user)[:bg] %>" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>"}'> </button>
|
||||
<div class="brand-bg">
|
||||
<div class="crayons-layout pt-7 m:pt-9">
|
||||
<header class="profile-header crayons-card mt-2">
|
||||
<div class="relative profile-header__top">
|
||||
<span class="crayons-avatar crayons-avatar--3xl">
|
||||
<img src="<%= ProfileImage.new(@user).get(width: 320) %>" width="128" height="128" alt="<%= @user.name %> profile picture" class="crayons-avatar__image">
|
||||
</span>
|
||||
<% if user_signed_in? %>
|
||||
<span class="user-profile-chat-button-wrapper">
|
||||
<a href="/connect/@<%= @user.username %>" id="user-connect-redirect" style="display:none">
|
||||
<button class="chat-action-button user-profile-chat-button" id="modal-opener" style="color:<%= user_colors(@user)[:text] %>;background-color:<%= user_colors(@user)[:bg] %>; display:none; ">CHAT</button>
|
||||
|
||||
<div class="profile-header__actions">
|
||||
<div class="profile-dropdown mr-2 relative" data-username="<%= @user.username %>">
|
||||
<button id="user-profile-dropdown" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon">
|
||||
<%= inline_svg_tag("overflow-horizontal.svg", class: "dropdown-icon crayons-icon", aria: true, title: "Toggle dropdown menu") %>
|
||||
</button>
|
||||
|
||||
<div id="user-profile-dropdownmenu" class="crayons-dropdown top-100 right-0 z-10 p-1">
|
||||
<a href="javascript:void(0);" id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="border-none crayons-link crayons-link--block">Block @<%= @user.username %></a>
|
||||
<% if user_signed_in? %>
|
||||
<%= javascript_packs_with_chunks_tag "profileDropdown", defer: true %>
|
||||
<% end %>
|
||||
<span class="report-abuse-link-wrapper" data-path="/report-abuse?url=<%= user_url(@user) %>"></span>
|
||||
</div>
|
||||
</div>
|
||||
<% if user_signed_in? %>
|
||||
<a href="/connect/@<%= @user.username %>" class="hidden mr-2" id="user-connect-redirect">
|
||||
<button class="chat-action-button crayons-btn crayons-btn--outlined hidden" id="modal-opener">Chat</button>
|
||||
</a>
|
||||
</span>
|
||||
<% end %>
|
||||
</h1>
|
||||
<p class="profile-description">
|
||||
<%= @user.summary.presence || ["404 bio not found"].sample %>
|
||||
</p>
|
||||
<style>
|
||||
.profile-details .social .icon-img path {
|
||||
fill: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.78) %> !important;
|
||||
}
|
||||
.night-theme .profile-details .social .icon-img path {
|
||||
fill: white;
|
||||
}
|
||||
</style>
|
||||
<p class="social">
|
||||
<% if @user.twitter_username? %>
|
||||
<a href="https://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("twitter-logo.svg", class: "icon-img", aria: true, title: "Twitter logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.github_username? %>
|
||||
<a href="https://github.com/<%= @user.github_username %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("github-logo.svg", class: "icon-img", aria: true, title: "GitHub logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.mastodon_url? %>
|
||||
<a href="<%= @user.mastodon_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("mastodon-logo.svg", class: "icon-img", aria: true, title: "Mastodon logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.facebook_url? %>
|
||||
<a href="<%= @user.facebook_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("facebook-logo.svg", class: "icon-img", aria: true, title: "Facebook logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.youtube_url? %>
|
||||
<a href="<%= @user.youtube_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("youtube-logo.svg", class: "icon-img", aria: true, title: "Youtube logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.linkedin_url? %>
|
||||
<a href="<%= @user.linkedin_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("linkedin_icon.svg", class: "icon-img", aria: true, title: "LinkedIn logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.behance_url? %>
|
||||
<a href="<%= @user.behance_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("behance_icon.svg", class: "icon-img", aria: true, title: "Behance logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.stackoverflow_url? %>
|
||||
<a href="<%= @user.stackoverflow_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("stackoverflow-logo.svg", class: "icon-img", aria: true, title: "StackOverflow logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.dribbble_url? %>
|
||||
<a href="<%= @user.dribbble_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("dribbble_icon.svg", class: "icon-img", aria: true, title: "Dribbble logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.medium_url? %>
|
||||
<a href="<%= @user.medium_url %>" target="_blank" rel="noopener nofollow me">
|
||||
<%= inline_svg_tag("medium_icon.svg", class: "icon-img", aria: true, title: "Medium logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.gitlab_url? %>
|
||||
<a href="<%= @user.gitlab_url %>" target="_blank" rel="noopener nofollow me">
|
||||
<%= inline_svg_tag("gitlab.svg", class: "icon-img", aria: true, title: "GitLab logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.instagram_url? %>
|
||||
<a href="<%= @user.instagram_url %>" target="_blank" rel="noopener nofollow me">
|
||||
<%= inline_svg_tag("instagram-logo.svg", class: "icon-img", aria: true, title: "Instagram logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.twitch_username? %>
|
||||
<%= link_to twitch_live_stream_path(username: @user.username) do %>
|
||||
<%= inline_svg_tag("twitch-logo.svg", class: "icon-img", id: "icon-twitch", aria: true, title: "Twitch logo") %>
|
||||
<% end %>
|
||||
<% elsif @user.twitch_url? %>
|
||||
<a href="<%= @user.twitch_url %>" target="_blank" rel="noopener nofollow me">
|
||||
<%= inline_svg_tag("twitch-logo.svg", class: "icon-img", aria: true, title: "Twitch logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.website_url? %>
|
||||
<a href="<%= @user.website_url %>" target="_blank" rel="noopener nofollow me">
|
||||
<%= inline_svg_tag("external-link-logo.svg", class: "icon-img", aria: true, title: "external link icon") %>
|
||||
</a>
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" style="display: none">
|
||||
<div class="overlay"></div>
|
||||
<div class="modal-content " id="new-message-modal">
|
||||
<button title="Close" class="close-modal">X</button>
|
||||
<% if @user.inbox_guidelines.present? %>
|
||||
<p><b>@<%= @user.username %>'s guidelines:</b></p>
|
||||
<p><%= @user.inbox_guidelines %></p>
|
||||
<% end %>
|
||||
<form id="new-message-form" class="message-form" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>","username":"<%= @user.username %>", "showChat":"<%= @user.inbox_type %>"}'>
|
||||
<textarea id="new-message" rows="4" cols="70" placeholder="Enter your message here..."></textarea>
|
||||
<button type="submit" value="Submit" class="submit-message cta">SEND</button>
|
||||
</form>
|
||||
<p>
|
||||
<em>All private interactions <b>must</b> abide by the <a href="/code-of-conduct">code of conduct</a></em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<%= render "articles/user_metadata", context: "profile" %>
|
||||
<div class="profile-dropdown" data-username="<%= @user.username %>">
|
||||
<button id="user-profile-dropdown">
|
||||
<%= image_tag("overflow-horizontal.svg", class: "dropdown-icon", alt: "Toggle dropdown menu") %>
|
||||
</button>
|
||||
<div id="user-profile-dropdownmenu" class="profile-dropdownmenu">
|
||||
<button id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="block-button" type="button">Block @<%= @user.username %></button>
|
||||
<% if user_signed_in? %>
|
||||
<%= javascript_packs_with_chunks_tag "profileDropdown", defer: true %>
|
||||
<% end %>
|
||||
<span class="report-abuse-link-wrapper" data-path="/report-abuse?url=<%= user_url(@user) %>"></span>
|
||||
</div>
|
||||
<button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button user-profile-follow-button" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>"}'>Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-header__details">
|
||||
<h1 class="fs-2xl m:fs-3xl fw-heavy mb-2"><%= @user.name %></h1>
|
||||
<p class="fs-base m:fs-l color-base-90 mb-4 mx-auto max-w-100 m:max-w-75"><%= @user.summary.presence || ["404 bio not found"].sample %></p>
|
||||
|
||||
<div class="profile-header__meta">
|
||||
<% if @user.location.present? %>
|
||||
<span class="profile-header__meta__item">
|
||||
<%= inline_svg_tag("location.svg", aria: true, class: "crayons-icon mr-2 shrink-0", title: "Location") %>
|
||||
<%= @user.location %>
|
||||
</span>
|
||||
<% end %>
|
||||
|
||||
<span class="profile-header__meta__item">
|
||||
<%= inline_svg_tag("cake.svg", aria: true, class: "crayons-icon mr-2 shrink-0", title: "Joined") %>
|
||||
Joined on
|
||||
<%= local_date(@user.created_at) %>
|
||||
</span>
|
||||
|
||||
<% if @user.email_public %>
|
||||
<a href="mailto:<%= @user.email %>" class="profile-header__meta__item">
|
||||
<%= inline_svg_tag("email.svg", class: "crayons-icon mr-2 shrink-0", aria: true, title: "Email address") %>
|
||||
<%= @user.email %>
|
||||
</a>
|
||||
<% end %>
|
||||
<span class="profile-header__meta__item -ml-1">
|
||||
<% if @user.twitter_username? %>
|
||||
<a href="https://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("twitter.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.github_username? %>
|
||||
<a href="https://github.com/<%= @user.github_username %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("github.svg", class: "crayons-icon", aria: true, title: "GitHub logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.mastodon_url? %>
|
||||
<a href="<%= @user.mastodon_url %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("mastodon.svg", class: "crayons-icon", aria: true, title: "Mastodon logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.facebook_url? %>
|
||||
<a href="<%= @user.facebook_url %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("facebook.svg", class: "crayons-icon", aria: true, title: "Facebook logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.youtube_url? %>
|
||||
<a href="<%= @user.youtube_url %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("youtube.svg", class: "crayons-icon", aria: true, title: "Youtube logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.linkedin_url? %>
|
||||
<a href="<%= @user.linkedin_url %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("linkedin.svg", class: "crayons-icon", aria: true, title: "LinkedIn logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.behance_url? %>
|
||||
<a href="<%= @user.behance_url %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("behance.svg", class: "crayons-icon", aria: true, title: "Behance logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.stackoverflow_url? %>
|
||||
<a href="<%= @user.stackoverflow_url %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("stackoverflow.svg", class: "crayons-icon", aria: true, title: "StackOverflow logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.dribbble_url? %>
|
||||
<a href="<%= @user.dribbble_url %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("dribbble.svg", class: "crayons-icon", aria: true, title: "Dribbble logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.medium_url? %>
|
||||
<a href="<%= @user.medium_url %>" target="_blank" rel="noopener nofollow me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("medium.svg", class: "crayons-icon", aria: true, title: "Medium logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.gitlab_url? %>
|
||||
<a href="<%= @user.gitlab_url %>" target="_blank" rel="noopener nofollow me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("gitlab.svg", class: "crayons-icon", aria: true, title: "GitLab logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.instagram_url? %>
|
||||
<a href="<%= @user.instagram_url %>" target="_blank" rel="noopener nofollow me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("instagram.svg", class: "crayons-icon", aria: true, title: "Instagram logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.twitch_username? %>
|
||||
<a href="<%= twitch_live_stream_path(username: @user.username) %>" class="px-1 align-middle inline-block <% if @user.currently_streaming_on_twitch? %>color-accent-success<% end %>">
|
||||
<%= inline_svg_tag("twitch.svg", class: "crayons-icon", id: "icon-twitch", aria: true, title: "Twitch logo") %>
|
||||
</a>
|
||||
<% elsif @user.twitch_url? %>
|
||||
<a href="<%= @user.twitch_url %>" target="_blank" rel="noopener nofollow me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("twitch.svg", class: "crayons-icon", aria: true, title: "Twitch logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.website_url? %>
|
||||
<a href="<%= @user.website_url %>" target="_blank" rel="noopener nofollow me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("external.svg", class: "crayons-icon", aria: true, title: "External link icon") %>
|
||||
</a>
|
||||
<% end %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= render "users/metadata" %>
|
||||
|
||||
<div class="crayons-modal align-left hidden">
|
||||
<div class="crayons-modal__box">
|
||||
<div class="crayons-modal__box__header">
|
||||
<h2 class="crayons-modal__box__header__title">Chat with <%= @user.name %></h2>
|
||||
<button title="Close" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon close-modal">
|
||||
<%= inline_svg_tag("x.svg", class: "crayons-icon", aria: true, title: "Close modal") %>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="crayons-modal__box__body">
|
||||
<% if @user.inbox_guidelines.present? %>
|
||||
<p class="fw-bold mb-2">@<%= @user.username %>'s guidelines:</p>
|
||||
<p class="mb-6"><%= @user.inbox_guidelines %></p>
|
||||
<% end %>
|
||||
<form id="new-message-form" class="message-form mb-4" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>","username":"<%= @user.username %>", "showChat":"<%= @user.inbox_type %>"}'>
|
||||
<textarea id="new-message" rows="4" cols="70" placeholder="Enter your message here..." class="crayons-textfield"></textarea>
|
||||
<button type="submit" class="submit-message crayons-btn">Send</button>
|
||||
</form>
|
||||
<p class="fs-s color-base-60">All private interactions <b>must</b> abide by the <a href="/code-of-conduct">code of conduct</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crayons-modal__overlay"></div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @user.currently_streaming_on_twitch? %>
|
||||
<style>
|
||||
#icon-twitch path {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
</style>
|
||||
<% end %>
|
||||
|
||||
<div class="home sub-home" id="index-container"
|
||||
data-params="<%= params.merge(user_id: @user.id, class_name: "Article", sort_by: "published_at", sort_direction: "desc").to_json(only: %i[tag user_id q class_name sort_by sort_direction]) %>" data-which="<%= @list_of %>"
|
||||
data-tag=""
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ RSpec.describe "User index", type: :system, stub_elasticsearch: true do
|
|||
|
||||
it "shows the header", js: true do
|
||||
within("h1") { expect(page).to have_content(user.name) }
|
||||
within(".profile-details") do
|
||||
within(".profile-header__actions") do
|
||||
expect(page).to have_button("Follow")
|
||||
end
|
||||
end
|
||||
|
|
@ -80,7 +80,7 @@ RSpec.describe "User index", type: :system, stub_elasticsearch: true do
|
|||
|
||||
it "shows the header", js: true do
|
||||
within("h1") { expect(page).to have_content(user.name) }
|
||||
within(".profile-details") do
|
||||
within(".profile-header__actions") do
|
||||
expect(page).to have_button("Edit profile")
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue