mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-28 12:43:11 +10:00
Merge pull request #1019 from sharetribe/fix-page-widths
Page content width should be enforced to 1056px
This commit is contained in:
Vesa Luusua
GitHub
commit
c30a6ab6e2
26 changed files with 105 additions and 71 deletions
|
|
@ -14,6 +14,10 @@ way to update this template, but currently, we follow a pattern:
|
|||
|
||||
## Upcoming version 2019-XX-XX
|
||||
|
||||
- [fix] Small changes in CSS files in order to match content width with the footer in pages where
|
||||
the footer is visible. Also, make side layout (used e.g. in `TermsOfServicePage`, `InboxPage`,
|
||||
`ContactDetailsPage`) align width footer better. Check responsive layouts carefulle after taking
|
||||
update from upstream. [#1090](https://github.com/sharetribe/flex-template-web/pull/1019)
|
||||
- [add] This adds an example how user-generated content could be sanitized. If you have extended
|
||||
data you should consider if sanitization is needed for that.
|
||||
[#1023](https://github.com/sharetribe/flex-template-web/pull/1023)
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
@media (--viewportLarge) {
|
||||
.title {
|
||||
margin-bottom: 44px;
|
||||
margin-bottom: 38px;
|
||||
padding: 1px 0 7px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
margin-bottom: 19px;
|
||||
|
||||
@media (--viewportLarge) {
|
||||
margin-bottom: 44px;
|
||||
margin-bottom: 38px;
|
||||
padding: 1px 0 7px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
margin-bottom: 19px;
|
||||
|
||||
@media (--viewportLarge) {
|
||||
margin-bottom: 44px;
|
||||
margin-bottom: 38px;
|
||||
padding: 1px 0 7px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
margin-bottom: 19px;
|
||||
|
||||
@media (--viewportLarge) {
|
||||
margin-bottom: 44px;
|
||||
margin-bottom: 38px;
|
||||
padding: 1px 0 7px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@
|
|||
margin-bottom: 19px;
|
||||
|
||||
@media (--viewportLarge) {
|
||||
margin-bottom: 47px;
|
||||
margin-bottom: 38px;
|
||||
padding: 1px 0 7px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
margin-bottom: 19px;
|
||||
|
||||
@media (--viewportLarge) {
|
||||
margin-bottom: 44px;
|
||||
margin-bottom: 38px;
|
||||
padding: 1px 0 7px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
margin-bottom: 19px;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
margin-bottom: 44px;
|
||||
margin-bottom: 38px;
|
||||
padding: 1px 0 7px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,17 +38,16 @@
|
|||
overflow-x: scroll;
|
||||
|
||||
@media (--viewportLarge) {
|
||||
padding: 126px 0 82px 15vw;
|
||||
padding: 128px 0 82px 36px;
|
||||
flex-direction: column;
|
||||
overflow-x: auto;
|
||||
|
||||
background-color: var(--matterColorBright);
|
||||
box-shadow: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@media (--viewportXLarge) {
|
||||
padding-left: 25vw;
|
||||
@media (--viewportLargeWithPaddings) {
|
||||
padding: 128px 0 82px calc((100% - 1056px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -85,13 +84,13 @@
|
|||
flex-grow: 1;
|
||||
|
||||
@media (--viewportLarge) {
|
||||
padding: 82px 15vw 82px 82px;
|
||||
padding: 88px 36px 82px 59px;
|
||||
border-left: 1px solid var(--matterColorNegative);
|
||||
background-color: var(--matterColorLight);
|
||||
}
|
||||
|
||||
@media (--viewportXLarge) {
|
||||
padding-right: 25vw;
|
||||
@media (--viewportLargeWithPaddings) {
|
||||
padding: 88px calc((100% - 1056px) / 2) 82px 59px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
background-color: var(--matterColorBright);
|
||||
|
||||
@media (--viewportMedium) {
|
||||
padding: 0 30px 33px 30px;
|
||||
padding: 0 24px 33px 24px;
|
||||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
|
|
@ -41,12 +41,17 @@
|
|||
width: 100%;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
max-width: 1056px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
padding: 0 24px;
|
||||
max-width: 1128px;
|
||||
padding: 0 36px;
|
||||
}
|
||||
|
||||
@media (--viewportXLarge) {
|
||||
max-width: 1056px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -96,6 +101,14 @@
|
|||
order: 1;
|
||||
margin-right: 12px;
|
||||
}
|
||||
@media (--viewportLarge) {
|
||||
flex-basis: 240px;
|
||||
margin-right: 57px;
|
||||
}
|
||||
@media (--viewportLargeWithPaddings) {
|
||||
flex-basis: 250px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.logoLink {
|
||||
|
|
@ -221,6 +234,9 @@
|
|||
flex-direction: column;
|
||||
margin-right: 12px;
|
||||
}
|
||||
@media (--viewportLarge) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.legalMatters {
|
||||
|
|
|
|||
|
|
@ -35,14 +35,18 @@
|
|||
padding: 24px;
|
||||
|
||||
@media (--viewportLarge) {
|
||||
padding: 116px 15vw 82px 82px;
|
||||
/**
|
||||
* Calculate right padding to match Footer right border
|
||||
* and left padding together with border should be 60px.
|
||||
*/
|
||||
padding: 112px 36px 82px 59px;
|
||||
background-color: var(--matterColorLight);
|
||||
border-left-width: 1px;
|
||||
border-left-style: solid;
|
||||
border-left-color: var(--matterColorNegative);
|
||||
}
|
||||
|
||||
@media (--viewportXLarge) {
|
||||
padding-right: 25vw;
|
||||
@media (--viewportLargeWithPaddings) {
|
||||
padding: 112px calc((100% - 1056px) / 2) 82px 59px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
box-shadow: var(--boxShadow);
|
||||
|
||||
@media (--viewportLarge) {
|
||||
padding: 112px 0 82px 15vw;
|
||||
padding: 112px 0 82px 36px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
border: none;
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (--viewportXLarge) {
|
||||
padding-left: 25vw;
|
||||
@media (--viewportLargeWithPaddings) {
|
||||
padding: 112px 0 82px calc((100% - 1056px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
@media (--viewportLarge) {
|
||||
min-height: auto;
|
||||
flex-direction: column;
|
||||
margin-top: 28px;
|
||||
margin-top: 24px;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
since browsers support CSS Properties already.
|
||||
*/
|
||||
|
||||
--TabNav_linkWidth: 200px;
|
||||
--TabNav_linkWidth: 240px;
|
||||
--TabNav_linkBorderWidth: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -59,13 +59,13 @@
|
|||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
border-bottom-width: 0px;
|
||||
margin-bottom: 14px;
|
||||
width: var(--TabNav_linkWidth);
|
||||
|
||||
/* Remove mobile (horizontally aligned) nav styling */
|
||||
padding-top: 0;
|
||||
border-bottom-width: 0px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
|
||||
padding-top: 6px; /* Drop the text to adjust it to correct baseline */
|
||||
padding-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
/* shadows */
|
||||
box-shadow: var(--boxShadowLight);
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@media (--viewportLarge) {
|
||||
padding: 0 24px 0 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
padding: 21px 24px 21px 24px;
|
||||
height: 100%;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@media (--viewportLarge) {
|
||||
padding: 21px 36px 21px 36px;
|
||||
}
|
||||
}
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
border-left-width: 1px;
|
||||
border-left-color: var(--matterColorNegative);
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@media (--viewportLarge) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
padding-left: 24px;
|
||||
height: var(--topbarHeightDesktop);
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@media (--viewportLarge) {
|
||||
padding-left: 34px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,14 @@
|
|||
|
||||
@media (--viewportLarge) {
|
||||
flex-direction: row;
|
||||
max-width: 1156px; /* 1060 + (paddingLeft + paddingRight) */
|
||||
max-width: 1128px;
|
||||
margin: 0 auto 57px auto;
|
||||
padding: 0 48px;
|
||||
padding: 0 36px;
|
||||
}
|
||||
|
||||
@media (--viewportXLarge) {
|
||||
max-width: 1056px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,15 +17,10 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
margin-top: 4px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 19px;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 47px;
|
||||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,16 +53,15 @@
|
|||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
padding: 113px 0 82px 15vw;
|
||||
padding: 113px 0 82px 36px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (--viewportXLarge) {
|
||||
padding-left: 25vw;
|
||||
@media (--viewportLargeWithPaddings) {
|
||||
padding: 113px 0 82px calc((100% - 1056px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,8 +179,8 @@
|
|||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
margin-bottom: 21px;
|
||||
padding-bottom: 18px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -85,13 +85,19 @@
|
|||
margin: var(--LandingPage_sectionMarginTop) 24px 51px 24px;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
margin: var(--LandingPage_sectionMarginTopMedium) 7.5vw 60px 7.5vw;
|
||||
max-width: 100%;
|
||||
margin: var(--LandingPage_sectionMarginTopMedium) 24px 60px 24px;
|
||||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
max-width: calc(1052px + 36px + 36px);
|
||||
margin: var(--LandingPage_sectionMarginTopLarge) auto 93px auto;
|
||||
max-width: 1128px;
|
||||
padding: 0 36px 0 36px;
|
||||
margin: var(--LandingPage_sectionMarginTopLarge) auto 93px auto;
|
||||
}
|
||||
|
||||
@media (--viewportXLarge) {
|
||||
max-width: 1056px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -191,16 +191,23 @@
|
|||
|
||||
.contentContainer {
|
||||
@media (--viewportMedium) {
|
||||
max-width: 1280px;
|
||||
max-width: 1056px;
|
||||
margin: 0 auto;
|
||||
padding: 0 60px;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
max-width: 1128px;
|
||||
padding: 0 36px;
|
||||
margin: 0 auto 117px;
|
||||
}
|
||||
|
||||
@media (--viewportXLarge) {
|
||||
max-width: 1056px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
|
|
@ -219,6 +226,7 @@
|
|||
/* contentContainer's full width - (bookingColumn + two paddings + margin + border) */
|
||||
flex-basis: calc(100% - 493px);
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -232,7 +240,6 @@
|
|||
border-left-color: var(--matterColorNegative);
|
||||
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
|
||||
/* The calendar needs 312px */
|
||||
flex-basis: 312px;
|
||||
|
|
|
|||
|
|
@ -17,15 +17,10 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
margin-top: 4px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 19px;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 47px;
|
||||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,15 +17,10 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
margin-top: 4px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 19px;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 47px;
|
||||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
margin: 5px 0 18px 0;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
margin: 2px 0 23px 0;
|
||||
margin: 8px 0 24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
|
||||
@media (--viewportLarge) {
|
||||
display: block;
|
||||
margin: 4px 0 23px 0;
|
||||
margin: 2px 0 24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
margin: 5px 0 18px 0;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
margin: 2px 0 23px 0;
|
||||
margin: 8px 0 24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
@media (--viewportSmall) {
|
||||
/* day aka table cell content should have bigger paddings when there's more space */
|
||||
.day {
|
||||
padding: 16px;
|
||||
|
|
|
|||
|
|
@ -569,6 +569,8 @@
|
|||
|
||||
/* ================ Custom media queries ================ */
|
||||
|
||||
@custom-media --viewportSmall (min-width: 550px);
|
||||
@custom-media --viewportMedium (min-width: 768px);
|
||||
@custom-media --viewportLarge (min-width: 1024px);
|
||||
@custom-media --viewportLargeWithPaddings (min-width: 1128px);
|
||||
@custom-media --viewportXLarge (min-width: 1921px);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue