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

Merge pull request #853 from sharetribe/footer-improvements

Browse source 
Footer styles changed to more generic
This commit is contained in:
Vesa Luusua 2018-06-26 12:37:07 +03:00 • committed by GitHub
commit 1fb3cc879d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -19,6 +19,9 @@ way to update this template, but currently, we follow a pattern:
[#851](https://github.com/sharetribe/flex-template-web/pull/851)
* [fix] Persisting booking request details across authentication
[#852](https://github.com/sharetribe/flex-template-web/pull/852)
* [change] Footer styles changed to more generic (no disappearing columns etc.)
If you have made changes to Footer, consider extracting it to different component before update.
[#853](https://github.com/sharetribe/flex-template-web/pull/853)
## v1.0.0

43
src/components/Footer/Footer.css
View file

@ -44,6 +44,10 @@
max-width: 1056px;
margin: 0 auto;
}
@media (--viewportLarge) {
padding: 0 24px;
}
}
/* Mobile only social media links */
@ -67,25 +71,30 @@
.links {
/* Layout */
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-bottom: 42px;
margin-bottom: 18px;
@media (--viewportMedium) {
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 0;
}
}
/* Desktop: logo and organization stuff */
.organization {
flex-shrink: 0;
flex-basis: 220px;
display: none;
margin-right: 24px;
margin-bottom: 24px;
@media (--viewportMedium) {
display: block;
order: 1;
margin-right: 12px;
}
}
@ -127,9 +136,12 @@
.infoLinks {
order: 2;
flex-basis: 165px;
margin-right: 24px;
margin-bottom: 24px;
@media (--viewportMedium) {
padding-top: 2px;
margin-right: 12px;
}
}
@ -139,8 +151,9 @@
}
.listItem {
height: 24px;
min-height: 24px;
margin-bottom: 6px;
@media (--viewportMedium) {
margin-bottom: 0;
}
@ -149,6 +162,7 @@
.link {
/* Font */
@apply --marketplaceH4FontStyles;
line-height: 20px;
color: var(--matterColor);
transition: var(--transitionStyleButton);
@ -170,8 +184,12 @@
.searches {
order: 3;
flex-basis: 165px;
margin-right: 24px;
margin-bottom: 24px;
@media (--viewportMedium) {
padding-top: 2px;
margin-right: 12px;
}
}
@ -179,32 +197,29 @@
/* This is not always visible */
.searchesExtra {
order: 4;
display: none;
flex-basis: 165px;
@media (min-width: 550px) {
display: block;
}
margin-right: 24px;
margin-bottom: 24px;
@media (--viewportMedium) {
display: none;
}
@media (--viewportLarge) {
display: block;
padding-top: 2px;
margin-right: 12px;
}
}
/* Desktop: extra links (social media links and legal links) */
.extraLinks {
flex-shrink: 0;
order: 5;
display: none;
flex-basis: 109px;
margin-right: 24px;
margin-bottom: 24px;
@media (--viewportMedium) {
display: flex;
flex-direction: column;
margin-right: 12px;
}
}