Commit 640f0071 authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon

Design / UI changes for the skins feature

Change-Id: I5d80f4d1e385b23aaead9dbbef02f937e60cfa3c
Signed-off-by: Robert Lyon's avatarRobert Lyon <robertl@catalyst.net.nz>
parent 56cf0ba5
......@@ -48,26 +48,44 @@ if (!empty($family)) {
else {
$stylesheet = <<< EOF
/* table with gap between rows */
#fontlist td {
border-bottom: 2px solid #FFF;
font-size: .9167em;
}
#fontlist ul.actionlist {
margin: 0 0 0 10px;
float: right;
width: 180px;
font-size: 1em;
margin: 0;
width: 200px;
}
#fontlist ul.actionlist li {
list-style: none;
margin: 0;
border-top: 1px solid #d1d1d1;
padding: 2px 3px;
line-height: 1.2em;
margin: 1px 0 2px 0;
line-height: 1.25em;
}
#fontlist ul.actionlist li a {
border: 1px solid #DADADA;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 7px 5px 7px 25px;
display: block;
color: #333333;
text-decoration: none;
background-color: #F7F7F7;
background-position: 7px 50%;
background-repeat: no-repeat;
}
#fontlist ul.actionlist li a:hover {
background-color: #ffffff;
color: #000000;
}
#fontlist ul.actionlist li a:active {
background-color: #989898;
color: #FFFFFF;
opacity: 0.9;
border: 1px solid #e3e3e3;
}
#fontlist ul.actionlist li:first-child {
border-top: none;
font-weight: bold;
padding: 5px 0 3px 0;
}
#preview {
margin: 10px 0;
}
EOF;
......
......@@ -50,6 +50,7 @@ addLoadEvent(function() {
else {
removeElementClass(fieldset.tabLink.parentNode, 'current-tab');
removeElementClass(fieldset.tabLink, 'current-tab');
addElementClass(fieldset, 'safe-hidden');
addElementClass(fieldset, 'collapsed');
}
});
......
htdocs/skin/no-thumb.png

5.73 KB | W: | H:

htdocs/skin/no-thumb.png

6.06 KB | W: | H:

