Mercurial > gemma
changeset 1217:ba8cd80d68b6
made more use of bootstrap classes instead of custom css
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 15:20:22 +0100 |
parents | 1c7806728172 |
children | b0c98a31cb4e |
files | client/src/App.vue client/src/application/Search.vue client/src/application/Sidebar.vue client/src/bottlenecks/Bottlenecks.vue client/src/drawtool/Drawtool.vue client/src/fairway/Fairwayprofile.vue client/src/identify/Identify.vue client/src/importqueue/Importqueue.vue client/src/imports/Imports.vue client/src/layers/Layers.vue client/src/login/Login.vue client/src/logs/logs.vue client/src/morphtool/Morphtool.vue client/src/pdftool/Pdftool.vue client/src/systemconfiguration/systemconfiguration.vue client/src/usermanagement/Userdetail.vue client/src/usermanagement/Usermanagement.vue client/src/usermanagement/Users.vue client/src/zoom/zoom.vue |
diffstat | 19 files changed, 107 insertions(+), 234 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/App.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,7 +1,7 @@ <template> <div id="app" class="main"> <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> - <div class="topbar d-flex"> + <div class="topbar d-flex pt-3 mx-3"> <div class="mr-auto d-flex"> <Sidebar :routeName="routeName"></Sidebar> <div class="d-flex flex-column" style="max-width: 600px;"> @@ -41,9 +41,6 @@ pointer-events: none .topbar - padding-top: $offset - margin-left: $offset - margin-right: $offset position: relative z-index: 2
--- a/client/src/application/Search.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/application/Search.vue Mon Nov 19 15:20:22 2018 +0100 @@ -25,7 +25,6 @@ <style lang="sass" scoped> .searchcontainer - margin-left: $offset height: $icon-height .searchbar-expanded @@ -46,7 +45,6 @@ border-top-right-radius: $border-radius !important .searchlabel - background-color: white !important &.rounded-top-left border-radius: 0 !important border-top-left-radius: $border-radius !important @@ -118,7 +116,7 @@ }, searchbarContainerStyle() { return [ - "input-group searchcontainer shadow", + "input-group searchcontainer ml-3 shadow", { "searchbar-collapsed": !this.showSearchbar, "searchbar-expanded": this.showSearchbar, @@ -135,7 +133,7 @@ }, searchButtonStyle() { return [ - "ui-element input-group-text p-0 d-flex border-0 justify-content-center searchlabel d-print-none", + "ui-element input-group-text p-0 d-flex border-0 justify-content-center searchlabel bg-white d-print-none", { rounded: !this.showSearchbar, "rounded-left": this.showSearchbar,
--- a/client/src/application/Sidebar.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/application/Sidebar.vue Mon Nov 19 15:20:22 2018 +0100 @@ -2,7 +2,7 @@ <div :class="sidebarStyle"> <div @click="$store.commit('application/showSidebar', !showSidebar)" - class="menubutton rounded position-absolute d-flex justify-content-center" + class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center" > <i class="ui-element d-print-none fa fa-bars"></i> </div> @@ -158,8 +158,6 @@ text-align: left .menubutton - background-color: white - padding: $small-offset height: $icon-height width: $icon-width top: 0
--- a/client/src/bottlenecks/Bottlenecks.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/bottlenecks/Bottlenecks.vue Mon Nov 19 15:20:22 2018 +0100 @@ -106,7 +106,7 @@ ...mapState("map", ["openLayersMap"]), bottlenecksStyle() { return [ - "ui-element shadow bottlenecks rounded-bottom border-top", + "ui-element shadow bottlenecks pt-3 ml-3 rounded-bottom border-top", { bottleneckscollapsed: !this.showBottlenecks, bottlenecksextended: this.showBottlenecks @@ -238,12 +238,10 @@ .bottlenecks position: relative background-color: #ffffff - padding-top: $offset opacity: $slight-transparent transition: left 0.3s ease overflow: hidden background: #fff - margin-left: $offset .bottleneckscollapsed width: 0
--- a/client/src/drawtool/Drawtool.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/drawtool/Drawtool.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,12 +1,12 @@ <template> <div class="d-flex flex-column"> - <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool rounded"> + <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded"> <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i> </div> - <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool rounded"> + <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded"> <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i> </div> - <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool rounded" v-if="selectedSurvey"> + <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey"> <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i> </div> </div> @@ -14,13 +14,8 @@ <style lang="sass" scoped> .drawtool - background-color: white - padding: $small-offset - margin-left: $offset height: $icon-width width: $icon-height - margin-bottom: $offset - margin-right: $offset z-index: 2 .inverted
--- a/client/src/fairway/Fairwayprofile.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/fairway/Fairwayprofile.vue Mon Nov 19 15:20:22 2018 +0100 @@ -12,10 +12,10 @@ v-if="showSplitscreen"> <i class="fa fa-times text-danger"></i> </button> - <div class="profile d-flex flex-column pr-5"> + <div class="profile bg-white position-relative d-flex flex-column pr-5"> <h5 class="mb-0 mt-2">{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5> <div class="d-flex flex-fill"> - <div class="fairwayprofile flex-grow-1"></div> + <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div> <div class="additionalsurveys d-flex flex-column"> <small> Additional Surveys @@ -91,11 +91,9 @@ <style lang="sass" scoped> .profile - background-color: white width: 100vw height: 0 overflow: hidden - position: relative z-index: 2 .splitscreen-toggle, @@ -127,11 +125,6 @@ .additionalsurveys input margin-right: $small-offset - -.fairwayprofile - background-color: white - margin: $offset - margin-top: 0 </style> <script>
--- a/client/src/identify/Identify.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/identify/Identify.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,8 +1,8 @@ <template> - <div class="identifymenu"> + <div class="position-relative ml-3"> <div @click="$store.commit('application/showIdentify', !showIdentify)" - class="d-flex flex-column ui-element minimizer" + class="d-flex flex-column ui-element minimizer mt-1" > <div :class="infoStyle"> <i class="fa fa-info"></i> @@ -54,14 +54,8 @@ .versioninfo font-size: 60% -.identifymenu - position: relative - margin-left: $offset - .identify - background-color: white opacity: $slight-transparent - text-align: left .identifycollapsed min-height: $icon-height @@ -75,7 +69,6 @@ position: absolute z-index: 2 right: 0 - margin-top: $x-small-offset height: $icon-width width: $icon-height </style> @@ -104,14 +97,13 @@ ...mapState("application", ["showIdentify"]), ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), identifyStyle() { - return { - "ui-element": true, - rounded: true, - identify: true, - shadow: true, - identifyexpanded: this.showIdentify, - identifycollapsed: !this.showIdentify - }; + return [ + "ui-element rounded identify shadow bg-white text-left", + { + identifyexpanded: this.showIdentify, + identifycollapsed: !this.showIdentify + } + ]; }, infoStyle() { return {
--- a/client/src/importqueue/Importqueue.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/importqueue/Importqueue.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,7 +1,7 @@ <template> <div class="d-flex flex-row"> <div :class="spacerStyle"></div> - <div class="importqueue"> + <div class="mt-3 mx-auto"> <div class="card importqueuecard"> <div class="card-header shadow-sm text-white bg-info mb-3">Importqueue</div> <div class="card-body importcardbody"> @@ -84,11 +84,13 @@ ...mapState("imports", ["imports"]), ...mapState("application", ["showSidebar"]), spacerStyle() { - return { - spacer: true, - "spacer-expanded": this.showSidebar, - "spacer-collapsed": !this.showSidebar - }; + return [ + "spacer ml-3", + { + "spacer-expanded": this.showSidebar, + "spacer-collapsed": !this.showSidebar + } + ]; }, successfulStyle() { return { @@ -126,7 +128,6 @@ <style lang="sass" scoped> .spacer - margin-left: $offset height: 100vh .spacer-collapsed @@ -136,11 +137,6 @@ .spacer-expanded min-width: $sidebar-width + $offset -.importqueue - margin-top: $offset - margin-right: auto - margin-left: auto - .importqueuecard width: 80vw min-height: 20rem
--- a/client/src/imports/Imports.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/imports/Imports.vue Mon Nov 19 15:20:22 2018 +0100 @@ -141,7 +141,7 @@ }, importStyle() { return [ - "ui-element shadow imports rounded", + "ui-element shadow imports ml-3 pt-3 rounded", { importscollapsed: !this.showImportSoundingResults, importsextended: this.showImportSoundingResults @@ -190,15 +190,14 @@ <style lang="sass" scoped> .uploadsection width: 90% + .imports position: relative background-color: #ffffff - padding-top: $offset opacity: $slight-transparent transition: left 0.3s ease overflow: hidden background: #fff - margin-left: $offset margin-top: -$offset width: 90%
--- a/client/src/layers/Layers.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/layers/Layers.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,6 +1,6 @@ <template> - <div class="layerselectmenu"> - <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer"> + <div class="position-relative ml-auto"> + <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer position-absolute mt-1"> <div> <i class="fa fa-th-list"></i> </div> @@ -20,12 +20,7 @@ </template> <style lang="sass" scoped> -.layerselectmenu - position: relative - margin-left: auto - .layerselection - background-color: white opacity: $slight-transparent .layerselectioncollapsed @@ -38,10 +33,8 @@ width: $layerselect-width .minimizer - position: absolute z-index: 2 right: 0 - margin-top: $x-small-offset height: $icon-width width: $icon-height </style> @@ -72,14 +65,13 @@ ...mapGetters("map", ["layersForLegend"]), ...mapState("application", ["showLayers"]), layerSelectStyle() { - return { - "ui-element": true, - rounded: true, - layerselection: true, - shadow: true, - layerselectionexpanded: this.showLayers, - layerselectioncollapsed: !this.showLayers - }; + return [ + "ui-element rounded layerselection bg-white shadow", + { + layerselectionexpanded: this.showLayers, + layerselectioncollapsed: !this.showLayers + } + ]; } }, methods: {
--- a/client/src/login/Login.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/login/Login.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,15 +1,15 @@ (<template> - <div class="d-flex flex-column login shadow-lg"> - <div class="loginmask"> + <div class="d-flex flex-column login bg-white shadow"> + <div class="m-5"> <!-- logo section --> <div class="d-flex flex-row justify-content-center mb-3"> - <div class="logo"><img src="../application/assets/logo.png"></div> + <div class="logo mr-3"><img src="../application/assets/logo.png"></div> <div class="title"> <h1>{{ appTitle }}</h1> </div> </div> <!-- end logo section --> - <form class="loginform" @submit.prevent="login"> + <form class="loginform mx-auto" @submit.prevent="login"> <div id="alert" :style="errorMessageStyle" :class="errorMessageClass" role="alert"> <span>{{ errorMessage }}</span> </div> @@ -46,40 +46,25 @@ </form> <!-- bottom logo section --> - <div class="mb-3 secondary-logo"><img :src="secondaryLogo"></div> + <div class="mb-3 secondary-logo mx-auto mb-auto"><img :src="secondaryLogo"></div> </div> </div> </template>) <style lang="sass" scoped> .login - background-color: white min-width: 375px min-height: 500px @extend %fully-centered .loginform max-width: 375px - margin-left: auto - margin-right: auto - -.loginmask - position: relative - margin-left: $large-offset - margin-right: $large-offset - margin-top: $large-offset - -.logo - margin-right: $offset .alert padding: 0.5rem .secondary-logo max-width: 375px - margin-left: auto - margin-right: auto - margin-bottom: auto /* avoid IE and Edge show a password reveal as we do our own */ input[type="password"]::-ms-reveal
--- a/client/src/logs/logs.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/logs/logs.vue Mon Nov 19 15:20:22 2018 +0100 @@ -2,7 +2,7 @@ <div class="main d-flex flex-column"> <div class="d-flex flex-row"> <div :class="spacer"></div> - <div class="logoutput shadow"> + <div class="logoutput text-left bg-white shadow mt-3 mx-3"> <pre id="code" v-highlightjs="logs"><code class="bash hljs hljs-string"></code></pre> </div> </div> @@ -26,7 +26,7 @@ </ul> </div> <div class="statuscontainer d-flex flex-row"> - <div class="statusline align-self-center"> + <div class="statusline ml-3 mt-1 align-self-center"> <h3>Last refresh: {{refreshed}}</h3> </div> <div class="refresh"> @@ -56,16 +56,10 @@ .logoutput width: 95% height: 85vh - margin-top: $offset - margin-right: $offset - margin-left: $offset - text-align: left - background-color: white overflow: auto transition: $transition-fast .spacer - margin-left: $offset height: 90vh .spacer-collapsed @@ -78,8 +72,6 @@ .statusline position: absolute right: 0 - margin-top: 0.3rem - margin-left: $offset margin-right: 7rem </style> @@ -153,11 +145,13 @@ }; }, spacer() { - return { - spacer: true, - "spacer-expanded": this.showSidebar, - "spacer-collapsed": !this.showSidebar - }; + return [ + "spacer ml-3", + { + "spacer-expanded": this.showSidebar, + "spacer-collapsed": !this.showSidebar + } + ]; } } };
--- a/client/src/morphtool/Morphtool.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/morphtool/Morphtool.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,28 +1,26 @@ <template> - <div class="morphcontainer rounded position-relative"> + <div class="mb-3 ml-auto rounded position-relative"> <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow"> - <div class="headline"> - <h4>{{ selectedBottleneck }}</h4> - <hr> + <h4 class="text-center mx-4">{{ selectedBottleneck }}</h4> + <hr> + <div + @click="$store.dispatch('fairwayprofile/clearSelection');" + class="ui-element d-flex morphtoolminus position-absolute" + > + <i class="fa fa-close p-2"></i> + </div> + <div> <div - @click="$store.dispatch('fairwayprofile/clearSelection');" - class="float-left ui-element d-flex morphtoolminus" - > - <i class="fa fa-close morphtoolsminus"></i> - </div> - </div> - <ul class="list-group surveylist"> - <li v-for="survey of surveys" :key="survey.data_info" - class="list-group-item" + class="my-1" @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)" > <a href="#" @click.prevent>{{ survey.date_info }}</a> - </li> - </ul> + </div> + </div> </div> - <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded"> + <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded position-relative bg-white my-auto"> <div class="d-flex flex-row justify-content-between"> <h6 class="my-auto px-2"> {{ selectedBottleneck }} @@ -36,40 +34,13 @@ </template> <style scoped lang="sass"> -.headline - margin-right: $offset - margin-left: $offset - -.morphcontainer - margin-bottom: $offset - margin-left: auto - -.surveylist - text-align: left - margin-bottom: $offset !important - margin-left: $offset - margin-right: $offset - -.surveylist li - margin-left: auto - margin-right: auto - border-style: none - padding-bottom: 0rem - .morphtool - position: relative - background-color: white height: $icon-width - margin-top: auto - margin-bottom: auto z-index: 2 .morphtoolminus - position: absolute top: 0 right: 0 - background-color: white - padding: $small-offset height: $icon-width width: $icon-height z-index: 2
--- a/client/src/pdftool/Pdftool.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/pdftool/Pdftool.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,6 +1,6 @@ <template> - <div class="pdftool" :style="selectedSurvey ? 'bottom: 140px' : ''"> - <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="d-flex flex-column ui-element minimizer"> + <div class="pdftool position-absolute mr-3 mb-3" :style="selectedSurvey ? 'bottom: 140px' : ''"> + <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="d-flex flex-column ui-element minimizer position-absolute mt-1"> <i :class="['fa', 'mt-1', {'fa-file-pdf-o': !showPdfTool}, {'fa-close': showPdfTool}]"></i> </div> <div :class="style"> @@ -44,17 +44,11 @@ <style lang="sass" scoped> .pdftool - position: absolute - margin-right: $offset - margin-bottom: $offset bottom: 96px right: 0 .inner - background-color: white - margin-left: $small-offset opacity: $slight-transparent - text-align: left .pdftoolcollapsed min-height: $icon-height @@ -65,11 +59,9 @@ width: $identify-width .minimizer - position: absolute z-index: 2 right: 0 top: 0 - margin-top: $x-small-offset height: $icon-width width: $icon-height </style> @@ -106,14 +98,13 @@ ...mapState("application", ["showPdfTool"]), ...mapState("bottlenecks", ["selectedSurvey"]), style() { - return { - "ui-element": true, - rounded: true, - inner: true, - shadow: true, - pdftoolexpanded: this.showPdfTool, - pdftoolcollapsed: !this.showPdfTool - }; + return [ + "ui-element rounded inner ml-2 bg-white text-left shadow", + { + pdftoolexpanded: this.showPdfTool, + pdftoolcollapsed: !this.showPdfTool + } + ]; } }, methods: {
--- a/client/src/systemconfiguration/systemconfiguration.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/systemconfiguration/systemconfiguration.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,6 +1,6 @@ <template> <div class="d-flex flex-row"> - <div class="card sysconfig"> + <div class="card sysconfig mt-3 mx-auto"> <div class="card-header shadow-sm text-white bg-info mb-6"> Systemconfiguration </div> @@ -38,9 +38,6 @@ margin-right: auto .sysconfig - margin-top: $offset - margin-left: auto - margin-right: auto width: 30vw </style>
--- a/client/src/usermanagement/Userdetail.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/usermanagement/Userdetail.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,5 +1,5 @@ <template> - <div class="userdetails shadow fadeIn animated"> + <div class="userdetails h-100 mt-3 mr-auto shadow fadeIn animated"> <div class="card"> <div class="card-header shadow-sm text-white bg-info mb-3"> {{ this.cardHeader }} @@ -8,7 +8,7 @@ </span> </div> <div class="card-body"> - <form @submit.prevent="save"> + <form @submit.prevent="save" clas="ml-3"> <div class="formfields"> <div v-if="currentUser.isNew" class="form-group row"> <label for="user">Username</label> @@ -78,13 +78,9 @@ width: 10vw .userdetails - margin-top: $offset min-width: 40vw - margin-right: auto - height: 100% form - margin-left: $offset font-size: $smaller </style>
--- a/client/src/usermanagement/Usermanagement.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/usermanagement/Usermanagement.vue Mon Nov 19 15:20:22 2018 +0100 @@ -56,10 +56,10 @@ </table> </div> <div class="d-flex flex-row pagination"> - <i @click=" prevPage " v-if="this.currentPage!=1 " class="backwards btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}} - <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> + <i @click=" prevPage " v-if="this.currentPage!=1 " class="mr-2 btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}} + <i @click="nextPage " class="ml-2 btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> </div> - <div class="adduser "> + <div class="mr-3 pb-3"> <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button> </div> </div> @@ -74,7 +74,6 @@ @import "../application/assets/tooltip.sass" .spacer - margin-left: $offset height: 100vh .spacer-collapsed @@ -92,15 +91,9 @@ .main height: 100vh -.backwards - margin-right: $small-offset - -.forwards - margin-left: $small-offset - @media screen and (min-width: 600px) .content - margin-left: $offset + margin-left: $sidebar-width margin-right: auto @media screen and (min-width: 1650px) @@ -108,16 +101,10 @@ margin-left: $sidebar-width margin-right: auto -.adduser - margin-right: $offset - padding-bottom: $offset - .icon font-size: large .userlist - margin-top: $offset - margin-right: $offset min-width: 520px height: 100% @@ -190,11 +177,13 @@ ...mapGetters("usermanagement", ["isUserDetailsVisible"]), ...mapState("application", ["showSidebar", "showUsermenu"]), spacerStyle() { - return { - spacer: true, - "spacer-expanded": this.showUsermenu && this.showSidebar, - "spacer-collapsed": !this.showUsermenu && this.showSidebar - }; + return [ + "spacer ml-3", + { + "spacer-expanded": this.showUsermenu && this.showSidebar, + "spacer-collapsed": !this.showUsermenu && this.showSidebar + } + ]; }, users() { let users = [...this.$store.getters["usermanagement/users"]]; @@ -228,12 +217,13 @@ }; }, userlistStyle() { - return { - userlist: true, - shadow: true, - userlistsmall: this.isUserDetailsVisible, - userlistextended: !this.isUserDetailsVisible - }; + return [ + "userlist mt-3 mr-3 shadow", + { + userlistsmall: this.isUserDetailsVisible, + userlistextended: !this.isUserDetailsVisible + } + ]; } }, methods: {
--- a/client/src/usermanagement/Users.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/usermanagement/Users.vue Mon Nov 19 15:20:22 2018 +0100 @@ -58,7 +58,7 @@ <i @click=" prevPage " v-if="this.currentPage!=1 " class="backwards btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}} <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> </div> - <div class="adduser "> + <div class="mr-3 pb-3 "> <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button> </div> </div> @@ -86,16 +86,11 @@ margin-left: auto margin-right: auto -.adduser - margin-right: $offset - padding-bottom: $offset - .icon font-size: large .userlist margin-top: $topbarheight - margin-right: $offset min-width: 520px height: 100% @@ -199,12 +194,13 @@ }; }, userlistStyle() { - return { - userlist: true, - shadow: true, - userlistsmall: this.isUserDetailsVisible, - userlistextended: !this.isUserDetailsVisible - }; + return [ + "userlist mr-3 shadow", + { + userlistsmall: this.isUserDetailsVisible, + userlistextended: !this.isUserDetailsVisible + } + ]; } }, methods: {
--- a/client/src/zoom/zoom.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/zoom/zoom.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,9 +1,9 @@ <template> - <div class="d-flex buttoncontainer shadow" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''"> - <button class="zoomButton rounded-left ui-element border-right" @click="zoomIn"> + <div class="d-flex buttoncontainer shadow mb-3 position-absolute" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''"> + <button class="zoomButton border-0 bg-white rounded-left ui-element border-right" @click="zoomIn"> <i class="fa fa-plus"></i> </button> - <button class="zoomButton rounded-right ui-element" @click="zoomOut"> + <button class="zoomButton border-0 bg-white rounded-right ui-element" @click="zoomOut"> <i class="fa fa-minus"></i> </button> </div> @@ -11,20 +11,15 @@ <style lang="sass" scoped> .buttoncontainer - position: absolute bottom: 0 left: 50% margin-left: -$icon-width - margin-bottom: $offset .zoomButton - background-color: white min-height: $icon-width min-width: $icon-width - margin-bottom: auto z-index: 2 outline: none - border: 0px </style> <script> import { mapState } from "vuex";