mirror of
https://github.com/silverstripe/silverstripe-widgets
synced 2024-10-22 17:05:54 +02:00
ENHANCEMENT: Adapt the Widgets Editor CMS UI to fit SS 3.0
This commit is contained in:
Ryan Wachtl
parent
a7ac169826
commit
2258c55dcb
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.sass-cache
|
||||
15
config.rb
Normal file
15
config.rb
Normal file
@ -0,0 +1,15 @@
|
||||
# Require any additional compass plugins here.
|
||||
|
||||
project_type = :stand_alone
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "css"
|
||||
sass_dir = "scss"
|
||||
images_dir = "images"
|
||||
javascripts_dir = "javascript"
|
||||
output_style = :compact
|
||||
line_comments = false
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
|
||||
asset_cache_buster = :none
|
||||
@ -1,81 +1,20 @@
|
||||
div.availableWidgetsHolder {
|
||||
width: 30%;
|
||||
}
|
||||
@charset "UTF-8";
|
||||
.WidgetAreaEditor p { margin-bottom: 15px; }
|
||||
|
||||
div.usedWidgetsHolder {
|
||||
width: 66%;
|
||||
max-width: 745px;
|
||||
}
|
||||
.Widget { padding: 0 7px 7px 7px; margin: 16px 0 16px 0; color: #1f1f1f; background-color: #b0bec7; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzkyYTViMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=="); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#b0bec7, #92a5b2); background-image: -moz-linear-gradient(#b0bec7, #92a5b2); background-image: -o-linear-gradient(#b0bec7, #92a5b2); background-image: linear-gradient(#b0bec7, #92a5b2); border-top: 1px solid #c2cdd4; border-bottom: 1px solid #748d9d; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
|
||||
.Widget h3 { margin: 0; padding: 0; line-height: 40px; text-shadow: #bfcad2 1px 1px 0; -webkit-transition-property: background-image; -moz-transition-property: background-image; -o-transition-property: background-image; transition-property: background-image; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
|
||||
.Widget .widgetDescription { background: #eceff1; padding: 5px 5px 1px 5px; margin: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
|
||||
.Widget .widgetFields { background: #eceff1; padding: 5px; margin: 7px 0 0 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
|
||||
|
||||
div.availableWidgetsHolder {
|
||||
float: left;
|
||||
}
|
||||
.availableWidgetsHolder { width: 38%; float: left; }
|
||||
|
||||
div.usedWidgetsHolder {
|
||||
float: right;
|
||||
}
|
||||
.availableWidgets .Widget h3 { cursor: pointer; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxLzUvMTOqzuI/AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAA8tJREFUSImdlk1MHGUYx38zO7u4s18sC10DBItFEEttUAmaTtFTJ34c9MBc/Iw99qDRHjx6682D9lBvatJotibGaGrWg4k6mgBWuggWKA1oKcm2wLJfs7A7s+OB3XRZ2Q/4n2ae9//+/8/zJu/zvAIHQCSqB4CHAAtY0VQl22iPbdsACE2Iq8C7wGkBCpIkLQOCaZpduxLEgE+Bq5qqGAc2ikT1l4GPXE5pqzscynaHQ49LDoe/kmNaVmo1vjGzGt/w5AumG/gQ+EZTlXxDo0hUDwMXREF4buiRnlR7q/9ko6oB1rdSsblbt12WVZwEzmuqsl7TKBLVZeA7n+x2Dg/2nqyuoBlMzS7paSNXAF7QVGW7bCRWmDiBz3yy2zUy1Hf6MCYAI0N9ik92O4GPI1HdU46LFZyzDlEcGhnqU+oJpTLGYipjLDYyczhEBXitHHOUqnkQiDw5+PBOi8sZqiWwdi8xMXPzn561ewlZEIRrrT5PTy1uONSaX41vPPP3rdtfHT/Wky1X9JZPds/7vXJ/vUwTyXQO+B7Qs8a2WY/rbnF1+WT3KjAO94/ujYGjneF6Gw+Dgd7OI8CbAGIkqocFONKomgpsAwaCYDci+j3ygCgIgSs//iaLwBNOp/RvMw5504LdTjCTL5gNuwqAJDkywAkJOBH0eZLVhLV7iYmF5dVjNnhLIQtIAj8ArkQqo/w0+ZdB6fgFyA70di11drSNVuoEfZ5kfDM5LAEd+2WSSKZzNnyuqcr5Gsm+WPkTiepXNpOZ9s6Otv24XglI7bcSDHjd8c3ke5Go/k4pVASmNVV5OhLVu4DLwAggldYdbQHvHzWSuisB1xPp7CvVK50dbaOl7MpCTM8vb0ei+jkgGPR7GX60V67aNlr1TyKd9QMxCZgsmFZXjUz2wCk5bGAMcLp2vxvCNK0AcFPUVCVu2/adRm2l2rMZUipjLBZtOz1+5pRRvrBfLKysxQ9g1BQWVtbuAp/A/c7wZdrIHW1UVVvA6waeB8Y88gNSPW5uJ38nbeT6ga+hYh5FovpZhyi+/+xTxwfrCZSTadRJfr42N2dZxYvjZ05dqqwI4LJVLE5MzS7p9QT8Xrm/kcnU7JJuWcVfNFW5VI7tN8q/9cnu4GEmrGlZqekby7G0kdsCXtdUJfm/CVuBt9NGbkH/88b6+lYq1qzJ+lYq9vv1+eW0kZsAXtVUZU9bq/cKegm44HJKO93hUC4cau11t7j23LeqV5AEfKCpytVKzkHedWPAOUAB2l1Oac62oWCajwEbgA5c1FTl1/32l43+A2DVjDi0+ffsAAAAAElFTkSuQmCC"); background-position: center right; background-repeat: no-repeat; }
|
||||
.availableWidgets .Widget h3:hover { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxLzUvMTOqzuI/AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAABANJREFUSImdlltsVFUUhr8znbZzbUO4VDPJcZqWSgfqxCalNT1tuEQOXh6UyHkQUQvEmKCxoTwY2wcSW4khEESiQIIXTKMZRGM0mMMDJHpqHILiNG0tnTYzGZwYCjV0rp3ScnxwJkxrOzPt/7bX/tf619rZe60tsAR4VK0ceASYBYKKLMXz+ei6DoBQQHAZaAdadF2/l4jHAoBgsdocgiAA+IDTwEVFlhJLFvKo2nPAsVg0crfvshrXLl96bCqZKMvmmMyWSPPmJ/ulrdutNnuZGTgEfKvI0nReIY+qVQCHZ2dmNp07/UFkyPe7O1/VAC53ve/FfftLSktNV4GDiizdWVTIo2oW4PtwKFh86miPe34FhaC9q0dziM57wNOKLE1lhAxZIsXAZ+FQsOR4d2fLckQAjnd3SuFQsBg44VE1a8ZuyOLsnU6lNhzv7pRyBRIrq0fEyuqRfGKp1JQEvJSxFaWreQjwfHTk3dTk3X9WLhZgo7TJ2/ZGh9jYstlyf3b2t4D/hrgY13ft12lp6/YnhsZufrW+SoxnKno1HAoOhwKjNbkyramtSwI/ANrDDnEmF3fi9rgjHAr+BeyEB0f38je9n1bkclwOLvR+sgZ4BcDgUbUKXdfX5KsmC1NAQid9nXLgZmDs0dmZmfLzl/osBqA+HouGClGw2O3wXyfot9rL8nYVgGQyEQPqjEDd2PDQ5HzCRmmT94Xd+6oEQbClTbPAJPAjULJ23XrpyJneBOnj13U9fuGLs6Ne7Upjdpyx4aFJd0PT40Zg9UKZ1NTWJQVB+FyRpYOLJPtM9sKjaufXujas8mpXFuLajEBkoR3/nwNmd0PTAY+qvZU23QeuK7LU5FE1B9ALNADG9H6Rf2jg2iJJjRuBP6rWuZ6fv+PVrjSms8sE4rUD70x5VG0/sMI/PMiZY+9Z5rk1zltTtc5VBviMwFWL1eZYJJM5SMSiOtAKFCei0by3DsBstpQDfoMiS7cMBkM4X1uZh+JCSGJl9UiR0Rjdua05kXmw53bsaru1BKGCsGNX2zjwITzoDF86RKczX1X+oQEz8BTQ+nc4ZMzFXbl6TdghOmuAryFrHnlUbe90KtXR+eae2lwBMsnk6yTdJ84OlppMJ3duaz6VXRFAb0lpqbe9q0fLFSAUGK3JJ9Le1aOVmkw/KbJ0KmNbaJR/Fw4FVyxnwprMlsjrHZ0+h+i8C+xWZGnyfxM2C3scovPGoaMf33G5632Firjc9b7O908EHKLTC+xSZGlOW8v1C3oWOByLRlJ9l9Xk9au/VE7cHp/z3kxmS0Tasq2/eYtstdnLjMDbiixdzOYs5V/XCuwHJGBVLBoZFAQBq83uAiYADTipyNLPC/lnhP4FKHOWW0c+c/gAAAAASUVORK5CYII="); }
|
||||
|
||||
div.usedWidgets .ui-state-highlight {
|
||||
background: #EEEEEE;
|
||||
border: 1px solid #DDDDDD;
|
||||
width: 98%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.usedWidgetsHolder { width: 60%; float: right; }
|
||||
|
||||
.NoWidgets {
|
||||
padding: 50px; /* Make this nice and big and easily 'droppable' */
|
||||
}
|
||||
.usedWidgets .Widget h3 { cursor: move; }
|
||||
.usedWidgets .Widget .deleteWidget { text-align: right; padding-top: 11px; margin-bottom: 3px; }
|
||||
|
||||
div.usedWidgets div.Widget,
|
||||
div.availableWidgets div.Widget {
|
||||
width: 98%;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
margin-bottom: 10px;
|
||||
background: #F0F3F4;
|
||||
}
|
||||
|
||||
div.widgetDescription{
|
||||
padding: 10px 0;
|
||||
}
|
||||
div.widgetDescription p,
|
||||
div.widgetFields {
|
||||
padding: 0 8px;
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
p.deleteWidget {
|
||||
margin: 0 0 4px;
|
||||
height: 22px;
|
||||
line-height: 2.2;
|
||||
font-size: 12px;
|
||||
}
|
||||
span.widgetDelete {
|
||||
padding-left: 20px;
|
||||
margin-right: 8px;
|
||||
float: right;
|
||||
background: url(../images/delete.gif) no-repeat left center;
|
||||
cursor: pointer;
|
||||
}
|
||||
div.usedWidgets div.Widget h3,
|
||||
div.availableWidgets div.Widget h3 {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
line-height: 1.8;
|
||||
padding: 0 5px;
|
||||
margin: 0;
|
||||
}
|
||||
div.usedWidgets div.Widget h3 {
|
||||
cursor: move;
|
||||
background: #000 url(../images/handled-bg.png) right top;
|
||||
}
|
||||
div.availableWidgets div.Widget h3 {
|
||||
cursor: pointer;
|
||||
color: #444;
|
||||
padding-right: 25px;
|
||||
background: #ccc url(../images/add-bg.png) right center;
|
||||
}
|
||||
div.availableWidgets div.Widget h3:hover {
|
||||
background: #ccc url(../images/add-bg-hover.png) right center;
|
||||
}
|
||||
@media only screen and (max-width: 1279px) { .availableWidgetsHolder { width: 100%; float: none; margin-bottom: 20px; }
|
||||
.usedWidgetsHolder { width: 100%; float: none; } }
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 621 B |
Binary file not shown.
|
Before Width: | Height: | Size: 578 B |
Binary file not shown.
|
Before Width: | Height: | Size: 356 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
106
scss/WidgetAreaEditor.scss
Normal file
106
scss/WidgetAreaEditor.scss
Normal file
@ -0,0 +1,106 @@
|
||||
@import "settings";
|
||||
|
||||
// root widget area editor container
|
||||
.WidgetAreaEditor {
|
||||
h2 {
|
||||
|
||||
}
|
||||
p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// base styles for a widget
|
||||
.Widget {
|
||||
padding: 0 7px 7px 7px;
|
||||
margin: 16px 0 16px 0;
|
||||
color: #1f1f1f;
|
||||
background-color: #b0bec7;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzkyYTViMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #92a5b2));
|
||||
background-image: -webkit-linear-gradient(#b0bec7, #92a5b2);
|
||||
background-image: -moz-linear-gradient(#b0bec7, #92a5b2);
|
||||
background-image: -o-linear-gradient(#b0bec7, #92a5b2);
|
||||
background-image: linear-gradient(#b0bec7, #92a5b2);
|
||||
border-top: 1px solid #c2cdd4;
|
||||
border-bottom: 1px solid #748d9d;
|
||||
@include border-radius(3px);
|
||||
h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 40px;
|
||||
text-shadow: #bfcad2 1px 1px 0;
|
||||
@include transition-property(background-image);
|
||||
@include transition-duration(0.2s);
|
||||
@include transition-timing-function(ease-out);
|
||||
}
|
||||
.widgetDescription {
|
||||
background: #eceff1;
|
||||
padding: 5px 5px 1px 5px;
|
||||
margin: 0;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
.widgetFields {
|
||||
background: #eceff1;
|
||||
padding: 5px;
|
||||
margin: 7px 0 0 0;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
}
|
||||
|
||||
// container for available widgets
|
||||
.availableWidgetsHolder {
|
||||
width: 38%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.availableWidgets {
|
||||
.Widget {
|
||||
h3 {
|
||||
cursor: pointer;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxLzUvMTOqzuI/AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAA8tJREFUSImdlk1MHGUYx38zO7u4s18sC10DBItFEEttUAmaTtFTJ34c9MBc/Iw99qDRHjx6682D9lBvatJotibGaGrWg4k6mgBWuggWKA1oKcm2wLJfs7A7s+OB3XRZ2Q/4n2ae9//+/8/zJu/zvAIHQCSqB4CHAAtY0VQl22iPbdsACE2Iq8C7wGkBCpIkLQOCaZpduxLEgE+Bq5qqGAc2ikT1l4GPXE5pqzscynaHQ49LDoe/kmNaVmo1vjGzGt/w5AumG/gQ+EZTlXxDo0hUDwMXREF4buiRnlR7q/9ko6oB1rdSsblbt12WVZwEzmuqsl7TKBLVZeA7n+x2Dg/2nqyuoBlMzS7paSNXAF7QVGW7bCRWmDiBz3yy2zUy1Hf6MCYAI0N9ik92O4GPI1HdU46LFZyzDlEcGhnqU+oJpTLGYipjLDYyczhEBXitHHOUqnkQiDw5+PBOi8sZqiWwdi8xMXPzn561ewlZEIRrrT5PTy1uONSaX41vPPP3rdtfHT/Wky1X9JZPds/7vXJ/vUwTyXQO+B7Qs8a2WY/rbnF1+WT3KjAO94/ujYGjneF6Gw+Dgd7OI8CbAGIkqocFONKomgpsAwaCYDci+j3ygCgIgSs//iaLwBNOp/RvMw5504LdTjCTL5gNuwqAJDkywAkJOBH0eZLVhLV7iYmF5dVjNnhLIQtIAj8ArkQqo/w0+ZdB6fgFyA70di11drSNVuoEfZ5kfDM5LAEd+2WSSKZzNnyuqcr5Gsm+WPkTiepXNpOZ9s6Otv24XglI7bcSDHjd8c3ke5Go/k4pVASmNVV5OhLVu4DLwAggldYdbQHvHzWSuisB1xPp7CvVK50dbaOl7MpCTM8vb0ei+jkgGPR7GX60V67aNlr1TyKd9QMxCZgsmFZXjUz2wCk5bGAMcLp2vxvCNK0AcFPUVCVu2/adRm2l2rMZUipjLBZtOz1+5pRRvrBfLKysxQ9g1BQWVtbuAp/A/c7wZdrIHW1UVVvA6waeB8Y88gNSPW5uJ38nbeT6ga+hYh5FovpZhyi+/+xTxwfrCZSTadRJfr42N2dZxYvjZ05dqqwI4LJVLE5MzS7p9QT8Xrm/kcnU7JJuWcVfNFW5VI7tN8q/9cnu4GEmrGlZqekby7G0kdsCXtdUJfm/CVuBt9NGbkH/88b6+lYq1qzJ+lYq9vv1+eW0kZsAXtVUZU9bq/cKegm44HJKO93hUC4cau11t7j23LeqV5AEfKCpytVKzkHedWPAOUAB2l1Oac62oWCajwEbgA5c1FTl1/32l43+A2DVjDi0+ffsAAAAAElFTkSuQmCC');
|
||||
background-position: center right;
|
||||
background-repeat: no-repeat;
|
||||
&:hover {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxLzUvMTOqzuI/AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAABANJREFUSImdlltsVFUUhr8znbZzbUO4VDPJcZqWSgfqxCalNT1tuEQOXh6UyHkQUQvEmKCxoTwY2wcSW4khEESiQIIXTKMZRGM0mMMDJHpqHILiNG0tnTYzGZwYCjV0rp3ScnxwJkxrOzPt/7bX/tf619rZe60tsAR4VK0ceASYBYKKLMXz+ei6DoBQQHAZaAdadF2/l4jHAoBgsdocgiAA+IDTwEVFlhJLFvKo2nPAsVg0crfvshrXLl96bCqZKMvmmMyWSPPmJ/ulrdutNnuZGTgEfKvI0nReIY+qVQCHZ2dmNp07/UFkyPe7O1/VAC53ve/FfftLSktNV4GDiizdWVTIo2oW4PtwKFh86miPe34FhaC9q0dziM57wNOKLE1lhAxZIsXAZ+FQsOR4d2fLckQAjnd3SuFQsBg44VE1a8ZuyOLsnU6lNhzv7pRyBRIrq0fEyuqRfGKp1JQEvJSxFaWreQjwfHTk3dTk3X9WLhZgo7TJ2/ZGh9jYstlyf3b2t4D/hrgY13ft12lp6/YnhsZufrW+SoxnKno1HAoOhwKjNbkyramtSwI/ANrDDnEmF3fi9rgjHAr+BeyEB0f38je9n1bkclwOLvR+sgZ4BcDgUbUKXdfX5KsmC1NAQid9nXLgZmDs0dmZmfLzl/osBqA+HouGClGw2O3wXyfot9rL8nYVgGQyEQPqjEDd2PDQ5HzCRmmT94Xd+6oEQbClTbPAJPAjULJ23XrpyJneBOnj13U9fuGLs6Ne7Upjdpyx4aFJd0PT40Zg9UKZ1NTWJQVB+FyRpYOLJPtM9sKjaufXujas8mpXFuLajEBkoR3/nwNmd0PTAY+qvZU23QeuK7LU5FE1B9ALNADG9H6Rf2jg2iJJjRuBP6rWuZ6fv+PVrjSms8sE4rUD70x5VG0/sMI/PMiZY+9Z5rk1zltTtc5VBviMwFWL1eZYJJM5SMSiOtAKFCei0by3DsBstpQDfoMiS7cMBkM4X1uZh+JCSGJl9UiR0Rjdua05kXmw53bsaru1BKGCsGNX2zjwITzoDF86RKczX1X+oQEz8BTQ+nc4ZMzFXbl6TdghOmuAryFrHnlUbe90KtXR+eae2lwBMsnk6yTdJ84OlppMJ3duaz6VXRFAb0lpqbe9q0fLFSAUGK3JJ9Le1aOVmkw/KbJ0KmNbaJR/Fw4FVyxnwprMlsjrHZ0+h+i8C+xWZGnyfxM2C3scovPGoaMf33G5632Firjc9b7O908EHKLTC+xSZGlOW8v1C3oWOByLRlJ9l9Xk9au/VE7cHp/z3kxmS0Tasq2/eYtstdnLjMDbiixdzOYs5V/XCuwHJGBVLBoZFAQBq83uAiYADTipyNLPC/lnhP4FKHOWW0c+c/gAAAAASUVORK5CYII=');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// container for used widgets
|
||||
.usedWidgetsHolder {
|
||||
width: 60%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.usedWidgets {
|
||||
.Widget {
|
||||
h3 {
|
||||
cursor: move;
|
||||
}
|
||||
.deleteWidget {
|
||||
text-align: right;
|
||||
padding-top: 11px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noWidgets {
|
||||
|
||||
}
|
||||
|
||||
// one column layout when space is limited
|
||||
@media only screen and (max-width: 1279px) {
|
||||
.availableWidgetsHolder {
|
||||
width: 100%;
|
||||
float: none;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.usedWidgetsHolder {
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
4
scss/_settings.scss
Normal file
4
scss/_settings.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "compass/css3/border-radius";
|
||||
@import "compass/css3/transition";
|
||||
@ -2,7 +2,7 @@
|
||||
<input type="hidden" id="$Name" name="$IdxField" value="$Value" />
|
||||
<div class="availableWidgetsHolder">
|
||||
<h2><% _t('AVAILABLE', 'Available Widgets') %></h2>
|
||||
<p><% _t('AVAILWIDGETS', 'Click a widget title below to use it on this page.') %></p>
|
||||
<p class="message"><% _t('AVAILWIDGETS', 'Click a widget title below to use it on this page.') %></p>
|
||||
<div class="availableWidgets" id="availableWidgets-$Name">
|
||||
<% if AvailableWidgets %>
|
||||
<% control AvailableWidgets %>
|
||||
@ -17,7 +17,7 @@
|
||||
</div>
|
||||
<div class="usedWidgetsHolder">
|
||||
<h2><% _t('INUSE', 'Widgets currently used') %></h2>
|
||||
<p><% _t('TOSORT', 'To sort currently used widgets on this page, drag them up and down.') %></p>
|
||||
<p class="message"><% _t('TOSORT', 'To sort currently used widgets on this page, drag them up and down.') %></p>
|
||||
|
||||
<div class="usedWidgets" id="usedWidgets-$Name">
|
||||
<% if UsedWidgets %>
|
||||
|
||||
@ -3,10 +3,12 @@
|
||||
<div class="widgetDescription">
|
||||
<p>$Description</p>
|
||||
</div>
|
||||
<% if $CMSEditor %>
|
||||
<div class="widgetFields">
|
||||
$CMSEditor
|
||||
</div>
|
||||
<% end_if %>
|
||||
<input type="hidden" name="$Name[Type]" value="$ClassName" />
|
||||
<input type="hidden" name="$Name[Sort]" value="$Sort" />
|
||||
</div>
|
||||
<p class="deleteWidget"><span class="widgetDelete"><% _t('DELETE', 'Delete') %></span></p>
|
||||
<p class="deleteWidget"><span class="widgetDelete ss-ui-button"><% _t('DELETE', 'Delete') %></span></p>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user