responsivity update

This commit is contained in:
carodej
2020-07-09 16:52:00 +02:00
parent 5a9f5813c8
commit 5bd6455f7f
20 changed files with 142 additions and 32 deletions

View File

@@ -517,7 +517,7 @@ class SetupWizardController extends Controller
],
[
'name' => 'storage_limitation',
'value' => $request->storageLimitation,
'value' => $request->storageLimitation ? $request->storageLimitation : 5,
],
[
'name' => 'storage_default',

View File

@@ -185,5 +185,59 @@
"/js/main.5ea1c209e4ba1a66191b.hot-update.js": "/js/main.5ea1c209e4ba1a66191b.hot-update.js",
"/js/main.fb81adae93ae1109a054.hot-update.js": "/js/main.fb81adae93ae1109a054.hot-update.js",
"/js/main.d27bcdc0e934cd992fea.hot-update.js": "/js/main.d27bcdc0e934cd992fea.hot-update.js",
"/js/main.9621e68a9cec93315d6f.hot-update.js": "/js/main.9621e68a9cec93315d6f.hot-update.js"
"/js/main.9621e68a9cec93315d6f.hot-update.js": "/js/main.9621e68a9cec93315d6f.hot-update.js",
"/js/main.ff0be9f89c5168bdaba6.hot-update.js": "/js/main.ff0be9f89c5168bdaba6.hot-update.js",
"/js/main.d9598c910569aa83148d.hot-update.js": "/js/main.d9598c910569aa83148d.hot-update.js",
"/js/main.44f644f118d7704b24ec.hot-update.js": "/js/main.44f644f118d7704b24ec.hot-update.js",
"/js/main.5bdaa56d5aed6e8f6364.hot-update.js": "/js/main.5bdaa56d5aed6e8f6364.hot-update.js",
"/js/main.ec01a51e0e5a53cfb359.hot-update.js": "/js/main.ec01a51e0e5a53cfb359.hot-update.js",
"/js/main.f92016b969ed908c935d.hot-update.js": "/js/main.f92016b969ed908c935d.hot-update.js",
"/js/main.41abc6ba9aeb74e7c3c7.hot-update.js": "/js/main.41abc6ba9aeb74e7c3c7.hot-update.js",
"/js/main.b1b6d51330cfc5041bc5.hot-update.js": "/js/main.b1b6d51330cfc5041bc5.hot-update.js",
"/js/main.fd77c3c1cf870493480b.hot-update.js": "/js/main.fd77c3c1cf870493480b.hot-update.js",
"/js/main.fd9df7267c2d99bc893d.hot-update.js": "/js/main.fd9df7267c2d99bc893d.hot-update.js",
"/js/main.45dd13d09dae058ba872.hot-update.js": "/js/main.45dd13d09dae058ba872.hot-update.js",
"/js/main.0a8395c1069ccefb0943.hot-update.js": "/js/main.0a8395c1069ccefb0943.hot-update.js",
"/js/main.6d554f4a3c4ec827a959.hot-update.js": "/js/main.6d554f4a3c4ec827a959.hot-update.js",
"/js/main.1a5c4ad2b6aef192ec4f.hot-update.js": "/js/main.1a5c4ad2b6aef192ec4f.hot-update.js",
"/js/main.bc3a88e8bd8844326875.hot-update.js": "/js/main.bc3a88e8bd8844326875.hot-update.js",
"/js/main.308b3b0df2e2e3948dbc.hot-update.js": "/js/main.308b3b0df2e2e3948dbc.hot-update.js",
"/js/main.9d1cc0ccb868d3967f71.hot-update.js": "/js/main.9d1cc0ccb868d3967f71.hot-update.js",
"/js/main.25a21955766150c76941.hot-update.js": "/js/main.25a21955766150c76941.hot-update.js",
"/js/main.b0b92dd5c8138a4c9b98.hot-update.js": "/js/main.b0b92dd5c8138a4c9b98.hot-update.js",
"/js/main.69ad6d1e840ce22281bf.hot-update.js": "/js/main.69ad6d1e840ce22281bf.hot-update.js",
"/js/main.a48d4c1a19b0cba22963.hot-update.js": "/js/main.a48d4c1a19b0cba22963.hot-update.js",
"/js/main.1aab1718cf149559392f.hot-update.js": "/js/main.1aab1718cf149559392f.hot-update.js",
"/js/main.9dde85f6fcc4f8bd6631.hot-update.js": "/js/main.9dde85f6fcc4f8bd6631.hot-update.js",
"/js/main.88aa9e8c3f4a6006af43.hot-update.js": "/js/main.88aa9e8c3f4a6006af43.hot-update.js",
"/js/main.fa53519359fcec31b8fc.hot-update.js": "/js/main.fa53519359fcec31b8fc.hot-update.js",
"/js/main.8ab31299c3202def3b72.hot-update.js": "/js/main.8ab31299c3202def3b72.hot-update.js",
"/js/main.4fea33b8e211270b52b7.hot-update.js": "/js/main.4fea33b8e211270b52b7.hot-update.js",
"/js/main.e1d361c0e8bc17114e8e.hot-update.js": "/js/main.e1d361c0e8bc17114e8e.hot-update.js",
"/js/main.9bfef48d6b70ca5aa783.hot-update.js": "/js/main.9bfef48d6b70ca5aa783.hot-update.js",
"/js/main.1586788eaae954e1e4d3.hot-update.js": "/js/main.1586788eaae954e1e4d3.hot-update.js",
"/js/main.e166fc5ed7f56f97e136.hot-update.js": "/js/main.e166fc5ed7f56f97e136.hot-update.js",
"/js/main.4891a453eab2e3fca61f.hot-update.js": "/js/main.4891a453eab2e3fca61f.hot-update.js",
"/js/main.845b32877e889a928971.hot-update.js": "/js/main.845b32877e889a928971.hot-update.js",
"/js/main.daf67585052f46540fe1.hot-update.js": "/js/main.daf67585052f46540fe1.hot-update.js",
"/js/main.37eae3f9ced48c056d91.hot-update.js": "/js/main.37eae3f9ced48c056d91.hot-update.js",
"/js/main.5795b0e3d8ccd0a35746.hot-update.js": "/js/main.5795b0e3d8ccd0a35746.hot-update.js",
"/js/main.4827f3616eb69595e599.hot-update.js": "/js/main.4827f3616eb69595e599.hot-update.js",
"/js/main.ce9404ad0a7c39e16bda.hot-update.js": "/js/main.ce9404ad0a7c39e16bda.hot-update.js",
"/js/main.13dad5c43211389f15a7.hot-update.js": "/js/main.13dad5c43211389f15a7.hot-update.js",
"/js/main.df868c27dae73ae76e5a.hot-update.js": "/js/main.df868c27dae73ae76e5a.hot-update.js",
"/js/main.44d076b285147195d904.hot-update.js": "/js/main.44d076b285147195d904.hot-update.js",
"/js/main.c47875f1460781df96c2.hot-update.js": "/js/main.c47875f1460781df96c2.hot-update.js",
"/js/main.f61d813cccaa3b1273bc.hot-update.js": "/js/main.f61d813cccaa3b1273bc.hot-update.js",
"/js/main.9802b7239d9a230b2dca.hot-update.js": "/js/main.9802b7239d9a230b2dca.hot-update.js",
"/js/main.fa187f65e1bd71f69699.hot-update.js": "/js/main.fa187f65e1bd71f69699.hot-update.js",
"/js/main.633617e8eba3821c3bac.hot-update.js": "/js/main.633617e8eba3821c3bac.hot-update.js",
"/js/main.f6fb49e311ffff953243.hot-update.js": "/js/main.f6fb49e311ffff953243.hot-update.js",
"/js/main.dc7221de894747bb892e.hot-update.js": "/js/main.dc7221de894747bb892e.hot-update.js",
"/js/main.6c8903b924fa7a9a70bb.hot-update.js": "/js/main.6c8903b924fa7a9a70bb.hot-update.js",
"/js/main.67ca2888e104841b449d.hot-update.js": "/js/main.67ca2888e104841b449d.hot-update.js",
"/js/main.f7ea32b1bdd7d5893101.hot-update.js": "/js/main.f7ea32b1bdd7d5893101.hot-update.js",
"/js/main.bb919bf230ccfd1da5ad.hot-update.js": "/js/main.bb919bf230ccfd1da5ad.hot-update.js",
"/js/main.c339a8942aeb56673ce8.hot-update.js": "/js/main.c339a8942aeb56673ce8.hot-update.js",
"/js/main.666b5bd039ecb83ba849.hot-update.js": "/js/main.666b5bd039ecb83ba849.hot-update.js"
}

