nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 19:10:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

- homepage mobile

Browse Source
This commit is contained in:
Peter Papp
2021-04-05 18:00:54 +02:00
parent 399748b01a
commit 2ca4d4a02d
8 changed files with 381 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Oasis/Homepage/Components/OasisAboutUs.vue
+34 -1
View File
@@ -231,6 +231,11 @@
}
@media only screen and (max-width: 960px) {
.oasis-about-us .content-wrapper {
margin-bottom: -220px;
}
.info-list {
margin: 65px 0;
@@ -240,7 +245,7 @@
margin-bottom: 40px;
.description {
max-width: 700px;
max-width: 540px;
@include font-size(19);
color: $text-primary;
font-weight: 800;
@@ -249,4 +254,32 @@
}
}
}
@media only screen and (max-width: 760px) {
.oasis-about-us {
padding-top: 30px;
.content-wrapper {
margin-bottom: -70px;
}
}
.info-list {
margin: 35px 0;
}
.clouds .cloud {
&:nth-child(3),
&:nth-child(4) {
display: none;
}
&:nth-child(2) {
left: 3%;
top: 86%;
@include transform(scale(0.35));
}
}
}
</style>
resources/js/Oasis/Homepage/Components/OasisContact.vue
+30 -12
View File
@@ -221,18 +221,6 @@
}
@media only screen and (max-width: 960px) {
.oasis-contact {
.info-container {
grid-template-columns: 1fr;
gap: 0;
}
.info-grid {
gap: 0;
grid-template-columns: 1fr;
}
}
.info-wrapper {
@@ -245,9 +233,39 @@
.contact-form {
padding-bottom: 40px;
.block-wrapper {
max-width: 100%;
}
button {
width: 100%;
}
}
}
@media only screen and (max-width: 760px) {
.oasis-contact {
padding-top: 60px;
padding-bottom: 10px;
.info-container {
grid-template-columns: 1fr;
gap: 0;
}
.info-grid {
gap: 0;
grid-template-columns: 1fr;
}
.title-wrapper {
margin-bottom: 45px;
}
}
}
.contact-form {
padding-top: 20px;
}
</style>
resources/js/Oasis/Homepage/Components/OasisFeatures.vue
+5
View File
@@ -263,6 +263,11 @@
}
@media only screen and (max-width: 960px) {
.oasis-features .main-title-sm {
max-width: 440px;
}
.features-box {
.box {
resources/js/Oasis/Homepage/Components/OasisHeader.vue
+86
View File
@@ -210,4 +210,90 @@
margin-bottom: 60px;
}
}
@media only screen and (max-width: 960px) {
.header {
margin-bottom: 100px;
}
.oasis-header {
padding-top: 200px;
.main-title {
max-width: 590px;
}
}
.clouds .cloud {
&:nth-child(1) {
top: 11%;
left: -1%;
@include transform(scale(-0.6, 0.6));
}
&:nth-child(2) {
@include transform(scale(-0.4, 0.4));
top: 30%;
left: -24%;
}
&:nth-child(3) {
@include transform(scale(0.6));
top: 43%;
left: -5%;
}
&:nth-child(4) {
right: -26%;
}
&:nth-child(5) {
@include transform(scale(-0.7, 0.7));
top: 38%;
}
}
}
@media only screen and (max-width: 760px) {
.clouds .cloud {
&:nth-child(1) {
top: 12%;
left: -36%;
@include transform(scale(-0.4, 0.4));
}
&:nth-child(2) {
@include transform(scale(-0.4, 0.4));
top: 65%;
left: -48%;
}
&:nth-child(3) {
@include transform(scale(0.5));
top: 48%;
left: -35%;
}
&:nth-child(4) {
right: -35%;
top: 15%;
}
&:nth-child(5) {
top: 44%;
right: -58%;
}
}
.oasis-header .main-title {
max-width: 500px;
}
.header {
margin-bottom: 120px;
}
}
</style>
resources/js/Oasis/Homepage/Components/OasisPricing.vue
+86 -2
View File
@@ -17,8 +17,10 @@
</h4>
</div>
<div class="container">
<div class="container" style="overflow: hidden">
<img src="/oasis/trees.svg" alt="oasis-trees" class="trees">
</div>
<div class="container">
<ul class="pricing-box">
<li v-for="(plan, i) in pricing" :key="i" class="box">
@@ -352,13 +354,43 @@
}
}
@media only screen and (max-width: 960px) {
.clouds .cloud {
&:nth-child(1) {
left: 1%;
top: 4%;
@include transform(scale(0.6))
}
&:nth-child(2) {
left: 2%;
top: 25%;
}
&:nth-child(3) {
right: -12%;
top: 2%;
@include transform(scale(-0.9, 0.9))
}
&:nth-child(4) {
right: -3%;
top: 26%;
@include transform(scale(0.5))
}
}
.pricing-box {
grid-template-columns: 1fr;
gap: 25px;
.box {
width: 100%;
max-width: 520px !important;
margin-left: auto !important;
margin-right: auto !important;
&:nth-child(2) {
padding: 38px 40px 35px;
@@ -376,4 +408,56 @@
}
}
}
@media only screen and (max-width: 760px) {
.oasis-pricing {
.title-wrapper {
margin-bottom: -70px;
}
}
.trees {
margin-bottom: -130px;
margin-left: 0;
transform: scale(0.5) translatex(-110px);
}
.pricing-box .box {
.pricing-data {
@include font-size(36);
margin-bottom: 0;
}
.pricing-description {
margin-bottom: 35px;
}
}
.clouds .cloud {
&:nth-child(1) {
left: -10%;
}
&:nth-child(2) {
left: -18%;
top: 18%;
@include transform(scale(-0.5, 0.5))
}
&:nth-child(3) {
right: -22%;
top: 1%;
}
&:nth-child(4) {
right: 1%;
top: 24%;
@include transform(scale(0.4))
}
}
}
</style>