From 29c0c8c33d7b6ef3b5c2b42892603e0dfec8de3e Mon Sep 17 00:00:00 2001 From: Luke Towers Date: Wed, 22 Aug 2018 20:51:26 -0600 Subject: [PATCH] Improvements to Repeater form widget styling Improved the styling of the Repeater form widget, made it easier to distinguish between individual repeater items --- modules/backend/ServiceProvider.php | 1 + .../repeater/assets/css/repeater.css | 244 +++--------------- .../repeater/assets/less/repeater.less | 47 +++- 3 files changed, 74 insertions(+), 218 deletions(-) diff --git a/modules/backend/ServiceProvider.php b/modules/backend/ServiceProvider.php index 195ab1856..ac0e5cd75 100644 --- a/modules/backend/ServiceProvider.php +++ b/modules/backend/ServiceProvider.php @@ -71,6 +71,7 @@ class ServiceProvider extends ModuleServiceProvider $combiner->registerBundle('~/modules/backend/widgets/mediamanager/assets/js/mediamanager-browser.js'); $combiner->registerBundle('~/modules/backend/widgets/mediamanager/assets/less/mediamanager.less'); $combiner->registerBundle('~/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less'); + $combiner->registerBundle('~/modules/backend/formwidgets/repeater/assets/less/repeater.less'); $combiner->registerBundle('~/modules/backend/formwidgets/codeeditor/assets/js/build.js'); $combiner->registerBundle('~/modules/backend/formwidgets/fileupload/assets/less/fileupload.less'); diff --git a/modules/backend/formwidgets/repeater/assets/css/repeater.css b/modules/backend/formwidgets/repeater/assets/css/repeater.css index c30e8e94e..68d0f8c55 100644 --- a/modules/backend/formwidgets/repeater/assets/css/repeater.css +++ b/modules/backend/formwidgets/repeater/assets/css/repeater.css @@ -1,208 +1,36 @@ -.field-repeater { - padding-top: 5px; -} -.field-repeater ul.field-repeater-items, -.field-repeater li.field-repeater-item { - padding: 0; - margin: 0; - list-style: none; -} -.field-repeater ul.field-repeater-items > li.dragged { - opacity: .7; - position: absolute; - padding-top: 15px; - padding-right: 15px; - z-index: 2000; - background-color: #f9f9f9; - border: 1px dashed #dbdee0; -} -.field-repeater ul.field-repeater-items > li.dragged .repeater-item-remove { - opacity: 0; -} -.field-repeater ul.field-repeater-items > li.dragged .repeater-item-collapsed-title { - top: 5px; -} -.field-repeater ul.field-repeater-items > li.placeholder { - display: block; - position: relative; - height: 25px; - margin-bottom: 5px; -} -.field-repeater ul.field-repeater-items > li.placeholder:before { - display: block; - position: absolute; - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - text-decoration: inherit; - -webkit-font-smoothing: antialiased; - *margin-right: .3em; - content: "\f054"; - color: #d35714; - left: -10px; - top: 8px; - z-index: 2000; -} -.field-repeater li.field-repeater-item { - position: relative; - margin-left: 5px; - padding-left: 15px; - border-left: 1px solid #dbdee0; - min-height: 30px; -} -.field-repeater li.field-repeater-item:before { - color: #bdc3c7; - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - text-decoration: inherit; - -webkit-font-smoothing: antialiased; - *margin-right: .3em; - content: "\f111"; - font-size: 8px; - position: absolute; - left: -4px; - top: -2px; -} -.field-repeater li.field-repeater-item.collapsed .field-repeater-form { - display: none; -} -.field-repeater li.field-repeater-item.collapsed .repeater-item-collapse .repeater-item-collapse-one { - -webkit-transform: scale(1, -1); - -ms-transform: scale(1, -1); - transform: scale(1, -1); -} -.field-repeater li.field-repeater-item.collapsed .repeater-item-collapsed-title { - display: block; -} -.field-repeater li.field-repeater-item .repeater-item-collapsed-title { - display: none; - top: -5px; - position: absolute; - font-size: 13px; -} -.field-repeater li.field-repeater-item .field-repeater-form { - position: relative; - top: -7px; -} -.field-repeater li.field-repeater-item .field-repeater-form:before, -.field-repeater li.field-repeater-item .field-repeater-form:after { - content: " "; - display: table; -} -.field-repeater li.field-repeater-item .field-repeater-form:after { - clear: both; -} -.field-repeater li.field-repeater-item .repeater-item-handle { - position: absolute; - top: -6px; - left: -10px; - color: #bdc3c7; - background: #f9f9f9; - cursor: move; - opacity: 0; - border-radius: 999px; - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; -} -.field-repeater li.field-repeater-item .repeater-item-handle:hover { - color: #999; -} -.field-repeater li.field-repeater-item .repeater-item-collapse { - position: absolute; - top: -9px; - right: 22px; - z-index: 90; -} -.field-repeater li.field-repeater-item .repeater-item-collapse a, -.field-repeater li.field-repeater-item .repeater-item-collapse button { - -webkit-transition: transform 0.3s; - transition: transform 0.3s; - color: #bdc3c7; - line-height: 20px; - display: block; - font-size: 12px; -} -.field-repeater li.field-repeater-item .repeater-item-collapse a:hover, -.field-repeater li.field-repeater-item .repeater-item-collapse button:hover, -.field-repeater li.field-repeater-item .repeater-item-collapse a:focus, -.field-repeater li.field-repeater-item .repeater-item-collapse button:focus { - color: #999; - text-decoration: none; -} -.field-repeater li.field-repeater-item .repeater-item-remove { - position: absolute; - top: -10px; - right: 0; - z-index: 90; -} -.field-repeater li.field-repeater-item .repeater-item-collapse, -.field-repeater li.field-repeater-item .repeater-item-handle, -.field-repeater li.field-repeater-item .repeater-item-remove { - width: 20px; - height: 20px; - text-align: center; -} -.field-repeater li.field-repeater-item:hover .repeater-item-collapse, -.field-repeater li.field-repeater-item:active .repeater-item-collapse, -.field-repeater li.field-repeater-item:hover .repeater-item-handle, -.field-repeater li.field-repeater-item:active .repeater-item-handle, -.field-repeater li.field-repeater-item:hover .repeater-item-remove, -.field-repeater li.field-repeater-item:active .repeater-item-remove { - opacity: 1; -} -.field-repeater .field-repeater-add-item { - position: relative; - margin-top: 10px; - margin-left: 20px; - border: 2px dotted #e0e0e0; - border-radius: 5px; -} -.field-repeater .field-repeater-add-item:before { - color: #bdc3c7; - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - text-decoration: inherit; - -webkit-font-smoothing: antialiased; - *margin-right: .3em; - content: "\f067"; - font-size: 16px; - position: absolute; - left: -23px; - top: -11px; -} -.field-repeater .field-repeater-add-item > a { - color: #bdc3c7; - text-align: center; - display: block; - text-decoration: none; - padding: 13px 15px; - text-transform: uppercase; - font-weight: 600; - font-size: 12px; -} -.field-repeater .field-repeater-add-item:hover, -.field-repeater .field-repeater-add-item:focus { - background-color: #4ea5e0; - border-color: transparent; -} -.field-repeater .field-repeater-add-item:hover:before, -.field-repeater .field-repeater-add-item:focus:before { - color: #999; -} -.field-repeater .field-repeater-add-item:hover > a, -.field-repeater .field-repeater-add-item:focus > a { - color: #ffffff; -} -.field-repeater .field-repeater-add-item:active { - background: #3498db; - border-color: transparent; -} -.field-repeater .field-repeater-add-item:active > a { - color: #ffffff; -} -.field-repeater .field-repeater-add-item.in-progress { - border-color: #e0e0e0 !important; - background: transparent !important; -} +.field-repeater{padding-top:5px} +.field-repeater .field-repeater-items{counter-reset:repeater-index-counter} +.field-repeater ul.field-repeater-items,.field-repeater li.field-repeater-item{padding:0;margin:0;list-style:none} +.field-repeater ul.field-repeater-items > li.dragged{opacity:.7;position:absolute;padding-top:15px;padding-right:15px;z-index:2000;background-color:#f9f9f9;border:1px dashed #dbdee0} +.field-repeater ul.field-repeater-items > li.dragged .repeater-item-remove{opacity:0} +.field-repeater ul.field-repeater-items > li.dragged .repeater-item-collapsed-title{top:5px} +.field-repeater ul.field-repeater-items > li.placeholder{display:block;position:relative;height:25px;margin-bottom:5px} +.field-repeater ul.field-repeater-items > li.placeholder:before{display:block;position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f054";color:#d35714;left:-10px;top:8px;z-index:2000} +.field-repeater li.field-repeater-item{position:relative;margin:0 0 1em 1em !important;padding:1.5em 1.25em 0 1.25em !important;background:#f5f5f5;border:1px solid #d1d6d9;border-radius:3px;box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);min-height:30px} +.field-repeater li.field-repeater-item:before{color:#bdc3c7;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f111";font-size:8px;position:absolute;left:-18px;top:-2px} +.field-repeater li.field-repeater-item:after{counter-increment:repeater-index-counter;content:counter(repeater-index-counter);display:block;position:absolute;font-size:12px;left:-27px;color:#bdc3c7;top:10px;width:24px;text-align:center} +.field-repeater li.field-repeater-item.collapsed .field-repeater-form{display:none} +.field-repeater li.field-repeater-item.collapsed .repeater-item-collapse .repeater-item-collapse-one{-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)} +.field-repeater li.field-repeater-item.collapsed .repeater-item-collapsed-title{display:block} +.field-repeater li.field-repeater-item .repeater-item-collapsed-title{display:none;position:absolute;font-size:13px;top:50%;left:10px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)} +.field-repeater li.field-repeater-item .field-repeater-form{position:relative;top:-7px} +.field-repeater li.field-repeater-item .field-repeater-form:before,.field-repeater li.field-repeater-item .field-repeater-form:after{content:" ";display:table} +.field-repeater li.field-repeater-item .field-repeater-form:after{clear:both} +.field-repeater li.field-repeater-item .repeater-item-handle{position:absolute;top:-6px;left:-25px;color:#bdc3c7;background:#f9f9f9;cursor:move;opacity:0;border-radius:999px;-webkit-transition:opacity 0.5s;transition:opacity 0.5s} +.field-repeater li.field-repeater-item .repeater-item-handle:hover{color:#999} +.field-repeater li.field-repeater-item .repeater-item-collapse{position:absolute;top:5px;right:30px;z-index:90} +.field-repeater li.field-repeater-item .repeater-item-collapse a,.field-repeater li.field-repeater-item .repeater-item-collapse button{-webkit-transition:transform 0.3s;transition:transform 0.3s;color:#bdc3c7;line-height:20px;display:block;font-size:12px} +.field-repeater li.field-repeater-item .repeater-item-collapse a:hover,.field-repeater li.field-repeater-item .repeater-item-collapse button:hover,.field-repeater li.field-repeater-item .repeater-item-collapse a:focus,.field-repeater li.field-repeater-item .repeater-item-collapse button:focus{color:#999;text-decoration:none} +.field-repeater li.field-repeater-item .repeater-item-remove{position:absolute;top:4px;right:5px;z-index:90} +.field-repeater li.field-repeater-item .repeater-item-remove .close{float:none;display:inline-block} +.field-repeater li.field-repeater-item .repeater-item-collapse,.field-repeater li.field-repeater-item .repeater-item-handle,.field-repeater li.field-repeater-item .repeater-item-remove{width:20px;height:20px;text-align:center} +.field-repeater li.field-repeater-item:hover .repeater-item-collapse,.field-repeater li.field-repeater-item:active .repeater-item-collapse,.field-repeater li.field-repeater-item:hover .repeater-item-handle,.field-repeater li.field-repeater-item:active .repeater-item-handle,.field-repeater li.field-repeater-item:hover .repeater-item-remove,.field-repeater li.field-repeater-item:active .repeater-item-remove{opacity:1} +.field-repeater .field-repeater-add-item{position:relative;margin-top:10px;margin-left:20px;border:2px dotted #e0e0e0;border-radius:5px} +.field-repeater .field-repeater-add-item:before{color:#bdc3c7;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f067";font-size:16px;position:absolute;left:-23px;top:-11px} +.field-repeater .field-repeater-add-item > a{color:#bdc3c7;text-align:center;display:block;text-decoration:none;padding:13px 15px;text-transform:uppercase;font-weight:600;font-size:12px} +.field-repeater .field-repeater-add-item:hover,.field-repeater .field-repeater-add-item:focus{background-color:#4ea5e0;border-color:transparent} +.field-repeater .field-repeater-add-item:hover:before,.field-repeater .field-repeater-add-item:focus:before{color:#999} +.field-repeater .field-repeater-add-item:hover > a,.field-repeater .field-repeater-add-item:focus > a{color:#ffffff} +.field-repeater .field-repeater-add-item:active{background:#3498db;border-color:transparent} +.field-repeater .field-repeater-add-item:active > a{color:#ffffff} +.field-repeater .field-repeater-add-item.in-progress{border-color:#e0e0e0 !important;background:transparent !important} \ No newline at end of file diff --git a/modules/backend/formwidgets/repeater/assets/less/repeater.less b/modules/backend/formwidgets/repeater/assets/less/repeater.less index 2a86dd6d6..a94db02fc 100644 --- a/modules/backend/formwidgets/repeater/assets/less/repeater.less +++ b/modules/backend/formwidgets/repeater/assets/less/repeater.less @@ -3,6 +3,10 @@ .field-repeater { padding-top: 5px; + .field-repeater-items { + counter-reset: repeater-index-counter; + } + ul.field-repeater-items, li.field-repeater-item { padding: 0; @@ -48,9 +52,12 @@ li.field-repeater-item { position: relative; - margin-left: 5px; - padding-left: 15px; - border-left: 1px solid #dbdee0; + margin: 0 0 1em 1em !important; + padding: 1.5em 1.25em 0 1.25em !important; + background: #f5f5f5; + border: 1px solid @input-border; + border-radius: @border-radius-base; + box-shadow: @input-box-shadow; min-height: 30px; &:before { @@ -58,10 +65,23 @@ .icon(@circle); font-size: 8px; position: absolute; - left: -4px; + left: -18px; top: -2px; } + &:after { + counter-increment: repeater-index-counter; + content: counter(repeater-index-counter); + display: block; + position: absolute; + font-size: 12px; + left: -27px; + color: #bdc3c7; + top: 10px; + width: 24px; + text-align: center; + } + &.collapsed { .field-repeater-form { display:none; @@ -80,9 +100,11 @@ .repeater-item-collapsed-title { display: none; - top: -5px; position: absolute; font-size: 13px; + top: 50%; + left: 10px; + .transform(translateY(-50%)); } .field-repeater-form { @@ -94,7 +116,7 @@ .repeater-item-handle { position: absolute; top: -6px; - left: -10px; + left: -25px; color: #bdc3c7; background: @body-bg; cursor: move; @@ -108,8 +130,8 @@ .repeater-item-collapse { position: absolute; - top: -9px; - right: 22px; + top: 5px; + right: 30px; z-index: 90; a, button { @@ -129,9 +151,14 @@ .repeater-item-remove { position: absolute; - top: -10px; - right: 0; + top: 4px; + right: 5px; z-index: 90; + + .close { + float: none; + display: inline-block; + } } .repeater-item-collapse,