Mercurial > gemma

changeset 1448:ef388dcbb946

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>
--- a/client/vue.config.js	Fri Nov 30 18:00:05 2018 +0100
+++ b/client/vue.config.js	Mon Dec 03 09:28:28 2018 +0100
@@ -28,7 +28,7 @@
       // pass options to sass-loader
       sass: {
         // @/ is an alias to src/
-        data: `@import "@/assets/application.sass";`
+        data: `@import "@/assets/application.scss";`
       }
     }
   },