Css adjustments.
This commit is contained in:
Mateus Machado Luna
parent
408c58dc31
commit
b43a599a43
|
|
@ -28,7 +28,7 @@
|
|||
import TainacanHeader from './components/navigation/tainacan-header.vue';
|
||||
import TainacanRepositorySubheader from './components/navigation/tainacan-repository-subheader.vue';
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: "AdminPage",
|
||||
data(){
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table class="tainacan-table">
|
||||
<table class="tainacan-table is-narrow">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Title -->
|
||||
|
|
|
|||
|
|
@ -275,7 +275,7 @@
|
|||
<!-- RECORDS VIEW MODE -->
|
||||
<masonry
|
||||
:cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
|
||||
:gutter="42"
|
||||
:gutter="30"
|
||||
class="tainacan-records-container"
|
||||
v-if="viewMode == 'records'">
|
||||
<div
|
||||
|
|
@ -691,7 +691,7 @@ export default {
|
|||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
-->
|
||||
<div class="table-wrapper">
|
||||
<table class="tainacan-table">
|
||||
<table class="tainacan-table is-narrow">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Checking list -->
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table class="tainacan-table">
|
||||
<table class="tainacan-table is-narrow">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Checking list -->
|
||||
|
|
|
|||
|
|
@ -571,7 +571,7 @@
|
|||
class="button is-secondary"
|
||||
:to="{ path: $routerHelper.getNewItemPath(collectionId) }">
|
||||
{{ $i18n.getFrom('items', 'add_new') }}
|
||||
</router-link>
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
display: inline-flex !important;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
text-shadow: none !important;
|
||||
|
||||
&.is-secondary:hover, &.is-secondary:focus {
|
||||
background: $secondary !important;
|
||||
|
|
@ -39,6 +40,12 @@
|
|||
cursor: not-allowed !important;
|
||||
color: $gray4 !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] {
|
||||
background-color: white !important;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
width: 12px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 1px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
border: 1px solid $gray4;
|
||||
transition: background 150ms ease-out;
|
||||
|
|
|
|||
|
|
@ -91,8 +91,10 @@
|
|||
}
|
||||
}
|
||||
.selected-list-box {
|
||||
padding: 4px 0px;
|
||||
border: 1px solid $gray2;
|
||||
padding: 4px 6px 0px 6px;
|
||||
border-color: $gray2;
|
||||
border-width: 0px 1px 1px 1px;
|
||||
border-style: solid;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,24 @@
|
|||
.input, .textarea {
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border-radius: 1px !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 {
|
||||
box-shadow: none !important;
|
||||
background-color: white;
|
||||
border: 1px solid $gray2 !important;
|
||||
}
|
||||
border: 1px solid $gray4 !important;
|
||||
}
|
||||
&[disabled] {
|
||||
color: $gray4 !important;
|
||||
background-color: $gray2 !important;
|
||||
}
|
||||
&.readonly, &[readonly] {
|
||||
background-color: white !important;
|
||||
}
|
||||
&::placeholder,
|
||||
&::-ms-input-placeholder,
|
||||
&:-ms-input-placeholder,
|
||||
|
|
|
|||
|
|
@ -108,7 +108,9 @@
|
|||
box-shadow: none !important;
|
||||
display: inline-flex !important;
|
||||
cursor: pointer;
|
||||
font-size: 13px !important;
|
||||
height: 30px !important;
|
||||
line-height: 20px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.button.is-success {
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
.is-primary:not(.upload-draggable), .is-primary:hover, .is-primary:focus {
|
||||
background-color: $blue4 !important;
|
||||
background-color: $blue3 !important;
|
||||
color: white !important;
|
||||
}
|
||||
.is-secondary, .is-secondary:hover, .is-secondary:focus {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
}
|
||||
&:hover input[type="checkbox"]:checked + .check {
|
||||
background-color: $turquoise2;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .check {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,12 @@
|
|||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
|
||||
&.is-narrow {
|
||||
tbody td {
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-cell {
|
||||
min-width: 38px;
|
||||
width: 38px;
|
||||
|
|
|
|||
|
|
@ -24,9 +24,11 @@
|
|||
&.is-delete {
|
||||
border-radius: 50px !important;
|
||||
border-radius: 50px !important;
|
||||
color: $gray4;
|
||||
|
||||
&:hover {
|
||||
background-color: white !important;
|
||||
color: $gray5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,16 +38,10 @@
|
|||
color: $danger;
|
||||
}
|
||||
}
|
||||
.input, .textarea {
|
||||
background-color: white;
|
||||
border: 1px solid $gray2;
|
||||
color: $tainacan-input-color;
|
||||
transition: background-color 0.1s;
|
||||
|
||||
.input, .textarea {
|
||||
&.is-danger {
|
||||
background-color: #e7dede;
|
||||
background-color: $red1;
|
||||
}
|
||||
|
||||
}
|
||||
.control{
|
||||
&.has-icons-right {
|
||||
|
|
@ -111,6 +105,9 @@
|
|||
}
|
||||
}
|
||||
.upload-draggable {
|
||||
color: $gray4;
|
||||
transition: color 0.2s background-color 0.2s;
|
||||
border-radius: 0 !important;
|
||||
border-color: $gray2;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,11 +19,11 @@
|
|||
.tainacan-card {
|
||||
padding: 0px;
|
||||
flex-basis: 0;
|
||||
margin: 0.75rem;
|
||||
margin: 15px;
|
||||
max-width: 425px;
|
||||
min-width: 425px;
|
||||
min-height: 218px;
|
||||
max-height: 218px;
|
||||
min-height: 210px;
|
||||
max-height: 210px;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
|
@ -45,12 +45,12 @@
|
|||
.card-checkbox {
|
||||
position: absolute;
|
||||
margin-left: 1.0rem;
|
||||
margin-top: 9px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.actions-area {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: -7px;
|
||||
top: -5px;
|
||||
padding-right: 12px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
|
|
@ -73,15 +73,15 @@
|
|||
visibility: hidden;
|
||||
}
|
||||
img {
|
||||
width: 172px;
|
||||
height: 172px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
.metadata-title {
|
||||
flex-shrink: 0;
|
||||
padding: 0.75rem 4.75rem 0.75rem 2.75rem;
|
||||
padding: 0.5rem 4.75rem 0.5rem 2.75rem;
|
||||
margin-bottom: -27px;
|
||||
min-height: 42px;
|
||||
min-height: 40px;
|
||||
font-size: 0.875rem !important;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
padding: 0.75rem 1.375rem;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 172px;
|
||||
height: 170px;
|
||||
color: $gray4;
|
||||
|
||||
p.metadata-description {
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
}
|
||||
|
||||
.tainacan-grid-item {
|
||||
max-width: 258px;
|
||||
max-width: 255px;
|
||||
flex-basis: 0;
|
||||
margin: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
margin: 15px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
|
||||
|
|
@ -33,11 +33,12 @@
|
|||
position: relative;
|
||||
float: right;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
padding: 8px;
|
||||
padding: 3px 8px;
|
||||
transition: visibility 0.2s, opacity 0.2s;
|
||||
margin-top: -43px;
|
||||
background-color: $gray2;
|
||||
|
|
@ -51,16 +52,12 @@
|
|||
&:hover .actions-area {
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
}
|
||||
&.selected-grid-item {
|
||||
.actions-area {
|
||||
background-color: $turquoise1;
|
||||
}
|
||||
background-color: $gray2 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 258px;
|
||||
max-width: 258px;
|
||||
min-width: 255px;
|
||||
max-width: 255px;
|
||||
height: auto;
|
||||
border-radius: 0px;
|
||||
margin-bottom: -5px;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,9 @@
|
|||
.metadata-title {
|
||||
background-color: $turquoise2;
|
||||
}
|
||||
.media {
|
||||
background-color: $turquoise1;
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-record {
|
||||
|
|
@ -35,12 +38,12 @@
|
|||
.record-checkbox {
|
||||
position: absolute;
|
||||
margin-left: 1.0rem;
|
||||
margin-top: 9px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.actions-area {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: -7px;
|
||||
top: -5px;
|
||||
padding-right: 12px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
|
|
@ -64,7 +67,7 @@
|
|||
}
|
||||
.thumbnail {
|
||||
float: right;
|
||||
margin: 0 0 1.5rem 1.5rem;
|
||||
margin: 0 0 25px 25px;
|
||||
}
|
||||
img {
|
||||
width: 120px;
|
||||
|
|
@ -73,9 +76,9 @@
|
|||
}
|
||||
.metadata-title {
|
||||
flex-shrink: 0;
|
||||
padding: 0.75rem 4.75rem 0.75rem 2.75rem;
|
||||
padding: 0.5rem 4.75rem 0.5rem 2.75rem;
|
||||
margin-bottom: -27px;
|
||||
min-height: 42px;
|
||||
min-height: 40px;
|
||||
font-size: 0.875rem !important;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -83,6 +86,7 @@
|
|||
color: black;
|
||||
|
||||
p {
|
||||
line-height: 1.7;
|
||||
font-size: 0.875rem !important;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -93,12 +97,15 @@
|
|||
&:hover .metadata-title {
|
||||
background-color: $gray2 !important;
|
||||
}
|
||||
&:hover .media {
|
||||
background-color: $gray1 !important;
|
||||
}
|
||||
|
||||
.media {
|
||||
width: 100%;
|
||||
|
||||
.list-metadata {
|
||||
padding: 0.75rem 1.375rem;
|
||||
padding: 25px;
|
||||
flex: 1;
|
||||
font-size: 0.6875rem;
|
||||
color: $gray4;
|
||||
|
|
@ -107,12 +114,12 @@
|
|||
|
||||
.metadata-label {
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 0.2rem;
|
||||
font-weight: 700;
|
||||
color: #454647;
|
||||
}
|
||||
|
||||
.metadata-value {
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
color: $gray4;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue