mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-17 18:55:02 +00:00
responsivity update
This commit is contained in:
carodej
@@ -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 {
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -35,6 +35,7 @@
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.title {
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
overflow-x: auto;
|
||||
table-layout: fixed;
|
||||
|
||||
tr {
|
||||
width: 100%;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -179,6 +179,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 50px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.user-thumbnail {
|
||||
|
||||
Vendored
+2
-3
@@ -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;
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
.landing-page {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
||||
Reference in New Issue
Block a user