Mercurial > gemma

comparison client/src/components/Sidebar.vue @ 556:09d8e5483851

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: Layout for users and user details edited User's role is now rendered as icon sizing flaws removed
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 03 Sep 2018 14:21:31 +0200
parents fa4f623e3ca6
children fb5d9d5ff320
comparison
equal deleted inserted replaced
555:f66116b3a249 556:09d8e5483851
24 ...mapGetters("application", ["sidebarCollapsed"]), 24 ...mapGetters("application", ["sidebarCollapsed"]),
25 menuStyle() { 25 menuStyle() {
26 return { 26 return {
27 menu: true, 27 menu: true,
28 nav: true, 28 nav: true,
29 "flex-column": true, 29 "flex-column": true
30 "visibility-extended": !this.sidebarCollapsed,
31 "visibility-collapsed": this.sidebarCollapsed
32 };
33 },
34 collapseStyle() {
35 return {
36 collapser: true,
37 collapserextended: !this.sidebarCollapsed,
38 collapsercollapsed: this.sidebarCollapsed
39 }; 30 };
40 }, 31 },
41 sidebarStyle() { 32 sidebarStyle() {
42 return { 33 return {
43 sidebar: true, 34 sidebar: true,
52 </script> 43 </script>
53 44
54 <style lang="scss"> 45 <style lang="scss">
55 @import "../assets/application.scss"; 46 @import "../assets/application.scss";
56 47
57 $sidebar-full-width: 230px;
58 $collapser-left-offset: 170px;
59 $sidebar-collapsed-width: 0px;
60
61 .router-link-exact-active { 48 .router-link-exact-active {
62 background-color: #f2f2f2; 49 background-color: #f2f2f2;
63 } 50 }
64 51
65 .navicon { 52 .navicon {
66 margin-right: $small-offset; 53 margin-right: $small-offset;
67 } 54 }
68 55
69 .collapser {
70 position: absolute;
71 top: 0px;
72 z-index: 1000;
73 background-color: #ffffff;
74 font-size: 24px;
75 }
76
77 .collapserextended {
78 left: $collapser-left-offset;
79 transition: $transition;
80 }
81
82 .collapsercollapsed {
83 left: 3px;
84 transition: $transition;
85 }
86
87 .menu { 56 .menu {
88 height: 90%; 57 height: 90%;
89 }
90 .visibility-extended {
91 opacity: 100;
92 transition: $transition-slow;
93 }
94 .visibility-collapsed {
95 opacity: 0;
96 transition: $transition-fast;
97 } 58 }
98 59
99 .sidebar { 60 .sidebar {
100 margin-top: $topbarheight; 61 margin-top: $topbarheight;
101 background-color: #ffffff; 62 background-color: #ffffff;
107 position: absolute; 68 position: absolute;
108 z-index: 1; 69 z-index: 1;
109 } 70 }
110 71
111 .sidebarcollapsed { 72 .sidebarcollapsed {
112 width: $sidebar-collapsed-width;
113 transition: $transition; 73 transition: $transition;
74 left: -250px;
114 } 75 }
115 76
116 .sidebarextended { 77 .sidebarextended {
117 width: $sidebar-full-width;
118 transition: $transition; 78 transition: $transition;
79 left: 0;
119 } 80 }
120 </style> 81 </style>