Skip to content

Commit

Permalink
Style fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@eebbi
eebbi committed Jan 7, 2025
1 parent 9a811de commit df4d775
Show file tree
Hide file tree
Showing 14 changed files with 76 additions and 117 deletions.
10 changes: 8 additions & 2 deletions assets/styles/layouts/_hero.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

&__image-container {
position: relative;
padding: 0 2rem;
padding: 0 1rem;
grid-row: 1 / -1;
grid-column: 1;

Expand All @@ -15,6 +15,11 @@
border-radius: 1rem;
}


@include from($tablet) {
padding: 0 2rem;
}

@include from($desktop) {
grid-column: 2;

Expand Down Expand Up @@ -44,11 +49,12 @@
display: grid;
grid-template-columns: 100%;
grid-template-rows: repeat(5, 1fr);
margin-bottom: 10rem;
margin-bottom: 2rem;

@include from($desktop) {
grid-template-columns: 30% 40% 30%;
grid-template-rows: repeat(2, 1fr);
margin-bottom: 10rem;
}

.hero-column {
Expand Down
8 changes: 6 additions & 2 deletions assets/styles/layouts/_image-carousel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
}
}

&__items {
margin: 0 2rem;
}

&__item {
.has-shape-round {
display: inline-block;
Expand All @@ -26,12 +30,12 @@
}

.slick-prev {
left: 0.5rem;
left: 2.5rem;
padding: 0 !important;
}

.slick-next {
right: 0.5rem;
right: 2.5rem;
padding: 0 !important;
}

Expand Down
55 changes: 15 additions & 40 deletions assets/styles/ui-components/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ form {
}

select {
background-color: $primary-invert;
color: $primary;

@include until($desktop) {
Expand All @@ -29,47 +28,34 @@ select {
padding: 0.8rem !important;
}

button[type="submit"],
.gform_button_select_files {
.button {
display: inline-flex;
justify-content: space-between;
background-color: $color-savel-button !important;
border-color: $color-savel-button !important;
color: $white !important;

&:after {
content: "";
width: 0.7rem;
height: 1rem;
display: block;
margin-left: 1rem;
background-color: white;
background-color: $white;
}

&:hover,
&:focus {
&:after {
background-color: black;
}
}

&.is-hovered,
&:focus,
&.is-focused,
&:active {
&:after {
background-color: white;
}
}
}

button[type="submit"] {

&:after {
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="M2.13436 0L0.365646 1.76877L6.09688 7.5L0.365646 13.2312L2.13436 15L9.63436 7.5L2.13436 0Z"/></svg>');
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
background-color: $color-savel-button-hover !important;
border-color: $color-savel-button-hover !important;
color: $white !important;
}
}


.gform_button_select_files {

&:after {
width: 1rem;
height: 1rem;
Expand All @@ -83,10 +69,12 @@ select {
}

.gfield_checkbox {

label {
&::before {
margin-top: 0.25rem;
// margin-top: 0.25rem;
// checked bg blue
// ^^ sama radioille ja myös pienemmäks valkonen keskipalkki?
// dropdown tekstin color väärä
}
}
}
Expand All @@ -105,19 +93,6 @@ select {
border: 0.125rem dashed $black;
}

.gform_button_select_files,
.gform_delete_file {

&:hover,
&:focus {
border-color: $black !important;
background-color: $white !important;
color: $color-tekstin-vari !important;
outline: 0.125rem dotted $black !important;
outline-offset: 0.25rem !important;
}
}

.gform_delete_file {
padding: 0.5rem;
margin-right: 0.5rem;
Expand Down
10 changes: 0 additions & 10 deletions assets/styles/ui-components/_share-links.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,3 @@
fill: $link !important;
}
}

.entry__share-links {
h2 {
text-align: right;
}

.share-links {
justify-content: center;
}
}
6 changes: 0 additions & 6 deletions assets/styles/views/_page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,4 @@
}
}
}

.entry {
&__content {
// --
}
}
}
6 changes: 0 additions & 6 deletions assets/styles/views/_single-dynamic-event.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
.single-dynamic-event-cpt,
.single-manual-event-cpt {
.entry {
&__hero {
h1 {
color: $primary-invert !important;
}
}

&__hero-image {
object-fit: cover;
}
Expand Down
5 changes: 5 additions & 0 deletions assets/styles/views/_single.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
.single-post {

.main-content {
overflow-x: hidden;
}

.entry {
&__share-links {
h2 {
Expand Down
4 changes: 4 additions & 0 deletions lib/ThemeCustomizationController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@ public function hooks() : void {

return $data;
} );
\add_filter(
'tms/theme/event/hero_info_classes',
fn() => 'has-colors-primary'
);
}

/**
Expand Down
2 changes: 1 addition & 1 deletion partials/blocks/block-key-figures.dust
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div
class="column {column_class|attr} {?background_image}has-bg {/background_image}is-flex is-align-items-center is-justify-content-center is-flex-direction-column"
{?background_image}style="background: linear-gradient(180deg, rgba(15, 56, 23, 0.00) 0%, #0F3817 100%), url({background_image.url|url}) lightgray 50% / cover no-repeat;"{/background_image}>
<div class="key-figures__item is-flex p-9 p-12-desktop is-align-items-center is-justify-content-center is-flex-direction-column">
<div class="key-figures__item is-flex pt-9 pb-9 pr-4 pl-4 is-align-items-center is-justify-content-center is-flex-direction-column">
<div
class="key-figures__number {num_class|attr} has-line-height-tight"
{?text_background_image}style="background-image: url({text_background_image.url|attr});background-clip: text;-webkit-text-fill-color: transparent;"{/text_background_image}>
Expand Down
8 changes: 4 additions & 4 deletions partials/page-event.dust
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@
{?event.normalized.short_description}
<div class="entry__content is-content-grid mb-8 has-text-centered">
<p class="mt-6 mb-6 has-text-large">
{event.normalized.short_description|s}
{event.normalized.short_description|kses}
</p>
</div>
{/event.normalized.short_description}

<div class="columns is-multiline is-variable is-8 mb-8">
<div class="column is-5-desktop is-offset-1-desktop keep-vertical-spacing">
{event.normalized.description|s}
{event.normalized.description|kses}
</div>

<div class="column is-5-desktop">
Expand All @@ -60,11 +60,11 @@
</div>

{?share_links}
<div class="columns is-variable is-8">
<div class="columns is-variable is-8-desktop">
<div class="column is-offset-1-desktop">
<div class="entry__share-links">
<h2 class="h6 mt-6 mb-6 has-text-left has-text-secondary-invert">
{Strings.s.share.share_to_social_media|s}
{Strings.s.share.share_to_social_media|html}
</h2>

{>"ui/share-links" ul_class="is-justify-content-flex-start" li_class="mr-4" /}
Expand Down
31 changes: 13 additions & 18 deletions partials/single-dynamic-event-cpt.dust
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,30 +22,25 @@

<section class="section">
<div class="container">
{?event.normalized.short_description}
<div class="columns">
<div
class="column is-8 is-6-desktop is-offset-2 is-offset-3-desktop mb-6-desktop has-text-centered">
<p class="has-text-large">
{event.normalized.short_description|s}
</p>
</div>
</div>
{/event.normalized.short_description}

<div class="columns">
<div class="column">
<div class="columns is-multiline is-variable is-0 is-8-desktop mb-8">
<div class="column is-5-desktop is-offset-1-desktop keep-vertical-spacing">
{event.normalized.description|s}
{?event.normalized.short_description}
<div class="entry__content is-content-grid mb-8 has-text-centered">
<p class="mt-6 mb-6 has-text-large">
{event.normalized.short_description|kses}
</p>
</div>
{/event.normalized.short_description}

<div class="column is-5-desktop">
{>"views/single-dynamic-event/single-dynamic-event-info" /}
</div>
<div class="entry__info-group pt-5 pb-5">
{>"views/single-dynamic-event/single-dynamic-event-info" /}
</div>

<div class="entry__description column is-6-desktop is-offset-3-desktop mt-5 mb-5">
{event.normalized.description|kses}
</div>

<div class="entry__content is-content-grid mb-8 mb-10-desktop keep-vertical-spacing">
<div class="entry__content column is-content-grid mb-8 mb-10-desktop keep-vertical-spacing">
{@content /}
</div>

Expand Down
2 changes: 1 addition & 1 deletion partials/single-manual-event-cpt.dust
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
</div>

{?share_links}
<div class="columns is-variable is-8">
<div class="columns is-variable is-8-desktop">
<div class="column is-offset-1-desktop">
<div class="entry__share-links">
<h2 class="h6 mt-6 mb-6 has-text-left has-text-secondary-invert">
Expand Down
11 changes: 2 additions & 9 deletions partials/views/single-dynamic-event/single-dynamic-event-hero-meta.dust
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,12 @@
<p class="mt-0 mb-3 has-text-white is-family-secondary">
{event.normalized.price_title|html} {price|html}
</p>
{?.info_url.title}
<a href="{.info_url.url|url}" target="_blank"
class="is-inline-block is-align-self-center button is-outlined-invert mt-3">
{.info_url.title|html}
</a>
{/.info_url.title}
{/event.normalized.price}
{/event.normalized.price}

{?event.normalized.link_purchase_ticket}
<div class="has-width-100 mt-3">
<a href="{event.normalized.link_purchase_ticket.url|url}" target="_blank"
class="is-inline-block button is-small is-primary">
{event.normalized.link_purchase_ticket.name|html}
</a>
</div>
{/event.normalized.link_purchase_ticket}
</div>
35 changes: 17 additions & 18 deletions partials/views/single-dynamic-event/single-dynamic-event-hero.dust
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
<section class="entry__hero has-text-centered">
<div class="entry__hero-image is-relative has-background-primary has-text-primary-invert has-background-cover" {@inlinebg id=hero_image size="fullhd" /}>
<div class="overlay overlay--dark-70"></div>

<div class="container is-absolute has-top-50 has-right-0 has-left-0 has-transform-y--50">
<div class="columns is-gapless">
<div class="column">
<h1 class="entry__title mt-0 mb-0 has-text-centered">
{@title /}
</h1>
</div>
</div>
</div>
<section class="entry__hero section pb-6">
<div class="container">
<h1 class="entry__title mt-8 mb-8 has-text-centered">
{@title /}
</h1>
</div>

<div class="entry__hero-info section pt-6 pb-6 {template_classes.hero_info|s}">
<div class="container">
<div class="columns mt-0 mb-0">
<div class="column is-10 is-offset-1">
{>"views/single-dynamic-event/single-dynamic-event-hero-meta" /}
<div class="columns m-0">
<div class="column m-0 p-0">
{?hero_image_url}
<div class="is-flex is-flex-direction-column is-relative has-height-100">
<img class="entry__hero-image has-height-100" src="{hero_image_url|url}" alt=""
aria-hidden="true"
tabindex="-1" />
</div>
{/hero_image_url}
</div>
<div class="column p-0">
<div class="entry__hero-info background-gradient-savel section pt-6 pb-6 has-height-100 {template_classes.hero_info|attr}">
{>"views/single-dynamic-event/single-dynamic-event-hero-meta" /}
</div>
</div>
</div>
Expand Down

0 comments on commit df4d775

Please sign in to comment.