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

improving the avatars visuals and code

Browse source
This commit is contained in:
Janne Koivistoinen 2017-09-12 14:44:49 +03:00
parent a3479bbab5
commit 822f006f95
12 changed files with 90 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,13 @@
@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 */
@ -27,7 +28,6 @@
/* 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 */
@ -36,6 +36,8 @@
}
.initials {
font-size: 14px;
font-weight: var(--fontWeightBold);
padding-bottom: 4px;
}
@ -43,7 +45,6 @@
/* Medium Avatar */
.mediumAvatar {
@apply --marketplaceMediumAvatarFontStyles;
@apply --avatarBase;
/* Fixed dimensions */
@ -52,6 +53,8 @@
}
.mediumAvatar .initials {
font-size: 20px;
font-weight: var(--fontWeightSemiBold);
padding-bottom: 5px;
}
@ -59,7 +62,6 @@
/* Large Avatar */
.largeAvatar {
@apply --marketplaceH1FontStyles;
@apply --avatarBase;
/* Fixed dimensions */
@ -68,5 +70,7 @@
}
.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;

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

@ -5,7 +5,7 @@ import * as propTypes from '../../util/propTypes';
import { createSlug } from '../../util/urlHelpers';
import { ensureListing, ensureTransaction, ensureBooking, ensureUser } from '../../util/data';
import {
AvatarMedium,
AvatarLarge,
BookingBreakdown,
NamedLink,
ResponsiveImage,
@ -195,11 +195,11 @@ const SaleDetailsPanel = props => {
/>
</div>
<div className={css.avatarWrapperMobile}>
<AvatarMedium user={currentCustomer} />
<AvatarLarge user={currentCustomer} />
</div>
<div className={css.info}>
<div className={css.avatarWrapperDesktop}>
<AvatarMedium user={currentCustomer} />
<AvatarLarge user={currentCustomer} />
</div>
<h1 className={css.title}>{title}</h1>
<p className={css.message}>{message}</p>

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/containers/CheckoutPage/CheckoutPage.css
View file

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

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

@ -209,10 +209,6 @@
}
}
.itemAvatarImage {
border-radius: 50%;
}
.rowNotificationDot {
width: 6px;
height: 6px;

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

@ -161,14 +161,7 @@
/* 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;
@ -177,32 +170,17 @@
}
}
.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 */
display: flex;
align-items: center;
justify-content: center;
/* Colors */
background-color: var(--matterColorAnti);
color: var(--matterColorLight);
.responsiveAvatarMedium {
display: none; /* Hide the medium avatar from the bigger screens */
@media screen and (max-width: 767px) {
display: flex;
}
}
/* Align the avatar initials properly within the circle */
.avatar span {
margin-bottom: 5px;
.responsiveAvatarLarge {
display: none; /* Hide the large avatar from the smaller screens */
@media (--viewportMedium) {
margin-bottom: 0;
display: flex;
}
}

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

@ -12,7 +12,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,
@ -268,9 +269,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.responsiveAvatarLarge}/>
<AvatarMedium user={currentAuthor} className={css.responsiveAvatarMedium}/>
</div>
<div className={css.mainContent}>

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);
@ -189,7 +213,10 @@
}
}
/* Inputs */
/* ================ Inputs ================ */
--marketplaceInputStyles: {
/* Dimensions */
@ -260,6 +287,8 @@
}
}
/* ================ Custom media queries ================ */
@custom-media --viewportMedium (min-width: 768px);

65
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;
@ -140,15 +151,14 @@
margin-bottom: 8px;
@media (--viewportMedium) {
font-size: 16px;
line-height: 24px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 10px;
margin-bottom: 14px;
}
}
--marketplaceH6FontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightBold);
font-size: 12px;
line-height: 18px;
@ -165,6 +175,10 @@
margin-bottom: 6px;
}
}
/* ================ Other fonts ================ */
--marketplaceTinyFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightRegular);
@ -183,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;
@ -227,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;
@ -242,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;