mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[webpack.header][scss.header] created default version management (only template) for header

This commit is contained in:
xdrm-brackets 2018-03-12 19:50:56 +01:00
parent 1a956cbc58
commit f7ddd0145c
3 changed files with 134 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webpack/scss/constants.scss
View File

@ -32,7 +32,7 @@ $menu-width: #{$menu-item-width + 1em};
// Header
$header-bg: #fff;
$header-height: 3em;
$header-height: 4em;
$c404-bubble-width: 40vh;

115
webpack/scss/header.scss
View File

@ -14,8 +14,121 @@
// flex properties
flex-direction: row;
justify-content: space-around;
justify-content: space-between;
align-items: center;
z-index: 150;
/* (1) Version management */
& > div.versions{
/* (1.1) Version status */
& > div.current{
display: block;
position: relative;
margin-left: 1em;
padding: .5em 1em;
padding-left: 2em;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 2px #fff;
transition: box-shadow .2s ease-in-out;
cursor: pointer;
// hover animation
&:hover{ box-shadow: 0 2px 2px darken(#fff,10%); }
// color state
&:before{
content: '';
display: block;
position: absolute;
top: calc( 50% - .7em/2 );
left: calc( 1em/2 + .7em/2 );
width: .7em;
height: .7em;
border-radius: 50%;
background-color: $form-invalid-color;
}
&[data-id='0']:before{
background-color: $form-valid-color;
}
}
/* (1.2) Version dialog (to switch to another) */
& > div.version-dialog{
display: block;
position: absolute;
top: #{$header-height + .5em};
left: 1em;
// padding: 1em .5em;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 2px 2px #ddd;
overflow: hidden;
/* (1.2.1) version items */
& > span{
display: block;
position: relative;
padding: .5em 1em;
padding-left: 2em;
background-color: #fff;
transition: background-color .2s ease-in-out;
cursor: pointer;
// hover animation
&:hover{ background-color: darken(#fff, 5%); }
// color state
&:before{
content: '';
display: block;
position: absolute;
top: calc( 50% - .7em/2 );
left: calc( 1em/2 + .7em/2 );
width: .7em;
height: .7em;
border-radius: 50%;
background-color: $form-invalid-color;
}
&[data-id='0']:before{
background-color: $form-valid-color;
}
}
}
}
}

23
webpack/vue/header.vue
View File

@ -2,11 +2,18 @@
<div id='HEADER'>
<!-- Header Icon+Title -->
<div id='header-icon'>
<div class='header-title'>{{ gstore.header_title }}</div>
<!-- Version management -->
<div class='versions'>
<div class='current' @click='version_dialog=!version_dialog' :data-id='current_version_id'>{{ versions[current_version_id].date || 'version à jour' }}</div>
<div class='version-dialog' v-show='version_dialog'>
<span data-id='0' @click='version_dialog=false; current_version_id=0'>version à jour</span>
<span v-for='v in (1,versions.length-1)' @click='version_dialog=false; current_version_id=v' :data-id='v'>{{ versions[v].date }}</span>
</div>
</div>
<!-- <div class='header-title'>{{ gstore.header_title }}</div> -->
</div>
</template>
@ -18,7 +25,15 @@ export default {
data(){
return {
gstore: gstore.get,
is_connected: _SERVER.session.connected
is_connected: _SERVER.session.connected,
version_dialog: false,
current_version_id: 0,
versions: [
{ date: null },
{ date: '01-02-2017' },
{ date: '23-03-2017' }
]
};
}
}