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

Several adjustments for admin proper font scaling.

This commit is contained in:
mateuswetah 2020-04-23 13:06:12 -03:00
parent 0df882ffdb
commit 453a3135d2
24 changed files with 133 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/tainacanicons.css
View File

@ -338,6 +338,11 @@ font-weight: normal;
font-size: 20px;
}
.tainacan-icon-1-125em.tainacan-icon-set,
.tainacan-icon-1-125em.tainacan-icon:before {
font-size: 1.125em;
}
.tainacan-icon-1-25em.tainacan-icon-set,
.tainacan-icon-1-25em.tainacan-icon:before {
font-size: 1.25em;

12
src/views/admin/admin.vue
View File

@ -110,11 +110,11 @@
.is-secondary-content {
padding: 0px !important;
margin: 94px auto 0 auto;
margin: 5.875em auto 0 auto;
position: relative;
overflow-y: hidden;
overflow-x: hidden;
height: calc(100% - 94px);
height: calc(100% - 5.875em);
@media screen and (max-width: 769px) {
overflow-y: visible;
@ -131,11 +131,11 @@
#menu-compress-button {
position: absolute;
z-index: 999;
top: 192px;
top: calc(11.125em + 12px);
left: 0px;
max-width: 25px;
height: 25px;
width: 25px;
max-width: 1.5625em;
height: 1.5625em;
width: 1.5625em;
border: none;
background-color: var(--tainacan-blue5);
color: var(--tainacan-white);

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

@ -976,10 +976,10 @@ export default {
#button-delete-thumbnail,
#button-delete-header-image {
border-radius: 100px !important;
max-height: 30px !important;
max-width: 30px !important;
min-height: 30px !important;
min-width: 30px !important;
max-height: 2.125em !important;
max-width: 2.125em !important;
min-height: 2.125em !important;
min-width: 2.125em !important;
padding: 0 !important;
z-index: 99;
margin-left: 12px !important;
@ -994,14 +994,14 @@ export default {
}
}
.header-field {
padding-top: 1.5em;
padding-top: 24px;
.image-placeholder {
position: absolute;
left: 10%;
right: 10%;
top: 35%;
font-size: 2.0em;
font-size: 1em;
font-weight: bold;
z-index: 99;
text-align: center;
@ -1019,7 +1019,7 @@ export default {
}
}
.thumbnail-field {
padding: 1.5em;
padding: 24px;
// margin-top: 16px;
// margin-bottom: 38px;
@ -1046,7 +1046,7 @@ export default {
.thumbnail-buttons-row {
position: relative;
left: 90px;
bottom: 20px;
bottom: 1.0em;
}
}
.switch {

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

@ -1561,7 +1561,10 @@ export default {
cursor: pointer;
}
}
p { color: var(--tainacan-secondary); }
p {
color: var(--tainacan-secondary);
font-size: 0.8125em;
}
}
}
}
@ -1597,10 +1600,10 @@ export default {
#button-delete-document {
border-radius: 100px !important;
max-height: 30px !important;
max-width: 30px !important;
min-height: 30px !important;
min-width: 30px !important;
max-height: 2.125em !important;
max-width: 2.125em !important;
min-height: 2.125em !important;
min-width: 2.125em !important;
padding: 0 !important;
z-index: 99;
margin-left: 12px !important;
@ -1640,7 +1643,7 @@ export default {
.thumbnail-buttons-row {
position: relative;
left: 90px;
bottom: 22px;
bottom: 1.0em;
}
}

10
src/views/admin/components/edition/term-edition-form.vue
View File

@ -543,10 +543,10 @@
#button-edit-header {
border-radius: 100px !important;
max-height: 30px !important;
max-width: 30px !important;
min-height: 30px !important;
min-width: 30px !important;
max-height: 2.125em !important;
max-width: 2.125em !important;
min-height: 2.125em !important;
min-width: 2.125em !important;
padding: 0 !important;
z-index: 99;
margin-left: 10px !important;
@ -563,7 +563,7 @@
.thumbnail-buttons-row {
text-align: right;
top: -15px;
top: -0.9375em;
position: relative;
}
}

8
src/views/admin/components/lists/basic-term-item.vue
View File

@ -149,6 +149,7 @@ export default {
.term-item {
padding: 0 0 0 1.75em;
min-height: 40px;
height: 3.125em;
display: flex;
position: relative;
align-items: center;
@ -193,7 +194,8 @@ export default {
font-weight: bold;
color: var(--tainacan-danger);
}
.controls {
.controls {
height: 3.125em;
visibility: hidden;
opacity: 0.0;
display: flex;
@ -233,8 +235,8 @@ export default {
border-style: solid;
border-color: transparent transparent transparent var(--tainacan-blue1);
border-left-width: 24px;
border-top-width: 20px;
border-bottom-width: 20px;
border-top-width: 1.25em;
border-bottom-width: 1.25em;
top: 0;
}
&:hover:before {

8
src/views/admin/components/lists/recursive-term-item.vue
View File

@ -328,6 +328,7 @@ export default {
.term-item {
padding: 0 0 0 1.75em;
min-height: 40px;
height: 3.125em;
display: flex;
position: relative;
align-items: center;
@ -352,7 +353,7 @@ export default {
.children-icon {
color: var(--tainacan-blue2);
position: absolute;
left: -21px;
left: -1.3125em;
top: 1px;
font-size: 1.5em;
}
@ -395,6 +396,7 @@ export default {
color: var(--tainacan-danger);
}
.controls {
height: 3.125em;
visibility: hidden;
opacity: 0.0;
display: flex;
@ -434,8 +436,8 @@ export default {
border-style: solid;
border-color: transparent transparent transparent var(--tainacan-gray1);
border-left-width: 24px;
border-top-width: 20px;
border-bottom-width: 20px;
border-top-width: 1.25em;
border-bottom-width: 1.25em;
top: 0;
}
&:hover:before {

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

@ -556,8 +556,8 @@ export default {
border-style: solid;
border-color: transparent transparent transparent var(--tainacan-gray1);
border-left-width: 24px;
border-top-width: 20px;
border-bottom-width: 20px;
border-top-width: 1.25em;
border-bottom-width: 1.25em;
top: 0;
}
&:hover:before {

22
src/views/admin/components/navigation/primary-menu.vue
View File

@ -222,13 +222,18 @@ export default {
<style lang="scss" scoped>
@import "../../scss/_variables.scss";
#primary-menu {
background-color: var(--tainacan-blue4);
padding: 52px 0px 0px 0px;
padding: $header-height 0px 0px 0px;
max-height: 100%;
max-height: 100vh;
overflow: auto;
z-index: 101;
max-width: 10em;
-webkit-transition: max-width 0.2s linear; /* Safari */
transition: max-width 0.2s linear;
max-width: 160px;
z-index: 101;
a:hover {
text-decoration: none;
@ -238,7 +243,8 @@ export default {
padding-top: 0px;
}
.repository-label {
max-height: 42px;
max-height: $subheader-height;
height: $subheader-height;
background-color: var(--tainacan-blue5);
font-weight: bold;
font-size: 1em;
@ -267,6 +273,7 @@ export default {
margin: 24px 0;
}
li {
height: $subheader-height;
a {
color: var(--tainacan-white);
white-space: nowrap;
@ -280,6 +287,7 @@ export default {
.icon {
height: auto;
width: auto;
min-width: calc(2.625em - 30px);
// i, i::before {
// font-size: 1.125em !important;
// }
@ -304,7 +312,7 @@ export default {
box-shadow: none;
}
.menu-text {
padding-left: 0.7em;
padding-left: 0.5em;
opacity: 1;
top: 1px;
position: relative;
@ -319,7 +327,7 @@ export default {
}
&.is-compressed {
max-width: 50px;
max-width: $header-height;
.menu-text {
visibility: hidden;
opacity: 0;
@ -332,7 +340,7 @@ export default {
@media screen and (max-width: 769px) {
width: 100% !important;
max-width: 100% !important;
padding-top: 52px;
padding-top: $header-height;
.menu {
padding-top: 0px;

5
src/views/admin/components/navigation/tainacan-collection-subheader.vue
View File

@ -192,7 +192,7 @@ export default {
.back-button {
padding: 0;
margin: 0;
height: 42px;
height: $subheader-height;
width: var(--tainacan-one-column);
min-width: var(--tainacan-one-column);
color: var(--tainacan-white);
@ -206,7 +206,7 @@ export default {
color: var(--tainacan-white);
background-color: transparent !important;
border: none;
height: 42px !important;
height: $subheader-height !important;
.icon {
margin-top: -2px;
font-size: 22px;
@ -216,6 +216,7 @@ export default {
li {
margin-right: 0px;
height: $subheader-height;
transition: background-color 0.2s ease;
// transition: max-width 0.4s ease-in , width 0.4s ease-in ;
// -webkit-transition: max-width 0.4s ease-in, width 0.4s ease-in ;

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

@ -212,10 +212,11 @@
.level-left {
margin-left: -12px;
max-height: 3.25em;
overflow: hidden;
.home-area {
font-size: 1.5em;
width: 50px;
width: $header-height;
height: $header-height;
background-color: var(--tainacan-gray1);
padding-bottom: 0.4em;
@ -224,17 +225,20 @@
&:hover {
background-color: var(--tainacan-gray2);
}
a {
font-size: 1.5em;
}
}
.logo-area {
height: $header-height;
width: 160px;
width: 10em;
cursor: pointer;
&:focus {
box-shadow: none;
}
.tainacan-logo {
height: 24px;
height: 1.5em;
padding: 0px;
// margin-left: 19px;
}

10
src/views/admin/components/navigation/tainacan-repository-subheader.vue
View File

@ -151,14 +151,14 @@ export default {
// Tainacan Header
#tainacan-repository-subheader {
background-color: var(--tainacan-turquoise6);
height: 42px;
max-height: 42px;
height: $subheader-height;
max-height: $subheader-height;
width: 100%;
// overflow-y: hidden;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 0;
padding-left: calc((var(--tainacan-one-column) - 6.666666667px) + 160px);
padding-left: calc((var(--tainacan-one-column) - 6.666666667px) + 10em);
margin: 0px;
display: flex;
vertical-align: middle;
@ -203,7 +203,7 @@ export default {
font-size: 1rem !important;
border: none;
border-radius: 0px !important;
height: 42px !important;
height: $subheader-height !important;
background-color: transparent;
color: var(--tainacan-white);
width: 48px;
@ -216,7 +216,7 @@ export default {
font-size: 1rem !important;
border: none;
border-radius: 0px !important;
height: 42px !important;
height: $subheader-height !important;
background-color: transparent;
color: var(--tainacan-white);
width: 48px;

17
src/views/admin/pages/home-page.vue
View File

@ -215,7 +215,7 @@ export default {
.home-page {
margin-top: $header-height;
background-color: var(--tainacan-white);
height: calc(100% - 52px);
height: calc(100% - 3.25em);
padding: var(--tainacan-container-padding) calc(2 * var(--tainacan-one-column)) !important;
width: 100vw;
@ -230,6 +230,7 @@ export default {
&.home-section-collection {
position: relative;
margin-left: 52px;
margin-bottom: 80px;
}
.section-connector {
@ -257,22 +258,24 @@ export default {
margin-bottom: 0.5em;
display: flex;
align-items: center;
height: 52px;
height: $header-height;
.home-section-icon {
background-color: var(--tainacan-white);
padding: 0.75em;
height: 52px;
width: 52px;
font-size: 1.875em;
height: $header-height;
width: $header-height;
text-align: center;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
.icon:hover {
cursor: pointer;
.icon {
font-size: 1.875em;
&:hover {
cursor: pointer;
}
}
}

5
src/views/admin/pages/lists/activities-page.vue
View File

@ -559,8 +559,8 @@
@import '../../scss/_variables.scss';
.sub-header {
min-height: $subheader-height;
height: $header-height;
min-height: $header-height;
height: auto;
padding-left: 0;
padding-right: 0;
border-bottom: 1px solid #ddd;
@ -571,6 +571,7 @@
.header-item {
margin-bottom: 0 !important;
min-height: 2em;
&:not(:last-child) {
padding-right: 0.5em;

5
src/views/admin/pages/lists/capabilities-page.vue
View File

@ -195,8 +195,8 @@
@import '../../scss/_variables.scss';
.sub-header {
min-height: $subheader-height;
height: $header-height;
min-height: $header-height;
height: auto;
padding-left: 0;
padding-right: 0;
border-bottom: 1px solid #ddd;
@ -208,6 +208,7 @@
.header-item {
margin-bottom: 0 !important;
min-height: 2em;
&:first-child {
margin-right: auto;

9
src/views/admin/pages/lists/collections-page.vue
View File

@ -72,7 +72,7 @@
<span class="icon is-small gray-icon">
<i
:class="order == 'desc' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
class="tainacan-icon tainacan-icon-18px"/>
class="tainacan-icon tainacan-icon-1-125em"/>
</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
@ -86,7 +86,7 @@
aria-role="listitem"
style="padding-bottom: 0.45em">
<span class="icon is-small gray-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-sortdescending"/>
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-sortdescending"/>
</span>
{{ $i18n.get('label_descending') }}
</b-dropdown-item>
@ -98,7 +98,7 @@
aria-role="listitem"
style="padding-bottom: 0.45em">
<span class="icon is-small gray-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-sortascending"/>
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-sortascending"/>
</span>
{{ $i18n.get('label_ascending') }}
</b-dropdown-item>
@ -172,7 +172,7 @@
v-if="$statusHelper.hasIcon(statusOption.slug)"
class="icon has-text-gray">
<i
class="tainacan-icon tainacan-icon-18px"
class="tainacan-icon tainacan-icon-1-125em"
:class="$statusHelper.getIcon(statusOption.slug)"
/>
</span>
@ -508,6 +508,7 @@ export default {
.header-item {
margin-bottom: 0 !important;
min-height: 2em;
&:first-child {
margin-right: auto;

18
src/views/admin/pages/lists/filters-page.vue
View File

@ -62,7 +62,7 @@
placement: 'auto-start'
}"
class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
</span>
<span
v-tooltip="{
@ -192,7 +192,7 @@
placement: 'auto-start'
}"
class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
</span>
<span
v-tooltip="{
@ -876,7 +876,7 @@ export default {
background-color: var(--tainacan-white);
padding: 0.7em 0.9em;
margin: 4px;
min-height: 40px;
min-height: 2.8571em;
position: relative;
display: block;
transition: top 0.1s ease;
@ -994,7 +994,7 @@ export default {
display: block;
padding: 0.7em 0.9em;
margin: 4px;
height: 40px;
height: 2.8571em;
position: relative;
.grip-icon {
@ -1035,7 +1035,7 @@ export default {
background-color: var(--tainacan-white);
cursor: pointer;
left: 0;
height: 40px;
height: 2.8571em;
position: relative;
border: 1px solid var(--tainacan-gray2);
border-radius: 1px;
@ -1074,16 +1074,16 @@ export default {
top: -1px;
border-color: transparent white transparent transparent;
border-right-width: 16px;
border-top-width: 20px;
border-bottom-width: 20px;
border-top-width: 1.4286em;
border-bottom-width: 1.4286em;
left: -19px;
}
&:before {
top: -1px;
border-color: transparent var(--tainacan-gray2) transparent transparent;
border-right-width: 16px;
border-top-width: 20px;
border-bottom-width: 20px;
border-top-width: 1.4286em;
border-bottom-width: 1.4286em;
left: -20px;
}
.label-details {

4
src/views/admin/pages/lists/items-page.vue
View File

@ -1361,8 +1361,8 @@
min-width: 180px;
min-height: 100%;
height: auto;
max-height: calc(100% - 94px);
max-height: calc(100vh - 94px);
max-height: calc(100% - 5.875em);
max-height: calc(100vh - 5.875em);
float: left;
overflow-y: auto;
overflow-x: hidden;

18
src/views/admin/pages/lists/metadata-page.vue
View File

@ -69,7 +69,7 @@
placement: 'auto-start'
}"
class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
</span>
<span
v-tooltip="{
@ -205,7 +205,7 @@
placement: 'auto-start'
}"
class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
</span>
<span class="metadatum-name">
{{ metadatum.name }}
@ -685,7 +685,7 @@ export default {
background-color: var(--tainacan-white);
padding: 0.7em 0.9em;
margin: 4px;
min-height: 40px;
min-height: 2.8571em;
display: block;
position: relative;
cursor: grab;
@ -797,7 +797,7 @@ export default {
display: block;
padding: 0.7em 0.9em;
margin: 4px;
height: 40px;
height: 2.8571em;
position: relative;
.grip-icon {
@ -836,7 +836,7 @@ export default {
background-color: var(--tainacan-white);
cursor: pointer;
left: 0;
height: 40px;
height: 2.8571em;
position: relative;
border: 1px solid var(--tainacan-gray2);
border-radius: 1px;
@ -880,16 +880,16 @@ export default {
top: -1px;
border-color: transparent white transparent transparent;
border-right-width: 16px;
border-top-width: 20px;
border-bottom-width: 20px;
border-top-width: 1.4286em;
border-bottom-width: 1.4286em;
left: -19px;
}
&::before {
top: -1px;
border-color: transparent var(--tainacan-gray2) transparent transparent;
border-right-width: 16px;
border-top-width: 20px;
border-bottom-width: 20px;
border-top-width: 1.4286em;
border-bottom-width: 1.4286em;
left: -20px;
}
}

13
src/views/admin/pages/lists/taxonomies-page.vue
View File

@ -34,7 +34,7 @@
<span class="icon is-small gray-icon">
<i
:class="order == 'desc' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
class="tainacan-icon tainacan-icon-18px"/>
class="tainacan-icon tainacan-icon-1-125em"/>
</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
@ -48,7 +48,7 @@
aria-role="listitem"
style="padding-bottom: 0.45em">
<span class="icon is-small gray-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-sortdescending"/>
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-sortdescending"/>
</span>
{{ $i18n.get('label_descending') }}
</b-dropdown-item>
@ -60,7 +60,7 @@
aria-role="listitem"
style="padding-bottom: 0.45em">
<span class="icon is-small gray-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-sortascending"/>
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-sortascending"/>
</span>
{{ $i18n.get('label_ascending') }}
</b-dropdown-item>
@ -138,7 +138,7 @@
v-if="$statusHelper.hasIcon(statusOption.slug)"
class="icon has-text-gray">
<i
class="tainacan-icon tainacan-icon-18px"
class="tainacan-icon tainacan-icon-1-125em"
:class="$statusHelper.getIcon(statusOption.slug)"
/>
</span>
@ -387,8 +387,8 @@
@import '../../scss/_variables.scss';
.sub-header {
min-height: $subheader-height;
height: $header-height;
min-height: $header-height;
height: auto;
padding-left: 0;
padding-right: 0;
border-bottom: 1px solid #ddd;
@ -400,6 +400,7 @@
.header-item {
margin-bottom: 0 !important;
min-height: 2em;
&:first-child {
margin-right: auto;

1
src/views/admin/pages/singles/item-page.vue
View File

@ -576,6 +576,7 @@
}
p {
color: var(--tainacan-secondary);
font-size: 0.8125em;
}
}
}

3
src/views/admin/scss/_repository-level-overrides.scss
View File

@ -2,8 +2,7 @@
// This garantees that any component inside a .repository-level-page
// will have a blue color instead of a turquoise.
.repository-level-page {
margin-top: 94px;
margin-top: 5.875em;
height: $page-height !important;
@media screen and (max-width: 769px) {

6
src/views/admin/scss/_variables.scss
View File

@ -135,11 +135,11 @@ $size-small: 0.875em; // 0.75em on Bulma.
$dropdown-mobile-breakpoint: $tablet;
// Tainacan Header, Filters and Page
$header-height: 52px;
$subheader-height: 42px;
$header-height: 3.25em;
$subheader-height: 2.625em;
$filter-menu-width: 16.666666667%;
$filter-menu-width-theme: 20%;
$page-height: calc(100vh - 94px);
$page-height: calc(100vh - 5.875em);
// Overall Pages padding:
$one-column: 4.166666667%;

4
src/views/admin/scss/tainacan-admin.scss
View File

@ -124,6 +124,10 @@ a:hover {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
&>p {
font-size: 0.8125em;
}
}
// Used for pages with collection subheader
.page-container-small {