diff --git a/README.md b/README.md index ce2b8a0..d1e9035 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,30 @@ Default Theme -================ +============= Pi Engine default theme + + + + +**Folder and file skeleton** + +* Templates REQUIRED for front: + * tmplate/layout-front.phtml - complete layout template: header, footer, body, blocks, navigation + * tmplate/layout-simple.phtml - error page layout: header, footer, body + * tmplate/layout-style.phtml - content with stylesheets + * tmplate/layout-content.phtml - raw content without stylesheets + * template/error.phtml - defined in var/config/config.application.php: view_manager.error_template +* Templates REQUIRED for admin: + * tmplate/layout-admin.phtml - backoffice layout +* Templates OPTIONAL for front: + * template/page-zone.phtml - for block manipulation on a page + * template/block.phtml - called by layout-front.phtml + * template/error-404.phtml - defined in var/config/config.application.php: view_manager.not_found_template + * template/error-denied.phtml - defined in var/config/config.application.php: view_manager.denied_template + * template/error-exception.phtml - defined in var/config/config.application.php: view_manager.exception_template +* Stylesheet file REQUIRED: +* asset/css/style.css - main css file + +**Best practices** +* It is highly recommended to use 'pi-' as prefix for all global id and class names used in theme to avoid conflicts. +* It is highly recommended to use module identity as prefix for module id and class names used in templates to avoid conflicts, for instance 'demo-'. diff --git a/asset/css/admin.css b/asset/css/admin.css old mode 100644 new mode 100755 index f12428d..a542d1b --- a/asset/css/admin.css +++ b/asset/css/admin.css @@ -1,281 +1,246 @@ -/*admin layout*/ +/* Base */ body { - overflow: hidden; - width: 100%; - height: 100%; - margin: 0; - background: #f1f1f1; -} -#pi-bar { - background: #0082bf; - height: 54px; - border-bottom: 1px solid #79a3b9; - font-size: 12px; -} -.admin-logo { - display: block; - float: left; - font-size: 45px; - font-weight: bold; - margin: 10px 0 0 20px; - width: 120px; - color: #fff; - line-height: 34px; - height: 34px; -} -.admin-logo:hover { - text-decoration: none; - color: #fff; -} -.operation-switch { - float: left; -} -.operation-switch a { - display: block; - text-align: center; - color: #fff; - float: left; - height: 34px; - padding: 10px 15px; - text-transform: uppercase; - letter-spacing: 1px; -} -.operation-switch a:hover { - background: #4DB1E3; -} -.operation-switch .active { - background: #005580 !important; - cursor: default; -} -.operation-switch a.disabled { - cursor: default; - color: #4da8d2; - background: none; -} -.operation-switch a:hover { - text-decoration: none; -} -.operation-switch i { - display: block; - font-size: 20px; - margin-bottom: 1px; -} -.pi-bar-user { - float: right; - margin:17px 30px 0 0; - height: 20px; - line-height: 20px; - font-size: 12px; -} -.pi-bar-user a { - color: #fff; -} -.pi-bar-user .dropdown { - display: inline-block; - margin-right: 15px; -} -.pi-bar-user .caret { - border-top-color: #fff; -} -.pi-bar-user i { - margin-right: 1px; -} -.nav-modules a { - display: block; - height: 30px; - line-height: 30px; - color: #333; - padding-left: 20px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} -.nav-modules a:hover { - background: #E7E7E7; - text-decoration: none; -} -.nav-modules .active a { - background: #ccc; - font-weight: bold; -} -/* -.nav-modules .active { - position: relative; -} -.nav-modules .active:after { - content: "\f0d9"; - font-family: FontAwesome; - font-size: 28px; - position: absolute; - right: 0; - top: 6px; - color: #fff; -}*/ - -.module-menu { - white-space: nowrap; - border-bottom: 1px solid #d7d7d7; - padding: 10px 0 10px 20px; - position: relative; - z-index: 1001; - background: #fff; -} -.module-menu li { - float: left; -} -.module-menu a { - display: block; - padding: 6px 15px; - margin-left: -1px; - color: #444; - border: 1px solid #DCDCDC; - background-color: #F5F5F5; - background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1); - background-image: -webkit-linear-gradient(center top , #F5F5F5, #F1F1F1); - background-image: linear-gradient(center top , #F5F5F5, #F1F1F1); -} - -.module-menu a:hover { - background: #f8f8f8; - text-decoration: none; - border-color: #ccc; - box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1); -} -.module-menu .active a { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset; - border-color: #ccc; - color: #333; - background: #eee; - background-image: -moz-linear-gradient(center top , #EEEEEE, #E0E0E0); - background-image: -webkit-linear-gradient(center top , #EEEEEE, #E0E0E0); - background-image: linear-gradient(center top , #EEEEEE, #E0E0E0); -} -.module-menu li:first-child a { - margin-left: 0; - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; -} -.module-menu li:last-child a { - border-bottom-right-radius: 4px; - border-top-right-radius: 4px; -} -.module-menu-shadow { - position: absolute; - height: 8px; - opacity: 0; - left: 2px; - right: 2px; - bottom: -8px; - background: -moz-linear-gradient(top, rgba(0, 0, 0, .3), transparent); - background: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), transparent); - background: linear-gradient(top, rgba(0, 0, 0, .3), transparent); -} -#pi-wrap { - position: absolute; - top: 65px; - bottom: 0; - left: 0; - right: 0; -} -#modules-menu { - position: relative; - width: 140px; - overflow: auto; - background: #f1f1f1; - height: 100%; + overflow: hidden; + width: 100%; + height: 100%; + margin: 0; + background: #f1f1f1; } -#pi-content { - position: absolute; - left: 140px; - right: 0; - top: 0; - bottom: 0; - background: #fff; - box-shadow: 0 0 2px rgba(0, 0, 0, .3); +/* Layout */ +#pi-header-bar { + background: #0082bf; + height: 54px; + border-bottom: 1px solid #79a3b9; + font-size: 12px; } -.pi-content-inner { - position: absolute; - padding-top: 64px; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: auto; + +.pi-admin-logo { + display: block; + float: left; + font-size: 45px; + font-weight: bold; + margin: 10px 0 0 20px; + width: 120px; + color: #fff; + line-height: 34px; + height: 34px; } -.pi-main-content { - min-width: 840px; - min-height: 635px; - margin: 0 20px; + +.pi-admin-logo:hover { + text-decoration: none; + color: #fff; } -.pi-main-content .nav { - margin-bottom: 15px; + +.pi-operation-switch { + float: left; } -.pi-footer { - border-top: 1px solid #d7d7d7; - padding: 10px 0 0 20px; + +.pi-operation-switch a { + display: block; + text-align: center; + color: #fff; + float: left; + height: 34px; + padding: 10px 15px; + text-transform: uppercase; + letter-spacing: 1px; } -.pi-footer a { - margin-right: 20px; + +.pi-operation-switch a:hover { + background: #4DB1E3; } -.pi-footer > span { - margin-right: 20px; + +.pi-operation-switch .active { + background: #005580 !important; + cursor: default; +} + +.pi-operation-switch a.disabled { + cursor: default; + color: #4da8d2; + background: none; } -/* Box with border */ -.widget { - margin-bottom: 20px; - border: 1px solid #d7d7d7; +.pi-operation-switch a:hover { + text-decoration: none; } -.widget-header { - padding: 5px 10px; - background: #F8F8F8; - border-bottom: 1px solid #d7d7d7; + +.pi-operation-switch i { + display: block; + font-size: 20px; + margin-bottom: 1px; } -.widget-header * { - margin-bottom: 0; + +/* User bar */ +.pi-user-bar .dropdown-menu { + z-index: 1002; } -.widget-body { - padding: 18px 20px; + +.pi-user-bar { + float: right; + margin: 17px 30px 0 0; + height: 20px; + line-height: 20px; + font-size: 12px; } -.pi-zone-module { - margin: 0 20px; + +.pi-user-bar a { + color: #fff; } -.dl-horizontal dt { - width: 120px; + +.pi-user-bar .dropdown { + display: inline-block; + margin-right: 15px; } -.dl-horizontal dd { - margin-left: 140px; + +.pi-user-bar .caret { + border-top-color: #fff; } -/*admin common*/ -ul { - margin: 0 0 10px 0; +.pi-user-bar i { + margin-right: 1px; } -ul ul { - margin: 0 0 10px 20px; + +.pi-nav-modules a { + display: block; + height: 30px; + line-height: 30px; + color: #333; + padding-left: 20px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } -.page-header { - margin: 0 0 15px 0; - border-bottom: none; - padding: 0; + +.pi-nav-modules a:hover { + background: #E7E7E7; + text-decoration: none; } -.page-header h2 { - margin: 0; - font-size: 30px; + +.pi-nav-modules .active a { + background: #ccc; + font-weight: bold; } -.page-header .nav { - margin-bottom: 0; + +.pi-module-menu { + white-space: nowrap; + border-bottom: 1px solid #d7d7d7; + padding: 10px 0 10px 20px; + position: relative; + z-index: 1001; + background: #fff; } -.page-header .search-query { - border-radius: 5px; + +.pi-module-menu li { + float: left; } -fieldset dl { - margin-top: 0; + +.pi-module-menu a { + display: block; + padding: 6px 15px; + margin-left: -1px; + color: #444; + border: 1px solid #DCDCDC; + background-color: #F5F5F5; + background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1); + background-image: -webkit-linear-gradient(center top , #F5F5F5, #F1F1F1); + background-image: linear-gradient(center top , #F5F5F5, #F1F1F1); } -legend { - border-bottom: 1px solid #d7d7d7; + +.pi-module-menu a:hover { + background: #f8f8f8; + text-decoration: none; + border-color: #ccc; + box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1); } -.pi-bar-user .dropdown-menu { - z-index: 1002; + +.pi-module-menu .active a { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset; + border-color: #ccc; + color: #333; + background: #eee; + background-image: -moz-linear-gradient(center top , #EEEEEE, #E0E0E0); + background-image: -webkit-linear-gradient(center top , #EEEEEE, #E0E0E0); + background-image: linear-gradient(center top , #EEEEEE, #E0E0E0); } + +.pi-module-menu li:first-child a { + margin-left: 0; + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} + +.pi-module-menu li:last-child a { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; +} + +.pi-module-menu-shadow { + position: absolute; + height: 8px; + opacity: 0; + left: 2px; + right: 2px; + bottom: -8px; + background: -moz-linear-gradient(top, rgba(0, 0, 0, .3), transparent); + background: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), transparent); + background: linear-gradient(top, rgba(0, 0, 0, .3), transparent); +} + +#pi-wrapper { + position: absolute; + top: 65px; + bottom: 0; + left: 0; + right: 0; +} + +#pi-modules-menu { + position: relative; + width: 140px; + overflow: auto; + background: #f1f1f1; + height: 100%; +} + +#pi-content { + position: absolute; + left: 140px; + right: 0; + top: 0; + bottom: 0; + background: #fff; + box-shadow: 0 0 2px rgba(0, 0, 0, .3); +} + +.pi-content-inner { + position: absolute; + padding-top: 64px; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: auto; +} + +.pi-main-content { + min-width: 840px; + min-height: 635px; + margin: 0 20px; +} + +.pi-main-content .nav { + margin-bottom: 15px; +} + +/* Footer */ +.pi-footer { + border-top: 1px solid #d7d7d7; + padding: 10px 0 0 20px; + margin-top: 40px; +} + +.pi-footer a { + margin-right: 20px; +} \ No newline at end of file diff --git a/asset/css/front.css b/asset/css/front.css index 0f6d3da..b4f3b1f 100644 --- a/asset/css/front.css +++ b/asset/css/front.css @@ -1,176 +1,315 @@ +/* Base */ -/* Block zones */ -/* - |<------------------ center ------------------>| - - -------------------------------------------------------------------------------- - | | | | - | | 2 | | - | | | | - | |------------------------------------------------------------| | - | | | | | - | | 3 | 4 | | - | | | | | - | 1 |------------------------------------------------------------| 7 | - | | | | - | | content | | - | | | | - | |------------------------------------------------------------| | - | | | | | - | | 5 | 6 | | - | | | | | - |--------|------------------------------------------------------------|--------| - | | - | 8 | - | | - -------------------------------------------------------------------------------- - - |<------------------ center ------------------>| - */ - -/* Zones */ -.pi-zone-1, -.pi-zone-7 { - -} -.pi-zone-2 { +/* Layout */ +.pi-main-left { + margin-left: 320px; +} + +.pi-main-right { + margin-right: 320px; +} + +.pi-zone-1 { + float: left; + width: 300px; +} + +.pi-zone-8 { + float: right; + width: 300px; +} + +.pi-zone-1 { + float: left; + width: 300px; } + .pi-zone-3, .pi-zone-5 { - float: left; - width: 49.5%; + width: 50%; + float: left; } + .pi-zone-4, .pi-zone-6 { - float: right; - width: 49.5%; + float: right; + width: 50%; } -.pi-zone-8 { + +.pi-zone-3 .pi-block, +.pi-zone-5 .pi-block { + margin-right: 10px; } -.pi-zone-module { - padding: 5px; +.pi-zone-4 .pi-block, +.pi-zone-6 .pi-block { + margin-left: 10px; } -/* Block */ -.block-container { - margin-bottom: 15px; +.pi-module-content, +.pi-zone-99 { + clear: both; +} + + +/* Header */ +.pi-header { + margin: 20px auto; +} + +/* Logo: image, headline, tagline */ +.pi-logo { + float: left; + font-family: sans-serif, Arial; +} + +.pi-logo img {; +} + +.pi-logo a { + text-decoration: none; +} + +.pi-logo a:hover { + color: #0088CC; +} + +.pi-logo-symbol { + font-size: 64px; + line-height: 0; + text-transform: lowercase; + display: none; +} + +.pi-logo-headline { + font: bold 40px Georgia, monospace, Arial; +} + +.pi-logo-tagline { + color: #0088CC; + font-style: normal; + font-size: .9em; + display: block; +} + +/* User bar */ +.pi-user-bar { + margin: 5px 10px 0 5px; + height: 20px; + line-height: 20px; + font-size: .9em; +} + +.pi-user-bar { + color: #666; +} + +.pi-user-bar a { + color: #666; +} + +.pi-user-bar a:hover { + color: #005580; } -.block-header { - background: #f5f5f5; - border: 1px solid #e6e6e6; - border-bottom-color: #b4c8da; - border-top: none; - height: 34px; - line-height: 34px; - padding: 0 14px; + +.pi-user-bar .dropdown { + display: inline-block; + margin-right: 15px; +} + +.pi-user-bar .caret { + border-top-color: #666; +} + +/* Navigation */ +.pi-menu { + font-family: Helvetica, sans-serif; + border: 1px solid #006ca3; + background-color: #0293da; + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04a0df', endColorstr='#0180d1', GradientType=0); + background-image: -moz-linear-gradient(top, #04a0df, #0180d1); + background-image: -webkit-linear-gradient(top, #04a0df, #0180d1); + background-image: -o-linear-gradient(top, #04a0df, #0180d1); + background-image: linear-gradient(to bottom, #04a0df, #0180d1); + box-shadow: 0 1px 1px rgba(0, 0, 0, .2); + height: 40px; + border-radius: 4px; + margin-bottom: 20px; +} + +.pi-menu li { + float: left; + position: relative; +} + +.pi-menu a { + display: block; + padding: 10px 20px; + text-decoration: none; +} + +.pi-menu ul a { + padding: 5px 0 5px 20px; +} + +.pi-menu li:hover >a { + background: #0076b1; +} + +.pi-menu ul li:hover >a { + background: #0292da; + border-radius: 3px; +} + +.pi-menu >.active >a { + background-color: #0076b1; + box-shadow: inset 0 3px 8px #005986; +} + +.pi-menu ul { + position: absolute; + width: 180px; + z-index: 2; + background: #0076b1; + left: 0; + margin: 0; + list-style: none; + display: none; + border-radius: 3px; +} + +.pi-menu ul ul { + left: 179px; + top: -1px; } -.block-header-bg { - content: ""; - height: 2px; - width: 100%; - display: block; - background-color: #195d9f; - filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#0096d2,EndColorStr=#195d9f); - background-image: -moz-linear-gradient(left,#0096d2,#195d9f); - background-image: -webkit-linear-gradient(left,#0096d2,#195d9f); - background-image: -o-linear-gradient(left,#0096d2,#195d9f); + +.pi-menu li li { + float: none; } -.block-header-title { - font-size: 18px; - font-family:"Microsoft YaHei"; - color: #333; +.pi-menu a { + color: #fff; } -.block-subline { - color: #808080; + +.pi-menu li:hover >ul { + display: block; } -.block-subline a { - color: #808080; + +.pi-breadcrumb { + margin-bottom: 0; + padding: 10px 0; } -.block-tab { - margin: 8px 0 0; - font-size: 12px; +/* Block zones */ +.pi-zone-0 .pi-block-header { + display: none; } -.block-tab li { - float: left; - height: 25px; - line-height: 24px; - padding:0 8px; - border: 1px solid transparent; - border-top-width: 2px; - border-bottom:none; + +.pi-zone-0 .pi-block-body { + padding: 0; } -.block-tab .active { - background: #fff; - border-top: 2px solid #d01628; - border-left: 1px solid #b4c8da; - border-right: 1px solid #b4c8da; + + + +/* Block */ +.pi-block { + margin-bottom: 20px; + border: 1px solid #ddd; + border-radius: 4px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); } -.block-body { - padding: 12px 8px 0 10px; - border: 1px solid #e6e6e6; - border-top: none; + +.pi-block-header { + border-top: 1px solid #fff; + border-bottom: 1px solid #ddd; + height: 40px; + background-color: #f6f6f6; + background-image: -moz-linear-gradient(top, #fafafa, #f2f2f2); + background-image: -webkit-linear-gradient(top, #fafafa, #f2f2f2); + background-image: -o-linear-gradient(top, #fafafa, #f2f2f2); + background-image: linear-gradient(to bottom, #fafafa, #f2f2f2); } -.block-body ul { - margin: 0; + +.pi-block-title { + float: left; + margin-left: 20px; } -.block-body input, -.block-body textarea, -.block-body uneditable-input { - max-width: 80%; +.pi-block-subline { + margin: 10px 10px 0 0; } +.pi-block-body { + padding: 20px; +} +.pi-block-tab { + margin: 0; +} -/* Article module */ -/* -.article-header { - margin-bottom: 10px; - border-bottom: 1px solid #ccc; - text-align: center; +.pi-block-tab li { + float: left; + list-style: none; } -.article-header .headline { +.pi-block-tab a { + padding: 0 15px; + display: block; + height: 41px; + line-height: 40px; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + text-decoration: none; + color: #999; } -.article-header .byline { - text-align: center; - margin-bottom: 10px; + +.pi-block-tab a:focus { + outline: none; } -.article-header .subline { +.pi-block-tab li:first-child a { + border-left: none; } -.article-body { - font-size: 14px; + +.pull-right.pi-block-tab li:first-child a { + border-left: 1px solid transparent; } -.article-body .page-subject { +.pi-block-tab .active a { + background: #fff; + border-left-color: #ddd !important; + ; + border-right-color: #ddd !important; + ; + color: #333; + font-weight: bold; } -.article-body a { - text-decoration: underline; - color: #1E50A2; + +.pi-block-body >:last-child { + margin-bottom: 0; } -.article-body a:hover { - color: #BA2636; + + +/* Footer */ +.pi-footer { + text-align: center; + margin-top: 40px; + line-height: 24px; + font-size: 12px; } -.summary { - text-align: justify; - background: #fff; - margin: 15px 0 0; - padding: 10px 5px; - line-height: 23px; - font-size: 14px; - text-indent: 2em; - border: 1px solid #dcdddd; +.pi-footer-line { + height: 0; + border-top: 1px solid #ccc; + border-bottom: 1px solid #fff; + margin-bottom: 20px; } -*/ -/*common*/ -.ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.pi-footer a, +.pi-footer .pi-divider { + color: #333; } + +.pi-footer a:hover { + color: #0088CC; +} \ No newline at end of file diff --git a/asset/css/menu.css b/asset/css/menu.css deleted file mode 100644 index 57431e7..0000000 --- a/asset/css/menu.css +++ /dev/null @@ -1,128 +0,0 @@ -/* Menu */ -.menu .divider { - background-color: #E5E5E5; - /* - border-bottom-color: #FFFFFF; - */ - border-bottom-style: solid; - border-bottom-width: 1px; - height: 1px; - margin: 0px 1px; - overflow: hidden; -} - -/* Horizontal menu */ -ul.menu-horizontal { - height: 34px; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); - margin-left: 0; -} -.menu-horizontal li { - float: left; - position: relative; - line-height: 34px; -} -.menu-horizontal li:first-child span, -.menu-horizontal li:first-child a { - border-left: none; -} -.menu-horizontal li:last-child span, -.menu-horizontal li:last-child a { - border-right: none; -} -.menu-horizontal a, -.menu-horizontal span { - color: #fff; - text-decoration: none; - display: block; - padding: 0 15px; - border-right: 1px solid #134578; - border-left: 1px solid #1f75ba; -} -.menu-horizontal li:hover > a, -.menu-horizontal li:hover > span { - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#175496,endColorstr=#1d6bad); - background-image: -moz-linear-gradient(top,#175496,#1d6bad); - background-image: -webkit-linear-gradient(top,#175496,#1d6bad); - background-image: -o-linear-gradient(top,#175496,#1d6bad); -} -.menu-horizontal > .active { - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#278dd6,endColorstr=#1b5fc2); - background-image: -moz-linear-gradient(top,#278dd6,#1b5fc2); - background-image: -webkit-linear-gradient(top,#278dd6,#1b5fc2); - background-image: -o-linear-gradient(top,#278dd6,#1b5fc2); -} -.menu-horizontal li:hover li a { - background: none; -} -.menu-horizontal ul li a:hover { - background: #144a80; - text-shadow: 0 1px 1px rgba(0,0,0, .1); -} -.menu-horizontal li:hover > ul { - display: block; -} -.menu-horizontal ul { - display: none; - width: 185px; - position: absolute; - top: 34px; - left: 0; - background: #195d9f; - font-size: 13px; - margin: 0; - z-index: 10; -} -.menu-horizontal ul li { - float: none; - margin: 0; - padding: 0; - height: 24px; - line-height: 24px; - border-top: 1px solid #268ccf; - border-bottom: 1px solid #103c67; - *margin-top: -3px; -} -.menu-horizontal ul a { - font-weight: normal; - border: none; -} -.menu-horizontal ul ul { - left: 184px; - top: -1px; -} -.menu-horizontal:after { - content: "."; - display: block; - clear: both; - visibility: hidden; - line-height: 0; - height: 0; -} -.menu-horizontal { - display: block; - white-space: nowrap; - *zoom: 1; -} - -/* Vertical menu */ -ul.menu-vertical { - padding-bottom: 100px; - background: #F2F2F2; - margin: 0; -} -.menu-vertical li { - height: 34px; - line-height: 34px; - font-size: 13px; - padding-left: 12px; - border-bottom: 1px solid #e6e6e6; - overflow: hidden; -} -.menu-vertical .active { - background: #fff; - margin-right: -1px; -} -.menu-vertical a:hover { - text-decoration: none; -} \ No newline at end of file diff --git a/asset/css/style.css b/asset/css/style.css old mode 100644 new mode 100755 index b9c1392..dd6923b --- a/asset/css/style.css +++ b/asset/css/style.css @@ -1,268 +1,115 @@ -/* Basic tags */ -body :focus { - outline: none; -} -ul, ol, li { - list-style: none; -} -p { - margin: 10px 0; -} -label, input, button, select, textarea { - line-height: 20px; -} -.checkbox, .radio { - font-size: 14px; -} +/* Bootstrap customization */ -/**#@+ Global structured: top to bottom, outside to inside */ -/* HTML body container */ -.container { - /* Inherited from Bootstrap */ -} +/* Base */ -/* Portal header */ -.portal-header { - /* To be defined */ -} -.portal-header .site-name { - /* To be defined */ +/* Elements */ +fieldset dl { + margin-top: 0; } -/* Page header */ -.header { - background: #fafafa; - background: -moz-linear-gradient(#fafafa, #eaeaea); - background: -webkit-linear-gradient(#fafafa, #eaeaea); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#eaeaea')"; - border-bottom: 1px solid #cacaca; - box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 0px 10px rgba(0,0,0,0.1); - margin-bottom: 10px; -} -.header-logo { - float: left; - font: bold 40px sans-serif, Arial; -} -.header-logo:hover { - text-decoration: none; - color: #0088CC; +form .icon-question-sign { + color: #0089D1; + float: left; + cursor: pointer; + margin: 6px 0 0 1px; + padding: 2px; } -/* Global/Sub navigation */ -/* Global */ -.global-nav { - -} -/* Global menu */ -.global-nav .menu { - color: #fff; - font: 14px "Helvetica Neue",Arial,sans-serif; - height: 35px; - background-color: #144c8d; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1e6fb2,endColorstr=#144b8c); - background-image: -moz-linear-gradient(top,#1e6fb2,#144b8c); - background-image: -webkit-linear-gradient(top,#1e6fb2,#144b8c); - background-image: -o-linear-gradient(top,#1e6fb2,#144b8c); - margin-bottom: 10px; - border-top: 1px solid #2da8d9; - border-bottom: 1px solid #9f9f9f; - box-shadow: 0 1px 0 #dfdfdf; -} -/* Global breadcrumbs */ -.global-nav .breadcrumb { - /* Inherited from Bootstrap */ +/* Components */ +.page-header { + margin: 0 0 15px 0; } -/* Sub*/ -.sub-nav { - /* To be defined */ -} -/* Sub menu */ -.sub-nav .menu { - /* To be defined */ -} -/* Sub breadcrumbs */ -.sub-nav .breadcrumb { - /* Inherited from Bootstrap */ +.page-header h2 { + margin: 0; + font-size: 30px; } - -/* Page content wrapper */ -.wrapper { - /* To be defined */ +.page-header .nav { + margin-bottom: 0; } -/* Footer */ -.footer { - color: #515151; - margin: 30px 0 0 0; - font-size: 12px; - clear: both; - text-align: center; - line-height: 24px; - background: #F2F2F2; -} -.footer a { - color: #515151; +.page-header .search-query { + border-radius: 5px; } -.footer a:hover { - color: #BD0A01; - text-decoration: underline; -} -/**#@-**/ -/* list */ -.list { - margin: 0; - font-size: 14px; - *zoom: 1; -} -.list:after, -.list li:after, -.img-text-wrapper:after { - display: block; - content: ""; - height: 0; - clear: both; -} -.list li { - background: url(../image/sprite.png) no-repeat; - height: 22px; - line-height: 22px; - padding-left: 10px; - background-position: 0 9px; - overflow: hidden; - *zoom: 1; -} -.list .timestamp { - float: right; +/** Pi Specific **/ +/* Elements */ +.dl-horizontal dt { + width: 120px; } -/* Image text compound */ -.img-text-wrapper { - margin-bottom: 10px; - *zoom: 1; -} -.img-text-wrapper img { - float: left; - margin: 3px 8px 0 0; -} -.img-text-wrapper >div { - overflow: hidden; -} -.img-text-wrapper .text-title { - display: block; - font: bold 14px/26px Arial; - height: 26px; - overflow: hidden; -} -.img-text-wrapper p { - color: #808080; - line-height: 20px; - font-size: 12px; - margin: 0; +.dl-horizontal dd { + margin-left: 140px; } -/* Figure with description */ -.figure-desc { - line-height: 20px; - color: #808080; - font-size: 12px; +/* Components */ +.pi-divider { + font-family: serif,sans-serif; + margin: 0 6px; + color: #ccc; } -.figure p { - margin: 0; -} -.figure-caption { - font-weight: bold; - text-align: center; -} - - -/* Description pair with label and text*/ -.desc-pair { - margin-left: 15px; -} -.desc-pair span { - margin-right: 6px; +.pi-legend { + display: block; + margin-bottom: 15px; + font-size: 18px; + padding: 9px 10px; + color: #333333; + border: 0; + border-bottom: 1px solid #d7d7d7; } -/* common components */ -.indent { - text-indent: 2em; -} -.overhidden { - overflow: hidden; -} -.horizontal-rule { - border-top: 1px solid #ddd; - border-bottom: 1px solid #fff; - margin-bottom: 10px; - height: 0; -} -.capitalize { - text-transform: capitalize; +/* Box with border */ +.pi-widget { + margin-bottom: 20px; + border: 1px solid #d7d7d7; } -.legend { - display: block; - margin-bottom: 15px; - font-size: 18px; - padding: 9px 10px; - color: #333333; - border: 0; - border-bottom: 1px solid #d7d7d7; -} -.divider { - color: #888; - padding: 0 5px; +.pi-widget-header { + padding: 5px 10px; + background: #F8F8F8; + border-bottom: 1px solid #d7d7d7; } -/* Popover hint message */ -.what-this { - font: bold 10px Helvetica; - text-align: center; - width: 12px; - height: 12px; - border-radius: 20px; - background: #0089D1; - display: inline-block; - color: #fff; - cursor: help; - *display: inline; - *zoom: 1; - vertical-align: middle; - margin-bottom: 9px; -} -.form-horizontal .what-this { - float: left; - margin: 9px 0 0 3px; +.pi-widget-body { + padding: 18px 20px; } +.pi-widget-body >:last-child { + margin-bottom: 0; +} +/* Avatar */ +/* @see: https://github.com/pi-engine/pi/wiki/Design.Avatar */ +.pi-avatar { + width: 80px; +} -/**#@+ Bootstrap customization **/ -.input-large { - width: 450px; +.pi-avatar-mini { + width: 16px; } -.textarea-small { - width: 200px; - height: auto; + +.pi-avatar-xsmall { + width: 24px; } -.textarea-large { - width: 450px; - height: 300px; + +.pi-avatar-small { + width: 28px; } -.textarea-long { - width: 450px; - height: 600px; + +.pi-avatar-medium { + width: 46px; } -.textarea-wide { - width: 750px; - height: 300px; + +.pi-avatar-large { + width: 96px; } -.textarea-full { - width: 95%; - height: 500px; + +.pi-avatar-xlarge { + width: 120px; } -/**#@-**/ \ No newline at end of file + +.pi-avatar-xxlarge { + width: 214px; +} \ No newline at end of file diff --git a/asset/image/logo.png b/asset/image/logo.png old mode 100644 new mode 100755 index df6d37b..fa7b6a7 Binary files a/asset/image/logo.png and b/asset/image/logo.png differ diff --git a/asset/image/screenshot.png b/asset/image/screenshot.png old mode 100644 new mode 100755 index 4d11214..52352ff Binary files a/asset/image/screenshot.png and b/asset/image/screenshot.png differ diff --git a/asset/image/search.png b/asset/image/search.png old mode 100644 new mode 100755 diff --git a/asset/image/sprite.png b/asset/image/sprite.png old mode 100644 new mode 100755 diff --git a/asset/image/wait.gif b/asset/image/wait.gif old mode 100644 new mode 100755 diff --git a/asset/image/xoops-feed.png b/asset/image/xoops-feed.png old mode 100644 new mode 100755 diff --git a/asset/js/admin.js b/asset/js/admin.js new file mode 100755 index 0000000..4201111 --- /dev/null +++ b/asset/js/admin.js @@ -0,0 +1,14 @@ +$(function() { + /* For scroll shadow */ + var a = $('.pi-content-inner'), + b = $('.module-menu-shadow').css('transition', 'opacity .2s ease-in-out'); + a.scroll(function(){ + if (a.scrollTop() > 5) { + b.css('opacity', .4); + } else { + b.css('opacity', 0); + } + }) + /* For debug info */ + $("#pi-logger-output").insertAfter($("#pi-footer")); +}); \ No newline at end of file diff --git a/asset/js/html5.js b/asset/js/html5.js old mode 100644 new mode 100755 diff --git a/asset/js/navigation.js b/asset/js/navigation.js new file mode 100755 index 0000000..61d367a --- /dev/null +++ b/asset/js/navigation.js @@ -0,0 +1,17 @@ +$(function() { + var nav = $('.default-nav'); + nav.find('>li').each(function() { + var $this = $(this); + if ($this.find('ul').length) { + $this.addClass('dropdown'); + $this.find('>a').addClass('dropdown-toggle').append(''); + } + }); + nav.find('ul').addClass('dropdown-menu'); + nav.find('.dropdown-menu li').each(function() { + var $this = $(this); + if ($this.find('ul').length) { + $this.addClass('dropdown-submenu'); + } + }); +}); \ No newline at end of file diff --git a/asset/locale/en/rtl.css b/asset/locale/en/rtl.css old mode 100644 new mode 100755 index d45532f..d0259ca --- a/asset/locale/en/rtl.css +++ b/asset/locale/en/rtl.css @@ -1,4 +1,4 @@ .rtl { - direction: RTL; - unicode-bidi: embed; -} + direction: RTL; + unicode-bidi: embed; +} \ No newline at end of file diff --git a/asset/locale/en/rtl.js b/asset/locale/en/rtl.js old mode 100644 new mode 100755 diff --git a/config.php b/config.php index ae3a52d..2689a9a 100644 --- a/config.php +++ b/config.php @@ -12,9 +12,7 @@ * @copyright Copyright (c) Pi Engine http://www.xoopsengine.org * @license http://www.xoopsengine.org/license New BSD License * @author Taiwen Jiang - * @since 3.0 * @package Pi\Theme - * @version $Id$ */ /** @@ -26,22 +24,22 @@ * tmplate/layout-simple.phtml - error page layout: header, footer, body * tmplate/layout-style.phtml - content with stylesheets * tmplate/layout-content.phtml - raw content without stylesheets - * template/error.phtml - defined in var/config/config.application.php: vivew_manager.error_template + * template/error.phtml - defined in var/config/config.application.php: view_manager.error_template, view_manager.error_exception_template * REQUIRED for admin: * tmplate/layout-admin.phtml - backoffice layout * OPTIONAL for front: * template/page-zone.phtml - for block manipulation on a page * template/block.phtml - called by layout-front.phtml - * template/error-404.phtml - defined in var/config/config.application.php: vivew_manager.not_found_template - * template/error-denied.phtml - defined in var/config/config.application.php: vivew_manager.denied_template - * template/error-exception.phtml - defined in var/config/config.application.php: vivew_manager.exception_template + * template/error-404.phtml - defined in var/config/config.application.php: view_manager.not_found_template + * template/error-denied.phtml - defined in var/config/config.application.php: view_manager.denied_template * * Stylesheet files: * REQUIRED: * asset/css/style.css - main css file * * Best practices: - * 1 It is hightly recommended to use 'pi-' as prefix for all id's used in theme to avoid conflicts. + * 1 It is highly recommended to use 'pi-' as prefix for all global id and class names used in themes to avoid conflicts. + * 2 It is highly recommended to use module identity as prefix for module id and class names used in templates to avoid conflicts, for instance 'demo-'. */ return array( @@ -49,7 +47,7 @@ * To be stored in DB */ // Version - 'version' => '1.0.0-beta.1', + 'version' => '1.0.0-rc.1', // Type of layouts available in the theme 'type' => 'both', // Potential value: 'both', 'admin', 'front', default as 'both' /**#@-**/ @@ -66,4 +64,6 @@ 'description' => 'Default theme for Pi Engine', // Parent theme from which templates can be inherited, default as 'default' 'parent' => '', + // Supported browsers + 'browser' => 'Internet Explorer: 6+; Chrome: 17+; Firefox: 10+; Safari: 5.1+; Opera: 9.8+;', ); diff --git a/module/demo/asset/script/test.css b/module/demo/asset/script/test.css index dd7a4ef..db38afe 100644 --- a/module/demo/asset/script/test.css +++ b/module/demo/asset/script/test.css @@ -1,6 +1,7 @@ .content { - font-size: 100%; + font-size: 100%; } + .test { - font-size: 50%; -} + font-size: 50%; +} \ No newline at end of file diff --git a/template/block.phtml b/template/block.phtml old mode 100644 new mode 100755 index 093a354..2ead9ad --- a/template/block.phtml +++ b/template/block.phtml @@ -58,39 +58,38 @@ if (is_array($block['content'])) { ?> -
+
-
-
+
-
-
+
@@ -99,7 +98,7 @@ if (is_array($block['content'])) {
-
+
diff --git a/template/error-404.phtml b/template/error-404.phtml old mode 100644 new mode 100755 diff --git a/template/error-denied.phtml b/template/error-denied.phtml old mode 100644 new mode 100755 diff --git a/template/error-exception.phtml b/template/error-exception.phtml old mode 100644 new mode 100755 diff --git a/template/error.phtml b/template/error.phtml old mode 100644 new mode 100755 index ac5ab96..a36ba3b --- a/template/error.phtml +++ b/template/error.phtml @@ -4,3 +4,65 @@

escape($message ?: __('Please visit later.')); ?>

+ + + + +display_exceptions) && $this->display_exceptions): ?> + +exception) && $this->exception instanceof Exception): ?> + +

