localized vue login, added language switcher block

This commit is contained in:
2019-05-21 14:56:34 +02:00
parent a8c8d04408
commit 1c040f261e
8 changed files with 191 additions and 35 deletions

File diff suppressed because one or more lines are too long

View File

@@ -33,8 +33,39 @@ import 'theme/assets/styles/main.scss'
}
function initUserVBlock(){
let props = {
title: ""
};
let mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';
switch (mount_point) {
case '#block-userlogin':
let $block = document.querySelector(mount_point);
props = {
title: $block.querySelector('h2').textContent,
form: {
ph_email: $block.querySelector('input#edit-name').getAttribute('placeholder'),
ph_pass: $block.querySelector('input#edit-pass').getAttribute('placeholder'),
btn_value: $block.querySelector('input#edit-submit').getAttribute('value'),
register: {
title: $block.querySelector('a.create-account-link').textContent,
href: $block.querySelector('a.create-account-link').getAttribute('href')
},
reset: {
title: $block.querySelector('a.request-password-link').textContent,
href: $block.querySelector('a.request-password-link').getAttribute('href')
}
}
}
break;
case '#block-userblock':
break;
default:
}
console.log(props);
v_user_block = new Vue({
// data: data,
store,
computed: {
...mapState({
@@ -47,8 +78,9 @@ import 'theme/assets/styles/main.scss'
this.$store.dispatch('User/getUser')
}
},
render: h => h(VUserBlock)
render: h => h(VUserBlock, {props:props})
}).$mount(mount_point)
console.log('initUserVBlock', v_user_block);
}
function initTestVContent(){
@@ -56,7 +88,7 @@ import 'theme/assets/styles/main.scss'
store,
render: h => h(VTestContent)
}).$mount('#block-pagetitle')
console.log('initTestVContent', v_test_content);
// console.log('initTestVContent', v_test_content);
}
init()

View File

@@ -30,10 +30,14 @@ header[role="banner"]{
.header-block{
min-height: 15px;
font-size: 0;
&.header-right{
text-align: right;
}
&>*{
display: inline-block;
vertical-align: top;
font-size: $base_font_size;
text-align: left;
}
}
}

View File

@@ -32,21 +32,29 @@ aside.messages{
// |_||_\___\__,_\__,_\___|_|
header[role="banner"]{
padding:0.2em 0 0 0;
#block-sitebranding{
h1{
margin:0;
line-height: 1;
}
}
#block-userlogin{
width:8em;
overflow: visible;
h2{
margin: 0;
font-size: 1em;
font-weight: 400;
}
&>section{
background-color: #fff;
overflow: hidden;
width:14em;
height:1px;
padding:0.01em 1em;
// margin:0 0 0 -1em;
box-sizing:content-box;
transition: all 0.4s ease-in-out;
// outline: 1px solid blue;
@@ -55,10 +63,62 @@ header[role="banner"]{
&:hover{
&>section{
transition-delay: 0s;
height:16em;
height:12em;
padding:1em 1em;
box-shadow: 0 0 10px #ccc;
}
}
}
#block-languageswitcher{
h2{
margin: 0.1em 0 0 0;
font-size: 0.756em;
font-weight: 400;
padding:0.1em 0.4em 0.2em;
border-radius: 3px;
background-color: #444;
color: #fff;
display: inline-block;
vertical-align: top;
}
&>ul.links{
// background-color: #fff;
overflow: hidden;
width:5em;
height:1px;
padding:0.01em 0;
margin:0;
box-sizing:content-box;
transition: all 0.4s ease-in-out;
// outline: 1px solid blue;
// transition-delay: 2s;
}
&:hover{
&>ul.links{
transition-delay: 0s;
height:2em;
padding:0.3em 0;
// box-shadow: 0 0 10px #ccc;
}
}
li{
list-style: none;
padding:0;
&.is-active{
display:none;
}
a{
margin: 0;
font-size: 0.756em;
font-weight: 400;
padding:0.2em 0.4em;
border-radius: 3px;
background-color: #444;
color: #fff;
}
}
}
}