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

Definitive style settings for header, primary menu and subheader(except for shrinked version onscroll).

This commit is contained in:
Mateus Machado Luna 2018-05-02 16:30:53 -03:00
parent 68eebe0947
commit bf8f153655
5 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,7 @@
:class="activeRoute == 'FieldsPage' ? 'is-active':''">
<b-icon
size="is-small"
icon="format-list-checks"/> <span class="menu-text">{{ $i18n.getFrom('fields', 'name') }}</span>
icon="format-list-bulleted-type"/> <span class="menu-text">{{ $i18n.getFrom('fields', 'name') }}</span>
</router-link></li>
<li><router-link
tag="a"
@ -55,7 +55,7 @@
:class="activeRoute == 'EventsPage' ? 'is-active':''">
<b-icon
size="is-small"
icon="calendar"/> <span class="menu-text">{{ $i18n.get('events') }}</span>
icon="calendar-range"/> <span class="menu-text">{{ $i18n.get('events') }}</span>
</router-link></li>
</ul>
</aside>
@ -82,6 +82,7 @@ export default {
-webkit-transition: max-width 0.2s linear; /* Safari */
transition: max-width 0.2s linear;
max-width: $side-menu-width;
box-shadow: -3px 0px 8px #111;
z-index: 99;
.separator {
@ -118,8 +119,7 @@ export default {
}
&.is-compressed {
max-width: 44px;
max-width: 45px;
a {
padding-left: 0.8em;
padding-right: 0.8em;
@ -128,8 +128,6 @@ export default {
visibility: hidden;
opacity: 0;
}
box-shadow: -3px 0px 10px #111;
z-index: 10;
}
@media screen and (max-width: 769px) {

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

@ -80,10 +80,9 @@ export default {
.level-item{
height: $header-height;
width: 180px;
transition: margin 0.15s linear;
-webkit-transition: margin 0.15s linear;
margin-left: 0px;
width: 184px;
transition: width 0.15s;
-webkit-transition: width linear 0.15s;
cursor: pointer;
&:hover{
@ -95,6 +94,8 @@ export default {
.tainacan-logo {
max-height: 22px;
padding: 0px 28px;
transition: padding 0.15s;
-webkit-transition: padding linear 0.15s;
}
}
}
@ -116,10 +117,17 @@ export default {
height: 27px;
font-size: 11px;
color: $gray-light;
transition: width linear 0.15s;
-webkit-transition: width linear 0.15s;
width: 160px;
}
input:focus, input:active {
width: 220px !important;
}
.icon {
color: $tertiary;
height: 27px;
font-size: 18px;
}
}
@ -131,12 +139,9 @@ export default {
}
&.menu-compressed {
.level-left .level-item {
margin-left: 44px;
width: 160px;
width: 220px;
.tainacan-logo {
max-height: 22px;
padding: 0px 16px;
padding: 0px 42px;
}
}

8
src/admin/components/navigation/tainacan-subheader.vue
View File

@ -13,10 +13,12 @@
v-for="(pathItem, index) in arrayRealPath"
:key="index">
<router-link
v-if="index < arrayRealPath.length - 1"
tag="a"
:to="'/' + arrayRealPath.slice(0, index + 1).join('/')">
{{ arrayViewPath[index] }}
</router-link>
<span v-if="index == arrayRealPath.length - 1">{{ arrayViewPath[index] }}</span>
<span v-if="index != arrayRealPath.length - 1"> > </span>
</span>
</nav>
@ -52,7 +54,7 @@
:aria-label="$i18n.get('label_collection_fields')">
<b-icon
size="is-small"
icon="format-list-checks"/>
icon="format-list-bulleted-type"/>
<br>
<span class="menu-text">{{ $i18n.getFrom('fields', 'name') }}</span>
</router-link></li>
@ -74,7 +76,7 @@
:aria-label="$i18n.get('label_collection_events')">
<b-icon
size="is-small"
icon="calendar"/>
icon="calendar-range"/>
<br>
<span class="menu-text">{{ $i18n.get('events') }}</span>
</router-link></li>
@ -217,6 +219,7 @@ export default {
.breadcrumbs {
font-size: 12px;
line-height: 12px;
color: #1d1d1d;
}
.level-left {
@ -267,6 +270,7 @@ export default {
padding: 0;
}
.menu-text {
font-size: 14px;
opacity: 1;
visibility: visible;
transition: opacity 0.3s linear, visibility 0.3s linear;

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

@ -337,7 +337,7 @@
overflow-y: auto;
visibility: visible;
display: block;
transition: visibility 0.5s ease, display 0.5s ease;
transition: visibility ease 0.5s, display ease 0.5s;
.label {
font-size: 12px;
@ -348,7 +348,7 @@
.items-list-area {
margin-left: 0;
transition: margin-left 0.5s ease;
transition: margin-left ease 0.5s ;
}
.spaced-to-right {
margin-left: $filter-menu-width;

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

@ -3,7 +3,7 @@
@import "../../../node_modules/bulma/sass/utilities/functions";
// Tainacan custom colors
$primary: #2cb4c1;// #25a189;
$primary: #2cb4c1;
$primary-invert: findColorInvert($primary);
$secondary: #298596;
$secondary-invert: findColorInvert($secondary);
@ -69,9 +69,9 @@ $page-mobile-side-padding: 1em;
$page-mobile-top-padding: 0.5em;
// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
$link: $secondary;
$link-invert: $secondary-invert;
$link-focus-border: $secondary;
// Table
$table-head-cell-color: $gray-light;