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

Css adjustments.

This commit is contained in:
Mateus Machado Luna 2018-08-28 13:35:37 -03:00
parent 408c58dc31
commit b43a599a43
19 changed files with 77 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/lists/events-list.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="table-container"> <div class="table-container">
<div class="table-wrapper"> <div class="table-wrapper">
<table class="tainacan-table"> <table class="tainacan-table is-narrow">
<thead> <thead>
<tr> <tr>
<!-- Title --> <!-- Title -->

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

@ -275,7 +275,7 @@
<!-- RECORDS VIEW MODE --> <!-- RECORDS VIEW MODE -->
<masonry <masonry
:cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}" :cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
:gutter="42" :gutter="30"
class="tainacan-records-container" class="tainacan-records-container"
v-if="viewMode == 'records'"> v-if="viewMode == 'records'">
<div <div
@ -691,7 +691,7 @@ export default {
} }
}, },
getLimitedDescription(description) { getLimitedDescription(description) {
let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 100 : 220; let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 100 : 210;
return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description; return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description;
} }
} }

2
src/admin/components/lists/processes-list.vue
View File

@ -35,7 +35,7 @@
</div> </div>
--> -->
<div class="table-wrapper"> <div class="table-wrapper">
<table class="tainacan-table"> <table class="tainacan-table is-narrow">
<thead> <thead>
<tr> <tr>
<!-- Checking list --> <!-- Checking list -->

2
src/admin/components/lists/taxonomies-list.vue
View File

@ -36,7 +36,7 @@
</div> </div>
<div class="table-wrapper"> <div class="table-wrapper">
<table class="tainacan-table"> <table class="tainacan-table is-narrow">
<thead> <thead>
<tr> <tr>
<!-- Checking list --> <!-- Checking list -->

7
src/admin/scss/_buttons.scss
View File

