From f1f10f6897b811a44e570a629b21b23aa00951fa Mon Sep 17 00:00:00 2001 From: Matt Saladna Date: Sun, 11 Apr 2021 05:46:23 +0100 Subject: [PATCH] Sorting indicators --- package.json | 6 +- scss/apnscp/_icons-actions.scss | 8 + scss/apnscp/_layout.scss | 5 + scss/apnscp/_tour.scss | 375 ++++++++++++++++++++++++++++++++ scss/apnscp/apnscp.scss | 3 +- 5 files changed, 393 insertions(+), 4 deletions(-) create mode 100644 scss/apnscp/_tour.scss diff --git a/package.json b/package.json index 8fff7a1..2cc6312 100644 --- a/package.json +++ b/package.json @@ -63,10 +63,10 @@ "shx": "^0.2.1", "svgo": "^1.3.2", "time-grunt": "^1.4.0", - "webpack-dev-server": "^3.1" + "webpack-dev-server": "^3.11.2" }, "engines": { - "node": ">=4" + "node": "12" }, "files": [ "dist", @@ -74,5 +74,5 @@ "scss/**/*.scss", "Gruntfile.js", "LICENSE" - ] + ], } diff --git a/scss/apnscp/_icons-actions.scss b/scss/apnscp/_icons-actions.scss index e8d344b..e512862 100644 --- a/scss/apnscp/_icons-actions.scss +++ b/scss/apnscp/_icons-actions.scss @@ -346,4 +346,12 @@ .ui-action-revert-login { @extend .fa-users; +} + +.ui-action-sort-desc, .ui-action-sort { + @extend .fa-sort-amount-desc; +} + +.ui-action-sort-asc { + @extend .fa-sort-amount-asc; } \ No newline at end of file diff --git a/scss/apnscp/_layout.scss b/scss/apnscp/_layout.scss index 4aaf7fa..ab8c075 100644 --- a/scss/apnscp/_layout.scss +++ b/scss/apnscp/_layout.scss @@ -790,4 +790,9 @@ a[rel=external]:after { vertical-align: middle; font-size: 0.75em; margin-left: 0.35em; +} + +[role=button] { + cursor: pointer; + user-select: none; } \ No newline at end of file diff --git a/scss/apnscp/_tour.scss b/scss/apnscp/_tour.scss new file mode 100644 index 0000000..8cba3d4 --- /dev/null +++ b/scss/apnscp/_tour.scss @@ -0,0 +1,375 @@ +/* + Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ + Changed by Afshin Mehrabani +*/ +/* overrides extra padding on button elements in Firefox */ + +@keyframes introjspulse { + 0% { + transform: scale(0); + opacity: 0; + } + 25% { + transform: scale(0); + opacity: 0.1; + } + 50% { + transform: scale(0.1); + opacity: 0.3; + } + 75% { + transform: scale(0.5); + opacity: 0.5; + } + 100% { + transform: scale(1); + opacity: 0; + } +} + +.introjs-overlay { + position: absolute; + box-sizing: content-box; + z-index: 999999; + opacity: 0; + transition: all 0.3s ease-out; +} + +.introjs-showElement { + z-index: 9999999 !important; +} + +tr.introjs-showElement { + > td { + z-index: 9999999 !important; + position: relative; + } + + > th { + z-index: 9999999 !important; + position: relative; + } +} + +.introjs-disableInteraction { + z-index: 99999999 !important; + position: absolute; + background-color: $body-bg; + opacity: 0; + filter: alpha(opacity=0); +} + +.introjs-relativePosition { + position: relative; +} + +.introjs-helperLayer { + box-sizing: content-box; + position: absolute; + z-index: 9999998; + border-radius: 4px; + transition: all 0.3s ease-out; + + * { + box-sizing: content-box; + + &:before { + box-sizing: content-box; + } + + &:after { + box-sizing: content-box; + } + } +} + +.introjs-tooltipReferenceLayer { + font-family: $font-family-base; + box-sizing: content-box; + position: absolute; + visibility: hidden; + z-index: 100000000; + background-color: transparent; + transition: all 0.3s ease-out; + + * { + font-family: $font-family-base; + } +} + +.introjs-helperNumberLayer { + font-family: $font-family-base; + color: $gray; + text-align: center; + padding-top: 10px; + padding-bottom: 10px; +} + +.introjs-arrow { + border: 5px solid transparent; + content: ""; + position: absolute; +} + +.introjs-arrow.top { + top: -10px; + left: 10px; + border-bottom-color: $white; +} + +.introjs-arrow.top-right { + top: -10px; + right: 10px; + border-bottom-color: $white; +} + +.introjs-arrow.top-middle { + top: -10px; + left: 50%; + margin-left: -5px; + border-bottom-color: $white; +} + +.introjs-arrow.right { + right: -10px; + top: 10px; + border-left-color: $white; +} + +.introjs-arrow.right-bottom { + bottom: 10px; + right: -10px; + border-left-color: $white; +} + +.introjs-arrow.bottom { + bottom: -10px; + left: 10px; + border-top-color: $white; +} + +.introjs-arrow.bottom-right { + bottom: -10px; + right: 10px; + border-top-color: $white; +} + +.introjs-arrow.bottom-middle { + bottom: -10px; + left: 50%; + margin-left: -5px; + border-top-color: $white; +} + +.introjs-arrow.left { + left: -10px; + top: 10px; + border-right-color: $white; +} + +.introjs-arrow.left-bottom { + left: -10px; + bottom: 10px; + border-right-color: $white; +} + +.introjs-tooltip { + box-sizing: content-box; + position: absolute; + visibility: visible; + background-color: $body-bg; + min-width: 250px; + max-width: 300px; + border-radius: 5px; + box-shadow: 0 3px 30px rgba($gray-dark, 0.3); + transition: opacity 0.1s ease-out; +} + +.introjs-tooltiptext { + padding: 20px; +} + +.introjs-tooltip-title { + font-size: 18px; + margin: 0; + padding: 0; + font-weight: 700; + float: left; + line-height: 32px; +} + +.introjs-tooltip-header { + @extend .modal-header; + @extend .clearfix; +} + +.introjs-tooltipbuttons { + white-space: nowrap; + @extend .modal-footer; + @extend .clearfix; +} + +.introjs-skipbutton { + text-decoration: none; + margin-left: auto; + @extend .close; +} + +.introjs-prevbutton { + @extend .btn-secondary; + float: left; + margin-right: auto !important; +} + +.introjs-nextbutton { + @extend .btn-primary; + float: right; +} + +.introjs-disabled { + @extend .disabled; +} + +.introjs-hidden { + display: none; +} + +.introjs-bullets { + text-align: center; + padding-top: 10px; + padding-bottom: 10px; + + ul { + box-sizing: content-box; + clear: both; + margin: 0 auto 0; + padding: 0; + display: inline-block; + + li { + box-sizing: content-box; + list-style: none; + float: left; + margin: 0 2px; + + a { + transition: width 0.1s ease-in; + box-sizing: content-box; + display: block; + width: 6px; + height: 6px; + background: #ccc; + border-radius: 10px; + text-decoration: none; + cursor: pointer; + + &:hover, + &:focus { + width: 15px; + background: #999; + text-decoration: none; + outline: none; + } + } + + a.active { + width: 15px; + background: #999; + } + } + } +} + +.introjs-progress { + box-sizing: content-box; + overflow: hidden; + height: 10px; + margin: 10px; + border-radius: 4px; + background-color: $body-bg; +} + +.introjs-progressbar { + box-sizing: content-box; + float: left; + width: 0%; + height: 100%; + font-size: 10px; + line-height: 10px; + text-align: center; + background-color: $brand-primary; +} + +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; +} + +.introjs-fixedTooltip { + position: fixed; +} + +.introjs-hint { + box-sizing: content-box; + position: absolute; + background: transparent; + width: 20px; + height: 15px; + cursor: pointer; + + &:focus { + border: 0; + outline: 0; + } + + &:hover { + > .introjs-hint-pulse { + border: 5px solid rgba(60, 60, 60, 0.57); + } + } +} + +.introjs-hidehint { + display: none; +} + +.introjs-fixedhint { + position: fixed; +} + +.introjs-hint-pulse { + box-sizing: content-box; + width: 10px; + height: 10px; + border: 5px solid rgba(60, 60, 60, 0.27); + border-radius: 30px; + background-color: $brand-secondary; + z-index: 10; + position: absolute; + transition: all 0.2s ease-out; +} + +.introjs-hint-no-anim { + .introjs-hint-dot { + animation: none; + } +} + +.introjs-hint-dot { + box-sizing: content-box; + border: 10px solid rgba(146, 146, 146, 0.36); + background: transparent; + border-radius: 60px; + height: 50px; + width: 50px; + animation: introjspulse 3s ease-out; + animation-iteration-count: infinite; + position: absolute; + top: -25px; + left: -25px; + z-index: 1; + opacity: 0; +} \ No newline at end of file diff --git a/scss/apnscp/apnscp.scss b/scss/apnscp/apnscp.scss index b859da5..08da8a8 100644 --- a/scss/apnscp/apnscp.scss +++ b/scss/apnscp/apnscp.scss @@ -27,6 +27,7 @@ @import "bootstrap-overrides"; @import "application-overrides"; +@import "tour"; @import "apps/login"; @import "apps/dashboard"; @@ -36,4 +37,4 @@ @import "apps/usermanage"; @import "apps/useredit"; @import "apps/error"; -@import "apps/majordomo"; \ No newline at end of file +@import "apps/majordomo";