View File

@@ -56,6 +56,15 @@
}
}
@media only screen and (max-width: 1190px) {
.widget-value {
span {
@include font-size(30);
}
}
}
@media (prefers-color-scheme: dark) {
.widget-value {

View File

@@ -49,6 +49,15 @@
}
}
@media only screen and (max-width: 1190px) {
.headline {
.title {
@include font-size(14);
}
}
}
@media (prefers-color-scheme: dark) {
.widget-content {
background: $dark_mode_foreground;

View File

@@ -70,6 +70,7 @@
.plan-header {
.icon {
path, line, polyline, rect, circle {
color: $theme;
}
@@ -122,7 +123,6 @@
.plans-wrapper {
display: flex;
flex-wrap: wrap;
margin: 0 -25px;
justify-content: center;
}

View File

@@ -316,6 +316,12 @@
}
}
@media only screen and (max-width: 1190px) {
.get-started-button {
margin-bottom: 280px;
}
}
@media only screen and (max-width: 960px) {
.page-title {
padding-top: 20px;

View File

@@ -132,29 +132,30 @@
@media only screen and (max-width: 1190px) {
.content {
display: block;
}
.hero {
flex: 0 0 60%;
img {
width: 100%;
}
}
.features {
padding-left: 0;
margin-top: 50px;
padding-left: 25px;
margin-top: 0px;
}
}
@media only screen and (max-width: 960px) {
.content {
display: block;
margin-top: 40px;
}
.features {
margin-top: 50px;
.feature {
margin-bottom: 35px;

View File

@@ -135,12 +135,20 @@
display: block;
}
@media only screen and (max-width: 960px) {
@media only screen and (max-width: 1190px) {
.cloud-bg {
display: none;
}
.pricing {
padding-top: 150px;
padding-bottom: 60px;
}
}
@media only screen and (max-width: 960px) {
.page-title {
.title {

View File

@@ -35,6 +35,7 @@
width: 100%;
position: sticky;
top: 0;
padding-top: 20px;
padding-bottom: 20px;
.title {

View File

@@ -174,7 +174,7 @@
.table {
width: 100%;
border-collapse: collapse;
overflow-x: auto;
table-layout: fixed;
tr {
width: 100%;

View File

@@ -126,7 +126,7 @@
user-select: none;
padding-top: 25px;
display: grid;
width: 72px;
flex: 0 0 72px;
}
.icon-navigation {
@@ -225,8 +225,7 @@
@media only screen and (max-width: 1024px) {
.menu-bar {
min-width: 60px;
width: 60px;
flex: 0 0 60px;
}
.icon-navigation {

View File

@@ -148,6 +148,7 @@
.dashboard-headline {
display: flex;
justify-content: space-between;
margin-top: 20px;
margin-bottom: 20px;
}
@@ -199,8 +200,25 @@
}
}
@media only screen and (max-width: 690px) {
@media only screen and (max-width: 1190px) {
.widgets-total {
margin: 0 -10px 10px;
.widget {
padding: 10px;
}
}
}
@media only screen and (max-width: 960px) {
.widgets-total {
display: block;
}
.became-backer {
display: none;
}
}
@media (prefers-color-scheme: dark) {

View File

@@ -20,16 +20,17 @@
<DatatableWrapper :paginator="false" :columns="columns" :data="plans" class="table table-users">
<template scope="{ row }">
<tr>
<td class="name" style="min-width: 200px">
<router-link :to="{name: 'PlanSettings', params: {id: row.data.id}}" class="cell-item" tag="div">
<span>{{ row.data.attributes.name }}</span>
</router-link>
</td>
<td>
<td style="max-width: 80px">
<span class="cell-item">
<SwitchInput @input="changeStatus($event, row.data.id)" class="switch" :state="row.data.attributes.status"/>
</span>
</td>
<td class="name" style="min-width: 120px">
<router-link :to="{name: 'PlanSettings', params: {id: row.data.id}}" class="cell-item" tag="div">
<span>{{ row.data.attributes.name }}</span>
</router-link>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.subscribers }}
@@ -114,13 +115,13 @@
plans: undefined,
columns: [
{
label: 'Plan',
field: 'data.attributes.name',
label: 'Status',
field: 'data.attributes.status',
sortable: true
},
{
label: 'Status',
field: 'data.attributes.status',
label: 'Plan Name',
field: 'data.attributes.name',
sortable: true
},
{

View File

@@ -2,7 +2,7 @@
<div id="single-page">
<div id="page-content" class="small-width">
<MobileHeader :title="$router.currentRoute.meta.title"/>
<!--<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>-->
<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
<div class="content-page">
<ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">

View File

@@ -31,7 +31,7 @@
<label>Message:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Message" rules="required"
v-slot="{ errors }">
<textarea v-model="contact.message" placeholder="Type your message here..." rows="4" :class="{'is-error': errors[0]}"></textarea>
<textarea v-model="contact.message" placeholder="Type your message here..." rows="6" :class="{'is-error': errors[0]}"></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>

View File

@@ -179,6 +179,7 @@
display: flex;
justify-content: space-between;
margin-bottom: 50px;
margin-top: 30px;
}
.user-thumbnail {

View File

@@ -4,9 +4,9 @@
#viewport {
display: flex;
width: 100%;
height: 100%;
@include transition(200ms);
flex: 1;
}
#application-wrapper {
@@ -29,8 +29,6 @@
#page-content {
margin: 0 auto;
padding-bottom: 50px;
padding-top: 35px;
&.full-width {
max-width: 100%;
@@ -245,6 +243,7 @@
}
.table {
.action-icons {
white-space: nowrap;

View File

@@ -1,3 +1,7 @@
.landing-page {
overflow-x: hidden;
}
.page-wrapper {
position: relative;
margin: 0 auto;

View File

@@ -1 +1 @@
1594282067i:1594282067;
1594287749i:1594287749;

View File

@@ -1 +1 @@
1594282067i:1;
1594287749i:1;