[scss.container.list] fixed layout + added togglable arrows for filtering (ordering actually) + [ue.manage] added back button
This commit is contained in:
xdrm-brackets
parent
dc8420a70c
commit
f14b6d4bbf
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -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)'>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@
|
|||
|
||||
/* (2) Filter */
|
||||
& > section.filter{
|
||||
// padding-bottom: 0;
|
||||
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
|
|
@ -149,25 +149,39 @@
|
|||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px #fff;
|
||||
|
||||
& > div:after{
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
& > div{
|
||||
|
||||
margin-top: -.25em;
|
||||
margin-left: .5em;
|
||||
& > span.arrow{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
|
||||
background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat;
|
||||
background-size: auto 100%;
|
||||
margin-bottom: -.3em;
|
||||
|
||||
background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat;
|
||||
background-size: auto 100%;
|
||||
|
||||
|
||||
&[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;
|
||||
|
||||
& > 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'); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&[data-filter='up']{ background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
|
||||
}
|
||||
|
||||
|
||||
& > div.null:after{ content: none; }
|
||||
|
||||
}
|
||||
|
||||
/* Tags color -> darker */
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
.time,
|
||||
.pin,
|
||||
.cm,
|
||||
.back,
|
||||
.td,
|
||||
.tp{
|
||||
|
||||
|
|
@ -183,4 +184,26 @@
|
|||
&.search:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-search-color}'); }
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* (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'); }
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue