From da6902e2100ccd33f064d44e21ea39e92b8b550c Mon Sep 17 00:00:00 2001 From: Levdbas-L Date: Sat, 7 Oct 2017 09:07:36 +0200 Subject: [PATCH 1/2] scss refactoring --- admin/css/partials/_settingPages.scss | 53 ++++++ admin/css/partials/_themes.scss | 50 ++++++ admin/css/partials/_variables.scss | 6 + admin/css/partials/_widget.scss | 112 ++++++++++++ admin/css/partials/_workTable.scss | 21 +++ admin/css/support-hours-admin.scss | 246 +------------------------- admin/js/support-hours-admin.js | 3 +- 7 files changed, 248 insertions(+), 243 deletions(-) create mode 100644 admin/css/partials/_settingPages.scss create mode 100644 admin/css/partials/_themes.scss create mode 100644 admin/css/partials/_variables.scss create mode 100644 admin/css/partials/_widget.scss create mode 100644 admin/css/partials/_workTable.scss diff --git a/admin/css/partials/_settingPages.scss b/admin/css/partials/_settingPages.scss new file mode 100644 index 0000000..1f999cb --- /dev/null +++ b/admin/css/partials/_settingPages.scss @@ -0,0 +1,53 @@ +.rwd-table { + margin: 1em 0; + min-width: 300px; + + tr { + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + } + th { + display: none; + } + td { + display: block; + &:first-child { + padding-top: .5em; + } + &:last-child { + padding-bottom: .5em; + } + &.remove:before{ + content:''; + width: 0; + } + &:before { + content: attr(data-th)": "; + font-weight: bold; + width: 6.5em; + display: inline-block; + @media (min-width: $breakpoint-alpha) { + display: none; + } + } + } + th, td { + text-align: left; + @media (min-width: $breakpoint-alpha) { + display: table-cell; + padding: .25em .5em; + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + } + } + } +} +.clearfix{ + clear:both; +} +.currentDate{ + display: none; +} diff --git a/admin/css/partials/_themes.scss b/admin/css/partials/_themes.scss new file mode 100644 index 0000000..27ebfd1 --- /dev/null +++ b/admin/css/partials/_themes.scss @@ -0,0 +1,50 @@ +.progress-bar{ + &.midnight { + .rotate, .right{ + background-color:#e14d43; + } + .innerCicle:hover .text{ + color:#e14d43; + } + } + &.ectoplasm { + .rotate, .right{ + background-color:#a3b745; + } + .innerCicle:hover .text{ + color:#a3b745; + } + } + &.blue { + .rotate, .right{ + background-color:#e1a948; + } + .innerCicle:hover .text{ + color:#e1a948; + } + } + &.ocean { + .rotate, .right{ + background-color:#9ebaa0; + } + .innerCicle:hover .text{ + color:#9ebaa0; + } + } + &.coffee { + .rotate, .right{ + background-color:#c7a589; + } + .innerCicle:hover .text{ + color:#c7a589; + } + } + &.sunrise { + .rotate, .right{ + background-color:#dd823b; + } + .innerCicle:hover .text{ + color:#dd823b; + } + } +} diff --git a/admin/css/partials/_variables.scss b/admin/css/partials/_variables.scss new file mode 100644 index 0000000..617a604 --- /dev/null +++ b/admin/css/partials/_variables.scss @@ -0,0 +1,6 @@ +$circle-size: 400px; +$background-color: #cccccc; +$progress-color: #008ec2; +$percent: 75; +$duration: 2s; +$breakpoint-alpha: 480px; diff --git a/admin/css/partials/_widget.scss b/admin/css/partials/_widget.scss new file mode 100644 index 0000000..a5913fb --- /dev/null +++ b/admin/css/partials/_widget.scss @@ -0,0 +1,112 @@ +#support_hours_dashboard_widget{ + h3{ + margin: 1.33em 0 0; + font-size: 16px; + font-weight: bold; + } +} +.progress-bar { + position: relative; + width:100%; + padding-bottom: 100%; + .background{ + background-color: $background-color; + } + .left{ + background-color: $background-color; + opacity: 1; + } + .rotate{ + background-color: $progress-color; + } + .right{ + background-color: $progress-color; + transform: rotate(180deg); + opacity: 0; + } +div { + border-radius: 50%; + height: 100%; + position: absolute; + width: 100%; + } + .smallbr{ + display: none; + } +} +.innerCicle{ + width: 90%; + height: 90%; + margin: 5%; + position: absolute; + z-index: 12; + border-radius: 50%; + background: white; + transition: all 0.2s ease-in; + .textHolder{ + display: block; + top: 50%; + position: relative; + .text{ + text-align: center; + display: block; + color:$background-color; + font-weight: bold; + margin-top: -50px; + font-size: 35px; + transition: all 0.2s ease-in; + line-height: 50px; + position: absolute; + width: 100%; + &.small{ + margin-top: -50px; + line-height: 50px; + font-size: 30px; + } + } + } + &:hover{ + width: 94%; + height: 94%; + margin: 3%; + .text{ + font-size: 45px; + color:$progress-color; + &.small{ + font-size: 35px; + } + } + } +} + +@keyframes toggle { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@media screen and (max-width: 870px) { + .smallbr { + display: block; + } + + .bigbr { + display: none; + } + + + .text { + font-size: 30px; + line-height: 40px; + margin-top: -40px; + } + + .progress-bar:hover .text { + font-size: 40px; + } +} +@media screen and (max-width: 800px) { + .progress-bar { + max-width:none; + max-height:none; + } +} diff --git a/admin/css/partials/_workTable.scss b/admin/css/partials/_workTable.scss new file mode 100644 index 0000000..970b168 --- /dev/null +++ b/admin/css/partials/_workTable.scss @@ -0,0 +1,21 @@ +.bold{ + font-weight: bold; + color:#444; +} +.worktable{ + margin-top: 20px; + padding-bottom: 10px; + margin-bottom: 10px; + th{ + text-align: left; + } +} +.total{ + border-top: 1px solid #eee; + border-bottom: 1px solid #eee; + margin: 0 -12px; + margin-top: 10px; + padding: 8px 12px 4px; + font-size: 1rem; + background:#fafafa; +} diff --git a/admin/css/support-hours-admin.scss b/admin/css/support-hours-admin.scss index d69d67e..ca96e8b 100644 --- a/admin/css/support-hours-admin.scss +++ b/admin/css/support-hours-admin.scss @@ -1,242 +1,6 @@ /* */ -$circle-size: 400px; -$background-color: #cccccc; -$progress-color: #008ec2; -$percent: 75; -$duration: 2s; -$breakpoint-alpha: 480px; - -.progress-bar { - position: relative; - width:100%; - padding-bottom: 100%; - .background{ - background-color: $background-color; - } - .left{ - background-color: $background-color; - opacity: 1; - } - &.midnight { - .rotate, .right{ - background-color:#e14d43; - } - .innerCicle:hover .text{ - color:#e14d43; - } - } - &.ectoplasm { - .rotate, .right{ - background-color:#a3b745; - } - .innerCicle:hover .text{ - color:#a3b745; - } - } - &.blue { - .rotate, .right{ - background-color:#e1a948; - } - .innerCicle:hover .text{ - color:#e1a948; - } - } - &.ocean { - .rotate, .right{ - background-color:#9ebaa0; - } - .innerCicle:hover .text{ - color:#9ebaa0; - } - } - &.coffee { - .rotate, .right{ - background-color:#c7a589; - } - .innerCicle:hover .text{ - color:#c7a589; - } - } - &.sunrise { - .rotate, .right{ - background-color:#dd823b; - } - .innerCicle:hover .text{ - color:#dd823b; - } - } - .rotate{ - background-color: $progress-color; - } - .right{ - background-color: $progress-color; - transform: rotate(180deg); - opacity: 0; - } - .innerCicle{ - width: 90%; - height: 90%; - margin: 5%; - position: absolute; - z-index: 12; - border-radius: 50%; - background: white; - transition: all 0.2s ease-in; - .textHolder{ - display: block; - top: 50%; - position: relative; - .text{ - text-align: center; - display: block; - color:$background-color; - font-weight: bold; - margin-top: -50px; - font-size: 35px; - transition: all 0.2s ease-in; - line-height: 50px; - position: absolute; - width: 100%; - &.small{ - margin-top: -50px; - line-height: 50px; - font-size: 30px; - } - } - } - &:hover{ - width: 94%; - height: 94%; - margin: 3%; - .text{ - font-size: 45px; - color:$progress-color; - &.small{ - font-size: 35px; - } - } - } - } - div { - border-radius: 50%; - height: 100%; - position: absolute; - width: 100%; - } - .smallbr{ - display: none; - } -} -@keyframes toggle { - 0% { opacity: 0; } - 100% { opacity: 1; } -} - -@media screen and (max-width: 870px) { - .smallbr { - display: block; - } - - .bigbr { - display: none; - } - - - .text { - font-size: 30px; - line-height: 40px; - margin-top: -40px; - } - - .progress-bar:hover .text { - font-size: 40px; - } -} -@media screen and (max-width: 800px) { - .progress-bar { - max-width:none; - max-height:none; - } -} -#support_hours_dashboard_widget{ - h3{ - margin: 1.33em 0 0; - font-size: 16px; - font-weight: bold; - } -} -.bold{ - font-weight: bold; - color:#444; -} -.worktable{ - margin-top: 20px; - padding-bottom: 10px; - margin-bottom: 10px; - th{ - text-align: left; - } -} -.total{ - border-top: 1px solid #eee; - border-bottom: 1px solid #eee; - margin: 0 -12px; - margin-top: 10px; - padding: 8px 12px 4px; - font-size: 1rem; - background:#fafafa; -} -.currentDate{ - display: none; -} - -.rwd-table { - margin: 1em 0; - min-width: 300px; - - tr { - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; - } - th { - display: none; - } - td { - display: block; - &:first-child { - padding-top: .5em; - } - &:last-child { - padding-bottom: .5em; - } - &.remove:before{ - content:''; - width: 0; - } - &:before { - content: attr(data-th)": "; // who knew you could do this? The internet, that's who. - font-weight: bold; - width: 6.5em; - display: inline-block; - @media (min-width: $breakpoint-alpha) { - display: none; - } - } - } - th, td { - text-align: left; - @media (min-width: $breakpoint-alpha) { - display: table-cell; - padding: .25em .5em; - &:first-child { - padding-left: 0; - } - &:last-child { - padding-right: 0; - } - } - } -} -.clearfix{ - clear:both; -} +@import "partials/variables"; +@import "partials/widget"; +@import "partials/worktable"; +@import "partials/themes"; +@import "partials/settingsPage"; diff --git a/admin/js/support-hours-admin.js b/admin/js/support-hours-admin.js index 56a58a7..07e74f0 100644 --- a/admin/js/support-hours-admin.js +++ b/admin/js/support-hours-admin.js @@ -1,6 +1,6 @@ (function($) { $( document ).ready(function() { - + // for each .progress-bar element, start setting up the time circle. Manages the css transitions etc. $(".progress-bar").each(function () { var $target = $(this); var opts = { @@ -16,7 +16,6 @@ 'clip': 'rect(0px, ' + halfCircleWidth +'px, ' + circleWidth +'px, 0px)' }); - var $rotate = $target.find('.rotate'); setTimeout(function () { $rotate.css({ From 62903f6ab8280ba963ea6e941fff6a5936c88373 Mon Sep 17 00:00:00 2001 From: Levdbas-L Date: Sat, 7 Oct 2017 19:06:26 +0200 Subject: [PATCH 2/2] renamed some files --- admin/css/partials/{_settingPages.scss => _settingsPage.scss} | 0 admin/css/support-hours-admin.min.css | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename admin/css/partials/{_settingPages.scss => _settingsPage.scss} (100%) diff --git a/admin/css/partials/_settingPages.scss b/admin/css/partials/_settingsPage.scss similarity index 100% rename from admin/css/partials/_settingPages.scss rename to admin/css/partials/_settingsPage.scss diff --git a/admin/css/support-hours-admin.min.css b/admin/css/support-hours-admin.min.css index 0f344e6..054f9df 100644 --- a/admin/css/support-hours-admin.min.css +++ b/admin/css/support-hours-admin.min.css @@ -1 +1 @@ -.progress-bar{position:relative;width:100%;padding-bottom:100%}.progress-bar .background{background-color:#ccc}.progress-bar .left{background-color:#ccc;opacity:1}.progress-bar.midnight .rotate,.progress-bar.midnight .right{background-color:#e14d43}.progress-bar.midnight .innerCicle:hover .text{color:#e14d43}.progress-bar.ectoplasm .rotate,.progress-bar.ectoplasm .right{background-color:#a3b745}.progress-bar.ectoplasm .innerCicle:hover .text{color:#a3b745}.progress-bar.blue .rotate,.progress-bar.blue .right{background-color:#e1a948}.progress-bar.blue .innerCicle:hover .text{color:#e1a948}.progress-bar.ocean .rotate,.progress-bar.ocean .right{background-color:#9ebaa0}.progress-bar.ocean .innerCicle:hover .text{color:#9ebaa0}.progress-bar.coffee .rotate,.progress-bar.coffee .right{background-color:#c7a589}.progress-bar.coffee .innerCicle:hover .text{color:#c7a589}.progress-bar.sunrise .rotate,.progress-bar.sunrise .right{background-color:#dd823b}.progress-bar.sunrise .innerCicle:hover .text{color:#dd823b}.progress-bar .rotate{background-color:#008ec2}.progress-bar .right{background-color:#008ec2;transform:rotate(180deg);opacity:0}.progress-bar .innerCicle{width:90%;height:90%;margin:5%;position:absolute;z-index:12;border-radius:50%;background:white;transition:all 0.2s ease-in}.progress-bar .innerCicle .textHolder{display:block;top:50%;position:relative}.progress-bar .innerCicle .textHolder .text{text-align:center;display:block;color:#ccc;font-weight:bold;margin-top:-50px;font-size:35px;transition:all 0.2s ease-in;line-height:50px;position:absolute;width:100%}.progress-bar .innerCicle .textHolder .text.small{margin-top:-50px;line-height:50px;font-size:30px}.progress-bar .innerCicle:hover{width:94%;height:94%;margin:3%}.progress-bar .innerCicle:hover .text{font-size:45px;color:#008ec2}.progress-bar .innerCicle:hover .text.small{font-size:35px}.progress-bar div{border-radius:50%;height:100%;position:absolute;width:100%}.progress-bar .smallbr{display:none}@keyframes toggle{0%{opacity:0}100%{opacity:1}}@media screen and (max-width: 870px){.smallbr{display:block}.bigbr{display:none}.text{font-size:30px;line-height:40px;margin-top:-40px}.progress-bar:hover .text{font-size:40px}}@media screen and (max-width: 800px){.progress-bar{max-width:none;max-height:none}}#support_hours_dashboard_widget h3{margin:1.33em 0 0;font-size:16px;font-weight:bold}.bold{font-weight:bold;color:#444}.worktable{margin-top:20px;padding-bottom:10px;margin-bottom:10px}.worktable th{text-align:left}.total{border-top:1px solid #eee;border-bottom:1px solid #eee;margin:0 -12px;margin-top:10px;padding:8px 12px 4px;font-size:1rem;background:#fafafa}.currentDate{display:none}.rwd-table{margin:1em 0;min-width:300px}.rwd-table tr{border-top:1px solid #ddd;border-bottom:1px solid #ddd}.rwd-table th{display:none}.rwd-table td{display:block}.rwd-table td:first-child{padding-top:.5em}.rwd-table td:last-child{padding-bottom:.5em}.rwd-table td.remove:before{content:'';width:0}.rwd-table td:before{content:attr(data-th) ": ";font-weight:bold;width:6.5em;display:inline-block}@media (min-width: 480px){.rwd-table td:before{display:none}}.rwd-table th,.rwd-table td{text-align:left}@media (min-width: 480px){.rwd-table th,.rwd-table td{display:table-cell;padding:.25em .5em}.rwd-table th:first-child,.rwd-table td:first-child{padding-left:0}.rwd-table th:last-child,.rwd-table td:last-child{padding-right:0}}.clearfix{clear:both} +#support_hours_dashboard_widget h3{margin:1.33em 0 0;font-size:16px;font-weight:bold}.progress-bar{position:relative;width:100%;padding-bottom:100%}.progress-bar .background{background-color:#ccc}.progress-bar .left{background-color:#ccc;opacity:1}.progress-bar .rotate{background-color:#008ec2}.progress-bar .right{background-color:#008ec2;transform:rotate(180deg);opacity:0}.progress-bar div{border-radius:50%;height:100%;position:absolute;width:100%}.progress-bar .smallbr{display:none}.innerCicle{width:90%;height:90%;margin:5%;position:absolute;z-index:12;border-radius:50%;background:white;transition:all 0.2s ease-in}.innerCicle .textHolder{display:block;top:50%;position:relative}.innerCicle .textHolder .text{text-align:center;display:block;color:#ccc;font-weight:bold;margin-top:-50px;font-size:35px;transition:all 0.2s ease-in;line-height:50px;position:absolute;width:100%}.innerCicle .textHolder .text.small{margin-top:-50px;line-height:50px;font-size:30px}.innerCicle:hover{width:94%;height:94%;margin:3%}.innerCicle:hover .text{font-size:45px;color:#008ec2}.innerCicle:hover .text.small{font-size:35px}@keyframes toggle{0%{opacity:0}100%{opacity:1}}@media screen and (max-width: 870px){.smallbr{display:block}.bigbr{display:none}.text{font-size:30px;line-height:40px;margin-top:-40px}.progress-bar:hover .text{font-size:40px}}@media screen and (max-width: 800px){.progress-bar{max-width:none;max-height:none}}.bold{font-weight:bold;color:#444}.worktable{margin-top:20px;padding-bottom:10px;margin-bottom:10px}.worktable th{text-align:left}.total{border-top:1px solid #eee;border-bottom:1px solid #eee;margin:0 -12px;margin-top:10px;padding:8px 12px 4px;font-size:1rem;background:#fafafa}.progress-bar.midnight .rotate,.progress-bar.midnight .right{background-color:#e14d43}.progress-bar.midnight .innerCicle:hover .text{color:#e14d43}.progress-bar.ectoplasm .rotate,.progress-bar.ectoplasm .right{background-color:#a3b745}.progress-bar.ectoplasm .innerCicle:hover .text{color:#a3b745}.progress-bar.blue .rotate,.progress-bar.blue .right{background-color:#e1a948}.progress-bar.blue .innerCicle:hover .text{color:#e1a948}.progress-bar.ocean .rotate,.progress-bar.ocean .right{background-color:#9ebaa0}.progress-bar.ocean .innerCicle:hover .text{color:#9ebaa0}.progress-bar.coffee .rotate,.progress-bar.coffee .right{background-color:#c7a589}.progress-bar.coffee .innerCicle:hover .text{color:#c7a589}.progress-bar.sunrise .rotate,.progress-bar.sunrise .right{background-color:#dd823b}.progress-bar.sunrise .innerCicle:hover .text{color:#dd823b}.rwd-table{margin:1em 0;min-width:300px}.rwd-table tr{border-top:1px solid #ddd;border-bottom:1px solid #ddd}.rwd-table th{display:none}.rwd-table td{display:block}.rwd-table td:first-child{padding-top:.5em}.rwd-table td:last-child{padding-bottom:.5em}.rwd-table td.remove:before{content:'';width:0}.rwd-table td:before{content:attr(data-th) ": ";font-weight:bold;width:6.5em;display:inline-block}@media (min-width: 480px){.rwd-table td:before{display:none}}.rwd-table th,.rwd-table td{text-align:left}@media (min-width: 480px){.rwd-table th,.rwd-table td{display:table-cell;padding:.25em .5em}.rwd-table th:first-child,.rwd-table td:first-child{padding-left:0}.rwd-table th:last-child,.rwd-table td:last-child{padding-right:0}}.clearfix{clear:both}.currentDate{display:none}