SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: adjust timeline sizings for mobile, cleanup component styling

Browse source
This commit is contained in:
Sebin Nyshkim 2023-03-23 13:26:08 +01:00
parent 35d5232575
commit f7ae855221
3 changed files with 47 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/TimelineItem.vue
View file

@ -28,34 +28,21 @@
&:not(:last-child):before { &:not(:last-child):before {
content: ""; content: "";
position: absolute; position: absolute;
top: var(--timeline-stroke-position-top); inset: var(--timeline-stroke-position-odd);
left: var(--timeline-stroke-position-horizontal);
height: var(--timeline-stroke-length); height: var(--timeline-stroke-length);
border-left: var(--timeline-stroke-thickness) solid border-left: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color); var(--timeline-stroke-color);
} }
@media (min-width: 64em) { &:nth-child(odd) {
&:nth-child(odd) { margin: var(--timeline-item-margin-odd);
margin: var(--timeline-item-margin-odd); }
}
&:nth-child(even) { &:nth-child(even) {
margin: var(--timeline-item-margin-even); margin: var(--timeline-item-margin-even);
&:before { &:before {
left: auto; inset: var(--timeline-stroke-position-even);
right: var(--timeline-stroke-position-horizontal);
}
.timeline-item__icon {
order: 1;
}
.timeline-item__content {
text-align: right;
margin: 0 1rem 0 0;
}
} }
} }
@ -82,9 +69,19 @@
} }
} }
&:nth-child(even) &__icon {
order: var(--timeline-item-flex-order);
}
&__content { &__content {
flex: 1 0 0; flex: 1 0 0;
margin: 0 0 0 1rem; margin: 0;
padding: var(--timeline-item-content-padding-odd);
}
&:nth-child(even) &__content {
text-align: var(--timeline-item-text-align-even);
padding: var(--timeline-item-content-padding-even);
} }
&__headline { &__headline {

2
src/components/TimelineList.vue
View file

@ -6,7 +6,7 @@
<style lang="scss"> <style lang="scss">
.timeline { .timeline {
max-width: calc(var(--timeline-circle-size) * 15); max-width: var(--timeline-max-width);
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;

31
src/scss/base.scss
View file

@ -96,8 +96,8 @@
var(--color-router-link); var(--color-router-link);
--navigation-link-last-child-margin: 0; --navigation-link-last-child-margin: 0;
--timeline-max-width: calc(var(--timeline-circle-size) * 15); --timeline-max-width: calc(var(--timeline-circle-size) * 10);
--timeline-circle-size: 4rem; --timeline-circle-size: 3rem;
--timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2); --timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2);
--timeline-circle-background-color: var(--theme-c-woody-brown); --timeline-circle-background-color: var(--theme-c-woody-brown);
--timeline-circle-padding: calc(var(--timeline-circle-font-size)); --timeline-circle-padding: calc(var(--timeline-circle-font-size));
@ -109,9 +109,18 @@
var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2 var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2
); );
--timeline-stroke-position-odd: var(--timeline-stroke-position-top) auto auto
var(--timeline-stroke-position-horizontal);
--timeline-stroke-position-even: var(--timeline-stroke-position-odd);
--timeline-item-margin: 1.5rem 0; --timeline-item-margin: 1.5rem 0;
--timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2); --timeline-item-margin-odd: var(--timeline-item-margin);
--timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0; --timeline-item-margin-even: var(--timeline-item-margin);
--timeline-item-text-align-even: left;
--timeline-item-content-padding-odd: 0 0 0 var(--container-spacing-left-safe);
--timeline-item-content-padding-even: var(
--timeline-item-content-padding-odd
);
--table-border-radius: 1rem; --table-border-radius: 1rem;
--table-outer-spacing: 0 var(--container-spacing-right-safe) 0 --table-outer-spacing: 0 var(--container-spacing-right-safe) 0
@ -194,6 +203,7 @@
:root { :root {
--table-cell-padding: 0.5rem 1rem; --table-cell-padding: 0.5rem 1rem;
--font-size: 20px; --font-size: 20px;
--timeline-circle-size: 4rem;
} }
} }
@ -248,7 +258,20 @@
@media (min-width: 64em) { @media (min-width: 64em) {
:root { :root {
--timeline-max-width: calc(var(--timeline-circle-size) * 15);
--timeline-stroke-length: calc(100% - var(--timeline-circle-size)); --timeline-stroke-length: calc(100% - var(--timeline-circle-size));
--timeline-stroke-position-even: var(--timeline-stroke-position-top)
var(--timeline-stroke-position-horizontal) auto auto;
--timeline-item-margin-odd: 0 0 0
calc(50% - var(--timeline-circle-size) / 2);
--timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0
0;
--timeline-item-flex-order: 1;
--timeline-item-content-margin-odd: 0 0 0 1rem;
--timeline-item-content-margin-even: 0 1rem 0 0;
--timeline-item-text-align-even: right;
--timeline-item-content-padding-odd: var(--textblock-padding);
--timeline-item-content-padding-even: var(--textblock-padding);
} }
} }