@ -9,6 +9,7 @@
display: inline-flex !important; display: inline-flex !important;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
text-shadow: none !important;
&.is-secondary:hover, &.is-secondary:focus { &.is-secondary:hover, &.is-secondary:focus {
background: $secondary !important; background: $secondary !important;
@ -39,6 +40,12 @@
cursor: not-allowed !important; cursor: not-allowed !important;
color: $gray4 !important; color: $gray4 !important;
background-color: $gray2 !important; background-color: $gray2 !important;
text-shadow: none !important;
}
&.is-outlined[disabled], &.is-outlined:hover[disabled] {
border: 1px solid $gray2 !important;
color: $gray4 !important;
background-color: white !important;
} }
&.is-white[disabled] { &.is-white[disabled] {
background-color: white !important; background-color: white !important;

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

@ -8,7 +8,7 @@
width: 12px; width: 12px;
height: 12px; height: 12px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 1px; border-radius: 2px;
display: inline-block; display: inline-block;
border: 1px solid $gray4; border: 1px solid $gray4;
transition: background 150ms ease-out; transition: background 150ms ease-out;

6
src/admin/scss/_dropdown-and-autocomplete.scss
View File

@ -91,8 +91,10 @@
} }
} }
.selected-list-box { .selected-list-box {
padding: 4px 0px; padding: 4px 6px 0px 6px;
border: 1px solid $gray2; border-color: $gray2;
border-width: 0px 1px 1px 1px;
border-style: solid;
background-color: white; background-color: white;
display: flex; display: flex;
font-size: 12px; font-size: 12px;

10
src/admin/scss/_inputs.scss
View File

@ -1,18 +1,24 @@
.input, .textarea { .input, .textarea {
font-size: 14px; font-size: 14px;
border: none;
border-radius: 1px !important; border-radius: 1px !important;
box-shadow: none !important; box-shadow: none !important;
background-color: white;
border: 1px solid $gray2;
color: $tainacan-input-color;
transition: background-color 0.1s, border 0.3s;
&:focus, &:active { &:focus, &:active {
box-shadow: none !important; box-shadow: none !important;
background-color: white; background-color: white;
border: 1px solid $gray2 !important; border: 1px solid $gray4 !important;
} }
&[disabled] { &[disabled] {
color: $gray4 !important; color: $gray4 !important;
background-color: $gray2 !important; background-color: $gray2 !important;
} }
&.readonly, &[readonly] {
background-color: white !important;
}
&::placeholder, &::placeholder,
&::-ms-input-placeholder, &::-ms-input-placeholder,
&:-ms-input-placeholder, &:-ms-input-placeholder,

4
src/admin/scss/_modals.scss
View File

@ -108,7 +108,9 @@
box-shadow: none !important; box-shadow: none !important;
display: inline-flex !important; display: inline-flex !important;
cursor: pointer; cursor: pointer;
font-size: 13px !important; height: 30px !important;
line-height: 20px !important;
font-size: 14px !important;
} }
.button.is-success { .button.is-success {
border: none; border: none;

2
src/admin/scss/_repository-level-overrides.scss
View File

@ -11,7 +11,7 @@
} }
.is-primary:not(.upload-draggable), .is-primary:hover, .is-primary:focus { .is-primary:not(.upload-draggable), .is-primary:hover, .is-primary:focus {
background-color: $blue4 !important; background-color: $blue3 !important;
color: white !important; color: white !important;
} }
.is-secondary, .is-secondary:hover, .is-secondary:focus { .is-secondary, .is-secondary:hover, .is-secondary:focus {

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

@ -13,7 +13,7 @@
} }
} }
&:hover input[type="checkbox"]:checked + .check { &:hover input[type="checkbox"]:checked + .check {
background-color: $turquoise2; background-color: transparent;
} }
input[type="checkbox"]:checked + .check { input[type="checkbox"]:checked + .check {

6
src/admin/scss/_tables.scss
View File

@ -20,6 +20,12 @@
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
&.is-narrow {
tbody td {
height: 42px;
}
}
.checkbox-cell { .checkbox-cell {
min-width: 38px; min-width: 38px;
width: 38px; width: 38px;

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

@ -24,9 +24,11 @@
&.is-delete { &.is-delete {
border-radius: 50px !important; border-radius: 50px !important;
border-radius: 50px !important; border-radius: 50px !important;
color: $gray4;
&:hover { &:hover {
background-color: white !important; background-color: white !important;
color: $gray5;
} }
} }
} }

11
src/admin/scss/_tainacan-form.scss
View File

@ -39,15 +39,9 @@
} }
} }
.input, .textarea { .input, .textarea {
background-color: white;
border: 1px solid $gray2;
color: $tainacan-input-color;
transition: background-color 0.1s;
&.is-danger { &.is-danger {
background-color: #e7dede; background-color: $red1;
} }
} }
.control{ .control{
&.has-icons-right { &.has-icons-right {
@ -111,6 +105,9 @@
} }
} }
.upload-draggable { .upload-draggable {
color: $gray4;
transition: color 0.2s background-color 0.2s;
border-radius: 0 !important; border-radius: 0 !important;
border-color: $gray2;
} }
} }

20
src/admin/scss/_view-mode-cards.scss
View File

