Skip to content

Commit 56ce0ca

Browse files
cadrielcadriel
committed
feat: max constrained width
1 parent dc326f3 commit 56ce0ca

6 files changed

Lines changed: 64 additions & 67 deletions

File tree

‎src/components/AppBar.vue‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,42 @@
33
app
44
clipped-left
55
>
6-
<v-icon large color="#1970b5">$printer3dNozzle</v-icon>
7-
<v-toolbar-title class="title text-h4 mr-5 d-none d-sm-inline">
8-
{{ instanceName }}
9-
</v-toolbar-title>
10-
<v-spacer />
11-
<v-toolbar-items>
12-
<v-btn text to="/">
13-
<v-icon small class="mr-md-1">$home</v-icon>
14-
<span class="d-none d-md-inline">Dashboard</span>
15-
</v-btn>
16-
<v-btn text to="/configuration">
17-
<v-icon small class="mr-md-1">$tune</v-icon>
18-
<span class="d-none d-md-inline">Printer</span>
19-
</v-btn>
20-
<v-btn text to="/settings">
21-
<v-icon small class="mr-md-1">$cog</v-icon>
22-
<span class="d-none d-md-inline">Settings</span>
23-
</v-btn>
24-
<v-tooltip bottom v-if="socketConnected">
25-
<template v-slot:activator="{ on, attrs }">
26-
<v-btn
27-
:disabled="!klippyConnected"
28-
text
29-
color="error"
30-
@click="emergencyStop()"
31-
v-bind="attrs"
32-
v-on="on">
33-
<v-icon>$estop</v-icon>
34-
</v-btn>
35-
</template>
36-
Emergency Stop
37-
</v-tooltip>
38-
<system-commands-widget></system-commands-widget>
39-
</v-toolbar-items>
6+
<v-container fluid class="constrained-width py-0 fill-height">
7+
<v-icon large color="#1970b5" class="d-none d-sm-inline">$printer3dNozzle</v-icon>
8+
<v-toolbar-title class="title text-h4 mr-5 d-none d-sm-inline">
9+
{{ instanceName }}
10+
</v-toolbar-title>
11+
<v-spacer />
12+
<v-toolbar-items>
13+
<v-btn text to="/">
14+
<v-icon small class="mr-md-1">$home</v-icon>
15+
<span class="d-none d-md-inline">Dashboard</span>
16+
</v-btn>
17+
<v-btn text to="/configuration">
18+
<v-icon small class="mr-md-1">$tune</v-icon>
19+
<span class="d-none d-md-inline">Printer</span>
20+
</v-btn>
21+
<v-btn text to="/settings">
22+
<v-icon small class="mr-md-1">$cog</v-icon>
23+
<span class="d-none d-md-inline">Settings</span>
24+
</v-btn>
25+
<v-tooltip bottom v-if="socketConnected">
26+
<template v-slot:activator="{ on, attrs }">
27+
<v-btn
28+
:disabled="!klippyConnected"
29+
text
30+
color="error"
31+
@click="emergencyStop()"
32+
v-bind="attrs"
33+
v-on="on">
34+
<v-icon>$estop</v-icon>
35+
</v-btn>
36+
</template>
37+
Emergency Stop
38+
</v-tooltip>
39+
<system-commands-widget></system-commands-widget>
40+
</v-toolbar-items>
41+
</v-container>
4042
</v-app-bar>
4143
</template>
4244

‎src/scss/global.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
.container--fluid.constrained-width {
2+
// @media (min-width: map-get($grid-breakpoints, 'xl')) {
3+
max-width: map-get($container-max-widths, 'xl');
4+
}
5+
16
.v-btn-super {
27
.v-btn__content {
38
display: block;

‎src/views/Configuration.vue‎

Lines changed: 20 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,27 @@
11
<template>
2-
<v-container fluid class="configuration">
3-
<!-- <v-row>
4-
<v-col cols="12" class="pt-0"> -->
5-
<!-- <v-card color="quaternary">
6-
<v-card-title color="quaternary">
7-
<v-icon large left>$tune</v-icon>
8-
<span class="font-weight-light">Printer Configuration</span>
9-
</v-card-title>
10-
</v-card> -->
11-
<v-row>
12-
<v-col cols="12" md="7" class="pt-0">
13-
<klippy-disconnected-card v-if="!klippyConnected"></klippy-disconnected-card>
14-
<bed-mesh-card v-if="supportsBedMesh && klippyConnected"></bed-mesh-card>
15-
<v-row v-if="klippyConnected">
16-
<v-col cols="12" sm="6">
17-
<runout-sensors-card v-if="klippyConnected"></runout-sensors-card>
18-
</v-col>
19-
<v-col cols="12" sm="6">
20-
<end-stops-card v-if="klippyConnected"></end-stops-card>
21-
</v-col>
22-
</v-row>
2+
<v-container fluid class="constrained-width">
3+
<v-row>
4+
<v-col cols="12" md="7" class="pt-0">
5+
<klippy-disconnected-card v-if="!klippyConnected"></klippy-disconnected-card>
6+
<bed-mesh-card v-if="supportsBedMesh && klippyConnected"></bed-mesh-card>
7+
<v-row v-if="klippyConnected">
8+
<v-col cols="12" sm="6">
9+
<runout-sensors-card v-if="klippyConnected"></runout-sensors-card>
2310
</v-col>
24-
<v-col cols="12" md="5" class="pt-0 config-files-wrapper">
25-
<file-system-card
26-
:root="['config', 'config_examples']"
27-
accept=".conf,.cfg"
28-
panel-title="Config"
29-
:show-meta-data="false">
30-
</file-system-card>
11+
<v-col cols="12" sm="6">
12+
<end-stops-card v-if="klippyConnected"></end-stops-card>
3113
</v-col>
3214
</v-row>
33-
<!-- </v-col>
34-
</v-row> -->
15+
</v-col>
16+
<v-col cols="12" md="5" class="pt-0 config-files-wrapper">
17+
<file-system-card
18+
:root="['config', 'config_examples']"
19+
accept=".conf,.cfg"
20+
panel-title="Config"
21+
:show-meta-data="false">
22+
</file-system-card>
23+
</v-col>
24+
</v-row>
3525
</v-container>
3626
</template>
3727

‎src/views/Dashboard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<v-container fluid class="dashboard">
2+
<v-container fluid class="constrained-width">
33
<v-row>
44
<v-col cols="12" md="6" class="pt-0">
55
<klippy-disconnected-card v-if="!klippyConnected"></klippy-disconnected-card>

‎src/views/NotFound.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<v-container fill-height fluid class="404">
2+
<v-container fill-height fluid class="constrained-width">
33
<v-row justify="center" align="center">
44
<v-col>
55
<center>

‎src/views/Settings.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<v-container fluid class="dashboard">
2+
<v-container fluid class="constrained-width">
33
<v-row>
44
<v-col cols="12" class="pt-0">
55
<v-card color="quaternary">

0 commit comments

Comments
 (0)