Merge branch 'master' into profile-view-upd
This commit is contained in:
Mavis Ou
GitHub
Коммит
ea2902917f
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<path id="a" d="M0 0h17v16H0z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<mask id="b" fill="#b7b9fa">
|
||||
<use xlink:href="#a"/>
|
||||
</mask>
|
||||
<path d="M8.5 0C3.805 0 0 3.672 0 8.203c0 3.624 2.435 6.698 5.813 7.783.426.075.58-.178.58-.396 0-.194-.007-.71-.011-1.395-2.364.496-2.863-1.1-2.863-1.1-.387-.947-.944-1.199-.944-1.199-.772-.509.058-.499.058-.499.854.059 1.302.846 1.302.846.759 1.253 1.99.89 2.474.681.077-.53.297-.891.54-1.096-1.888-.207-3.872-.911-3.872-4.054 0-.896.331-1.628.875-2.201-.088-.208-.38-1.042.083-2.171 0 0 .714-.22 2.338.84A8.418 8.418 0 0 1 8.5 3.967a8.43 8.43 0 0 1 2.127.277c1.623-1.062 2.335-.841 2.335-.841.464 1.13.173 1.963.085 2.17.545.574.874 1.306.874 2.202 0 3.15-1.988 3.844-3.881 4.047.305.253.577.754.577 1.52 0 1.096-.01 1.98-.01 2.25 0 .219.152.474.584.394C14.566 14.898 17 11.825 17 8.203 17 3.673 13.194 0 8.5 0" fill="#0d10bf" mask="url(#b)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.0 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<path id="a" d="M0 0h17v16H0z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<mask id="b" fill="#fff">
|
||||
<use xlink:href="#a"/>
|
||||
</mask>
|
||||
<path d="M8.5 0C3.805 0 0 3.672 0 8.203c0 3.624 2.435 6.698 5.813 7.783.426.075.58-.178.58-.396 0-.194-.007-.71-.011-1.395-2.364.496-2.863-1.1-2.863-1.1-.387-.947-.944-1.199-.944-1.199-.772-.509.058-.499.058-.499.854.059 1.302.846 1.302.846.759 1.253 1.99.89 2.474.681.077-.53.297-.891.54-1.096-1.888-.207-3.872-.911-3.872-4.054 0-.896.331-1.628.875-2.201-.088-.208-.38-1.042.083-2.171 0 0 .714-.22 2.338.84A8.418 8.418 0 0 1 8.5 3.967a8.43 8.43 0 0 1 2.127.277c1.623-1.062 2.335-.841 2.335-.841.464 1.13.173 1.963.085 2.17.545.574.874 1.306.874 2.202 0 3.15-1.988 3.844-3.881 4.047.305.253.577.754.577 1.52 0 1.096-.01 1.98-.01 2.25 0 .219.152.474.584.394C14.566 14.898 17 11.825 17 8.203 17 3.673 13.194 0 8.5 0" fill="#000" mask="url(#b)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.0 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.01 6.5h3.98c-.08 2.365-.715 4.3-1.443 4.973a5.566 5.566 0 0 1-1.094 0c-.728-.672-1.364-2.608-1.444-4.973zm0-1c.08-2.365.715-4.3 1.443-4.973a5.566 5.566 0 0 1 1.094 0c.728.672 1.364 2.608 1.444 4.973H4.009zm-3.488 1H3.01c.055 1.846.419 3.494 1.003 4.63A5.504 5.504 0 0 1 .522 6.5zm0-1A5.504 5.504 0 0 1 4.012.87C3.428 2.006 3.064 3.654 3.01 5.5H.522zm10.956 0H8.99C8.936 3.654 8.572 2.006 7.988.87a5.504 5.504 0 0 1 3.49 4.63zm0 1a5.504 5.504 0 0 1-3.49 4.63c.584-1.136.948-2.784 1.003-4.63h2.487z" fill="#0d10bf" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 622 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.367 11.55C3.122 8.868 2 6.604 2 4.758A3.754 3.754 0 0 1 5.75 1 3.754 3.754 0 0 1 9.5 4.758c0 1.846-1.122 4.11-3.366 6.792a.5.5 0 0 1-.767 0zm.383-4.779a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#999" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 303 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<path fill="#0d10bf" d="M49 29.6a19.88 19.88 0 0 1-6.34 15.32q-6.47 6.15-17 6.15h-.25q-10.3 0-16.57-6.15A20.57 20.57 0 0 1 2.57 29.6 20.23 20.23 0 0 1 9 14.22q6.5-6.09 16.92-6.09t16.7 6.09A21 21 0 0 1 49 29.6zM46.39 68v124.45H5V68zm149 53.11v71.32h-41.27V125.9q0-13.18-5.08-20.65t-15.88-7.47a20.33 20.33 0 0 0-13.25 4.33 26.69 26.69 0 0 0-8 10.74 30.33 30.33 0 0 0-1.36 10.15v69.43H69.24q.25-50.1.25-81.24T69.37 74l-.13-6h41.31v18.1h-.25a54.7 54.7 0 0 1 5.15-7 53.5 53.5 0 0 1 7.09-6.53 32.65 32.65 0 0 1 10.92-5.46 49.78 49.78 0 0 1 14.38-1.95q21.47 0 34.53 14.25t13.06 41.72z"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 675 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<path d="M49 29.6a19.88 19.88 0 0 1-6.34 15.32q-6.47 6.15-17 6.15h-.25q-10.3 0-16.57-6.15A20.57 20.57 0 0 1 2.57 29.6 20.23 20.23 0 0 1 9 14.22q6.5-6.09 16.92-6.09t16.7 6.09A21 21 0 0 1 49 29.6zM46.39 68v124.45H5V68zm149 53.11v71.32h-41.27V125.9q0-13.18-5.08-20.65t-15.88-7.47a20.33 20.33 0 0 0-13.25 4.33 26.69 26.69 0 0 0-8 10.74 30.33 30.33 0 0 0-1.36 10.15v69.43H69.24q.25-50.1.25-81.24T69.37 74l-.13-6h41.31v18.1h-.25a54.7 54.7 0 0 1 5.15-7 53.5 53.5 0 0 1 7.09-6.53 32.65 32.65 0 0 1 10.92-5.46 49.78 49.78 0 0 1 14.38-1.95q21.47 0 34.53 14.25t13.06 41.72z"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 660 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<path fill="#0d10bf" d="M198.33 50.65a85 85 0 0 1-20.34 21q.12 1.76.13 5.27a115.24 115.24 0 0 1-4.77 32.58 117.77 117.77 0 0 1-14.5 31.2 122.7 122.7 0 0 1-23.17 26.43 103.16 103.16 0 0 1-32.39 18.33 118.55 118.55 0 0 1-40.55 6.84A112.62 112.62 0 0 1 .45 174.08a86.75 86.75 0 0 0 9.79.5 79.4 79.4 0 0 0 50.36-17.33 40.64 40.64 0 0 1-37.92-28.12 51.19 51.19 0 0 0 7.66.63A41.91 41.91 0 0 0 41 128.38a39.89 39.89 0 0 1-23.29-14 39.18 39.18 0 0 1-9.23-25.8v-.5a40.21 40.21 0 0 0 18.33 5.15 40.49 40.49 0 0 1-13.17-14.45A40.65 40.65 0 0 1 14.27 39a114.91 114.91 0 0 0 37 29.95 113 113 0 0 0 46.62 12.47 45 45 0 0 1-1-9.29 39.09 39.09 0 0 1 11.87-28.69 40.65 40.65 0 0 1 58.32.94 79.54 79.54 0 0 0 25.74-9.79A39.38 39.38 0 0 1 175 56.93a80.76 80.76 0 0 0 23.33-6.28z"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 858 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<path d="M198.33 50.65a85 85 0 0 1-20.34 21q.12 1.76.13 5.27a115.24 115.24 0 0 1-4.77 32.58 117.77 117.77 0 0 1-14.5 31.2 122.7 122.7 0 0 1-23.17 26.43 103.16 103.16 0 0 1-32.39 18.33 118.55 118.55 0 0 1-40.55 6.84A112.62 112.62 0 0 1 .45 174.08a86.75 86.75 0 0 0 9.79.5 79.4 79.4 0 0 0 50.36-17.33 40.64 40.64 0 0 1-37.92-28.12 51.19 51.19 0 0 0 7.66.63A41.91 41.91 0 0 0 41 128.38a39.89 39.89 0 0 1-23.29-14 39.18 39.18 0 0 1-9.23-25.8v-.5a40.21 40.21 0 0 0 18.33 5.15 40.49 40.49 0 0 1-13.17-14.45A40.65 40.65 0 0 1 14.27 39a114.91 114.91 0 0 0 37 29.95 113 113 0 0 0 46.62 12.47 45 45 0 0 1-1-9.29 39.09 39.09 0 0 1 11.87-28.69 40.65 40.65 0 0 1 58.32.94 79.54 79.54 0 0 0 25.74-9.79A39.38 39.38 0 0 1 175 56.93a80.76 80.76 0 0 0 23.33-6.28z"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 843 B |
|
|
@ -46,7 +46,7 @@ class Bio extends React.Component {
|
|||
renderEditLink() {
|
||||
if (!this.props.my_profile) return null;
|
||||
|
||||
return <div className="mt-3"><Link to="/myprofile">Edit your profile</Link></div>;
|
||||
return <div className="my-3 mt-sm-4 mb-md-0"><Link to="/myprofile">Edit your profile</Link></div>;
|
||||
}
|
||||
|
||||
renderSocialMedia() {
|
||||
|
|
@ -55,14 +55,14 @@ class Bio extends React.Component {
|
|||
let link = this.props[type];
|
||||
if (!link) { return; }
|
||||
|
||||
let classname = classNames(`d-inline-block social-media`, {
|
||||
"mr-sm-3" : i !== list.length-1
|
||||
let classname = classNames(`social-media ${type} x-small`, {
|
||||
"mr-sm-1" : i !== list.length-1
|
||||
});
|
||||
|
||||
return <a href={link} target="_blank" className={classname} onClick={(event) => this.handleSocialMediaClick(event, type)} key={type}><span className={`fa fa-${type}`}></span></a>;
|
||||
return <a href={link} target="_blank" className={classname} onClick={(event) => this.handleSocialMediaClick(event, type)} key={type}></a>;
|
||||
});
|
||||
|
||||
return <div>{list}</div>;
|
||||
return <div className="d-flex mb-4 mb-sm-0">{list}</div>;
|
||||
}
|
||||
|
||||
renderSignOut() {
|
||||
|
|
@ -78,7 +78,7 @@ class Bio extends React.Component {
|
|||
meta = <a href={link} onClick={(event) => this.handleSocialMediaClick(event, type)}>{text}</a>;
|
||||
}
|
||||
|
||||
return <div className={`meta-with-icon ${type} d-inline-block mr-4`}>{meta}</div>;
|
||||
return <div className={`meta-with-icon d-flex align-items-center ${ type == 'website' ? 'website mt-3' : type} x-small`}>{meta}</div>;
|
||||
}
|
||||
|
||||
renderOtherMeta() {
|
||||
|
|
@ -88,7 +88,7 @@ class Bio extends React.Component {
|
|||
let story = this.props.storyLink ? this.renderMeta(`story`, `Read Story`, this.props.storyLink) : null;
|
||||
let website = this.props.website ? this.renderMeta(`website`, this.props.website, this.props.website) : null;
|
||||
|
||||
return <div className="other-meta open-sans mb-3">{org}{location}{language}{story}{website}</div>;
|
||||
return <div className="mb-3 d-flex flex-column">{org}{location}{language}{story}{website}</div>;
|
||||
}
|
||||
|
||||
renderBlurb() {
|
||||
|
|
@ -105,15 +105,17 @@ class Bio extends React.Component {
|
|||
|
||||
renderTags(label = ``, type = ``, tags = []) {
|
||||
if (!type || tags.length < 1) { return null; }
|
||||
|
||||
tags = tags.map(tag => {
|
||||
|
||||
tags = tags.map((tag, i) => {
|
||||
let link = `/${type}/${type === `issues` ? Utility.getUriPathFromIssueName(tag) : encodeURIComponent(tag)}`;
|
||||
|
||||
return <Link to={link} className="btn btn-xs btn-tag" key={tag}>{tag}</Link>;
|
||||
return <div className="d-inline-block" key={tag}>
|
||||
<Link className="mr-1" to={link}>{tag}{i < tags.length-1 && ","}</Link>
|
||||
</div>;;
|
||||
});
|
||||
|
||||
return <div className="tags mb-1">
|
||||
<div className="d-inline-block mr-2 open-sans text-uppercase">{label}:</div>
|
||||
return <div className="body-small tags mb-1">
|
||||
<div className="d-inline-block mr-2">{label}:</div>
|
||||
{tags}
|
||||
</div>;
|
||||
}
|
||||
|
|
@ -121,21 +123,23 @@ class Bio extends React.Component {
|
|||
renderInterest() {
|
||||
if (!this.props.issues) { return null; }
|
||||
|
||||
return this.renderTags(`interests`, `issues`, this.props.issues);
|
||||
return this.renderTags(`Interests`, `issues`, this.props.issues);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="bio mb-5">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-6 col-sm-4 col-md-2 text-center">
|
||||
<div className="col-6 col-sm-4 col-md-2 text-center text-sm-left">
|
||||
{ this.renderThumbnail() }
|
||||
{ this.renderEditLink() }
|
||||
</div>
|
||||
<div className="col-sm-8 col-md-10">
|
||||
<div className="d-flex flex-wrap flex-column flex-sm-row align-items-center align-items-sm-baseline mb-3">
|
||||
<div className="name mr-sm-4 text-truncate mw-100">{this.profileOwnerName}</div>
|
||||
{ this.renderSocialMedia() }
|
||||
<div className="d-flex flex-column flex-sm-row align-items-center align-items-sm-baseline align-items-md-baseline mb-4 mb-sm-3">
|
||||
<div className="d-flex flex-column flex-md-row align-items-center align-items-sm-start align-items-md-baseline">
|
||||
<h1 className="h5-heading mr-sm-4 text-truncate mw-100 mb-4 mb-sm-1 mb-md-0">{this.profileOwnerName}</h1>
|
||||
{ this.renderSocialMedia() }
|
||||
</div>
|
||||
{ this.renderSignOut() }
|
||||
</div>
|
||||
{ this.renderOtherMeta() }
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.social-media {
|
||||
width: 40px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
|
||||
@media screen and (min-width: $bp-md) {
|
||||
|
|
@ -23,23 +23,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.other-meta {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tags {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
|
||||
.open-sans {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.blurb {
|
||||
|
|
@ -54,8 +39,12 @@
|
|||
}
|
||||
|
||||
&.location {
|
||||
@include compositeGlyph("icon-locator");
|
||||
|
||||
color: $gray-40;
|
||||
|
||||
&::before {
|
||||
content: "\f041";
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,9 +61,21 @@
|
|||
}
|
||||
|
||||
&.website {
|
||||
@include compositeGlyph("icon-globe");
|
||||
|
||||
&::before {
|
||||
content: "\f0ac";
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-page {
|
||||
hr {
|
||||
border-top: 1px solid $black;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ class ProfileAboutTab extends React.Component {
|
|||
|
||||
render() {
|
||||
return <div className="profile-about-tab row justify-content-center mb-5">
|
||||
<div className="col">
|
||||
<div className="col-12 col-sm-10 col-lg-8">
|
||||
{ this.renderLongBio() }
|
||||
</div>
|
||||
</div>;
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ class ProfileTabGroup extends React.Component {
|
|||
|
||||
renderTabControls() {
|
||||
let tabControls = this.state.availableTabs.map(tabName => {
|
||||
let classnames = classNames(`btn btn-tab open-sans text-uppercase`, {
|
||||
let classnames = classNames(`btn btn-tab`, {
|
||||
active: this.state.activeTab === tabName
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,33 @@
|
|||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.x-small {
|
||||
&::before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
@media screen and (min-width: $bp-md) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.twitter {
|
||||
@include compositeGlyph("twitter");
|
||||
@include hoverGlyph("twitter-hover");
|
||||
}
|
||||
|
||||
.linkedin {
|
||||
@include compositeGlyph("linkedin");
|
||||
@include hoverGlyph("linkedin-hover");
|
||||
}
|
||||
|
||||
.github {
|
||||
@include compositeGlyph("github");
|
||||
@include hoverGlyph("github-hover");
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
|
|
|
|||
|
|
@ -84,20 +84,19 @@ button {
|
|||
%btn-tab-active-state {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 2px $pulse-pink;
|
||||
box-shadow: 0 3px $black;
|
||||
}
|
||||
|
||||
.btn-tab {
|
||||
color: $body-color;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
font-size: 17px;
|
||||
text-transform: capitalize;
|
||||
margin-right: 2rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
|
||||
@include scale-text(16px, 22px);
|
||||
|
||||
&.active {
|
||||
@extend %btn-tab-active-state;
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче