More css tweaks. Fixes to help button position after recent changes.
This commit is contained in:
mateuswetah
parent
6833a282bb
commit
090aacae9a
|
|
@ -648,6 +648,9 @@ export default {
|
|||
|
||||
.tainacan-form>.columns>.column {
|
||||
overflow: auto;
|
||||
.field {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.thumbnail-field {
|
||||
max-height: 128px;
|
||||
|
|
|
|||
|
|
@ -139,10 +139,10 @@
|
|||
false-value="no"
|
||||
name="required">
|
||||
{{ $i18n.get('label_required') }}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'required')"
|
||||
:message="$i18n.getHelperMessage('fields', 'required')"/>
|
||||
</b-checkbox>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'required')"
|
||||
:message="$i18n.getHelperMessage('fields', 'required')"/>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
|
|
@ -156,10 +156,10 @@
|
|||
false-value="no"
|
||||
name="multiple">
|
||||
{{ $i18n.get('label_allow_multiple') }}
|
||||
</b-checkbox>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'multiple')"
|
||||
:message="$i18n.getHelperMessage('fields', 'multiple')"/>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'multiple')"
|
||||
:message="$i18n.getHelperMessage('fields', 'multiple')"/>
|
||||
</b-checkbox>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
|
|
@ -173,10 +173,10 @@
|
|||
false-value="no"
|
||||
name="collecion_key">
|
||||
{{ $i18n.get('label_unique_value') }}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'unique')"
|
||||
:message="$i18n.getHelperMessage('fields', 'unique')"/>
|
||||
</b-checkbox>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'unique')"
|
||||
:message="$i18n.getHelperMessage('fields', 'unique')"/>
|
||||
</b-field>
|
||||
</b-field>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,14 @@
|
|||
<div class="column is-4">
|
||||
|
||||
<!-- Status -------------------------------- -->
|
||||
<label class="section-label">{{ $i18n.get('label_status') }}</label>
|
||||
<span class="required-field-asterisk">*</span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'status')"
|
||||
:message="$i18n.getHelperMessage('items', 'status')"/>
|
||||
<div class="document-box">
|
||||
<div class="section-label">
|
||||
<label>{{ $i18n.get('label_status') }}</label>
|
||||
<span class="required-field-asterisk">*</span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'status')"
|
||||
:message="$i18n.getHelperMessage('items', 'status')"/>
|
||||
</div>
|
||||
<div class="section-box">
|
||||
<div class="field">
|
||||
<b-select
|
||||
v-model="form.status"
|
||||
|
|
@ -47,11 +49,13 @@
|
|||
</div>
|
||||
|
||||
<!-- Document -------------------------------- -->
|
||||
<label class="section-label">{{ form.document != undefined && form.document != null && form.document != '' ? $i18n.get('label_document') : $i18n.get('label_document_empty') }}</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'document')"
|
||||
:message="$i18n.getHelperMessage('items', 'document')"/>
|
||||
<div class="document-box">
|
||||
<div class="section-label">
|
||||
<label>{{ form.document != undefined && form.document != null && form.document != '' ? $i18n.get('label_document') : $i18n.get('label_document_empty') }}</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'document')"
|
||||
:message="$i18n.getHelperMessage('items', 'document')"/>
|
||||
</div>
|
||||
<div class="section-box">
|
||||
<div
|
||||
v-if="form.document != undefined && form.document != null &&
|
||||
form.document_type != undefined && form.document_type != null &&
|
||||
|
|
@ -196,11 +200,14 @@
|
|||
</b-modal>
|
||||
|
||||
<!-- Thumbnail -------------------------------- -->
|
||||
<label class="section-label">{{ $i18n.get('label_thumbnail') }}</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', '_thumbnail_id')"
|
||||
:message="$i18n.getHelperMessage('items', '_thumbnail_id')"/>
|
||||
<div class="document-box">
|
||||
<div class="section-label">
|
||||
<label>{{ $i18n.get('label_thumbnail') }}</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', '_thumbnail_id')"
|
||||
:message="$i18n.getHelperMessage('items', '_thumbnail_id')"/>
|
||||
|
||||
</div>
|
||||
<div class="section-box">
|
||||
<div class="thumbnail-field">
|
||||
<a
|
||||
class="button is-rounred is-secondary"
|
||||
|
|
@ -230,8 +237,10 @@
|
|||
</div>
|
||||
|
||||
<!-- Attachments ------------------------------------------ -->
|
||||
<label class="section-label">{{ $i18n.get('label_attachments') }}</label>
|
||||
<div class="document-box">
|
||||
<div class="section-label">
|
||||
<label>{{ $i18n.get('label_attachments') }}</label>
|
||||
</div>
|
||||
<div class="section-box">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
@click.prevent="attachmentMediaFrame.openFrame($event)">
|
||||
|
|
@ -643,10 +652,13 @@ export default {
|
|||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 16px !important;
|
||||
font-weight: 500 !important;
|
||||
color: $tertiary !important;
|
||||
line-height: 1.2em;
|
||||
position: relative;
|
||||
label {
|
||||
font-size: 16px !important;
|
||||
font-weight: 500 !important;
|
||||
color: $tertiary !important;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-all {
|
||||
|
|
@ -654,7 +666,7 @@ export default {
|
|||
.icon { vertical-align: bottom; }
|
||||
}
|
||||
|
||||
.document-box {
|
||||
.section-box {
|
||||
border: 1px solid $draggable-border-color;
|
||||
padding: 30px;
|
||||
margin-top: 16px;
|
||||
|
|
|
|||
|
|
@ -375,6 +375,7 @@ export default {
|
|||
display: block;
|
||||
position: relative;
|
||||
cursor: grab;
|
||||
opacity: 1 !important;
|
||||
|
||||
.handle {
|
||||
padding-right: 6em;
|
||||
|
|
@ -432,7 +433,7 @@ export default {
|
|||
cursor: default;
|
||||
|
||||
.field-name {
|
||||
color: $primary;
|
||||
color: $secondary;
|
||||
}
|
||||
.handle .label-details, .handle .icon {
|
||||
color: $gray !important;
|
||||
|
|
|
|||
|
|
@ -563,7 +563,7 @@ export default {
|
|||
cursor: default;
|
||||
|
||||
.field-name {
|
||||
color: $primary;
|
||||
color: $secondary;
|
||||
}
|
||||
.handle .label-details, .handle .icon {
|
||||
color: $gray !important;
|
||||
|
|
|
|||
|
|
@ -65,19 +65,14 @@ export default {
|
|||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.icon {
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.help-tooltip-body {
|
||||
padding: 1.2em;
|
||||
font-size: 14px;
|
||||
padding: 0.8em 1.0em 1.0em 1.0em;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ a:hover {
|
|||
}
|
||||
}
|
||||
.label {
|
||||
font-weight: normal;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -180,7 +180,7 @@ a:hover {
|
|||
}
|
||||
|
||||
&:focus, &:active {
|
||||
box-shadow: none;
|
||||
box-shadow: none !important;
|
||||
background-color: white;
|
||||
border: 1px solid $tainacan-input-background;
|
||||
}
|
||||
|
|
@ -582,12 +582,13 @@ a:hover {
|
|||
color: $gray-light;
|
||||
}
|
||||
.mdi-chevron-left::before {
|
||||
content: "\F4AE";
|
||||
font-size: 20px;
|
||||
content: "\F40A";
|
||||
font-size: 17px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.mdi-chevron-right::before {
|
||||
content: "\F4AD";
|
||||
font-size: 20px;
|
||||
content: "\F40A";
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@
|
|||
class="required-field-asterisk"
|
||||
:class="fieldTypeMessage">*</span>
|
||||
<span class="field-type">({{ $i18n.get(field.field.field_type_object.component) }})</span>
|
||||
<help-button
|
||||
:title="field.field.name"
|
||||
:message="field.field.description"/>
|
||||
</span>
|
||||
<help-button
|
||||
:title="field.field.name"
|
||||
:message="field.field.description"/>
|
||||
<div
|
||||
v-show="isCollapsed"
|
||||
v-if="isTextInputComponent( field.field.field_type_object.component )">
|
||||
|
|
@ -170,6 +170,7 @@
|
|||
}
|
||||
.collapse-handle {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue