Mercurial > gemma
changeset 1449:bb47531bdd22
sass to scss
line wrap: on
line diff
--- a/client/src/components/App.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/App.vue Mon Dec 03 10:19:59 2018 +0100 @@ -34,28 +34,31 @@ </div> </template> -<style lang="sass" scoped> -.userinterface - position: absolute - top: 0 - left: 0 - height: 100vh - width: 100vw - z-index: 4 - pointer-events: none +<style lang="scss" scoped> +.userinterface { + position: absolute; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + z-index: 4; + pointer-events: none; +} -.topbar - position: relative - z-index: 2 +.topbar { + position: relative; + z-index: 2; +} -#app - height: 100vh - width: 100vw - font-family: "Avenir", Helvetica, Arial, sans-serif - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - text-align: center - color: #2c3e50 +#app { + height: 100vh; + width: 100vw; + font-family: "Avenir", Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + color: #2c3e50; +} </style> <script>
--- a/client/src/components/Login.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/Login.vue Mon Dec 03 10:19:59 2018 +0100 @@ -76,24 +76,29 @@ </div> </template>) -<style lang="sass" scoped> -.login - min-width: 375px - min-height: 500px - @extend %fully-centered +<style lang="scss" scoped> +.login { + min-width: 375px; + min-height: 500px; + @extend %fully-centered; +} -.loginform - max-width: 375px +.loginform { + max-width: 375px; +} -.alert - padding: 0.5rem +.alert { + padding: 0.5rem; +} -.secondary-logo - max-width: 375px +.secondary-logo { + max-width: 375px; +} /* avoid IE and Edge show a password reveal as we do our own */ -input[type="password"]::-ms-reveal - display: none +input[type="password"]::-ms-reveal { + display: none; +} </style> <script>
--- a/client/src/components/Sidebar.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/Sidebar.vue Mon Dec 03 10:19:59 2018 +0100 @@ -136,49 +136,64 @@ }; </script> -<style lang="sass" scoped> -.menubutton - height: $icon-height - width: $icon-width - top: 0 - left: 0 - color: #666 +<style lang="scss" scoped> +.menubutton { + height: 2rem; + width: 2rem; + top: 0; + left: 0; + color: #666; +} + +.menu a { + display: block; + text-align: left; + padding: 0.5rem 1rem; + color: #333; + text-decoration: none; +} + +.menu a svg path { + fill: #666; +} + +.menu a:hover { + background-color: #f8f8f8; +} + +.menu a.router-link-exact-active { + background-color: #17a2b8; + color: #fff; +} -.menu - a - display: block - text-align: left - padding: 0.5rem 1rem - color: #333 - text-decoration: none - svg path - fill: #666 - &:hover - background-color: #f8f8f8 - &.router-link-exact-active - background-color: $color-info - color: #fff - svg path - fill: #fff - &.secondary - &.active - background: lighten($color-info, 55) - color: darken($color-info, 15) - svg path - fill: darken($color-info, 15) +.menu a.router-link-exact-active svg path { + fill: #fff; +} + +.menu a.secondary.active { + background: #ebfafd; + color: #0f6674; +} + +.menu a.secondary.active svg path { + fill: #0f6674; +} -.sidebar - background-color: #ffffff - padding-top: $large-offset - opacity: $slight-transparent - transition: $transition-fast - overflow: hidden +.sidebar { + background-color: #ffffff; + padding-top: $large-offset; + opacity: $slight-transparent; + transition: $transition-fast; + overflow: hidden; +} -.sidebarcollapsed - max-height: $icon-height - max-width: $icon-width +.sidebarcollapsed { + max-height: $icon-height; + max-width: $icon-width; +} -.sidebarextended - max-height: 35rem - max-width: $sidebar-width +.sidebarextended { + max-height: 35rem; + max-width: $sidebar-width; +} </style>
--- a/client/src/components/admin/Importqueue.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/admin/Importqueue.vue Mon Dec 03 10:19:59 2018 +0100 @@ -3,7 +3,9 @@ <div :class="spacerStyle"></div> <div class="mt-3 mx-auto"> <div class="card importqueuecard"> - <div class="card-header shadow-sm text-white bg-info mb-3"><translate>Importqueue</translate></div> + <div class="card-header shadow-sm text-white bg-info mb-3"> + <translate>Importqueue</translate> + </div> <div class="card-body importcardbody"> <div class="card-body importcardbody"> <div class="searchandfilter d-flex flex-row"> @@ -23,20 +25,38 @@ > </div> <div class="filters"> - <button @click="setFilter('successful')" :class="successfulStyle"><translate>Successful</translate></button> - <button @click="setFilter('failed')" :class="failedStyle"><translate>Failed</translate></button> - <button @click="setFilter('pending')" :class="pendingStyle"><translate>Pending</translate></button> - <button @click="setFilter('rejected')" :class="rejectedStyle"><translate>Rejected</translate></button> - <button @click="setFilter('accepted')" :class="acceptedStyle"><translate>Accepted</translate></button> + <button @click="setFilter('successful')" :class="successfulStyle"> + <translate>Successful</translate> + </button> + <button @click="setFilter('failed')" :class="failedStyle"> + <translate>Failed</translate> + </button> + <button @click="setFilter('pending')" :class="pendingStyle"> + <translate>Pending</translate> + </button> + <button @click="setFilter('rejected')" :class="rejectedStyle"> + <translate>Rejected</translate> + </button> + <button @click="setFilter('accepted')" :class="acceptedStyle"> + <translate>Accepted</translate> + </button> </div> </div> <table class="table"> <thead> <tr> - <th><translate>Enqueued</translate></th> - <th><translate>Kind</translate></th> - <th><translate>User</translate></th> - <th><translate>State</translate></th> + <th> + <translate>Enqueued</translate> + </th> + <th> + <translate>Kind</translate> + </th> + <th> + <translate>User</translate> + </th> + <th> + <translate>State</translate> + </th> </tr> </thead> <tbody> @@ -49,7 +69,9 @@ </tbody> </table> <div> - <button @click="refresh" class="btn btn-info refresh"><translate>Refresh</translate></button> + <button @click="refresh" class="btn btn-info refresh"> + <translate>Refresh</translate> + </button> </div> </div> </div> @@ -201,50 +223,61 @@ }; </script> -<style lang="sass" scoped> -.refresh - position: absolute - right: $offset - bottom: $offset +<style lang="scss" scoped> +.refresh { + position: absolute; + right: $offset; + bottom: $offset; +} -.spacer - height: 100vh +.spacer { + height: 100vh; +} -.spacer-collapsed - min-width: $icon-width + $offset - transition: $transition-fast +.spacer-collapsed { + min-width: $icon-width + $offset; + transition: $transition-fast; +} -.spacer-expanded - min-width: $sidebar-width + $offset +.spacer-expanded { + min-width: $sidebar-width + $offset; +} -.importqueuecard - width: 80vw - min-height: 20rem +.importqueuecard { + width: 80vw; + min-height: 20rem; +} -.card-body - width: 100% - margin-left: auto - margin-right: auto +.card-body { + width: 100%; + margin-left: auto; + margin-right: auto; +} -.searchandfilter - position: relative - margin-bottom: $xx-large-offset +.searchandfilter { + position: relative; + margin-bottom: $xx-large-offset; +} -.filters - position: absolute - right: 0 +.filters { + position: absolute; + right: 0; +} -.filters button - margin-right: $small-offset +.filters button { + margin-right: $small-offset; +} .table td, -.table th - border-top: 0 !important - text-align: left - padding: $small-offset !important +.table th { + border-top: 0 !important; + text-align: left; + padding: $small-offset !important; +} -.searchgroup - position: absolute - left: 0 - width: 50% +.searchgroup { + position: absolute; + left: 0; + width: 50%; +} </style>
--- a/client/src/components/admin/Logs.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/admin/Logs.vue Mon Dec 03 10:19:59 2018 +0100 @@ -14,65 +14,83 @@ @click="fetch('system/log/apache2/access.log', 'accesslog')" :class="accesslogStyle" href="#" - ><translate>Accesslog</translate></a> + > + <translate>Accesslog</translate> + </a> </li> <li class="nav-item"> <a @click="fetch('system/log/apache2/error.log', 'errorlog')" :class="errorlogStyle" href="#" - ><translate>Errorlog</translate></a> + > + <translate>Errorlog</translate> + </a> </li> </ul> </div> <div class="statuscontainer d-flex flex-row"> <div class="statusline ml-3 mt-1 align-self-center"> - <h3><translate>Last refresh:</translate> {{refreshed}}</h3> + <h3> + <translate>Last refresh:</translate> + {{refreshed}} + </h3> </div> <div class="refresh"> - <button class="btn btn-dark" @click="fetch(currentFile, currentLog)"><translate>Refresh</translate></button> + <button class="btn btn-dark" @click="fetch(currentFile, currentLog)"> + <translate>Refresh</translate> + </button> </div> </div> </div> </div> </template> -<style lang="sass" scoped> -.statuscontainer - width: 87% - position: relative +<style lang="scss" scoped> +.statuscontainer { + width: 87%; + position: relative; +} -.logmenu - margin-left: 5rem - min-width: 60vw +.logmenu { + margin-left: 5rem; + min-width: 60vw; +} -#code - overflow: auto +#code { + overflow: auto; +} -.refresh - position: absolute - right: 0 +.refresh { + position: absolute; + right: 0; +} -.logoutput - width: 95% - height: 85vh - overflow: auto - transition: $transition-fast +.logoutput { + width: 95%; + height: 85vh; + overflow: auto; + transition: $transition-fast; +} -.spacer - height: 90vh +.spacer { + height: 90vh; +} -.spacer-collapsed - min-width: $icon-width + $offset - transition: $transition-fast +.spacer-collapsed { + min-width: $icon-width + $offset; + transition: $transition-fast; +} -.spacer-expanded - min-width: $sidebar-width + $offset +.spacer-expanded { + min-width: $sidebar-width + $offset; +} -.statusline - position: absolute - right: 0 - margin-right: 7rem +.statusline { + position: absolute; + right: 0; + margin-right: 7rem; +} </style> <script>
--- a/client/src/components/admin/Systemconfiguration.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/admin/Systemconfiguration.vue Mon Dec 03 10:19:59 2018 +0100 @@ -1,18 +1,26 @@ <template> <div class="d-flex flex-row"> <div class="card sysconfig mt-3 mx-auto"> - <div class="card-header shadow-sm text-white bg-info mb-6"><translate>Systemconfiguration</translate></div> + <div class="card-header shadow-sm text-white bg-info mb-6"> + <translate>Systemconfiguration</translate> + </div> <div class="card-body config"> <section class="configsection"> - <h4 class="card-title"><translate>Bottleneck Areas stroke-color</translate></h4> + <h4 class="card-title"> + <translate>Bottleneck Areas stroke-color</translate> + </h4> <compact-picker v-model="strokeColor"/> </section> <section> - <h4 class="card-title"><translate>Bottleneck Areas fill-color</translate></h4> + <h4 class="card-title"> + <translate>Bottleneck Areas fill-color</translate> + </h4> <chrome-picker v-model="fillColor"/> </section> <div class="sendbutton"> - <a @click.prevent="submit" class="btn btn-info"><translate>Send</translate></a> + <a @click.prevent="submit" class="btn btn-info"> + <translate>Send</translate> + </a> </div> </div> <!-- card-body --> @@ -20,24 +28,29 @@ </div> </template> -<style scoped lang="sass"> -.config - text-align: left +<style scoped lang="scss"> +.config { + text-align: left; +} -.configsection - margin-bottom: $large-offset +.configsection { + margin-bottom: $large-offset; +} -.sendbutton - position: absolute - right: $offset - bottom: $offset +.sendbutton { + position: absolute; + right: $offset; + bottom: $offset; +} -.inputs - margin-left: auto - margin-right: auto +.inputs { + margin-left: auto; + margin-right: auto; +} -.sysconfig - width: 30vw +.sysconfig { + width: 30vw; +} </style> <script>
--- a/client/src/components/admin/importschedule/Importschedule.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/admin/importschedule/Importschedule.vue Mon Dec 03 10:19:59 2018 +0100 @@ -130,28 +130,34 @@ }; </script> -<style lang="sass" scoped> -.spacer - height: 100vh +<style lang="scss" scoped> +.spacer { + height: 100vh; +} -.spacer-collapsed - min-width: $icon-width + $offset - transition: $transition-fast +.spacer-collapsed { + min-width: $icon-width + $offset; + transition: $transition-fast; +} -.spacer-expanded - min-width: $sidebar-width + $offset +.spacer-expanded { + min-width: $sidebar-width + $offset; +} -.schedulecard - width: 40vw - min-height: 20rem +.schedulecard { + width: 40vw; + min-height: 20rem; +} -.schedulecard-body - width: 100% - margin-left: auto - margin-right: aut +.schedulecard-body { + width: 100%; + margin-left: auto; + margin-right: auto; +} -.newbutton - position:absolute - bottom: $offset - right: $offset +.newbutton { + position: absolute; + bottom: $offset; + right: $offset; +} </style>
--- a/client/src/components/admin/usermanagement/Userdetail.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/admin/usermanagement/Userdetail.vue Mon Dec 03 10:19:59 2018 +0100 @@ -142,18 +142,22 @@ </div> </template> -<style lang="sass" scoped> -.mailbutton - width: 12vw +<style lang="scss" scoped> +.mailbutton { + width: 12vw; +} -.formfields - width: 10vw +.formfields { + width: 10vw; +} -.userdetails - min-width: 40vw +.userdetails { + min-width: 40vw; +} -form - font-size: $smaller +form { + font-size: $smaller; +} </style> <script>
--- a/client/src/components/map/Identify.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/Identify.vue Mon Dec 03 10:19:59 2018 +0100 @@ -56,14 +56,16 @@ </div> </template> -<style lang="sass" scoped> -.features - max-height: 19rem - overflow-y: auto +<style lang="scss" scoped> +.features { + max-height: 19rem; + overflow-y: auto; +} -.versioninfo - font-size: 60% - white-space: normal +.versioninfo { + font-size: 60%; + white-space: normal; +} </style> <script>
--- a/client/src/components/map/Maplayer.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/Maplayer.vue Mon Dec 03 10:19:59 2018 +0100 @@ -2,24 +2,29 @@ <div id="map" :class="mapStyle"></div> </template> -<style lang="sass" scoped> -.nocursor - cursor: none +<style lang="scss" scoped> +.nocursor { + cursor: none; +} -.mapsplit - height: 50vh +.mapsplit { + height: 50vh; +} -.mapfull - height: 100vh +.mapfull { + height: 100vh; +} -@media print - .mapfull - width: 2000px - height: 2828px - - .mapsplit - width: 2000px - height: 2828px +@media print { + .mapfull { + width: 2000px; + height: 2828px; + } + .mapsplit { + width: 2000px; + height: 2828px; + } +} </style> <script>
--- a/client/src/components/map/Search.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/Search.vue Mon Dec 03 10:19:59 2018 +0100 @@ -5,7 +5,9 @@ <font-awesome-icon icon="search"></font-awesome-icon> </span> </div> - <div :class="['searchgroup', {'searchgroup-collapsed': !showSearchbar, big: showContextBox && ['bottlenecks', 'staging'].indexOf(contextBoxContent) !== -1 }]"> + <div + :class="['searchgroup', {'searchgroup-collapsed': !showSearchbar, big: showContextBox && ['bottlenecks', 'staging'].indexOf(contextBoxContent) !== -1 }]" + > <input @keyup.enter="takeFirstSearchresult" id="search" @@ -35,57 +37,75 @@ </div> </template> -<style lang="sass" scoped> - .searchcontainer - opacity: $slight-transparent - .searchbar - border-top-left-radius: 0 !important - border-bottom-left-radius: 0 !important +<style lang="scss" scoped> +.searchcontainer { + opacity: 0.96; +} + +.searchcontainer .searchbar { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +.searchgroup { + margin-left: -3px; + transition: width 0.3s; + width: 300px; + overflow: hidden; +} - .searchgroup - margin-left: -3px - transition: width 0.3s - width: 300px - overflow: hidden - &.big - width: 571px +.searchgroup.big { + width: 571px; +} + +.searchgroup-collapsed { + width: 0; +} - .searchgroup-collapsed - width: 0 +.searchbar { + height: 2rem !important; + box-shadow: none !important; +} - .searchbar - height: $icon-height !important - box-shadow: none !important - &.rounded-top-right - border-radius: 0 !important - border-top-right-radius: $border-radius !important +.searchbar.rounded-top-right { + border-radius: 0 !important; + border-top-right-radius: 0.25rem !important; +} - .searchlabel - &.rounded-top-left - border-radius: 0 !important - border-top-left-radius: $border-radius !important +.searchlabel.rounded-top-left { + border-radius: 0 !important; + border-top-left-radius: 0.25rem !important; +} - .input-group-text - height: $icon-height - width: $icon-width +.input-group-text { + height: 2rem; + width: 2rem; +} - .input-group-prepend - svg path - fill: #666 +.input-group-prepend svg path { + fill: #666; +} - .searchresults - box-shadow: $shadow-xs - top: $icon-height - left: 0 - right: 0 - max-height: 24rem - overflow: auto - > div:first-child - border-top: 0 !important - a - text-decoration: none - &:hover - background: #f8f8f8 +.searchresults { + box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); + top: 2rem; + left: 0; + right: 0; + max-height: 24rem; + overflow: auto; +} + +.searchresults > div:first-child { + border-top: 0 !important; +} + +.searchresults a { + text-decoration: none; +} + +.searchresults a:hover { + background: #f8f8f8; +} </style> <script>
--- a/client/src/components/map/Zoom.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/Zoom.vue Mon Dec 03 10:19:59 2018 +0100 @@ -15,18 +15,20 @@ </div> </template> -<style lang="sass" scoped> -.buttoncontainer - bottom: 0 - left: 50% - margin-left: -$icon-width +<style lang="scss" scoped> +.buttoncontainer { + bottom: 0; + left: 50%; + margin-left: -$icon-width; +} -.zoomButton - min-height: $icon-width - min-width: $icon-width - z-index: 1 - outline: none - color: #666 +.zoomButton { + min-height: $icon-width; + min-width: $icon-width; + z-index: 1; + outline: none; + color: #666; +} </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0
--- a/client/src/components/map/contextbox/Bottlenecks.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/contextbox/Bottlenecks.vue Mon Dec 03 10:19:59 2018 +0100 @@ -1,21 +1,28 @@ <template> <div> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> - <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon><translate>Bottlenecks</translate> + <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon> + <translate>Bottlenecks</translate> </h6> <div class="row p-2 text-left small"> <div class="col-5"> - <a href="#" @click="sortBy('name')" class="sort-link"><translate>Name</translate></a> + <a href="#" @click="sortBy('name')" class="sort-link"> + <translate>Name</translate> + </a> <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'name'"></font-awesome-icon> </div> <div class="col-2"> - <a href="#" @click="sortBy('latestMeasurement')" class="sort-link"><translate>Latest</translate> - <br><translate>Measurement</translate> + <a href="#" @click="sortBy('latestMeasurement')" class="sort-link"> + <translate>Latest</translate> + <br> + <translate>Measurement</translate> </a> <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'latestMeasurement'"></font-awesome-icon> </div> <div class="col-3"> - <a href="#" @click="sortBy('chainage')" class="sort-link"><translate>Chainage</translate></a> + <a href="#" @click="sortBy('chainage')" class="sort-link"> + <translate>Chainage</translate> + </a> <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'chainage'"></font-awesome-icon> </div> <div class="col-2"></div> @@ -31,17 +38,12 @@ class="border-top row bottleneck-row mx-0" > <div class="col-5 py-2 text-left"> - <a - href="#" - @click="selectBottleneck(bottleneck)" - >{{ bottleneck.properties.name }}</a> + <a href="#" @click="selectBottleneck(bottleneck)">{{ bottleneck.properties.name }}</a> </div> - <div class="col-2 py-2"> - {{ displayCurrentSurvey(bottleneck.properties.current) }} - </div> - <div class="col-3 py-2"> - {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }} - </div> + <div class="col-2 py-2">{{ displayCurrentSurvey(bottleneck.properties.current) }}</div> + <div + class="col-3 py-2" + >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div> <div class="col-2 pr-0 text-right"> <button type="button" @@ -49,12 +51,27 @@ @click="loadSurveys(bottleneck.properties.name)" v-if="bottleneck.properties.current" > - <font-awesome-icon icon="spinner" fixed-width spin v-if="loading === bottleneck.properties.name"></font-awesome-icon> - <font-awesome-icon icon="angle-down" fixed-width v-if="loading !== bottleneck.properties.name && openBottleneck !== bottleneck.properties.name"></font-awesome-icon> - <font-awesome-icon icon="angle-up" fixed-width v-if="loading !== bottleneck.properties.name && openBottleneck === bottleneck.properties.name"></font-awesome-icon> + <font-awesome-icon + icon="spinner" + fixed-width + spin + v-if="loading === bottleneck.properties.name" + ></font-awesome-icon> + <font-awesome-icon + icon="angle-down" + fixed-width + v-if="loading !== bottleneck.properties.name && openBottleneck !== bottleneck.properties.name" + ></font-awesome-icon> + <font-awesome-icon + icon="angle-up" + fixed-width + v-if="loading !== bottleneck.properties.name && openBottleneck === bottleneck.properties.name" + ></font-awesome-icon> </button> </div> - <div :class="['col-12 p-0', 'surveys', {open: openBottleneck === bottleneck.properties.name}]"> + <div + :class="['col-12 p-0', 'surveys', {open: openBottleneck === bottleneck.properties.name}]" + > <a href="#" class="d-block px-3 py-2" @@ -65,7 +82,9 @@ </div> </div> </div> - <div v-else class="small text-center py-3 border-top"><translate>No results.</translate></div> + <div v-else class="small text-center py-3 border-top"> + <translate>No results.</translate> + </div> </div> </template> @@ -192,9 +211,9 @@ } }) .then(response => { - this.openBottleneckSurveys = response.data.surveys.sort( - (a, b) => (a.date_info < b.date_info ? 1 : -1) - ); + this.openBottleneckSurveys = response.data.surveys.sort((a, b) => { + return a.date_info < b.date_info ? 1 : -1; + }); }) .catch(error => { const { status, data } = error.response; @@ -219,28 +238,36 @@ }; </script> -<style lang="sass" scoped> -.bottleneck-list - overflow-y: auto - .bottleneck-row - a - text-decoration: none - &:hover - background: #fbfbfb +<style lang="scss" scoped> +.bottleneck-list { + overflow-y: auto; +} + +.bottleneck-list .bottleneck-row a { + text-decoration: none; +} + +.bottleneck-list .bottleneck-row:hover { + background: #fbfbfb; +} -.surveys - max-height: 0 - min-height: 0 - overflow: hidden - a - &:hover - background: #f3f3f3 +.surveys { + max-height: 0; + min-height: 0; + overflow: hidden; +} + +.surveys a:hover { + background: #f3f3f3; +} -.surveys.open - max-height: 250px - overflow: auto +.surveys.open { + max-height: 250px; + overflow: auto; +} -.sort-link - color: #444 - font-weight: bold +.sort-link { + color: #444; + font-weight: bold; +} </style>
--- a/client/src/components/map/contextbox/Contextbox.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/contextbox/Contextbox.vue Mon Dec 03 10:19:59 2018 +0100 @@ -62,30 +62,35 @@ }; </script> -<style lang="sass" scoped> -.contextbox - position: relative - background-color: #ffffff - opacity: $slight-transparent - transition: max-width 0.3s, max-height 0.3s - overflow: hidden - background: #fff - > div:last-child - width: 600px +<style lang="scss" scoped> +.contextbox { + position: relative; + background-color: #ffffff; + opacity: $slight-transparent; + transition: max-width 0.3s, max-height 0.3s; + overflow: hidden; + background: #fff; +} +.contextbox > div:last-child { + width: 600px; +} -.contextboxcollapsed - max-width: 0 - max-height: 0 +.contextboxcollapsed { + max-width: 0; + max-height: 0; +} -.contextboxextended - max-width: 600px - max-height: 640px +.contextboxextended { + max-width: 600px; + max-height: 640px; +} -.close-contextbox - position: absolute - z-index: 2 - right: 0 - top: 7px - height: $icon-width - width: $icon-height +.close-contextbox { + position: absolute; + z-index: 2; + right: 0; + top: 7px; + height: $icon-width; + width: $icon-height; +} </style>
--- a/client/src/components/map/contextbox/ImportSoundingresults.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/contextbox/ImportSoundingresults.vue Mon Dec 03 10:19:59 2018 +0100 @@ -344,21 +344,26 @@ }; </script> -<style lang="sass" scoped> -.projectionLabel - margin-left: $small-offset +<style lang="scss" scoped> +.projectionLabel { + margin-left: $small-offset; +} -.depthreferencelabel - margin-left: $small-offset +.depthreferencelabel { + margin-left: $small-offset; +} -.offset-r - margin-right: $small-offset - -.buttons button - margin-left: $offset !important +.offset-r { + margin-right: $small-offset; +} -.label-text - width: 5rem - text-align: left - line-height: 2.25rem +.buttons button { + margin-left: $offset !important; +} + +.label-text { + width: 5rem; + text-align: left; + line-height: 2.25rem; +} </style>
--- a/client/src/components/map/contextbox/Staging.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/contextbox/Staging.vue Mon Dec 03 10:19:59 2018 +0100 @@ -159,13 +159,13 @@ }; </script> -<style lang="sass" scoped> - +<style lang="scss" scoped> .table th, -td - font-size: 0.9rem - border-top: 0px !important - border-bottom-width: 1px - text-align: left - padding: 0.5rem !important +td { + font-size: 0.9rem; + border-top: 0px !important; + border-bottom-width: 1px; + text-align: left; + padding: 0.5rem !important; +} </style>
--- a/client/src/components/map/fairway/Fairwayprofile.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/fairway/Fairwayprofile.vue Mon Dec 03 10:19:59 2018 +0100 @@ -1,7 +1,5 @@ <template> - <div - :class="['position-relative', {show: showSplitscreen}]" - > + <div :class="['position-relative', {show: showSplitscreen}]"> <button class="rounded-bottom bg-white border-0 position-absolute splitscreen-toggle" @click="$store.commit('application/showSplitscreen', false)" @@ -22,8 +20,11 @@ v-if="selectedBottleneck && selectedSurvey" >{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5> <div class="d-flex flex-fill"> - <div class="loading d-flex justify-content-center align-items-center" v-if="surveysLoading || profileLoading"> - <font-awesome-icon icon="spinner" spin /> + <div + class="loading d-flex justify-content-center align-items-center" + v-if="surveysLoading || profileLoading" + > + <font-awesome-icon icon="spinner" spin/> </div> <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div> </div> @@ -31,41 +32,49 @@ </div> </template> -<style lang="sass" scoped> -.profile - width: 100vw - height: 0 - overflow: hidden - z-index: 2 +<style lang="scss" scoped> +.profile { + width: 100vw; + height: 0; + overflow: hidden; + z-index: 2; +} .splitscreen-toggle, -.clear-selection - width: $icon-width - height: $icon-height - margin-top: 8px - z-index: 3 - outline: none - svg path - fill: #666 +.clear-selection { + width: 2rem; + height: 2rem; + margin-top: 8px; + z-index: 3; + outline: none; +} -.splitscreen-toggle - right: $small-offset + $icon-width +.splitscreen-toggle svg path, +.clear-selection svg path { + fill: #666; +} + +.splitscreen-toggle { + right: 2.5rem; +} -.clear-selection - right: $small-offset +.clear-selection { + right: 0.5rem; +} -.show - .profile - height: 50vh +.show .profile { + height: 50vh; +} -.loading - background: rgba(255, 255, 255, 0.96) - position: absolute - z-index: 99 - top: 0 - right: 0 - bottom: 0 - left: 0 +.loading { + background: rgba(255, 255, 255, 0.96); + position: absolute; + z-index: 99; + top: 0; + right: 0; + bottom: 0; + left: 0; +} </style> <script>
--- a/client/src/components/map/fairway/Infobar.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/fairway/Infobar.vue Mon Dec 03 10:19:59 2018 +0100 @@ -24,12 +24,15 @@ </div> </template> -<style lang="sass" scoped> -.infobar - height: $icon-height + 0.2rem - z-index: 2 - svg path - fill: #666 +<style lang="scss" scoped> +.infobar { + height: 2.2rem; + z-index: 2; +} + +.infobar svg path { + fill: #666; +} </style> <script>
--- a/client/src/components/map/fairway/Profiles.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/fairway/Profiles.vue Mon Dec 03 10:19:59 2018 +0100 @@ -172,28 +172,30 @@ </div> </template> -<style lang="sass" scoped> - .loading - background: rgba(255, 255, 255, 0.9) - position: absolute - z-index: 99 - top: 0 - right: 0 - bottom: 0 - left: 0 +<style lang="scss" scoped> +.loading { + background: rgba(255, 255, 255, 0.9); + position: absolute; + z-index: 99; + top: 0; + right: 0; + bottom: 0; + left: 0; +} - .input-button-right - border-top-right-radius: $border-radius - border-bottom-right-radius: $border-radius - border-top-left-radius: 0 !important - border-bottom-left-radius: 0 !important +.input-button-right { + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} - .rounded-left-only - border-top-right-radius: 0 !important - border-bottom-right-radius: 0 !important - border-top-left-radius: $border-radius - border-bottom-left-radius: $border-radius - +.rounded-left-only { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; +} </style> <script>
--- a/client/src/components/map/layers/Layerselect.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/layers/Layerselect.vue Mon Dec 03 10:19:59 2018 +0100 @@ -17,12 +17,13 @@ </div> </template> -<style lang="sass" scoped> -.selection - text-align: left - -.layername - margin-left: $small-offset +<style lang="scss" scoped> +.selection { + text-align: left; +} +.layername { + margin-left: $small-offset; +} </style>
--- a/client/src/components/map/layers/LegendElement.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/layers/LegendElement.vue Mon Dec 03 10:19:59 2018 +0100 @@ -116,8 +116,9 @@ }; </script> -<style lang="sass" scoped> -.legendelement - max-height: 1.5rem - width: 2rem +<style lang="scss" scoped> +.legendelement { + max-height: 1.5rem; + width: 2rem; +} </style>
--- a/client/src/components/map/toolbar/Toolbar.vue Mon Dec 03 09:28:28 2018 +0100 +++ b/client/src/components/map/toolbar/Toolbar.vue Mon Dec 03 10:19:59 2018 +0100 @@ -1,72 +1,90 @@ <template> <div class="ml-2"> <div :class="'rounded-top toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')"> - <Identify></Identify> - <Layers></Layers> - <Profiles></Profiles> - <Linetool></Linetool> - <Polygontool></Polygontool> - <Pdftool></Pdftool> + <Identify></Identify> + <Layers></Layers> + <Profiles></Profiles> + <Linetool></Linetool> + <Polygontool></Polygontool> + <Pdftool></Pdftool> </div> - <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white"> - <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon> + <div + @click="$store.commit('application/expandToolbar', !expandToolbar)" + class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white" + > + <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon> </div> </div> </template> -<style lang="sass"> +<style lang="scss"> // not scoped to affect nested components // doen't work when put in application/assets/application.sass... why??? o_O -.toolbar - box-shadow: $shadow-xs - overflow: hidden - transition: max-height 0.4s - margin-bottom: auto +.toolbar { + box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); + overflow: hidden; + transition: max-height 0.4s; + margin-bottom: auto; +} + +.toolbar-collapsed { + max-height: 6rem; +} + +.toolbar-expanded { + max-height: 100%; +} -.toolbar-collapsed - max-height: 3 * $icon-height - -.toolbar-expanded - max-height: 100% +.toolbar-button { + opacity: 0.96; + color: #666; + height: 2rem; + width: 2rem; + align-items: center; + justify-content: center; + display: flex; + background: #fff; + border-bottom: 1px solid #dee2e6; + z-index: 2; + pointer-events: auto; + position: relative; + overflow: hidden; +} -.toolbar-button - opacity: $slight-transparent - color: #666 - height: $icon-width - width: $icon-height - align-items: center - justify-content: center - display: flex - background: #fff - border-bottom: 1px solid #dee2e6 - z-index: 2 - pointer-events: auto - position: relative - overflow: hidden - &:last-child - border-bottom: none - .inverted - color: $color-info - .grey - color: #ddd - .indicator - color: #fff - background: $color-info - position: absolute - bottom: -14px - left: -14px - padding: 2px 4px 1px - font-size: 11px - line-height: 11px - border-top-right-radius: $border-radius - transition: bottom 0.3s, left 0.3s - &.show - left: 0 - bottom: 0 +.toolbar-button:last-child { + border-bottom: none; +} + +.toolbar-button .inverted { + color: #17a2b8; +} + +.toolbar-button .grey { + color: #ddd; +} -.toolbar-toggle - height: 1.2rem - border-bottom: none +.toolbar-button .indicator { + color: #fff; + background: #17a2b8; + position: absolute; + bottom: -14px; + left: -14px; + padding: 2px 4px 1px; + font-size: 11px; + line-height: 11px; + border-top-right-radius: 0.25rem; + transition: bottom 0.3s, left 0.3s; +} + +.toolbar-button .indicator.show { + left: 0; + bottom: 0; +} + +.toolbar-toggle { + height: 1.2rem; + border-bottom: none; +} </style> <script>