@ -19,11 +19,11 @@
.tainacan-card { .tainacan-card {
padding: 0px; padding: 0px;
flex-basis: 0; flex-basis: 0;
margin: 0.75rem; margin: 15px;
max-width: 425px; max-width: 425px;
min-width: 425px; min-width: 425px;
min-height: 218px; min-height: 210px;
max-height: 218px; max-height: 210px;
cursor: pointer; cursor: pointer;
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
@ -45,12 +45,12 @@
.card-checkbox { .card-checkbox {
position: absolute; position: absolute;
margin-left: 1.0rem; margin-left: 1.0rem;
margin-top: 9px; margin-top: 7px;
} }
.actions-area { .actions-area {
position: relative; position: relative;
float: right; float: right;
top: -7px; top: -5px;
padding-right: 12px; padding-right: 12px;
width: 80px; width: 80px;
display: flex; display: flex;
@ -73,15 +73,15 @@
visibility: hidden; visibility: hidden;
} }
img { img {
width: 172px; width: 170px;
height: 172px; height: 170px;
border-radius: 0px; border-radius: 0px;
} }
.metadata-title { .metadata-title {
flex-shrink: 0; flex-shrink: 0;
padding: 0.75rem 4.75rem 0.75rem 2.75rem; padding: 0.5rem 4.75rem 0.5rem 2.75rem;
margin-bottom: -27px; margin-bottom: -27px;
min-height: 42px; min-height: 40px;
font-size: 0.875rem !important; font-size: 0.875rem !important;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -105,7 +105,7 @@
padding: 0.75rem 1.375rem; padding: 0.75rem 1.375rem;
flex: 1; flex: 1;
width: 100%; width: 100%;
height: 172px; height: 170px;
color: $gray4; color: $gray4;
p.metadata-description { p.metadata-description {

17
src/admin/scss/_view-mode-grid.scss
View File

@ -14,9 +14,9 @@
} }
.tainacan-grid-item { .tainacan-grid-item {
max-width: 258px; max-width: 255px;
flex-basis: 0; flex-basis: 0;
margin: 1rem 1.5rem 1.5rem 1.5rem; margin: 15px;
text-align: center; text-align: center;
height: 100%; height: 100%;
@ -33,11 +33,12 @@
position: relative; position: relative;
float: right; float: right;
width: 100%; width: 100%;
height: 30px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
padding: 8px; padding: 3px 8px;
transition: visibility 0.2s, opacity 0.2s; transition: visibility 0.2s, opacity 0.2s;
margin-top: -43px; margin-top: -43px;
background-color: $gray2; background-color: $gray2;
@ -51,16 +52,12 @@
&:hover .actions-area { &:hover .actions-area {
visibility: visible; visibility: visible;
opacity: 1.0; opacity: 1.0;
} background-color: $gray2 !important;
&.selected-grid-item {
.actions-area {
background-color: $turquoise1;
}
} }
img { img {
min-width: 258px; min-width: 255px;
max-width: 258px; max-width: 255px;
height: auto; height: auto;
border-radius: 0px; border-radius: 0px;
margin-bottom: -5px; margin-bottom: -5px;

21
src/admin/scss/_view-mode-records.scss
View File

@ -14,6 +14,9 @@
.metadata-title { .metadata-title {
background-color: $turquoise2; background-color: $turquoise2;
} }
.media {
background-color: $turquoise1;
}
} }
.tainacan-record { .tainacan-record {
@ -35,12 +38,12 @@
.record-checkbox { .record-checkbox {
position: absolute; position: absolute;
margin-left: 1.0rem; margin-left: 1.0rem;
margin-top: 9px; margin-top: 7px;
} }
.actions-area { .actions-area {
position: relative; position: relative;
float: right; float: right;
top: -7px; top: -5px;
padding-right: 12px; padding-right: 12px;
width: 80px; width: 80px;
display: flex; display: flex;
@ -64,7 +67,7 @@
} }
.thumbnail { .thumbnail {
float: right; float: right;
margin: 0 0 1.5rem 1.5rem; margin: 0 0 25px 25px;
} }
img { img {
width: 120px; width: 120px;
@ -73,9 +76,9 @@
} }
.metadata-title { .metadata-title {
flex-shrink: 0; flex-shrink: 0;
padding: 0.75rem 4.75rem 0.75rem 2.75rem; padding: 0.5rem 4.75rem 0.5rem 2.75rem;
margin-bottom: -27px; margin-bottom: -27px;
min-height: 42px; min-height: 40px;
font-size: 0.875rem !important; font-size: 0.875rem !important;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -83,6 +86,7 @@
color: black; color: black;
p { p {
line-height: 1.7;
font-size: 0.875rem !important; font-size: 0.875rem !important;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -93,12 +97,15 @@
&:hover .metadata-title { &:hover .metadata-title {
background-color: $gray2 !important; background-color: $gray2 !important;
} }
&:hover .media {
background-color: $gray1 !important;
}
.media { .media {
width: 100%; width: 100%;
.list-metadata { .list-metadata {
padding: 0.75rem 1.375rem; padding: 25px;
flex: 1; flex: 1;
font-size: 0.6875rem; font-size: 0.6875rem;
color: $gray4; color: $gray4;
@ -107,12 +114,12 @@
.metadata-label { .metadata-label {
font-size: 0.75rem; font-size: 0.75rem;
margin-bottom: 0.2rem;
font-weight: 700; font-weight: 700;
color: #454647; color: #454647;
} }
.metadata-value { .metadata-value {
font-size: 0.75rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: $gray4; color: $gray4;
} }