tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds basic styling to taincan-form class.

This commit is contained in:
mateuswetah 2018-03-12 17:06:07 -03:00
parent a4f9043a34
commit 36130791ec
8 changed files with 54 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/edition/collection-edition-form.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="page-container primary-page">
<b-tag v-if="collection != null && collection != undefined" :type="'is-' + getStatusColor(collection.status)" v-text="collection.status"></b-tag>
<form label-width="120px">
<form class="tainacan-form" label-width="120px">
<b-field
:label="$i18n.get('label_name')"
:type="editFormErrors['name'] != undefined ? 'is-danger' : ''"

6
src/admin/components/edition/field-edition-form.vue
View File

@ -1,5 +1,5 @@
<template>
<form id="fieldEditForm" v-on:submit.prevent="saveEdition(editForm)">
<form id="fieldEditForm" class="tainacan-form" v-on:submit.prevent="saveEdition(editForm)">
<b-field
:label="$i18n.get('label_name')"
@ -71,7 +71,7 @@
<component
:errors="formErrors['field_type_options']"
v-if="editForm.field_type_object && field.field_type_object.form_component"
v-if="(editForm.field_type_object && field.field_type_object.form_component) || field.edit_form == ''"
:is="editForm.field_type_object.form_component"
:field="editForm"
v-model="editForm.field_type_options">
@ -121,7 +121,7 @@ export default {
this.formErrors = {};
this.formErrorMessage = '';
if (field.field_type_object && field.field_type_object.form_component) {
if ((field.field_type_object && field.field_type_object.form_component) || field.edit_form == '') {
this.updateField({collectionId: this.collectionId, fieldId: field.id, isRepositoryLevel: this.isRepositoryLevel, options: this.editForm})
.then((field) => {

2
src/admin/components/edition/item-edition-form.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="page-container">
<b-tag v-if="item != null && item != undefined" :type="'is-' + getStatusColor(item.status)" v-text="item.status"></b-tag>
<form label-width="120px">
<form class="tainacan-form" label-width="120px">
<b-field :label="$i18n.get('label_status')">
<b-select
id="status-select"

5
src/admin/components/lists/fields-list.vue
View File

@ -12,7 +12,7 @@
:options="{group: { name:'fields', pull: false, put: true }, 'handle': '.handle', chosenClass: 'sortable-chosen', filter: '.not-sortable-item'}">
<div
class="active-field-item"
:class="{'not-sortable-item': field.id == undefined || openedFieldId == field.id, 'inherited-field': field.collection_id != collectionId}"
:class="{'not-sortable-item': field.id == undefined, 'not-focusable-item': openedFieldId == field.id, 'inherited-field': field.collection_id != collectionId}"
v-for="(field, index) in activeFieldList" :key="index">
<div class="handle">
<b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
@ -258,10 +258,9 @@ export default {
height: 1em;
width: 1em;
}
&.not-sortable-item, &.not-sortable-item:hover {
&.not-sortable-item, &.not-sortable-item:hover, &.not-focusable-item, &.not-focusable-item:hover {
box-shadow: none !important;
top: 0px !important;
color: gray;
cursor: default;
}
&.inherited-field {

4
src/admin/components/lists/filters-list.vue
View File

@ -12,7 +12,7 @@
:options="{group: { name:'filters', pull: false, put: true }, 'handle': '.handle', chosenClass: 'sortable-chosen', filter: '.not-sortable-item'}">
<div
class="active-filter-item"
:class="{'not-sortable-item': filter.id == undefined || openedFilterId == filter.id, 'inherited-filter': filter.collection_id != collectionId}"
:class="{'not-sortable-item': filter.id == undefined, 'not-focusable-item': openedFilterId == filter.id, 'inherited-filter': filter.collection_id != collectionId}"
v-for="(filter, index) in activeFilterList" :key="index">
<div class="handle">
<b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
@ -260,7 +260,7 @@ export default {
height: 1em;
width: 1em;
}
&.not-sortable-item, &.not-sortable-item:hover {
&.not-sortable-item, &.not-sortable-item:hover, &.not-focusable-item, &.not-focusable-item:hover {
box-shadow: none !important;
top: 0px !important;
color: gray;

2
src/admin/components/navigation/tainacan-header.vue
View File

@ -112,7 +112,7 @@ export default {
// Tainacan Header
#tainacan-header{
background-color: $light;
background-color: $header-color;
height: $header-height;
max-height: $header-height;
width: 100%;

2
src/admin/scss/_variables.scss
View File

@ -16,6 +16,8 @@ $primary-dark: #55A0AF;
$primary-darker: darken($primary-dark, 5%);
$separator-color: #2a6e77;
$header-color: #ececec;
$tainacan-input-color: #f0f0f0;
$gray: #898d8f;
$gray-invert: findColorInvert($gray);

43
src/admin/scss/tainacan-admin.scss
View File

@ -74,7 +74,44 @@ html {
z-index: 99999999 !important;
}
// Buttons border radius are bigger in Tainacan
// Input components used in forms are gray in Tainacan
.tainacan-form {
.input, .textarea {
border: none;
border-radius: 1px !important;
background-color: $tainacan-input-color;
color: black;
box-shadow: none;
}
.select {
padding-top: 0px !important;
select {
border: none;
border-radius: 1px !important;
font-weight: normal;
height: 30px !important;
padding: 2px 25px 2px 15px!important;
margin-top: 0px !important;
margin-bottom: 0px !important;
background-color: $tainacan-input-color;
color: black;
&:focus>option:checked, &:focus>option:hover {
background-color: $primary-lighter !important;
}
}
&:not(.is-multiple)::after {
content: "\F35D" !important;
font: normal normal normal 24px/1 "Material Design Icons" !important;
border: none !important;
transform: none;
margin-top: -0.6em;
right: 0.95em;
color: $primary;
}
}
}
// Some components have a different style in listing pages
.button {
border-radius: 6px !important;
font-weight: normal;
@ -86,6 +123,7 @@ html {
.select {
padding-top: 0px !important;
select {
border: none;
border-radius: 6px !important;
font-weight: normal;
height: 30px !important;
@ -108,6 +146,9 @@ html {
}
.dropdown {
.dropdown-trigger{
.button {
border: none;
}
.icon {
color: $primary;
}