Mercurial > gemma
changeset 1191:b23622905a3f
switched entirely to sass instead of scss
for cleaner code/less lines, just removed all ; and {}
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 16 Nov 2018 14:37:07 +0100 |
parents | e3de65179889 |
children | 3afa71405b87 |
files | client/src/application/assets/application.sass client/src/application/assets/application.scss client/src/importqueue/Importqueue.vue client/src/imports/Imports.vue client/src/layers/Layerselect.vue client/src/login/Login.vue client/src/logs/logs.vue client/src/map/Maplayer.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 client/vue.config.js |
diffstat | 16 files changed, 437 insertions(+), 519 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/application/assets/application.sass Fri Nov 16 14:37:07 2018 +0100 @@ -0,0 +1,49 @@ +/* + * This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Thomas Junk <thomas.junk@intevation.de> + */ +$basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75) +$basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75) +$border-radius: 5px +$icon-height: 2rem +$icon-width: 2rem +$large-offset: 2rem +$layerselect-height: 20rem +$layerselect-width: 22rem +$identify-height: 20rem +$identify-width: 20rem +$offset: 1rem +$searchbar-width: 50vw +$sidebar-height: 32rem +$sidebar-width: 15rem +$slight-transparent: 0.96 +$small-offset: 0.5rem +$smaller: 0.9rem +$transition-fast: 0.3s +$transition-slow: 3s +$transition: 0.5s +$x-large-offset: 3rem +$xx-large-offset: 5rem +$x-small-offset: 0.25rem + +.debug + border: 1px solid red + +%fully-centered + position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) + +.ui-element + pointer-events: auto
--- a/client/src/application/assets/application.scss Fri Nov 16 12:15:51 2018 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,52 +0,0 @@ -/* - * This is Free Software under GNU Affero General Public License v >= 3.0 - * without warranty, see README.md and license for details. - * - * SPDX-License-Identifier: AGPL-3.0-or-later - * License-Filename: LICENSES/AGPL-3.0.txt - * - * Copyright (C) 2018 by via donau - * – Österreichische Wasserstraßen-Gesellschaft mbH - * Software engineering by Intevation GmbH - * - * Author(s): - * Thomas Junk <thomas.junk@intevation.de> - */ -$basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75); -$basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75); -$border-radius: 5px; -$icon-height: 2rem; -$icon-width: 2rem; -$large-offset: 2rem; -$layerselect-height: 20rem; -$layerselect-width: 22rem; -$identify-height: 20rem; -$identify-width: 20rem; -$offset: 1rem; -$searchbar-width: 50vw; -$sidebar-height: 32rem; -$sidebar-width: 15rem; -$slight-transparent: 0.96; -$small-offset: 0.5rem; -$smaller: 0.9rem; -$transition-fast: 0.3s; -$transition-slow: 3s; -$transition: 0.5s; -$x-large-offset: 3rem; -$xx-large-offset: 5rem; -$x-small-offset: 0.25rem; - -.debug { - border: 1px solid red; -} - -%fully-centered { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.ui-element { - pointer-events: auto; -}
--- a/client/src/importqueue/Importqueue.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/importqueue/Importqueue.vue Fri Nov 16 14:37:07 2018 +0100 @@ -124,61 +124,51 @@ }; </script> -<style lang="scss" scoped> -.spacer { - margin-left: $offset; - height: 100vh; -} +<style lang="sass" scoped> +.spacer + margin-left: $offset + height: 100vh -.spacer-collapsed { - min-width: $icon-width + $offset; - transition: $transition-fast; -} -.spacer-expanded { - min-width: $sidebar-width + $offset; -} +.spacer-collapsed + min-width: $icon-width + $offset + transition: $transition-fast -.importqueue { - margin-top: $offset; - margin-right: auto; - margin-left: auto; -} +.spacer-expanded + min-width: $sidebar-width + $offset + +.importqueue + margin-top: $offset + margin-right: auto + margin-left: auto -.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/imports/Imports.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/imports/Imports.vue Fri Nov 16 14:37:07 2018 +0100 @@ -177,48 +177,46 @@ }; </script> -<style lang="scss" scoped> -.close-showImportSoundingResults { - position: absolute; - z-index: 2; - right: 0; - top: 7px; - border-radius: $border-radius; - height: $icon-width; - width: $icon-height; -} -.label-text { - width: 10rem; - text-align: left; - line-height: 2.25rem; -} -.importcard { - height: 100%; -} -.importcardbody { - position: relative; - height: 100%; - width: 90%; - margin-left: auto; - margin-right: auto; -} -.imports { - position: relative; - background-color: white; - width: 30rem; - height: 28rem; - margin-left: auto; - margin-right: auto; - border-radius: $border-radius; - opacity: $slight-transparent; -} -.downloadbtn { - position: absolute; - right: $offset; - bottom: $offset; -} +<style lang="sass" scoped> +.close-showImportSoundingResults + position: absolute + z-index: 2 + right: 0 + top: 7px + border-radius: $border-radius + height: $icon-width + width: $icon-height + +.label-text + width: 10rem + text-align: left + line-height: 2.25rem -.downloadbtn a { - margin-right: $offset; -} +.importcard + height: 100% + +.importcardbody + position: relative + height: 100% + width: 90% + margin-left: auto + margin-right: auto + +.imports + position: relative + background-color: white + width: 30rem + height: 28rem + margin-left: auto + margin-right: auto + border-radius: $border-radius + opacity: $slight-transparent + +.downloadbtn + position: absolute + right: $offset + bottom: $offset + +.downloadbtn a + margin-right: $offset </style>
--- a/client/src/layers/Layerselect.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/layers/Layerselect.vue Fri Nov 16 14:37:07 2018 +0100 @@ -11,13 +11,12 @@ </div> </template> -<style lang="scss" scoped> -.selection { - text-align: left; -} -.layername { - margin-left: $small-offset; -} +<style lang="sass" scoped> +.selection + text-align: left + +.layername + margin-left: $small-offset </style>
--- a/client/src/login/Login.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/login/Login.vue Fri Nov 16 14:37:07 2018 +0100 @@ -51,46 +51,39 @@ </div> </template>) -<style lang="scss" scoped> -.login { - background-color: white; - min-width: 375px; - min-height: 500px; - @extend %fully-centered; -} +<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; -} +.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; -} +.loginmask + position: relative + margin-left: $large-offset + margin-right: $large-offset + margin-top: $large-offset -.logo { - margin-right: $offset; -} +.logo + margin-right: $offset -.alert { - padding: 0.5rem; -} +.alert + padding: 0.5rem -.secondary-logo { - max-width: 375px; - margin-left: auto; - margin-right: auto; - margin-bottom: auto; -} +.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 { - display: none; -} +input[type="password"]::-ms-reveal + display: none </style> <script>
--- a/client/src/logs/logs.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/logs/logs.vue Fri Nov 16 14:37:07 2018 +0100 @@ -37,55 +37,50 @@ </div> </template> -<style scoped lang="scss"> -.statuscontainer { - width: 87%; - position: relative; -} -.logmenu { - margin-left: 5rem; - min-width: 60vw; -} -#code { - overflow: auto; -} -.refresh { - position: absolute; - right: 0; -} -.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; -} +<style lang="sass" scoped> +.statuscontainer + width: 87% + position: relative + +.logmenu + margin-left: 5rem + min-width: 60vw + +#code + overflow: auto + +.refresh + position: absolute + right: 0 + +.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 + margin-left: $offset + 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-top: 0.3rem; - margin-left: $offset; - margin-right: 7rem; -} +.statusline + position: absolute + right: 0 + margin-top: 0.3rem + margin-left: $offset + margin-right: 7rem </style> <script>
--- a/client/src/map/Maplayer.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/map/Maplayer.vue Fri Nov 16 14:37:07 2018 +0100 @@ -2,25 +2,21 @@ <div id="map" :class="mapStyle"></div> </template> -<style lang="scss" scoped> -.mapsplit { - height: 50vh; -} +<style lang="sass" scoped> +.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/morphtool/Morphtool.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/morphtool/Morphtool.vue Fri Nov 16 14:37:07 2018 +0100 @@ -35,51 +35,47 @@ </div> </template> -<style scoped lang="scss"> -.headline { - margin-right: $offset; - margin-left: $offset; -} -.morphcontainer { - margin-bottom: $offset; - margin-left: auto; - border-radius: $border-radius; -} -.surveylist { - text-align: left; - margin-bottom: $offset !important; - margin-left: $offset; - margin-right: $offset; -} +<style scoped lang="sass"> +.headline + margin-right: $offset + margin-left: $offset + +.morphcontainer + margin-bottom: $offset + margin-left: auto + border-radius: $border-radius + +.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; -} +.surveylist li + margin-left: auto + margin-right: auto + border-style: none + padding-bottom: 0rem -.morphtool { - position: relative; - background-color: white; - border-radius: $border-radius; - height: $icon-width; - margin-top: auto; - margin-bottom: auto; - z-index: 2; -} +.morphtool + position: relative + background-color: white + border-radius: $border-radius + 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; - border-radius: $border-radius; - height: $icon-width; - width: $icon-height; - z-index: 2; -} +.morphtoolminus + position: absolute + top: 0 + right: 0 + background-color: white + padding: $small-offset + border-radius: $border-radius + height: $icon-width + width: $icon-height + z-index: 2 </style> <script>
--- a/client/src/pdftool/Pdftool.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/pdftool/Pdftool.vue Fri Nov 16 14:37:07 2018 +0100 @@ -42,42 +42,37 @@ </div> </template> -<style lang="scss" scoped> -.pdftool { - position: absolute; - margin-right: $offset; - margin-bottom: $offset; - bottom: 96px; - right: 0; -} +<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; -} +.inner + background-color: white + margin-left: $small-offset + opacity: $slight-transparent + text-align: left -.pdftoolcollapsed { - min-height: $icon-height; - width: $icon-width; - transition: $transition-fast; -} +.pdftoolcollapsed + min-height: $icon-height + width: $icon-width + transition: $transition-fast -.pdftoolexpanded { - width: $identify-width; -} +.pdftoolexpanded + width: $identify-width -.minimizer { - position: absolute; - z-index: 2; - right: 0; - top: 0; - margin-top: $x-small-offset; - border-radius: $border-radius; - height: $icon-width; - width: $icon-height; -} +.minimizer + position: absolute + z-index: 2 + right: 0 + top: 0 + margin-top: $x-small-offset + border-radius: $border-radius + height: $icon-width + width: $icon-height </style> <script>
--- a/client/src/systemconfiguration/systemconfiguration.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/systemconfiguration/systemconfiguration.vue Fri Nov 16 14:37:07 2018 +0100 @@ -21,28 +21,27 @@ </div> </template> -<style scoped lang="scss"> -.config { - text-align: left; -} -.configsection { - margin-bottom: $large-offset; -} -.sendbutton { - position: absolute; - right: $offset; - bottom: $offset; -} -.inputs { - margin-left: auto; - margin-right: auto; -} -.sysconfig { - margin-top: $offset; - margin-left: auto; - margin-right: auto; - width: 30vw; -} +<style scoped lang="sass"> +.config + text-align: left + +.configsection + margin-bottom: $large-offset + +.sendbutton + position: absolute + right: $offset + bottom: $offset + +.inputs + margin-left: auto + margin-right: auto + +.sysconfig + margin-top: $offset + margin-left: auto + margin-right: auto + width: 30vw </style> <script>
--- a/client/src/usermanagement/Userdetail.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/usermanagement/Userdetail.vue Fri Nov 16 14:37:07 2018 +0100 @@ -70,25 +70,22 @@ </div> </template> -<style lang="scss" scoped> -.mailbutton { - width: 12vw; -} -.formfields { - width: 10vw; -} +<style lang="sass" scoped> +.mailbutton + width: 12vw + +.formfields + width: 10vw -.userdetails { - margin-top: $offset; - min-width: 40vw; - margin-right: auto; - height: 100%; -} +.userdetails + margin-top: $offset + min-width: 40vw + margin-right: auto + height: 100% -form { - margin-left: $offset; - font-size: $smaller; -} +form + margin-left: $offset + font-size: $smaller </style> <script>
--- a/client/src/usermanagement/Usermanagement.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/usermanagement/Usermanagement.vue Fri Nov 16 14:37:07 2018 +0100 @@ -70,110 +70,88 @@ </div> </template> -<style scoped lang="scss"> -@import "../application/assets/tooltip.scss"; +<style scoped lang="sass"> +@import "../application/assets/tooltip.scss" -.spacer { - margin-left: $offset; - height: 100vh; -} +.spacer + margin-left: $offset + height: 100vh -.spacer-collapsed { - min-width: $icon-width + $offset; - transition: $transition-fast; -} +.spacer-collapsed + min-width: $icon-width + $offset + transition: $transition-fast -@media screen and (min-width: 600px) { - .spacer-expanded { - min-width: $icon-width + $offset; - } -} -@media screen and (max-width: 1650px) { - .spacer-expanded { - min-width: $sidebar-width + $offset; - } -} +@media screen and (min-width: 600px) + .spacer-expanded + min-width: $icon-width + $offset + +@media screen and (max-width: 1650px) + .spacer-expanded + min-width: $sidebar-width + $offset -.main { - height: 100vh; -} +.main + height: 100vh -.backwards { - margin-right: $small-offset; -} +.backwards + margin-right: $small-offset -.forwards { - margin-left: $small-offset; -} +.forwards + margin-left: $small-offset -@media screen and (min-width: 600px) { - .content { - margin-left: $offset; - margin-right: auto; - } -} +@media screen and (min-width: 600px) + .content + margin-left: $offset + margin-right: auto -@media screen and (min-width: 1650px) { - .content { - margin-left: $sidebar-width; - margin-right: auto; - } -} +@media screen and (min-width: 1650px) + .content + margin-left: $sidebar-width + margin-right: auto -.adduser { - margin-right: $offset; - padding-bottom: $offset; -} +.adduser + margin-right: $offset + padding-bottom: $offset -.icon { - font-size: large; -} +.icon + font-size: large -.userlist { - margin-top: $offset; - margin-right: $offset; - min-width: 520px; - height: 100%; -} +.userlist + margin-top: $offset + margin-right: $offset + min-width: 520px + height: 100% + +.pagination + margin-left: auto + margin-right: auto -.pagination { - margin-left: auto; - margin-right: auto; -} -.userlistsmall { - width: 30vw; -} +.userlistsmall + width: 30vw -.userlistextended { - width: 70vw; -} +.userlistextended + width: 70vw -.table { - width: 90% !important; - margin: auto; -} +.table + width: 90% !important + margin: auto .table th, -.pages { - cursor: pointer; -} +.pages + cursor: pointer .table th, -td { - font-size: $smaller; - border-top: 0px !important; - text-align: left; - padding: $small-offset !important; -} +td + font-size: $smaller + border-top: 0px !important + text-align: left + padding: $small-offset !important -.table td { - font-size: $smaller; - cursor: pointer; -} +.table td + font-size: $smaller + cursor: pointer -tr span { - display: flex; -} +tr span + display: flex </style> <script>
--- a/client/src/usermanagement/Users.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/usermanagement/Users.vue Fri Nov 16 14:37:07 2018 +0100 @@ -69,80 +69,67 @@ </div> </template> -<style lang="scss" scoped> -@import "../application/assets/tooltip.scss"; -.main { - height: 100vh; -} +<style lang="sass" scoped> +@import "../application/assets/tooltip.scss" -.backwards { - margin-right: 0.5rem; -} +.main + height: 100vh + +.backwards + margin-right: 0.5rem -.forwards { - margin-left: 0.5rem; -} +.forwards + margin-left: 0.5rem -.content { - margin-top: $large-offset; - margin-left: auto; - margin-right: auto; -} +.content + margin-top: $large-offset + margin-left: auto + margin-right: auto -.adduser { - margin-right: $offset; - padding-bottom: $offset; -} +.adduser + margin-right: $offset + padding-bottom: $offset -.icon { - font-size: large; -} +.icon + font-size: large -.userlist { - margin-top: $topbarheight; - margin-right: $offset; - min-width: 520px; - height: 100%; -} +.userlist + margin-top: $topbarheight + margin-right: $offset + min-width: 520px + height: 100% -.pagination { - margin-left: auto; - margin-right: auto; -} -.userlistsmall { - width: 30vw; -} +.pagination + margin-left: auto + margin-right: auto + +.userlistsmall + width: 30vw -.userlistextended { - width: 70vw; -} +.userlistextended + width: 70vw -.table { - width: 90% !important; - margin: auto; -} +.table + width: 90% !important + margin: auto .table th, -.pages { - cursor: pointer; -} +.pages + cursor: pointer .table th, -td { - font-size: 0.9rem; - border-top: 0px !important; - text-align: left; - padding: 0.5rem !important; -} +td + font-size: 0.9rem + border-top: 0px !important + text-align: left + padding: 0.5rem !important -.table td { - font-size: 0.9rem; - cursor: pointer; -} +.table td + font-size: 0.9rem + cursor: pointer -tr span { - display: flex; -} +tr span + display: flex </style> <script>
--- a/client/src/zoom/zoom.vue Fri Nov 16 12:15:51 2018 +0100 +++ b/client/src/zoom/zoom.vue Fri Nov 16 14:37:07 2018 +0100 @@ -9,23 +9,22 @@ </div> </template> -<style lang="scss" 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 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";
--- a/client/vue.config.js Fri Nov 16 12:15:51 2018 +0100 +++ b/client/vue.config.js Fri Nov 16 14:37:07 2018 +0100 @@ -28,8 +28,7 @@ // pass options to sass-loader sass: { // @/ is an alias to src/ - // so this assumes you have a file named `src/variables.scss` - data: `@import "@/application/assets/application.scss";` + data: `@import "@/application/assets/application.sass";` } } },