-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fabric Web migration to Svelte #339
Changes from all commits
fb928e3
1493c7b
dba7608
b69da95
5aa41c7
2399969
f088aa0
bcfbccd
d93467a
86a06a5
7ffaf74
ee2b06e
6e04cef
bc27ba5
cd3cc48
25cd3c9
db57c7c
c7220c3
60ce79e
571bbb0
f3da325
0b11f10
91486d0
d7e616e
833aff9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
<script lang="ts"> | ||
deedeeh marked this conversation as resolved.
Show resolved
Hide resolved
|
||
export let fullWidth: boolean; | ||
</script> | ||
|
||
<div class="container" class:fullWidth> | ||
<div class="text">Advertisement</div> | ||
</div> | ||
|
||
<style lang="scss"> | ||
@import './fonts/Sans.css'; | ||
|
||
.container { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think the label won't be aligned with the ad on larger screens without the helpers media queries There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You're right the label is not aligned. I tried it with the media queries but it didn't work. I had to add the padding to replicate the behaviour of the live site. On a separate note, I notice the layers don't behave correctly with the media queries. I removed them and now I believe the behaviour is aligned to legacy There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Without the media queries the ad won't be constrained to certain widths at certain breakpoints like the current fabric is? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's a bit confusing because fixed ads behave differently to parallax ads. The background image of the parallax ads is controlled by the commercial code and is outside this template so doesn't respect these media queries. I've reinstated the media queries, but for parallax ads I've allowed the ad label to go full-width and used padding to place it in the correct position on large screens |
||
position: relative; | ||
height: 2em; | ||
background-color: #f6f6f6; | ||
border-top: 1px solid #dcdcdc; | ||
color: #707070; | ||
font-family: 'GuardianTextSans', 'Helvetica Neue', Helvetica, Arial, | ||
'Lucida Grande', sans-serif; | ||
font-size: 0.75rem; | ||
line-height: 1.9; | ||
font-weight: 400; | ||
box-sizing: border-box; | ||
|
||
&.fullWidth { | ||
padding: 0 calc(50% - 650px); // Keep the label central for large screens | ||
} | ||
|
||
&:not(.fullWidth) { | ||
margin: 0 auto; | ||
@media (min-width: 740px) { | ||
max-width: 740px; | ||
} | ||
@media (min-width: 980px) { | ||
max-width: 980px; | ||
} | ||
@media (min-width: 1140px) { | ||
max-width: 1140px; | ||
} | ||
@media (min-width: 1300px) { | ||
max-width: 1300px; | ||
} | ||
} | ||
} | ||
|
||
.text { | ||
padding: 0 10px; | ||
|
||
@media (min-width: 740px) { | ||
padding: 0 20px; | ||
} | ||
} | ||
</style> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<script lang="ts"> | ||
export let src: string; | ||
</script> | ||
|
||
<img {src} alt="" class="pixel" /> | ||
|
||
<style lang="scss"> | ||
.pixel { | ||
position: absolute; | ||
bottom: 0; | ||
right: 0; | ||
width: 1px; | ||
height: 1px; | ||
opacity: 0; | ||
} | ||
</style> | ||
Comment on lines
+7
to
+16
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As Svelte scopes styles automaticall, you can apply the styles directly to |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,128 @@ | ||
$guardian-brand: #c70000; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've created a ticket in the backlog for us to use this palette, as we currently don't use it There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Some of these colour values could use a Source makeover too 💅 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Will add this as a note on the newly created ticket |
||
$guardian-brand-light: #94b1ca; | ||
$guardian-brand-dark: #121212; | ||
|
||
$error: #d61d00; | ||
$success: #4a7801; | ||
|
||
// Neutral palette | ||
$neutral-1: #333333; | ||
$neutral-2: #767676; | ||
$neutral-3: #bdbdbd; | ||
$neutral-4: #dcdcdc; | ||
$neutral-5: #dfdfdf; | ||
$neutral-6: #eaeaea; | ||
$neutral-7: #f1f1f1; | ||
$neutral-8: #f6f6f6; | ||
$neutral-2-contrasted: darken($neutral-2, 3%); | ||
|
||
// News palette | ||
$news-main-1: #005689; | ||
$news-main-2: #4bc6df; | ||
$news-support-1: #aad8f1; | ||
$news-support-2: #197caa; | ||
$news-support-3: #69d1ca; | ||
$news-support-4: #66a998; | ||
$news-support-5: #aad801; | ||
$news-support-6: #63717a; | ||
$news-support-7: #484f53; | ||
|
||
// Features palette | ||
$features-main-1: #7d0068; | ||
$features-main-2: #b82266; | ||
$features-support-1: #951c55; | ||
$features-support-2: #4e0375; | ||
$features-support-3: #fdadba; | ||
$features-support-4: #dc2a7d; | ||
|
||
// Comment palette | ||
$comment-main-1: #c05303; | ||
$comment-main-2: #ff9b0b; | ||
$comment-support-1: #7d7569; | ||
$comment-support-2: #efefec; | ||
$comment-support-3: #ffce4b; | ||
$comment-support-4: #e6711b; | ||
|
||
// Multimedia palette | ||
$multimedia-main-1: #333333; | ||
$multimedia-main-2: #c70000; | ||
$multimedia-support-1: #c5d4ea; | ||
$multimedia-support-2: #507892; | ||
$multimedia-support-3: #002c59; | ||
$multimedia-support-4: #484848; | ||
$multimedia-support-5: #161616; | ||
|
||
// Futurelearn palette | ||
$futurelearn-main-1: #333333; | ||
$futurelearn-main-2: #f18b00; | ||
$futurelearn-support-1: #c5d4ea; | ||
$futurelearn-support-2: #507892; | ||
$futurelearn-support-3: #002c59; | ||
$futurelearn-support-4: #484848; | ||
$futurelearn-support-5: #161616; | ||
|
||
// Live palette | ||
$live-main-1: #f5b3c7; | ||
$live-main-2: #e71c77; | ||
$live-support-1: #ff5b3a; | ||
$live-support-2: #800c0c; | ||
$live-support-3: #a60947; | ||
|
||
// Maps palette | ||
$maps-main-1: #1c6326; | ||
$maps-main-2: #298422; | ||
$maps-support-1: #ceb41d; | ||
$maps-support-2: #a9af2b; | ||
$maps-support-3: #5ebfba; | ||
$maps-support-4: #72af7e; | ||
|
||
// External content palette | ||
$external-main-1: #1c6326; | ||
$external-support-1: #a9af2b; | ||
|
||
$paid-article: #d9d9d9; | ||
$paid-article-bg: #d1d1d1; | ||
$paid-article-header: #bfbfbf; | ||
$paid-article-header-bg: #b8b8b8; | ||
$paid-article-subheader: #f6f6f6; | ||
$paid-article-subheader-bg: #c4c4c4; | ||
$paid-article-media-bg: #bbb7b1; | ||
$paid-article-icon: #767676; | ||
$paid-article-brand: #69d1ca; | ||
$paid-article-mpu: #cccccc; | ||
$paidfor-background: $news-support-3; | ||
$rainbow-red: #ed1c24; // from Guss | ||
$paid-card-kicker: #626262; | ||
|
||
$media-background: $multimedia-support-5; | ||
|
||
// Membership | ||
// ============================================================================= | ||
|
||
$membership-default: #2d4391; | ||
|
||
// Lifestyle (magenta) | ||
$lifestyle-dark: #7d0068; | ||
$lifestyle-main: #bb3b80; | ||
$lifestyle-bright: #ffabdb; | ||
$lifestyle-pastel: #fec8d3; | ||
$lifestyle-faded: #feeef7; | ||
|
||
// New garnett colours | ||
// ============================================================================= | ||
|
||
$guardian-books-rebrand: #8e246f; | ||
$guardian-live-rebrand: #c83877; | ||
$guardian-jobs-rebrand: #469d93; | ||
$guardian-travel-rebrand: #007ba6; | ||
$guardian-money-rebrand: #b39069; | ||
$guardian-masterclasses-rebrand: #f4bc44; | ||
$guardian-subscriptions-rebrand: #d01317; | ||
$guardian-subscriptions-rebrand-blue: #005689; | ||
$guardian-generic-rebrand: #012937; | ||
$guardian-weekly-rebrand: #2c363b; | ||
$guardian-members-rebrand: #bb3a7f; | ||
$news-garnett-highlight: #ffe500; | ||
$guardian-patron: #4f5249; | ||
$guardian-highlight-hover: #f2ae00; | ||
$guardian-support: #ff7f0f; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"nativeStyleId": "71299" | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In Svelte, this is more semantically achieved by the
class:
directive