exception); ?>

+
+
File:
+
+
path($this->exception->getFile()); ?>: exception->getLine(); ?>
+
+
Message:
+
+
exception->getMessage(); ?>
+
+
Stack trace:
+
+
path($this->exception->getTraceAsString()); ?>
+
+
+exception->getPrevious(); + if ($e) : +?> + + +
    + +
  • +

    +
    +
    File:
    +
    +
    path($e->getFile()); ?>: getLine(); ?>
    +
    +
    Message:
    +
    +
    escape($e->getMessage()); ?>
    +
    +
    Stack trace:
    +
    +
    path($e->getTraceAsString()); ?>
    +
    +
    +
  • + getPrevious(); + endwhile; + ?> +
+ + + + +

No Exception available

+ + + + \ No newline at end of file diff --git a/template/index.html b/template/index.html old mode 100644 new mode 100755 diff --git a/template/layout-admin.phtml b/template/layout-admin.phtml old mode 100644 new mode 100755 index 4e009fa..91b8d14 --- a/template/layout-admin.phtml +++ b/template/layout-admin.phtml @@ -18,11 +18,12 @@ $module = Pi::service('module')->current(); + -
- -
+
+ +
adminNav($module)->modes(); foreach ($modes as $key => $mode) { @@ -44,64 +45,50 @@ $module = Pi::service('module')->current(); escape($mode['label']); ?> -
-
- widget('system-user-bar'); ?> + +
+ widget('system-user-bar', array('type' => 'dropdown')); ?>
-
-
- - adminNav($module)->side(); ?> - - menu()->setUlClass('nav-modules')->render(); ?> - + +
+
+ + adminNav($module)->side(); ?> + + menu()->setUlClass('unstyled pi-nav-modules')->render(); ?> + +
+ + +
+ + adminNav($module)->top(); ?> + +
+ menu()->setUlClass('unstyled')->render();?> +
+ - -
- - adminNav($module)->top(); ?> - -
- menu()->setUlClass('')->render();?> -
+
- + footScript()->appendFile($this->assetTheme('js/admin.js')); ?> \ No newline at end of file diff --git a/template/layout-content.phtml b/template/layout-content.phtml old mode 100644 new mode 100755 diff --git a/template/layout-front.phtml b/template/layout-front.phtml old mode 100644 new mode 100755 index 2920e28..791bf28 --- a/template/layout-front.phtml +++ b/template/layout-front.phtml @@ -3,15 +3,19 @@ $this->i18nTheme('main'); // Load Bootstrap css by Twitter Team -$this->bootstrap(); - -// Load style.css -// Load front.css +$this->bootstrap(array( + 'css/font-awesome.min.css', + 'css/font-awesome-ie7.min.css' => array( + 'conditional' => 'IE 7', + ), +)); +// Load style.css, front.css $this->css(array( $this->assetTheme('css/style.css'), $this->assetTheme('css/front.css'), )); +$this->jQuery(); /**#@+ * For demonstration @@ -35,152 +39,153 @@ $this->js($this->assetLocale('rtl.js')); assemble('headStyle', 4); ?> assemble('headScript', 4); ?> - -
-
- + +
+ +
+ widget('system-user-bar'); ?>
-