fix(style): print format

This commit is contained in:
Rushabh Mehta 2024-09-10 15:15:15 +05:30
parent 425d409422
commit 0c8b9be47b
5 changed files with 22 additions and 18 deletions

View file

@ -49,9 +49,9 @@ frappe.PrintFormatBuilder = class PrintFormatBuilder {
this.page.sidebar = $('<div class="print-format-builder-sidebar"></div>').appendTo(
this.page.sidebar
);
this.page.main = $(
'<div class="col-md-12 border print-format-builder-main frappe-card"></div>'
).appendTo(this.page.main);
this.page.main = $('<div class="col-md-12 print-format-builder-main"></div>').appendTo(
this.page.main
);
// future-bindings for buttons on sections / fields
// bind only once

View file

@ -127,6 +127,5 @@ watch(print_format, () => (store.dirty.value = true), { deep: true });
margin-left: auto;
background-color: white;
box-shadow: var(--shadow-lg);
border-radius: var(--border-radius);
}
</style>

View file

@ -1,9 +1,9 @@
<template>
<div class="layout-main-section row" v-if="shouldRender">
<div class="col-3">
<div v-if="shouldRender" style="display: flex; width: 100%">
<div style="padding: var(--padding-md); padding-left: var(--padding-xl)">
<PrintFormatControls />
</div>
<div class="print-format-container col-9">
<div class="print-format-container">
<KeepAlive>
<component :is="Preview" v-if="show_preview" />
<component :is="PrintFormat" v-else />
@ -59,7 +59,8 @@ defineExpose({ toggle_preview, $store });
<style scoped>
.print-format-container {
height: calc(100vh - 140px);
height: calc(100vh - 95px);
width: 100%;
overflow-y: auto;
padding-top: 0.5rem;
padding-bottom: 4rem;

View file

@ -1,8 +1,8 @@
<template>
<div class="layout-side-section">
<div style="width: 220px">
<div class="form-sidebar">
<div class="sidebar-menu">
<div class="sidebar-label">{{ __("Page Margins") }}</div>
<h5>{{ __("Page Margins") }}</h5>
<div class="margin-controls">
<div class="form-group" v-for="df in margins" :key="df.fieldname">
<div class="clearfix">
@ -25,7 +25,7 @@
</div>
</div>
<div class="sidebar-menu">
<div class="sidebar-label">{{ __("Google Font") }}</div>
<div class="control-label">{{ __("Google Font") }}</div>
<div class="form-group">
<div class="control-input-wrapper">
<div class="control-input">
@ -42,7 +42,7 @@
</div>
</div>
<div class="sidebar-menu">
<div class="sidebar-label">{{ __("Font Size") }}</div>
<div class="control-label">{{ __("Font Size") }}</div>
<div class="form-group">
<div class="control-input-wrapper">
<div class="control-input">
@ -60,7 +60,7 @@
</div>
</div>
<div class="sidebar-menu">
<div class="sidebar-label">{{ __("Page Number") }}</div>
<div class="control-label">{{ __("Page Number") }}</div>
<div class="form-group">
<div class="control-input-wrapper">
<div class="control-input">
@ -80,7 +80,7 @@
</div>
</div>
<div class="sidebar-menu">
<div class="sidebar-label">{{ __("Fields") }}</div>
<div class="control-label">{{ __("Fields") }}</div>
<input
class="mb-2 form-control form-control-sm"
type="text"
@ -283,7 +283,8 @@ watch(print_format, () => (store.dirty.value = true), { deep: true });
}
.fields-container {
max-height: calc(100vh - 34rem);
margin-top: var(--margin-md);
max-height: calc(100vh - 31rem);
overflow-y: auto;
}
@ -304,6 +305,10 @@ watch(print_format, () => (store.dirty.value = true), { deep: true });
margin-top: 0.5rem;
}
.sidebar-menu {
margin-bottom: var(--margin-md);
}
.sidebar-menu:last-child {
margin-bottom: 0;
}

View file

@ -7,7 +7,6 @@
.print-preview-wrapper {
padding: 80px 0;
background-color: var(--gray-200);
border-radius: var(--border-radius);
@include media-breakpoint-down(md) {
padding: 0;
@ -43,8 +42,8 @@
}
.layout-side-section.print-preview-sidebar {
padding-left: var(--padding-md);
padding-right: var(--padding-md);
padding: var(--padding-md);
border-left: 0px;
.checkbox label {
align-items: unset;