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

[scss.container.list] fixed layout + added togglable arrows for filtering (ordering actually) + [ue.manage] added back button

This commit is contained in:
xdrm-brackets 2018-04-17 17:38:32 +02:00
parent dc8420a70c
commit f14b6d4bbf
4 changed files with 121 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public_html/asset/svg/back.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="32px"
id="Layer_1"
style="enable-background:new 0 0 32 32;"
version="1.1"
viewBox="0 0 32 32"
width="32px"
xml:space="preserve"
sodipodi:docname="back.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview5"
showgrid="false"
inkscape:zoom="7.375"
inkscape:cx="16"
inkscape:cy="16"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
d="M 12,6 C 11.469,6 11.005141,6.1930781 10.619141,6.5800781 L 2.6621094,14.537109 C 2.3341094,14.865109 2,15.271 2,16 c 0,0.729 0.2794844,1.080266 0.6464844,1.447266 l 7.9726566,7.972656 C 11.005141,25.806922 11.469,26 12,26 c 1.188,0 2,-1.016 2,-2 0,-0.516 -0.186078,-0.986859 -0.580078,-1.380859 L 8.8007812,18 H 28 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 H 8.8007812 L 13.419922,9.3808594 C 13.813922,8.9868594 14,8.516 14,8 14,7.016 13.187,6 12,6 Z"
id="fill-edit"
inkscape:connector-curvature="0" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

32
webpack/component/ue/manage.vue
View File

@ -5,13 +5,17 @@
<div class='list container' data-anim-incoming='1' :data-anim-bounce='gstore.nav_anim.out?1:0'>
<section class='filter'>
<button class='back reflow search' @click='$router.back()'>Retour</button>
</section>
<!-- FILTERS -->
<section class='filter'>
<div>enseignant</div>
<div class='null'></div>
<div>volume horaire</div>
<div>formations</div>
<div data-filter='1'>enseignant <span class='arrow' data-way='down'></span></div>
<div></div>
<div data-filter='0'>volume horaire <span class='arrow' data-way='down'></span></div>
<div data-filter='0'>formations <span class='arrow' data-way='down'></span></div>
</section>
@ -47,7 +51,13 @@
<!-- COURS -->
<section class='bcours'
v-for='(c,i) in gstore.manage.cours'
:data-id='c.idCours'>
:data-id='c.idCours'
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'
:data-vol='c.volume'
:data-form='c.formations.join(`|`)'
data-typ='cm'>
<div class='icon remove' @click='gstore.rem(0, i)'></div>
<select v-model='c.new_prof' @change='gstore.upd_prof(0, i)'>
@ -82,7 +92,11 @@
v-for='(td,i) in gstore.manage.td'
:data-id='td.idTD'
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'>
:data-anim-bounce='gstore.nav_anim.out?1:0'
:data-vol='td.volume'
:data-form='td.formations.join(`|`)'
data-typ='td'>
<div class='icon remove' @click='gstore.rem(1, i)'></div>
<select v-model='td.new_prof' @change='gstore.upd_prof(1, i)'>
@ -117,7 +131,11 @@
v-for='(tp,i) in gstore.manage.tp'
:data-id='tp.idTP'
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'>
:data-anim-bounce='gstore.nav_anim.out?1:0'
:data-vol='tp.volume'
:data-form='tp.formations.join(`|`)'
data-typ='td'>
<div class='icon remove' @click='gstore.rem(2, i)'></div>
<select v-model='tp.new_prof' @change='gstore.upd_prof(2, i)'>

30
webpack/scss/container/list.scss
View File

@ -138,7 +138,7 @@
/* (2) Filter */
& > section.filter{
// padding-bottom: 0;
background-color: transparent;
@ -149,24 +149,38 @@
font-weight: bold;
text-shadow: 1px 1px 2px #fff;
& > div:after{
content: '';
& > div{
& > span.arrow{
display: inline-block;
position: absolute;
position: relative;
width: 1.5em;
height: 1.5em;
margin-top: -.25em;
margin-left: .5em;
margin-bottom: -.3em;
background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat;
background-size: auto 100%;
&[data-filter='up']{ background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
&[data-way='up']{ background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
&[data-way='down']{ background-image: url('/asset/svg/down_arrow.svg@aaaaaa'); }
cursor: pointer;
}
// selected filter
&[data-filter='1']{
color: $primary-color;
& > div.null:after{ content: none; }
& > span.arrow{
&[data-way='up']{ background-image: url('/asset/svg/up_arrow.svg@555555'); }
&[data-way='down']{ background-image: url('/asset/svg/down_arrow.svg@555555'); }
}
}
}
}

23
webpack/scss/global/before-icon.scss
View File

@ -8,6 +8,7 @@
.time,
.pin,
.cm,
.back,
.td,
.tp{
@ -184,3 +185,25 @@
}
/* (8) BACK */
.back{
// add icon before
&:before{
background-image: url('/asset/svg/back.svg@#{$menu-item-inactive}');
}
// icon color variants
&.neutral:before{ background-image: url('/asset/svg/back.svg@#{$rd-form-neutral-color}'); }
&.invalid:before{ background-image: url('/asset/svg/back.svg@#{$rd-form-invalid-color}'); }
&.valid:before{ background-image: url('/asset/svg/back.svg@#{$rd-form-valid-color}'); }
&.search:before{ background-image: url('/asset/svg/back.svg@#{$rd-form-search-color}'); }
// hover
&:hover:before{ background-image: url('/asset/svg/back.svg@ffffff'); }
}