mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 14:47:53 +01:00
8438cf0578
* Replace divs with semantic markup Replace `<div>` tags with `<nav>`, `<aside>`, and a list for the nav items. * Use grid layout Replace flexbox with CSS grid layout. The right-hand side item is now in its own grid cell, so the text wraps inside its cell at smaller screen widths. Undo `<nav>` tag. * Sort CSS Sort the remaining CSS property declarations. * Fix right alignment issue in Safari Remove `justify-self: end` to fix the right alignment issue in Safari. * Fix vertical alignment in Edge Add `align-self: center` but only for MS Edge. Also removed `position: relative` on the wrapper element for the tabs. As the help item isn't using absolute positioning anymore we don't need to set relative positioning on the parent element.
79 lines
1.4 KiB
Vue
79 lines
1.4 KiB
Vue
<template lang="pug">
|
|
.header-tabs
|
|
ul.drawer-tab-container
|
|
li.drawer-tab(v-for="(tab, index) in tabs")
|
|
a.drawer-tab-text(
|
|
@click="changeTab(index)",
|
|
:class="{'drawer-tab-text-active': selectedTabPosition === index}",
|
|
:title="tab.label"
|
|
) {{ tab.label }}
|
|
|
|
aside.help-item
|
|
slot(name="right-item")
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.drawer-tab-text {
|
|
display: block;
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.drawer-tab {
|
|
flex: inherit;
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.drawer-tab-container {
|
|
grid-column-start: 2;
|
|
grid-column-end: 3;
|
|
justify-self: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.help-item {
|
|
grid-column-start: 3;
|
|
position: relative;
|
|
right: -11px;
|
|
text-align: right;
|
|
top: -2px;
|
|
}
|
|
|
|
.header-tabs {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
}
|
|
|
|
// MS Edge
|
|
@supports (-ms-ime-align: auto) {
|
|
.help-item {
|
|
align-self: center;
|
|
top: 1px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
tabs: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
selectedTabPosition: 0,
|
|
};
|
|
},
|
|
methods: {
|
|
changeTab (newIndex) {
|
|
this.selectedTabPosition = newIndex;
|
|
this.$emit('changedPosition', newIndex);
|
|
},
|
|
},
|
|
};
|
|
</script>
|