Skip to content

Commit

Permalink
Fix: member layout and edit ux. References ossn#276 and ossn#277.
Browse files Browse the repository at this point in the history
  • Loading branch information
@iropal
iropal committed Mar 15, 2019
1 parent d739227 commit b3e430a
Show file tree
Hide file tree
Showing 6 changed files with 157 additions and 58 deletions.
4 changes: 4 additions & 0 deletions netlify.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
X-Content-Type-Options = "nosniff"
Content-Security-Policy = "script-src 'self' 'unsafe-inline' www.google-analytics.com dev-api.ossn.club backend.ossn.club https:"
[[headers]]
for = "*.svg"
[headers.values]
Content-Type = "image/svg+xml; charset=utf-8"
[[redirects]]
from = "https://dev.ossn.club/api/*"
to = "https://dev-api.ossn.club/api/:splat"
Expand Down
114 changes: 76 additions & 38 deletions src/components/components/member/member.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,18 @@ import "./member.scss";
import { navigate } from "gatsby";
import React from "react";
import { withApollo } from "react-apollo";
import { Check, Feather, GitHub, Link, Users, X } from "react-feather";
import {
Check,
Feather,
GitHub,
Link,
Users,
X,
Calendar,
Inbox
} from "react-feather";
import { Helmet } from "react-helmet";
import { connect } from "react-redux";
import MediaQuery from "react-responsive";