htdocs/skin/no-thumb.png
htdocs/skin/no-thumb.png
htdocs/skin/no-thumb.png
htdocs/skin/no-thumb.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -104,7 +104,9 @@ input#export_submit,
input#login_submit,
.login-externallink a.btn,
input#viewlayout_submit,
input#files_filebrowser_upload {
input#files_filebrowser_upload,
input#designskinform_submit,
input#cancel_designskinform_submit {
background: url(../images/btn_bkgd.png) repeat-x 0 50%;
border-color: #0b1962;
color: #FFFFFF;
......@@ -137,7 +139,9 @@ input#export_submit:hover,
input#login_submit:hover,
.login-externallink a.btn:hover,
input#viewlayout_submit:hover,
input#files_filebrowser_upload:hover {
input#files_filebrowser_upload:hover,
input#designskinform_submit:hover,
input#cancel_designskinform_submit:hover {
background: url(../images/btn_bkgd_hover.png) repeat-x 0 50%;
border-color: #0b1962;
color: #FFFFFF;
......@@ -170,7 +174,9 @@ input#export_submit:active,
input#login_submit:active,
.login-externallink a.btn:active,
input#viewlayout_submit:active,
input#files_filebrowser_upload:active {
input#files_filebrowser_upload:active,
input#designskinform_submit:active,
input#cancel_designskinform_submit:active {
background: url(../images/btn_bkgd_focus.png) repeat-x 0 50%;
border-color: #3C7FB1;
color: #FFFFFF;
......@@ -180,7 +186,8 @@ input#files_filebrowser_upload:active {
input#addviews_submit,
input#edituser_suspend_submit,
input#friendscontrol_submit,
input#usertype_typesubmit {
input#usertype_typesubmit,
.subpage .skinsbtns .btn {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey.png) repeat-x 0 50%;
color: #333333;
......@@ -189,7 +196,8 @@ input#usertype_typesubmit {
input#addviews_submit:hover,
input#edituser_suspend_submit:hover,
input#friendscontrol_submit:hover,
input#usertype_typesubmit:hover {
input#usertype_typesubmit:hover,
.subpage .skinsbtns .btn:hover {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey_hover.png) repeat-x 0 50%;
color: #333333;
......@@ -198,7 +206,8 @@ input#usertype_typesubmit:hover {
input#addviews_submit:active,
input#edituser_suspend_submit:active,
input#friendscontrol_submit:active,
input#usertype_typesubmit:active {
input#usertype_typesubmit:active,
.subpage .skinsbtns .btn:active {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey_focus.png) repeat-x 0 50%;
color: #333333;
......@@ -494,6 +503,10 @@ table.attachments {
border-color: #b4cbda;
background-color: #b4cbda;
}
/* Portfolio > Pages > Edit page > Choose skin tab */
div.currentskin {
background: #e9f1f6;
}
/* Groups > Group's about page */
.group-info {
background: #F4F7F9;
......
......@@ -112,7 +112,9 @@ input#export_submit,
input#login_submit,
.login-externallink a.btn,
input#viewlayout_submit,
input#files_filebrowser_upload {
input#files_filebrowser_upload,
input#designskinform_submit,
input#cancel_designskinform_submit {
border-color: #51732f;
background: url(../images/btn_bkgd.png) repeat-x 0 50%;
color: #FFFFFF;
......@@ -145,7 +147,9 @@ input#export_submit:hover,
input#login_submit:hover,
.login-externallink a.btn:hover,
input#viewlayout_submit:hover,
input#files_filebrowser_upload:hover {
input#files_filebrowser_upload:hover,
input#designskinform_submit:hover,
input#cancel_designskinform_submit:hover {
border-color: #73b332;
background: url(../images/btn_bkgd_hover.png) repeat-x 0 50%;
color: #FFFFFF;
......@@ -178,7 +182,9 @@ input#export_submit:active,
input#login_submit:active,
.login-externallink a.btn:active,
input#viewlayout_submit:active,
input#files_filebrowser_upload:active {
input#files_filebrowser_upload:active,
input#designskinform_submit:active,
input#cancel_designskinform_submit:active {
border-color: #244700;
background: url(../images/btn_bkgd_focus.png) repeat-x 0 50%;
color: #FFFFFF;
......@@ -188,7 +194,8 @@ input#files_filebrowser_upload:active {
input#addviews_submit,
input#edituser_suspend_submit,
input#friendscontrol_submit,
input#usertype_typesubmit {
input#usertype_typesubmit,
.subpage .skinsbtns .btn {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey.png) repeat-x 0 50%;
color: #333333;
......@@ -197,7 +204,8 @@ input#usertype_typesubmit {
input#addviews_submit:hover,
input#edituser_suspend_submit:hover,
input#friendscontrol_submit:hover,
input#usertype_typesubmit:hover {
input#usertype_typesubmit:hover,
.subpage .skinsbtns .btn:hover {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey_hover.png) repeat-x 0 50%;
color: #333333;
......@@ -206,7 +214,8 @@ input#usertype_typesubmit:hover {
input#addviews_submit:active,
input#edituser_suspend_submit:active,
input#friendscontrol_submit:active,
input#usertype_typesubmit:active {
input#usertype_typesubmit:active,
.subpage .skinsbtns .btn:active {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey_focus.png) repeat-x 0 50%;
color: #333333;
......@@ -1436,6 +1445,17 @@ table.mceLayout td.mceToolbar td {
table.templateresults td.right input.submit {
margin: 0 0 5px 7px;
}
/* Portfolio > Pages > Edit page > Choose skin tab */
div.skins-wrap {
margin-left: 0;
}
div.currentskin {
margin: 0 0 10px 0;
float: none;
display: block;
width: auto;
text-align: center;
}
/* Portfolio > Export */
#whatcollections col, #whatviews col {
float: left;
......@@ -1553,6 +1573,11 @@ table.mceLayout td.mceToolbar td {
#search_advanced_container #search_share_container {
padding-left: 0;
}
/* Portfolio > Skins */
.skinthumb {
width: 96%;
padding: 10px 1.8%;
}
/* Groups > My/Find groups */
.listing ul.groupuserstatus {
float: none;
......
......@@ -120,7 +120,9 @@ input#export_submit,
input#login_submit,
.login-externallink a.btn,
input#viewlayout_submit,
input#files_filebrowser_upload {
input#files_filebrowser_upload,
input#designskinform_submit,
input#cancel_designskinform_submit {
background: url(../images/btn_bkgd.png) repeat-x 0 50%;
border-color: #1c3c47;
color: #FFFFFF;
......@@ -153,7 +155,9 @@ input#export_submit:hover,
input#login_submit:hover,
.login-externallink a.btn:hover,
input#viewlayout_submit:hover,
input#files_filebrowser_upload:hover {
input#files_filebrowser_upload:hover,
input#designskinform_submit:hover,
input#cancel_designskinform_submit:hover {
background: url(../images/btn_bkgd_hover.png) repeat-x 0 50%;
border-color: #1c3c47;
color: #FFFFFF;
......@@ -186,7 +190,9 @@ input#export_submit:active,
input#login_submit:active,
.login-externallink a.btn:active,
input#viewlayout_submit:active,
input#files_filebrowser_upload:active {
input#files_filebrowser_upload:active,
input#designskinform_submit:active,
input#cancel_designskinform_submit:active {
background: url(../images/btn_bkgd_focus.png) repeat-x 0 50%;
border-color: #1c3c47;
color: #FFFFFF;
......@@ -196,7 +202,8 @@ input#files_filebrowser_upload:active {
input#addviews_submit,
input#edituser_suspend_submit,
input#friendscontrol_submit,
input#usertype_typesubmit {
input#usertype_typesubmit,
.subpage .skinsbtns .btn {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey.png) repeat-x 0 50%;
color: #333333;
......@@ -205,7 +212,8 @@ input#usertype_typesubmit {
input#addviews_submit:hover,
input#edituser_suspend_submit:hover,
input#friendscontrol_submit:hover,
input#usertype_typesubmit:hover {
input#usertype_typesubmit:hover,
.subpage .skinsbtns .btn:hover {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey_hover.png) repeat-x 0 50%;
color: #333333;
......@@ -214,7 +222,8 @@ input#usertype_typesubmit:hover {
input#addviews_submit:active,
input#edituser_suspend_submit:active,
input#friendscontrol_submit:active,
input#usertype_typesubmit:active {
input#usertype_typesubmit:active,
.subpage .skinsbtns .btn:active {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey_focus.png) repeat-x 0 50%;
color: #333333;
......@@ -596,6 +605,15 @@ tr.incomplete td {
#copyview .searchquery {
background: #0C2839;
}
/* Portfolio > Pages > Edit page > Choose skin tab */
div.currentskin {
background: #000000;
}
ul.userskins,
ul.siteskins,
ul.favorskins {
background: #10171A;
}
/* Portfolio > Collections > Edit collection */
#collectionpageswrap {
background: #10171A;
......@@ -620,6 +638,17 @@ tr.incomplete td {
#accesslistitems td {
color: #FFFFFF;
}
/* Portfolio > Skins */
.skinthumb {
background: #10171A;
}
/* Portfolio > Skins > Edit skin */
#designskinform_view_background_image_open_upload_browse_container,
#designskinform_view_background_image_upload_browse,
#designskinform_body_background_image_open_upload_browse_container,
#designskinform_body_background_image_upload_browse {
background: #000000;
}
/* Portfolio > Export */
#export fieldset table colgroup col {
border-color: #080D0F;
......
htdocs/theme/primaryschool/static/images/inpage-active-left.png

989 Bytes | W: | H:

htdocs/theme/primaryschool/static/images/inpage-active-left.png

1019 Bytes | W: | H:

htdocs/theme/primaryschool/static/images/inpage-active-left.png
htdocs/theme/primaryschool/static/images/inpage-active-left.png
htdocs/theme/primaryschool/static/images/inpage-active-left.png
htdocs/theme/primaryschool/static/images/inpage-active-left.png
  • 2-up
  • Swipe
  • Onion skin
htdocs/theme/primaryschool/static/images/inpage-active-right.png

1.02 KB | W: | H:

htdocs/theme/primaryschool/static/images/inpage-active-right.png

1.13 KB | W: | H:

htdocs/theme/primaryschool/static/images/inpage-active-right.png
htdocs/theme/primaryschool/static/images/inpage-active-right.png
htdocs/theme/primaryschool/static/images/inpage-active-right.png
htdocs/theme/primaryschool/static/images/inpage-active-right.png
  • 2-up
  • Swipe
  • Onion skin
htdocs/theme/primaryschool/static/images/inpage-bkgd.png

961 Bytes | W: | H:

htdocs/theme/primaryschool/static/images/inpage-bkgd.png

987 Bytes | W: | H:

htdocs/theme/primaryschool/static/images/inpage-bkgd.png
htdocs/theme/primaryschool/static/images/inpage-bkgd.png
htdocs/theme/primaryschool/static/images/inpage-bkgd.png
htdocs/theme/primaryschool/static/images/inpage-bkgd.png
  • 2-up
  • Swipe
  • Onion skin
htdocs/theme/primaryschool/static/images/inpage-left.png

1012 Bytes | W: | H:

htdocs/theme/primaryschool/static/images/inpage-left.png

1.16 KB | W: | H:

htdocs/theme/primaryschool/static/images/inpage-left.png
htdocs/theme/primaryschool/static/images/inpage-left.png
htdocs/theme/primaryschool/static/images/inpage-left.png
htdocs/theme/primaryschool/static/images/inpage-left.png
  • 2-up
  • Swipe
  • Onion skin
htdocs/theme/primaryschool/static/images/inpage-right.png

3.12 KB | W: | H:

htdocs/theme/primaryschool/static/images/inpage-right.png

3.45 KB | W: | H:

htdocs/theme/primaryschool/static/images/inpage-right.png
htdocs/theme/primaryschool/static/images/inpage-right.png
htdocs/theme/primaryschool/static/images/inpage-right.png
htdocs/theme/primaryschool/static/images/inpage-right.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -108,7 +108,9 @@ input#export_submit,
input#login_submit,
.login-externallink a.btn,
input#viewlayout_submit,
input#files_filebrowser_upload {
input#files_filebrowser_upload,
input#designskinform_submit,
input#cancel_designskinform_submit {
background: url(../images/btn_bkgd.png) repeat-x 0 50%;
border: 1px solid #ab650f;
color: #000000;
......@@ -141,7 +143,9 @@ input#export_submit:hover,
input#login_submit:hover,
.login-externallink a.btn:hover,
input#viewlayout_submit:hover,
input#files_filebrowser_upload:hover {
input#files_filebrowser_upload:hover,
input#designskinform_submit:hover,
input#cancel_designskinform_submit:hover {
background: url(../images/btn_bkgd_hover.png) repeat-x 0 50%;
border: 1px solid #ab650f;
color: #000000;
......@@ -174,7 +178,9 @@ input#export_submit:active,
input#login_submit:active,
.login-externallink a.btn:active,
input#viewlayout_submit:active,
input#files_filebrowser_upload:active {
input#files_filebrowser_upload:active,
input#designskinform_submit:active,
input#cancel_designskinform_submit:active {
background: url(../images/btn_bkgd_focus.png) repeat-x 0 50%;
border: 1px solid #ca7711;
color: #000000;
......@@ -184,7 +190,8 @@ input#files_filebrowser_upload:active {
input#addviews_submit,
input#edituser_suspend_submit,
input#friendscontrol_submit,
input#usertype_typesubmit {
input#usertype_typesubmit,
.subpage .skinsbtns .btn {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey.png) repeat-x 0 50%;
color: #333333;
......@@ -193,7 +200,8 @@ input#usertype_typesubmit {
input#addviews_submit:hover,
input#edituser_suspend_submit:hover,
input#friendscontrol_submit:hover,
input#usertype_typesubmit:hover {
input#usertype_typesubmit:hover,
.subpage .skinsbtns .btn:hover {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey_hover.png) repeat-x 0 50%;
color: #333333;
......@@ -202,7 +210,8 @@ input#usertype_typesubmit:hover {
input#addviews_submit:active,
input#edituser_suspend_submit:active,
input#friendscontrol_submit:active,
input#usertype_typesubmit:active {
input#usertype_typesubmit:active,
.subpage .skinsbtns .btn:active {
border: 1px solid #707070;
background: url(../images/btn_bkgd_grey_focus.png) repeat-x 0 50%;
color: #333333;
......@@ -518,16 +527,21 @@ div.pagination a {
div.tabswrap {
background: url(../images/inpage-right.png) no-repeat right 0;
}
form#profileform {
form#profileform,
form#designskinform {
background: url(../images/inpage-right.png) no-repeat right 0;
}
.no-js form#profileform {
.no-js form#profileform,
.no-js form#designskinform {
background: none;
}
ul.in-page-tabs {
background: url(../images/inpage-left.png) no-repeat 0 0;
padding-left: 10px;
}
ul.in-page-tabs li {
vertical-align: top;
}
ul.in-page-tabs li a,
ul.in-page-tabs li a:link,
ul.in-page-tabs li a:visited,
......@@ -536,11 +550,10 @@ ul.in-page-tabs li input.linkbtn,
ul.searchtab li span.inactive {
color: #FFFFFF;
background: none;
height: 34px;
line-height: 38px;
padding: 0 10px;
padding: 10px 10px;
border: 0;
margin: 0;
display: table-cell;
}
ul.in-page-tabs li a:hover,
ul.in-page-tabs li input:hover {
......@@ -556,8 +569,6 @@ ul.in-page-tabs li a.current-tab:active,
ul.in-page-tabs li input.current-tab {
color: #000000;
background: url(../images/inpage-active-left.png) no-repeat left top;
height: 34px;
line-height: 36px;
border: 0;
margin: 0 0 0 -3px;
}
......@@ -866,6 +877,10 @@ a.persona-button:before{ /* Triangle */
.submissionform {
background: #ced0e0;
}
/* Portfolio > Pages > Edit page > Choose skin tab */
div.currentskin {
background: #ecf0fc;
}
/* Portfolio > Collections > Edit collection */
#collectionpageswrap {
background: #ecf0fc;
......
......@@ -248,6 +248,8 @@ form#register table table {
#newurl_submit_container th {
padding-top: 12px;
}
/* Configure site > Skins */
/* Configure site > Files */
/* Users > User search */
......
/* ===== CSS for index page with all skins ===== */
/* CSS for index page with all skins */
.skinthumb {
float: left;
width: 270px;
height: 180px;
padding: 0px 20px 40px 20px;
padding: 0;
margin: 0 10px 10px 0;
}
.skinthumb h3 {
margin-bottom: 2px;
.skinthumb .skin-controls {
float: right;
margin-left: 10px;
}
.skinthumb .skin-controls a {
cursor: pointer;
height: 24px;
margin: 0 0 0 5px;
padding: 0;
width: 24px;
display: inline-block;
text-indent: -9999px;
}
img.skinthumb {
border: 1px solid #333;
.skinthumb .skin-header {
margin-bottom: 3px;
min-height: 24px;
}
.skinthumb a:hover img {
filter:alpha(opacity=50);
opacity: 0.5;
.skinthumb .skin-header .title {
margin: 0;
padding-bottom: 3px;
}
.skinactions {
width: 240px;
text-align:left;
.skinthumb .skin-content {
padding-top: 3px;
text-align: center;
}
#skinactions .btn-add {
float: right;
.skinthumb .skin-content a {
display: block;
}
.editskin {
float: right;
margin-right: 30px;
color: #aaaaaa;
.skinthumb a:hover img {
filter: alpha(opacity=50);
opacity: 0.5;
}
/* ====== CSS for page skin selection tab ====== */
/* CSS for page skin selection tab */
div.skintype {
float: left;
width: 100px;
margin: 0 10px 0 0;
}
div.currentskin {
width: auto;
float: left;
width: 240px;
display: inline-block;
margin: 0;
padding-top: 10px;
padding-left: 34px;
padding-right: 15px;
padding-bottom: 10px;
background: #eee;
margin: -20px 15px 10px -280px;
float: left;
}
div.currentskin span {
display: block;
margin-top: 3px;
text-align: center;
div.currentskin div.warning {
text-align: left;
margin-bottom: 10px;
}
div.currentskin div.submitcancel {
margin: 10px 0 0 0;
}
div.skins-wrap {
margin-left: 280px;
}
div.skins-right {
margin-top: 20px;
}
div.skins-right .title {
margin: 3px 0 0 0;
height: 20px;
line-height: 20px;
}
div.userskins,
div.siteskins,
div.favorskins {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 155px;
width: 650px;
height: 160px;
width: 100%;
overflow: auto;
}
ul.userskins,