Mercurial > gemma
comparison client/src/components/Sidebar.vue @ 1299:2738a6ae9ad8
fontawesome 4 -> 5
An icon was not displayed on a specific system/environment.
No clue why... good moment to switch to version 5 of fontawesome
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 23 Nov 2018 10:24:29 +0100 |
parents | 99c039e86624 |
children | ea3a89a1813a |
comparison
equal
deleted
inserted
replaced
1296:99c039e86624 | 1299:2738a6ae9ad8 |
---|---|
1 <template> | 1 <template> |
2 <div :class="sidebarStyle"> | 2 <div :class="sidebarStyle"> |
3 <div | 3 <div |
4 @click="$store.commit('application/showSidebar', !showSidebar)" | 4 @click="$store.commit('application/showSidebar', !showSidebar)" |
5 class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center" | 5 class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" |
6 > | 6 > |
7 <i class="ui-element d-print-none fa fa-bars"></i> | 7 <font-awesome-icon icon="bars"></font-awesome-icon> |
8 </div> | 8 </div> |
9 <div class="menu text-nowrap text-left"> | 9 <div class="menu text-nowrap text-left"> |
10 <router-link to="/"> | 10 <router-link to="/"> |
11 <i class="fa fa-map-o"></i> | 11 <font-awesome-icon icon="map-marked-alt" fixed-width></font-awesome-icon> |
12 Map | 12 Map |
13 </router-link> | 13 </router-link> |
14 <a href="#" | 14 <a href="#" |
15 @click="toggleContextBox('bottlenecks')" | 15 @click="toggleContextBox('bottlenecks')" |
16 :class="['secondary', { active: isActive('bottlenecks') }]"> | 16 :class="['secondary', { active: isActive('bottlenecks') }]"> |
17 <i class="fa fa-ship"></i> | 17 <font-awesome-icon icon="ship" fixed-width></font-awesome-icon> |
18 Bottlenecks | 18 Bottlenecks |
19 </a> | 19 </a> |
20 <div v-if="isWaterwayAdmin"> | 20 <div v-if="isWaterwayAdmin"> |
21 <a href="#" | 21 <a href="#" |
22 @click="toggleContextBox('imports')" | 22 @click="toggleContextBox('imports')" |
23 :class="['secondary', { active: isActive('imports') }]"> | 23 :class="['secondary', { active: isActive('imports') }]"> |
24 <i class="fa fa-upload align-self-center navicon"></i> | 24 <font-awesome-icon icon="upload" fixed-width></font-awesome-icon> |
25 Import soundingresults | 25 Import soundingresults |
26 </a> | 26 </a> |
27 <a href="#" | 27 <a href="#" |
28 @click="toggleContextBox('staging')" | 28 @click="toggleContextBox('staging')" |
29 :class="['secondary', { active: isActive('staging') }]"> | 29 :class="['secondary', { active: isActive('staging') }]"> |
30 <i class="fa fa-list-ol align-self-center navicon"></i> | 30 <font-awesome-icon icon="clipboard-check" fixed-width></font-awesome-icon> |
31 Staging area | 31 Staging area |
32 </a> | 32 </a> |
33 <small class="text-muted pl-3">Systemadministration</small> | 33 <small class="text-muted pl-3">Systemadministration</small> |
34 <hr class="m-0"> | 34 <hr class="m-0"> |
35 <router-link to="usermanagement"> | 35 <router-link to="usermanagement"> |
36 <i class="fa fa-address-card-o"></i> | 36 <font-awesome-icon icon="users-cog" fixed-width></font-awesome-icon> |
37 Users | 37 Users |
38 </router-link> | 38 </router-link> |
39 </div> | 39 </div> |
40 <div v-if="isSysAdmin"> | 40 <div v-if="isSysAdmin"> |
41 <router-link to="systemconfiguration"> | 41 <router-link to="systemconfiguration"> |
42 <i class="fa fa-wrench"></i> | 42 <font-awesome-icon icon="wrench" fixed-width></font-awesome-icon> |
43 Systemconfiguration | 43 Systemconfiguration |
44 </router-link> | 44 </router-link> |
45 <router-link to="logs"> | 45 <router-link to="logs"> |
46 <i class="fa fa-book"></i> | 46 <font-awesome-icon icon="book" fixed-width></font-awesome-icon> |
47 Logs | 47 Logs |
48 </router-link> | 48 </router-link> |
49 <router-link to="importqueue"> | 49 <router-link to="importqueue"> |
50 <i class="fa fa-exchange"></i> | 50 <font-awesome-icon icon="tasks" fixed-width></font-awesome-icon> |
51 Importqueue | 51 Importqueue |
52 </router-link> | 52 </router-link> |
53 </div> | 53 </div> |
54 <hr class="m-0"> | 54 <hr class="m-0"> |
55 <a href="#" @click="logoff"> | 55 <a href="#" @click="logoff"> |
56 <i class="fa fa-power-off"></i> | 56 <font-awesome-icon icon="power-off" fixed-width></font-awesome-icon> |
57 Logout {{ user }} | 57 Logout {{ user }} |
58 </a> | 58 </a> |
59 </div> | 59 </div> |
60 </div> | 60 </div> |
61 </template> | 61 </template> |
136 display: block | 136 display: block |
137 text-align: left | 137 text-align: left |
138 padding: 0.5rem 1rem | 138 padding: 0.5rem 1rem |
139 color: #333 | 139 color: #333 |
140 text-decoration: none | 140 text-decoration: none |
141 i | 141 svg path |
142 color: #666 | 142 fill: #666 |
143 margin-right: $small-offset | |
144 &:hover | 143 &:hover |
145 background-color: #f8f8f8 | 144 background-color: #f8f8f8 |
146 &.router-link-exact-active | 145 &.router-link-exact-active |
147 background-color: $color-info | 146 background-color: $color-info |
148 color: #fff | 147 color: #fff |
149 i | 148 svg path |
150 color: #fff | 149 fill: #fff |
151 &.secondary | 150 &.secondary |
152 font-size: 0.9rem | 151 font-size: 0.9rem |
153 &.active | 152 &.active |
154 background: lighten($color-info, 55) | 153 background: lighten($color-info, 55) |
155 color: darken($color-info, 15) | 154 color: darken($color-info, 15) |
156 i | 155 svg path |
157 color: darken($color-info, 15) | 156 fill: darken($color-info, 15) |
158 | 157 |
159 .sidebar | 158 .sidebar |
160 background-color: #ffffff | 159 background-color: #ffffff |
161 padding-top: $large-offset | 160 padding-top: $large-offset |
162 opacity: $slight-transparent | 161 opacity: $slight-transparent |
163 transition: $transition-fast | 162 transition: $transition-fast |
164 overflow: hidden | 163 overflow: hidden |
165 | 164 |
166 .sidebarcollapsed | 165 .sidebarcollapsed |
167 max-height: 30px | 166 max-height: $icon-height |
168 max-width: 30px | 167 max-width: $icon-width |
169 | 168 |
170 .sidebarextended | 169 .sidebarextended |
171 max-height: 35rem | 170 max-height: 35rem |
172 max-width: $sidebar-width | 171 max-width: $sidebar-width |
173 </style> | 172 </style> |