maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-29 13:06:03 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #395 from sharetribe/sync-avatars

Browse source 
Sync avatars
This commit is contained in:
Vesa Luusua 2017-09-12 20:04:32 +03:00 • committed by GitHub
commit afdf29b865
16 changed files with 168 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/components/Avatar/Avatar.css
View file

@ -1,66 +1,44 @@
@import '../../marketplace.css';
:root {
--avatarSize: 100%;
--avatarSizeMedium: 61px;
--avatarSizeLarge: 120px;
--avatarSize: 40px;
--avatarSizeMedium: 60px;
--avatarSizeLarge: 96px;
/* Base for all avatars */
--avatarBase: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
border-radius: 50%;
/* Position possible initials to the center of the component */
display: flex;
align-items: center;
justify-content: center;
/* Colors */
background-image: linear-gradient(-180deg, #E16B56 0%, #C0392B 100%);
color: var(--matterColorLight);
}
}
/* Small Avatar */
.root {
/* Font is specific to this component, but defining it in marketplace.css makes it easier
* to change font if brand look-and-feel needs such changes.
*/
@apply --marketplaceSmallAvatarFontStyles;
@apply --avatarBase;
/* Layout */
width: var(--avatarSize);
height: var(--avatarSize);
border-radius: 50%;
/* Position possible initials to the center of the component */
display: flex;
align-items: center;
justify-content: center;
/* Colors */
background-color: var(--matterColorAnti);
color: var(--matterColorLight);
}
.mediumAvatar {
@apply --marketplaceMediumAvatarFontStyles;
/* Fixed dimensions */
width: var(--avatarSizeMedium);
height: var(--avatarSizeMedium);
border-radius: 50%;
/* Position possible initials to the center of the component */
display: flex;
align-items: center;
justify-content: center;
/* Colors */
background-color: var(--matterColorAnti);
color: var(--matterColorLight);
}
.largeAvatar {
@apply --marketplaceH1FontStyles;
/* Fixed dimensions */
width: var(--avatarSizeLarge);
height: var(--avatarSizeLarge);
border-radius: 50%;
/* Position possible initials to the center of the component */
display: flex;
align-items: center;
justify-content: center;
/* Colors */
background-color: var(--matterColorAnti);
color: var(--matterColorLight);
.initials {
font-size: 14px;
font-weight: var(--fontWeightBold);
padding-bottom: 4px;
}
.avatarImage {
@ -69,14 +47,36 @@
border-radius: inherit;
}
.initials {
padding-bottom: 4px;
/* Medium Avatar */
.mediumAvatar {
@apply --avatarBase;
/* Fixed dimensions */
width: var(--avatarSizeMedium);
height: var(--avatarSizeMedium);
}
.mediumAvatar .initials {
font-size: 20px;
font-weight: var(--fontWeightSemiBold);
padding-bottom: 5px;
}
/* Large Avatar */
.largeAvatar {
@apply --avatarBase;
/* Fixed dimensions */
width: var(--avatarSizeLarge);
height: var(--avatarSizeLarge);
}
.largeAvatar .initials {
font-size: 30px;
font-weight: var(--fontWeightSemiBold);
padding-bottom: 6px;
}

2
src/components/OrderDetailsPanel/OrderDetailsPanel.css
View file

@ -57,8 +57,6 @@
/* Layout */
display: block;
width: 61px;
height: 61px;
@media (--viewportLarge) {
margin-left: 48px;

18
src/components/SaleDetailsPanel/SaleDetailsPanel.css
View file

@ -67,7 +67,7 @@
@media (--viewportLarge) {
max-width: 100%;
margin: 42px 0 0 0;
margin: 40px 0 0 0;
}
}
@ -80,29 +80,25 @@
}
}
.avatarWrapperMobile {
.avatarMobile {
/* Position (over the listing image)*/
margin-top: -31px;
margin-left: 24px;
/* Bring on top of image */
position: relative;
/* Layout */
display: flex;
justify-content: center;
width: 100%;
@media (--viewportLarge) {
display: none;
}
}
.avatarWrapperDesktop {
.avatarDesktop {
display: none;
@media (--viewportLarge) {
display: block;
margin-top: 122px;
display: flex;
margin-top: 121px;
}
}
@ -121,7 +117,7 @@
@media (--viewportLarge) {
display: block;
margin: 122px 0 0 0;
margin: 116px 0 0 0;
background-color: var(--matterColorLight);
border: 1px solid var(--matterColorNegative);
border-radius: 2px;

9
src/components/SaleDetailsPanel/SaleDetailsPanel.js
View file

@ -5,6 +5,7 @@ import * as propTypes from '../../util/propTypes';
import { createSlug } from '../../util/urlHelpers';
import { ensureListing, ensureTransaction, ensureUser } from '../../util/data';
import {
AvatarLarge,
AvatarMedium,
BookingBreakdown,
NamedLink,
@ -181,12 +182,12 @@ const SaleDetailsPanel = props => {
sizes="100vw"
/>
</div>
<div className={css.avatarWrapperMobile}>
<AvatarMedium user={currentCustomer} />
<div className={css.avatarWrapper}>
<AvatarMedium user={currentCustomer} className={css.avatarMobile}/>
</div>
<div className={css.info}>
<div className={css.avatarWrapperDesktop}>
<AvatarMedium user={currentCustomer} />
<div className={css.avatarWrapper}>
<AvatarLarge user={currentCustomer} className={css.avatarDesktop}/>
</div>
<h1 className={css.title}>{title}</h1>
<p className={css.message}>{message}</p>

2
src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap
View file

@ -42,7 +42,7 @@ exports[`SaleDetailsPanel matches snapshot 1`] = `
</div>
<div>
<div>
<AvatarMedium
<AvatarLarge
user={
Object {
"attributes": Object {

1
src/components/TextInputField/TextInputField.css
View file

@ -1,7 +1,6 @@
@import '../../marketplace.css';
.root {
}
.input {

2
src/components/TopbarDesktop/TopbarDesktop.css
View file

@ -185,8 +185,6 @@
.avatar {
margin: 16px 0;
width: 41px;
height: 41px;
}
.profileMenuContent {

2
src/components/TopbarMobileMenu/TopbarMobileMenu.css
View file

@ -29,7 +29,7 @@
.avatar {
/* Layout */
flex-shrink: 0;
margin: var(--topMarginMobileMenu) 0 24px 0;
margin: var(--topMarginMobileMenu) 0 0 0;
}
.greeting {

2
src/containers/CheckoutPage/CheckoutPage.css
View file

@ -129,8 +129,6 @@
/* Layout */
display: block;
width: 61px;
height: 61px;
@media (--viewportLarge) {
margin-left: 48px;

14
src/containers/InboxPage/InboxPage.css
View file

@ -198,21 +198,13 @@
.itemAvatar {
margin-right: 8px;
width: 43px;
height: 43px;
@media (--viewportLarge) {
margin-top: 2px;
margin-right: 15px;
width: 41px;
height: 41px;
}
}
.itemAvatarImage {
border-radius: 50%;
}
.rowNotificationDot {
width: 6px;
height: 6px;
@ -359,7 +351,11 @@
.bookingPending {
color: var(--matterColor);
margin-top: 9px;
margin-top: 4px;
@media (var--viewportMedium) {
margin-top: 9px;
}
}
.bookingRequested,

47
src/containers/ListingPage/ListingPage.css
View file

@ -178,16 +178,16 @@
flex-basis: 100%;
@media (--viewportMedium) {
margin-top: 51px;
margin-top: 50px;
margin-bottom: 51px;
flex-shrink: 0;
}
@media (--viewportLarge) {
margin-top: 51px;
margin-top: 50px;
margin-bottom: 0px;
/* contentContainer's full width - (bookingColumn + gutters) */
flex-basis: calc(100% - 431px);
flex-basis: calc(100% - 491px);
flex-shrink: 0;
}
}
@ -200,48 +200,28 @@
/* Rendering context to the same lavel as listing image */
position: relative;
/* Layout */
display: block;
width: 61px;
height: 61px;
@media (--viewportMedium) {
width: 96px;
height: 96px;
position: absolute;
left: 60px;
top: -48px;
top: -49px;
margin-left: 0;
margin-top: 0;
}
}
.avatar {
/* Font */
@apply --marketplaceAvatarFontStyles;
/* Layout */
width: 100%;
height: 100%;
border-radius: 50%;
margin-top: 0;
margin-bottom: 0;
/* Position possible initials to the center of the component */
.avatarMobile {
display: flex;
align-items: center;
justify-content: center;
/* Colors */
background-color: var(--matterColorAnti);
color: var(--matterColorLight);
@media (--viewportMedium) {
display: none; /* Hide the medium avatar from the bigger screens */
}
}
/* Align the avatar initials properly within the circle */
.avatar span {
margin-bottom: 5px;
.avatarDesktop {
display: none; /* Hide the large avatar from the smaller screens */
@media (--viewportMedium) {
margin-bottom: 0;
display: flex;
}
}
@ -464,7 +444,7 @@
@media (--viewportLarge) {
display: block;
margin-top: 88px;
margin-top: 87px;
margin-left: 60px;
border-left-style: solid;
border-left-width: 1px;
@ -472,6 +452,7 @@
/* Calendar needs 311px width and therefore padding can't be wider than 58px */
padding-left: 60px;
padding-right: 60px;
flex-basis: 311px;
flex-shrink: 0;
}

7
src/containers/ListingPage/ListingPage.js
View file

@ -13,7 +13,8 @@ import { formatMoney } from '../../util/currency';
import { createResourceLocatorString, findRouteByRouteName } from '../../util/routes';
import { ensureListing, ensureUser } from '../../util/data';
import {
Avatar,
AvatarLarge,
AvatarMedium,
Button,
Map,
ModalInMobile,
@ -324,9 +325,11 @@ export class ListingPageComponent extends Component {
>
<ImageCarousel images={currentListing.images} />
</Modal>
<div className={css.contentContainer}>
<div className={css.avatarWrapper}>
<Avatar rootClassName={css.avatar} user={currentAuthor} />
<AvatarLarge user={currentAuthor} className={css.avatarDesktop}/>
<AvatarMedium user={currentAuthor} className={css.avatarMobile}/>
</div>
<div className={css.mainContent}>

19
src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
View file

@ -90,9 +90,22 @@ exports[`ListingPage matches snapshot 1`] = `
</InjectIntl(ModalComponent)>
<div>
<div>
<Avatar
className={null}
rootClassName={null}
<AvatarLarge
user={
Object {
"attributes": Object {
"profile": Object {
"abbreviatedName": "user-1 abbreviated name",
"displayName": "user-1 display name",
},
},
"id": UUID {
"uuid": "user-1",
},
"type": "user",
}
} />
<AvatarMedium
user={
Object {
"attributes": Object {

47
src/marketplace.css
View file

@ -30,7 +30,10 @@
background-position-x: 80%;
}
/* Colors */
/* ================ Colors ================ */
--marketplaceColor: #C0392B;
--marketplaceColorLight: #FF4C38;
--marketplaceColorDark: #8C291E;
@ -49,7 +52,10 @@
--matterColorLightTransparent: rgba(255,255,255,0.65);
/* Spacing units */
/* ================ Spacing unites ================ */
/* Multiples of mobile and desktop spacing units should be used with margins and paddings. */
--spacingUnit: 6px;
--spacingUnitDesktop: 8px;
@ -64,25 +70,40 @@
--boxShadowButton: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
--boxShadowListingCard: 0 0 50px 0 rgba(0,0,0,0.1);
/* z-index base levels */
/* ================ Z-index base levels ================ */
/* small popups on UI should use z-indexes above 50 */
--zIndexPopup: 50;
/* modals and UI overlays should use z-indexes above 100 */
--zIndexModal: 100;
/* Border radius */
/* ================ Border radius ================ */
--borderRadius: 2px;
--borderRadiusMobileSearch: 3px;
/* Transitions */
/* ================ Transition styles ================ */
--transitionStyle: ease-in 0.2s;
--transitionStyleButton: ease-in-out 0.1s;
/* Topbar */
/* ================ Topbar heights ================ */
--topbarHeight: 60px;
--topbarHeightDesktop: 72px;
/* Links */
/* ================ Links ================ */
--marketplaceLinkStyles: {
/* Position and dimensions */
@ -105,7 +126,10 @@
}
}
/* Buttons */
/* ================ Buttons ================ */
--marketplaceButtonFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightSemiBold);
@ -190,7 +214,10 @@
}
}
/* Inputs */
/* ================ Inputs ================ */
--marketplaceInputStyles: {
/* Dimensions */
@ -261,6 +288,8 @@
}
}
/* ================ Custom media queries ================ */
@custom-media --viewportMedium (min-width: 768px);

64
src/marketplaceFonts.css
View file

@ -7,6 +7,9 @@
--fontWeightSemiBold: 600;
--fontWeightBold: 700;
/* ================ Default font ================ */
--marketplaceDefaultFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightMedium);
@ -21,6 +24,9 @@
}
}
/* ================ Body font ================ */
--marketplaceBodyFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightMedium);
@ -40,8 +46,10 @@
}
}
/* ================ Hero title ================ */
--marketplaceHeroTitleFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightBold);
font-size: 48px;
line-height: 54px;
@ -59,8 +67,11 @@
margin-bottom: 31px;
}
}
/* ================ H1, H2, H3, H4, H5 & H6 ================ */
--marketplaceH1FontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightBold);
font-size: 30px;
line-height: 36px;
@ -79,8 +90,8 @@
margin-bottom: 24px;
}
}
--marketplaceH2FontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightSemiBold);
font-size: 24px;
line-height: 30px;
@ -96,8 +107,8 @@
margin-bottom: 19px;
}
}
--marketplaceH3FontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightSemiBold);
font-size: 20px;
line-height: 24px;
@ -112,8 +123,8 @@
margin-bottom: 16px;
}
}
--marketplaceH4FontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightMedium);
font-size: 16px;
line-height: 24px;
@ -129,8 +140,8 @@
margin-bottom: 15px;
}
}
--marketplaceH5FontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightRegular);
font-size: 14px;
line-height: 18px;
@ -146,8 +157,8 @@
margin-bottom: 14px;
}
}
--marketplaceH6FontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightBold);
font-size: 12px;
line-height: 18px;
@ -164,6 +175,10 @@
margin-bottom: 6px;
}
}
/* ================ Other fonts ================ */
--marketplaceTinyFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightRegular);
@ -182,39 +197,9 @@
}
}
/* This font is specific to Avatar component only */
--marketplaceAvatarFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightSemiBold);
font-size: 20px;
line-height: 24px;
letter-spacing: -0.2px;
@media (--viewportMedium) {
font-size: 30px;
line-height: 48px;
}
}
/* This font is specific to Avatar component only */
--marketplaceSmallAvatarFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightBold);
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
}
/* This font is specific to Avatar component only */
--marketplaceMediumAvatarFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightSemiBold);
font-size: 20px;
line-height: 24px;
letter-spacing: -0.2px;
}
/* This font is specific to Modal's (Lightbox) titles */
--marketplaceModalTitle: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightSemiBold);
font-size: 30px;
line-height: 36px;
@ -226,8 +211,10 @@
}
}
/* ================ Tabbed navigation font styles ================ */
--marketplaceTabNavFontStyles {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightMedium);
font-size: 16px;
line-height: 24px;
@ -241,7 +228,6 @@
}
--marketplaceTabNavHorizontalFontStyles {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightMedium);
font-size: 16px;
line-height: 24px;

1
src/marketplaceIndex.css
View file

@ -4,6 +4,7 @@
/* ================ Fonts ================ */
body {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
-moz-osx-font-smoothing: grayscale; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
text-rendering: optimizeSpeed;