Mercurial > gemma

comparison client/src/application/Topbar.vue @ 638:c2f040dba57f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: collapsible layer selection The layerselection has now a clickable icon, which allows it to collapse/expand the layerselection.
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 13 Sep 2018 10:09:08 +0200
parents f2097d2aa048
children 83081ba6c9c1
comparison
equal deleted inserted replaced
637:e72229d54c42 638:c2f040dba57f
1 <template> 1 <template>
2 <div class="topbar d-flex flex-row justify-content-between"> 2 <div class="topbar d-flex flex-row justify-content-between">
3 <div> 3 <div @click="toggleSidebar">
4 <i @click="toggleSidebar" class="ui-element menubutton fa fa-bars"></i> 4 <i class="ui-element menubutton fa fa-bars"></i>
5 </div> 5 </div>
6 <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer"> 6 <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer">
7 <div class="input-group-prepend shadow"> 7 <div class="input-group-prepend shadow">
8 <span class="input-group-text searchlabel" for="search"> 8 <span class="input-group-text searchlabel" for="search">
9 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
20 20
21 <style lang="scss"> 21 <style lang="scss">
22 .splitscreen { 22 .splitscreen {
23 background-color: white; 23 background-color: white;
24 padding: $small-offset; 24 padding: $small-offset;
25 margin-right: 0.5rem; 25 margin-right: $small-offset;
26 margin-left: 1rem; 26 margin-left: $offset;
27 border-radius: 5px; 27 border-radius: $border-radius;
28 height: $icon-width;
29 width: $icon-height;
28 } 30 }
29 31
30 .menubutton { 32 .menubutton {
31 background-color: white; 33 background-color: white;
32 padding: $small-offset; 34 padding: $small-offset;
33 border-radius: 5px; 35 border-radius: $border-radius;
34 margin-left: 1rem; 36 margin-left: $offset;
35 height: $icon-width; 37 height: $icon-width;
36 width: $icon-height; 38 width: $icon-height;
37 } 39 }
38 40
39 .searchcontainer { 41 .searchcontainer {
49 margin-right: auto; 51 margin-right: auto;
50 height: 50px; 52 height: 50px;
51 } 53 }
52 54
53 .topbar { 55 .topbar {
54 padding-top: 1rem; 56 padding-top: $offset;
55 margin-right: 1rem; 57 margin-right: $offset;
56 } 58 }
57 59
58 .logout { 60 .logout {
59 font-size: x-large; 61 font-size: x-large;
60 } 62 }