Mercurial > gemma

comparison client/src/components/Sidebar.vue @ 1299:2738a6ae9ad8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>