KevinMidboe/seasoned
1
0
Fork 0
mirror of https://github.com/KevinMidboe/seasoned.git synced 2026-03-11 03:49:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up some styling rules. Also set a static margin on the loading-placeholder for actions to be aligned with the loaded list items.

Browse Source
This commit is contained in:
Kevin
2019-06-04 19:19:34 +02:00
parent eddbab2f99
commit 95633f4c69
1 changed files with 64 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/Movie.vue
View File

@@ -64,7 +64,7 @@
<!-- Loading placeholder --> <!-- Loading placeholder -->
<div class="movie__actions text-input__loading" v-else> <div class="movie__actions text-input__loading" v-else>
<div class="movie__actions-link" v-for="_ in admin ? Array(4) : Array(3)"> <div class="movie__actions-link" v-for="_ in admin ? Array(4) : Array(3)">
<div class="movie__actions-text text-input__loading--line" style="margin:4.4px; margin-left: -3px;"></div> <div class="movie__actions-text text-input__loading--line" style="margin:9px; margin-left: -3px;"></div>
</div> </div>
</div> </div>
@@ -220,14 +220,14 @@ export default {
@import "./src/scss/variables"; @import "./src/scss/variables";
@import "./src/scss/media-queries"; @import "./src/scss/media-queries";
.movie{ .movie {
&__wrap{ &__wrap {
display: flex; display: flex;
&--header{ &--header {
align-items: center; align-items: center;
height: 100%; height: 100%;
} }
&--main{ &--main {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
@@ -236,7 +236,7 @@ export default {
} }
} }
} }
&__header{ &__header {
height: 250px; height: 250px;
position: relative; position: relative;
background-size: cover; background-size: cover;
@@ -259,9 +259,9 @@ export default {
} }
} }
&__poster{ &__poster {
display: none; display: none;
@include tablet-min{ @include tablet-min {
background: $c-white; background: $c-white;
height: 0; height: 0;
display: block; display: block;
@@ -280,7 +280,7 @@ export default {
transform: scale(0.97) translateZ(0); transform: scale(0.97) translateZ(0);
transition: opacity 0.5s ease, transform 0.5s ease; transition: opacity 0.5s ease, transform 0.5s ease;
&.is-loaded{ &.is-loaded {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
@@ -314,7 +314,7 @@ export default {
margin-top: 10px; margin-top: 10px;
} }
} }
&__main{ &__main {
background: $c-light; background: $c-light;
min-height: calc(100vh - 250px); min-height: calc(100vh - 250px);
@include tablet-min { @include tablet-min {
@@ -323,20 +323,20 @@ export default {
height: 100%; height: 100%;
} }
&__actions{ &__actions {
text-align: center; text-align: center;
// min-height: 394px; // min-height: 394px;
width: 100%; width: 100%;
order: 2; order: 2;
padding: 20px; padding: 20px;
border-top: 1px solid rgba($c-dark, 0.05); border-top: 1px solid rgba($c-dark, 0.05);
@include tablet-min{ @include tablet-min {
order: 1; order: 1;
width: 45%; width: 45%;
padding: 185px 0 40px 40px; padding: 185px 0 40px 40px;
border-top: 0; border-top: 0;
} }
&-link{ &-link {
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
@@ -344,107 +344,109 @@ export default {
color: rgba($c-dark, 0.5); color: rgba($c-dark, 0.5);
transition: color 0.5s ease; transition: color 0.5s ease;
font-size: 11px; font-size: 11px;
padding: 10px 0; padding: 5px 0;
border-bottom: 1px solid rgba($c-dark, 0.05); border-bottom: 1px solid rgba($c-dark, 0.05);
&:hover{ &:hover {
color: rgba($c-dark, 0.75); color: rgba($c-dark, 0.75);
} }
&.active{ &.active {
color: $c-dark; color: $c-dark;
} }
&.pending{ &.pending {
color: #f8bd2d; color: #f8bd2d;
} }
} }
&-icon{ &-icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin: 0 10px 0 0; margin: 0 10px 0 0;
fill: rgba($c-dark, 0.5); fill: rgba($c-dark, 0.5);
transition: fill 0.5s ease, transform 0.5s ease; transition: fill 0.5s ease, transform 0.5s ease;
&.waiting{ &.waiting {
transform: scale(0.8, 0.8); transform: scale(0.8, 0.8);
} }
&.pending{ &.pending {
fill: #f8bd2d; fill: #f8bd2d;
} }
} }
&-link:hover &-icon{ &-link:hover &-icon {
fill: rgba($c-dark, 0.75); fill: rgba($c-dark, 0.75);
cursor: pointer; cursor: pointer;
} }
&-link.active &-icon{ &-link.active &-icon {
fill: $c-green; fill: $c-green;
} }
&-text{ &-text {
display: block; display: block;
padding-top: 2px; padding-top: 2px;
cursor: pointer; cursor: pointer;
margin:4.4px;
margin-left: -3px;
} }
} }
&__info{ &__info {
width: 100%; width: 100%;
padding: 20px; padding: 20px;
order: 1; order: 1;
@include tablet-min{ @include tablet-min {
order: 2; order: 2;
padding: 40px; padding: 40px;
width: 55%; width: 55%;
margin-left: 45%; margin-left: 45%;
} }
} }
&__actions + &__info{ &__actions + &__info {
margin-left: 0; margin-left: 0;
} }
&__description{ &__description {
font-weight: 300; font-weight: 300;
font-size: 13px; font-size: 13px;
line-height: 1.8; line-height: 1.8;
margin-bottom: 20px;
@include tablet-min {
margin-bottom: 30px;
font-size: 14px;
}
}
&__details {
&-block {
float: left;
}
&-block:not(:last-child) {
margin-bottom: 20px; margin-bottom: 20px;
@include tablet-min{ margin-right: 20px;
@include tablet-min {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 14px; margin-right: 30px;
} }
} }
&__details{ &-title {
&-block{ margin: 0;
float: left; font-weight: 400;
} text-transform: uppercase;
&-block:not(:last-child){ font-size: 14px;
margin-bottom: 20px; color: $c-green;
margin-right: 20px; @include tablet-min {
@include tablet-min{ font-size: 16px;
margin-bottom: 30px;
margin-right: 30px;
}
}
&-title{
margin: 0;
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
color: $c-green;
@include tablet-min{
font-size: 16px;
}
}
&-text{
font-weight: 300;
font-size: 14px;
margin-top: 5px;
} }
} }
&__admin{ &-text {
font-weight: 300;
font-size: 14px;
margin-top: 5px;
}
}
&__admin {
width: 100%; width: 100%;
padding: 20px; padding: 20px;
order: 2; order: 2;
@include tablet-min{ @include tablet-min {
order: 3; order: 3;
padding: 40px; padding: 40px;
padding-top: 0px; padding-top: 0px;
width: 100%; width: 100%;
} }
&-title{ &-title {
margin: 0; margin: 0;
font-weight: 400; font-weight: 400;
text-transform: uppercase; text-transform: uppercase;
@@ -452,7 +454,7 @@ export default {
font-size: 14px; font-size: 14px;
color: $c-green; color: $c-green;
padding-bottom: 20px; padding-bottom: 20px;
@include tablet-min{ @include tablet-min {
font-size: 16px; font-size: 16px;
} }
} }