import GatsbyConfig from "../../../../gatsby-config";
import { returnKeyCheck } from "../../../utils/accessibility";
Expand Down Expand Up @@ -254,6 +262,7 @@ class Member extends React.PureComponent {
className="member__text-field form-input--member form-input--member-name"
placeholder="name"
required
showLabel
/>
) : (
<div> {snapshot.name} </div>
Expand All @@ -266,9 +275,15 @@ class Member extends React.PureComponent {
onChange={this.handleChange}
value={snapshot.sortDescription}
className="member__text-field form-input--member form-input--member-name"
showLabel
/>
) : (
snapshot.sortDescription && <div> {snapshot.sortDescription} </div>
snapshot.sortDescription && (
<div className="member__location-content">
{" "}
{snapshot.sortDescription}{" "}
</div>
)
);

const description = snapshot.edit ? (
Expand All @@ -278,19 +293,27 @@ class Member extends React.PureComponent {
name="description"
onChange={this.handleChange}
value={snapshot.description}
className="member__text-area"
showLabel
/>
) : (
snapshot.description && <div> {snapshot.description} </div>
);

const club = snapshot.edit ? (
<div>
{snapshot.clubs.length > 0 && <h2>Unsubscribe from club</h2>}
{snapshot.clubs.length > 0 && (
<h2 className="member__checkbox-title">Unsubscribe from club</h2>
)}

{snapshot.clubs.length > 0 &&
snapshot.clubs.map((club, i) => {
return (
<div className="member__checkbox" key={club.id}>
<div
className="member__checkbox member__checkbox--with-icon"
key={club.id}
>
<Users className="member__icon" />
<label htmlFor={"club-" + club.id}>
<input
name={club.id}
Expand Down Expand Up @@ -318,7 +341,8 @@ class Member extends React.PureComponent {

const newsletter = snapshot.edit && (
<div className="member__newsletter">
<div className="member__checkbox">
<div className="member__checkbox member__checkbox--with-icon">
<Inbox className="member__icon" />
<label htmlFor="newsletter">
<input
name="receiveNewsletter"
Expand All @@ -337,15 +361,15 @@ class Member extends React.PureComponent {
<div className="member__legal">
<Shape seafoamBlue waveLarge divider className="member__divider" />

<div className="member__checkbox">
<div className="member__checkbox member__checkbox--with-icon">
<Calendar className="member__icon" />
<label htmlFor="isOverTheLegalLimit">
<input
name="isOverTheLegalLimit"
type="checkbox"
id="isOverTheLegalLimit"
defaultChecked={snapshot.isOverTheLegalLimit}
onChange={this.handleChange}
// required
/>
I am older than 18 years old
</label>
Expand All @@ -354,13 +378,16 @@ class Member extends React.PureComponent {
);

const github = snapshot.edit ? (
<TextInput
label="Github Url"
name="githubUrl"
onChange={this.handleChange}
value={snapshot.githubUrl}
className="member__text-field form-input--member form-input--member-name"
/>
<div className="member__text-field--wrapper-with-icon">
<GitHub className="member__icon" />
<TextInput
label="Github Url"
name="githubUrl"
onChange={this.handleChange}
value={snapshot.githubUrl}
className="member__text-field form-input--member form-input--member-name"
/>
</div>
) : (
snapshot.githubUrl && (
<a href={snapshot.githubUrl} target="_blank" rel="noopener noreferrer">
Expand All @@ -371,13 +398,16 @@ class Member extends React.PureComponent {
);

const personalUrl = snapshot.edit ? (
<TextInput
label="personal web page"
name="personalUrl"
onChange={this.handleChange}
value={snapshot.personalUrl}
className="member__text-field form-input--member form-input--member-name"
/>
<div className="member__text-field--wrapper-with-icon">
<Link className="member__icon" />
<TextInput
label="personal web page"
name="personalUrl"
onChange={this.handleChange}
value={snapshot.personalUrl}
className="member__text-field form-input--member form-input--member-name"
/>
</div>
) : (
snapshot.personalUrl && (
<a
Expand Down Expand Up @@ -435,12 +465,8 @@ class Member extends React.PureComponent {

const memberInner = (
<div className="member__inner">
<MediaQuery minWidth={576}>
<div className="member__shape-wrapper-left">{snapshot.shapes[1]}</div>
<div className="member__shape-wrapper-right">
{snapshot.shapes[2]}
</div>
</MediaQuery>
<div className="member__shape-wrapper-left">{snapshot.shapes[1]}</div>
<div className="member__shape-wrapper-right">{snapshot.shapes[2]}</div>
<ShadowBox className="member__card" zeroPadding>
<div className="member__card-shape-wrapper">{snapshot.shapes[0]}</div>
<div className="member__card-inner">
Expand All @@ -453,11 +479,17 @@ class Member extends React.PureComponent {
/>
</div>
</div>
<div className="title title--small member__name">{name}</div>
{name && (
<div className="title title--small member__name">{name}</div>
)}

<div className="member__location">{sortDescription}</div>
{sortDescription && (
<div className="member__location">{sortDescription}</div>
)}

<div className="member__description">{description}</div>
{description && (
<div className="member__description">{description}</div>
)}

<Shape seafoamBlue waveLarge divider className="member__divider" />

Expand All @@ -474,18 +506,24 @@ class Member extends React.PureComponent {
</div>
)}

<div className="member__link member__link--github">{github}</div>
{github && (
<div className="member__link member__link--github">{github}</div>
)}

<div className="member__link member__link--personal-page">
{personalUrl}
</div>
{personalUrl && (
<div className="member__link member__link--personal-page">
{personalUrl}
</div>
)}

{isOverTheLegalLimit}
{newsletter}
{isOverTheLegalLimit && isOverTheLegalLimit}
{newsletter && newsletter}
</div>
</ShadowBox>

<div className="member__button-list">{buttonList}</div>
{buttonList.length > 0 && (
<div className="member__button-list">{buttonList}</div>
)}
</div>
);

Expand Down
57 changes: 48 additions & 9 deletions src/components/components/member/member.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,9 @@
max-width: 275px;
margin-left: auto;
margin-right: auto;
}

&__location-content {
opacity: .6;
}

Expand Down Expand Up @@ -143,7 +146,7 @@
// Positioning.
&-wrapper-left {
position: absolute;
display: inline-block;
display: none;
left: 40px;
bottom: 90px;
z-index: -1;
Expand All @@ -159,15 +162,23 @@
bottom: -60px;
}
}

@include breakpoint($mobile) {
display: inline-block;
}
}

&-wrapper-right {
position: absolute;
right: 50px;
top: 0;
z-index: -1;
}
display: none;

@include breakpoint($mobile) {
display: inline-block;
}
}
}

&__checkbox {
Expand All @@ -177,32 +188,57 @@
padding-left: 5px;
text-align: left;

&-title {
margin-bottom: 10px;
}

input {
margin-top: 5px;
position: absolute;
left: 0;
}

&--with-icon {
padding-left: 0;
padding-right: 20px;

label {
padding-left: 0;
}

input {
left: auto;
right: 0;
}

}
}

.member__text-area {
width: 100%;
}

.member__text-field {
padding: 0;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
text-align: center;
color: color('grey-dark');


&:active,
&:focus,
&:hover {
&:hover {
border: none;
padding: 0;
border-bottom: 1px solid rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
}

&--wrapper-with-icon {
display: flex;
justify-content: center;
}
}
// Increase specificity to avoid regressions.
.member__card {
max-width: 330px;
Expand All @@ -217,16 +253,19 @@
z-index: 1;
width: 100%;
min-width: 100%;
transform: translateX(-100%);
padding: 30px 25px;
}

&-shape-wrapper {
overflow: hidden;
width: 100%;
min-width: 100%;
position: relative;
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

// Shape positioning in card.
Expand Down
Loading

0 comments on commit b3e430a

Please sign in to comment.