Mercurial > gemma
changeset 1448:ef388dcbb946
refac: reverting unecessary port from scss to sass
Rationale: Although sass might be easier on the eyes because of
lesser curly braces the tooling (autoformat, completion, error highlighting etc)
is much more elaborate for scss.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 03 Dec 2018 09:28:28 +0100 |
parents | 6f2219d942d6 |
children | bb47531bdd22 73b49efeb544 |
files | client/src/assets/application.sass client/src/assets/application.scss client/src/assets/tooltip.sass client/src/assets/tooltip.scss client/src/components/admin/usermanagement/Usermanagement.vue client/vue.config.js |
diffstat | 6 files changed, 291 insertions(+), 248 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.sass Fri Nov 30 18:00:05 2018 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,91 +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> - * Markus Kottländer <markus.kottlaender@intevation> - */ - -$shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2) -$border-radius: 0.25rem -$icon-height: 2rem -$icon-width: 2rem -$large-offset: 2rem -$offset: 1rem -$sidebar-width: 15rem -$slight-transparent: 0.96 -$small-offset: 0.5rem -$smaller: 0.9rem -$transition-fast: 0.3s -$x-large-offset: 3rem -$xx-large-offset: 5rem -$color-info: #17a2b8 - -a - color: $color-info - &:hover, - &:active, - &:focus - color: darken($color-info, 13) - -.w-90 - width: 90% - -.w-95 - width: 95% - -.debug - border: 1px solid red - -%fully-centered - position: absolute - top: 50% - left: 50% - transform: translate(-50%, -50%) - -.ui-element - pointer-events: auto - -.shadow-xs - box-shadow: $shadow-xs - -.box - opacity: $slight-transparent - max-height: 0 - max-width: 0 - overflow: hidden - margin-left: 0 - margin-right: 0 - margin-bottom: 0 - box-shadow: $shadow-xs - transition: max-width .4s, max-height .4s, margin-left .4s, margin-right .4s, margin-bottom .4s - -.box h6, -.contextbox h6 - color: $color-info - font-weight: bold - -.expanded - max-height: 999px - max-width: 999px - margin-left: 0.5rem - margin-right: 0.5rem - margin-bottom: 1rem - -// needed to fix the whitespace problem of -// https://github.com/Polyconseil/vue-gettext/issues/80 -// use like -// <a href="..">link</a> -// <span v-translate class="fix-trans-space">contributors.</span> -// -// done centrally, so we can fix it centrally for better vue-gettext version -.fix-trans-space - &:before - content: " "
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/assets/application.scss Mon Dec 03 09:28:28 2018 +0100 @@ -0,0 +1,105 @@ +/* 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> + * Markus Kottländer <markus.kottlaender@intevation> + */ + +$shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); +$border-radius: 0.25rem; +$icon-height: 2rem; +$icon-width: 2rem; +$large-offset: 2rem; +$offset: 1rem; +$sidebar-width: 15rem; +$slight-transparent: 0.96; +$small-offset: 0.5rem; +$smaller: 0.9rem; +$transition-fast: 0.3s; +$x-large-offset: 3rem; +$xx-large-offset: 5rem; +$color-info: #17a2b8; + +a { + color: $color-info; +} + +a:hover, +a:active, +a:focus { + color: darken($color-info, 13); +} + +.w-90 { + width: 90%; +} + +.w-95 { + width: 95%; +} + +.debug { + border: 1px solid red; +} + +%fully-centered { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.ui-element { + pointer-events: auto; +} + +.shadow-xs { + box-shadow: $shadow-xs; +} + +.box { + opacity: $slight-transparent; + max-height: 0; + max-width: 0; + overflow: hidden; + margin-left: 0; + margin-right: 0; + margin-bottom: 0; + box-shadow: $shadow-xs; + transition: max-width 0.4s, max-height 0.4s, margin-left 0.4s, + margin-right 0.4s, margin-bottom 0.4s; +} + +.box h6, +.contextbox h6 { + color: $color-info; + font-weight: bold; +} + +.expanded { + max-height: 999px; + max-width: 999px; + margin-left: 0.5rem; + margin-right: 0.5rem; + margin-bottom: 1rem; +} + +// needed to fix the whitespace problem of +// https://github.com/Polyconseil/vue-gettext/issues/80; +// use like +// <a href="..">link</a> +// <span v-translate class="fix-trans-space">contributors.</span> +// +// done centrally, so we can fix it centrally for better vue-gettext version +.fix-trans-space, +.fix-trans-space:before { + content: " "; +}
--- a/client/src/assets/tooltip.sass Fri Nov 30 18:00:05 2018 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,106 +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> - */ -.tooltip - display: block !important - z-index: 10000 - - .tooltip-inner - background: black - color: white - border-radius: 16px - padding: 5px 10px 4px - - .tooltip-arrow - width: 0 - height: 0 - border-style: solid - position: absolute - margin: 5px - border-color: black - z-index: 1 - - &[x-placement^="top"] - margin-bottom: 5px - - .tooltip-arrow - border-width: 5px 5px 0 5px - border-left-color: transparent !important - border-right-color: transparent !important - border-bottom-color: transparent !important - bottom: -5px - left: calc(50% - 5px) - margin-top: 0 - margin-bottom: 0 - - &[x-placement^="bottom"] - margin-top: 5px - - .tooltip-arrow - border-width: 0 5px 5px 5px - border-left-color: transparent !important - border-right-color: transparent !important - border-top-color: transparent !important - top: -5px - left: calc(50% - 5px) - margin-top: 0 - margin-bottom: 0 - - &[x-placement^="right"] - margin-left: 5px - - .tooltip-arrow - border-width: 5px 5px 5px 0 - border-left-color: transparent !important - border-top-color: transparent !important - border-bottom-color: transparent !important - left: -5px - top: calc(50% - 5px) - margin-left: 0 - margin-right: 0 - - &[x-placement^="left"] - margin-right: 5px - - .tooltip-arrow - border-width: 5px 0 5px 5px - border-top-color: transparent !important - border-right-color: transparent !important - border-bottom-color: transparent !important - right: -5px - top: calc(50% - 5px) - margin-left: 0 - margin-right: 0 - - &.popover - $color: #f9f9f9 - - .popover-inner - background: $color - color: black - padding: 24px - border-radius: 5px - box-shadow: 0 5px 30px rgba(black, 0.1) - - .popover-arrow - border-color: $color - - &[aria-hidden="true"] - visibility: hidden - opacity: 0 - transition: opacity 0.15s, visibility 0.15s - - &[aria-hidden="false"] - visibility: visible - opacity: 1 - transition: opacity 0.15s
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/assets/tooltip.scss Mon Dec 03 09:28:28 2018 +0100 @@ -0,0 +1,118 @@ +/* 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> + */ +.tooltip { + display: block !important; + z-index: 10000; +} + +.tooltip .tooltip-inner { + background: black; + color: white; + border-radius: 16px; + padding: 5px 10px 4px; +} + +.tooltip .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: black; + z-index: 1; +} + +.tooltip[x-placement^="top"] { + margin-bottom: 5px; +} + +.tooltip[x-placement^="top"] .tooltip-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; +} + +.tooltip[x-placement^="bottom"] { + margin-top: 5px; +} + +.tooltip[x-placement^="bottom"] .tooltip-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; +} + +.tooltip[x-placement^="right"] { + margin-left: 5px; +} + +.tooltip[x-placement^="right"] .tooltip-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + left: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; +} + +.tooltip[x-placement^="left"] { + margin-right: 5px; +} + +.tooltip[x-placement^="left"] .tooltip-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + right: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; +} + +.tooltip.popover .popover-inner { + background: #f9f9f9; + color: black; + padding: 24px; + border-radius: 5px; + box-shadow: 0 5px 30px rgba(black, 0.1); +} + +.tooltip.popover .popover-arrow { + border-color: #f9f9f9; +} + +.tooltip[aria-hidden="true"] { + visibility: hidden; + opacity: 0; + transition: opacity 0.15s, visibility 0.15s; +} + +.tooltip[aria-hidden="false"] { + visibility: visible; + opacity: 1; + transition: opacity 0.15s; +}
--- a/client/src/components/admin/usermanagement/Usermanagement.vue Fri Nov 30 18:00:05 2018 +0100 +++ b/client/src/components/admin/usermanagement/Usermanagement.vue Mon Dec 03 09:28:28 2018 +0100 @@ -80,70 +80,87 @@ </div> </template> -<style scoped lang="sass"> -@import "../../../assets/tooltip.sass" +<style scoped lang="scss"> +@import "../../../assets/tooltip.scss"; -.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; +} -@media screen and (min-width: 600px) - .spacer-expanded - min-width: $icon-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; + } +} -@media screen and (max-width: 1650px) - .spacer-expanded - min-width: $sidebar-width + $offset - -.main - height: 100vh +.main { + height: 100vh; +} -@media screen and (min-width: 600px) - .content - margin-left: $sidebar-width - margin-right: auto - -@media screen and (min-width: 1650px) - .content - margin-left: $sidebar-width - margin-right: auto - -.icon - font-size: large +@media screen and (min-width: 600px) { + .content { + margin-left: $sidebar-width; + margin-right: auto; + } +} +@media screen and (min-width: 1650px) { + .content { + margin-left: $sidebar-width; + margin-right: auto; + } +} +.icon { + font-size: large; +} -.userlist - min-width: 520px - height: 100% +.userlist { + min-width: 520px; + height: 100%; +} -.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 - cursor: pointer +.table th { + 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>