From: Luzifr Date: Fri, 14 Oct 2011 17:49:50 +0000 (+0200) Subject: Plug-in list page overhaul X-Git-Tag: 2.0.0_Beta_1~1684^2~4 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=9532a085703517fc99eb1309fe9290eeaf8a88f3;p=GitHub%2FWoltLab%2FWCF.git Plug-in list page overhaul Also some changes to pageNavigation (note that the page navigation on the plug-in list page generates invalid code -> the title-attribute is defect!) --- diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css index 531a3f22e1..b5e5c60dc5 100644 --- a/wcfsetup/install/files/acp/style/style.css +++ b/wcfsetup/install/files/acp/style/style.css @@ -1758,6 +1758,14 @@ tr .columnURL { /* ToDo */ +.pageNavigation ul li:not(href):not(.active) { + cursor: pointer; +} + +.pageNavigation ul li:not(:first-child) { + margin-left: 3px; +} + .pageNavigation ul li:not(.children) { border-radius: 3px; display: inline-block; @@ -2329,11 +2337,25 @@ input[type='button'], background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1)); background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1)); - -webkit-transition: all .1s linear; - -moz-transition: all .1s linear; - -ms-transition: all .1s linear; - -o-transition: all .1s linear; - transition: all .1s linear; + -webkit-transition-property: border, box-shadow, background-color, background-image, color; + -webkit-transition-duration: .1s; + -webkit-transition-timing-function: linear; + + -moz-transition-property: border, box-shadow, background-color, background-image, color; + -moz-transition-duration: .1s; + -moz-transition-timing-function: linear; + + -ms-transition-property: border, box-shadow, background-color, background-image, color; + -ms-transition-duration: .1s; + -ms-transition-timing-function: linear; + + -o-transition-property: border, box-shadow, background-color, background-image, color; + -o-transition-duration: .1s; + -o-transition-timing-function: linear; + + transition-property: border, box-shadow, background-color, background-image, color; + transition-duration: .1s; + transition-timing-function: linear; } /* Hover State */ @@ -2837,11 +2859,13 @@ div.scrollableContainer > div:first-child p { .userNotificationDetails li { cursor: pointer; border: 1px solid rgba(192, 192, 192, 1) !important; + background-image: -webkit-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); background-image: -moz-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); background-image: -ms-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); background-image: -o-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); background-image: linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); + padding: 3px; display: inline-block; } @@ -2879,7 +2903,7 @@ div.scrollableContainer > div:first-child p { position: relative; } -.infoPackageStandalone .packageStandaloneIcon { +.infoPackageStandalone img.packageStandaloneIcon { position: absolute; top: 30px; left: 25px; @@ -2887,62 +2911,205 @@ div.scrollableContainer > div:first-child p { height: 96px; } -.infoPackageStandalone section { +.infoPackageStandalone div { margin-bottom: -15px; margin-left: 30px; } -/* Footer */ - .infoPackageStandalone footer { position: relative; right: -15px; bottom: -15px; } -.infoPackageStandalone footer nav { +/* -- -- -- Package Plugin -- -- -- */ + +/* Globals */ + +.infoPackagePlugin { + text-align: center; + border: 1px solid rgba(204, 204, 204, 1); + border-radius: 7px; + background-color: rgba(0, 0, 0, .015); + margin-top: 15px; + display: inline-block; + position: relative; + width: 150px; + height: 150px; + overflow: hidden; + + -webkit-transition: background, border, color .1s linear; + -moz-transition: background, border, color .1s linear; + -ms-transition: background, border, color .1s linear; + -o-transition: background, border, color .1s linear; + transition: background, border, color .1s linear; +} + +.infoPackagePlugin a { + text-decoration: none; +} + +.infoPackagePlugin > div > a { + color: #999; + background-size: 96px; + background-position: center center; + background-repeat: no-repeat; + margin: 1px; + display: block; + position: relative; + width: 148px; + height: 148px; +} + +.infoPackagePlugin:hover > div > a { + color: #666; +} + +.infoPackagePlugin > div > a > h1 { + font-size: 100%; + font-weight: bold; + text-shadow: 0 1px 0 #fff; + word-wrap: break-word; + border-bottom: 1px solid rgba(204, 204, 204, 1); + + background-color: rgba(0, 0, 0, .015); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + + margin: 0 -1px; + padding: 3px 1px; + display: block; + position: relative; + z-index: 100; +} + +.infoPackagePlugin footer { + position: absolute; + bottom: 0; + width: 100%; +} + +.infoPackagePlugin > div > a > small { + font-size: 85%; + font-weight: normal; + text-shadow: none; + border-radius: 7px; + padding: 40px 5px; + display: block; + position: absolute; + top: 0; + bottom: 0; + width: 139px; + opacity: 0; + + -webkit-transition: all .1s linear; + -moz-transition: all .1s linear; + -ms-transition: all .1s linear; + -o-transition: all .1s linear; + transition: all .1s linear; +} + +.infoPackagePlugin:hover > div > a > small { + background-color: rgba(255, 255, 255, .9); + z-index: 10; + opacity: 1; +} + +/* SmallButtonBar */ + +.infoPackagePlugin .smallButtonBar { + text-align: center !important; + border-top: 1px solid rgba(204, 204, 204, 1); + border-radius: 0 0 7px 7px; + + background-color: rgba(0, 0, 0, .015); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + + padding: 3px; + position: relative; + z-index: 100; +} + +.infoPackagePlugin .smallButtonBar li { + display: inline; + position: relative; +} + +.infoPackagePlugin .smallButtonBar li span { + /* removes the caption of the buttons */ + position: absolute; + left: -9000px; + top: -9000px; + width: 0; +} + + + +/* -- -- -- Package Footers -- -- -- */ + +.infoPackageStandalone footer nav, +.infoPackagePlugin footer nav { text-align: right; opacity: 0; - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; + -webkit-transition: all .1s linear; + -moz-transition: all .1s linear; + -ms-transition: all .1s linear; + -o-transition: all .1s linear; + transition: all .1s linear; } -.infoPackageStandalone:hover footer nav { +.infoPackageStandalone:hover footer nav, +.infoPackagePlugin:hover footer nav { opacity: 1; } -/* Small Buttons */ -.infoPackageStandalone footer nav ul.smallButtons { + + + + + + + + +/* ############## ToDo: Small Buttons ############## */ + +/* Globals */ + +ul.smallButtons { list-style-type: none; margin-right: -1px; margin-bottom: -1px; } -.infoPackageStandalone footer nav ul.smallButtons > li { +ul.smallButtons > li { margin-left: -5px; display: inline-block; } -.infoPackageStandalone footer nav ul.smallButtons > li > a { +ul.smallButtons > li > a { white-space: nowrap; padding: 3px 7px; display: block; } -.infoPackageStandalone footer nav ul.smallButtons > li.separator > a { +ul.smallButtons > li.separator > a { border-right: 1px dotted #bcd; } -.infoPackageStandalone footer nav ul.smallButtons > li:first-child > a { +ul.smallButtons > li:first-child > a { border-top-left-radius: 13px; } -.infoPackageStandalone footer nav ul.smallButtons > li:last-child > a { +ul.smallButtons > li:last-child > a { border-bottom-right-radius: 7px; } diff --git a/wcfsetup/install/files/acp/templates/optionTypeCustomselect.tpl b/wcfsetup/install/files/acp/templates/optionTypeCustomselect.tpl index 90827ba55d..5752a5aa47 100644 --- a/wcfsetup/install/files/acp/templates/optionTypeCustomselect.tpl +++ b/wcfsetup/install/files/acp/templates/optionTypeCustomselect.tpl @@ -6,6 +6,6 @@ {/foreach}
  • - +
    • \ No newline at end of file diff --git a/wcfsetup/install/files/acp/templates/packageList.tpl b/wcfsetup/install/files/acp/templates/packageList.tpl index a6d21b7966..9447610af2 100644 --- a/wcfsetup/install/files/acp/templates/packageList.tpl +++ b/wcfsetup/install/files/acp/templates/packageList.tpl @@ -41,7 +41,7 @@ -
    +
    package
    {$package->package}
    @@ -66,13 +66,13 @@
    creator
    {if $package->authorURL}{/if}{$package->author}{if $package->authorURL}{/if}
    -
    + @@ -83,18 +83,24 @@ {hascontent} {/hascontent} diff --git a/wcfsetup/install/files/acp/templates/packageListPlugins.tpl b/wcfsetup/install/files/acp/templates/packageListPlugins.tpl index 986926054a..74e15942a2 100644 --- a/wcfsetup/install/files/acp/templates/packageListPlugins.tpl +++ b/wcfsetup/install/files/acp/templates/packageListPlugins.tpl @@ -1,12 +1,20 @@ {foreach from=$plugins key=packageID item=package} -
  • - - {$package->getName()} - - - +
  • +
    + +

    {$package->getName()}

    + Short descriptive text goes here +     +
    + +
    • -{/foreach} +{/foreach} \ No newline at end of file diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index b020d4f919..cfc3b99268 100644 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -2880,7 +2880,7 @@ $.widget('ui.wcfPages', { var $leftChildrenImage = $(''); $leftChildrenLink.append($leftChildrenImage); - var $leftChildrenInput = $(''); + var $leftChildrenInput = $(''); $leftChildren.append($leftChildrenInput); $leftChildrenInput.keydown($.proxy(this._handleInput, this)); $leftChildrenInput.keyup($.proxy(this._handleInput, this)); @@ -2923,7 +2923,7 @@ $.widget('ui.wcfPages', { var $rightChildrenImage = $(''); $rightChildrenLink.append($rightChildrenImage); - var $rightChildrenInput = $(''); + var $rightChildrenInput = $(''); $rightChildren.append($rightChildrenInput); $rightChildrenInput.keydown($.proxy(this._handleInput, this)); $rightChildrenInput.keyup($.proxy(this._handleInput, this)); diff --git a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php index c07560be13..0f0358b16c 100644 --- a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php +++ b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php @@ -175,7 +175,7 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin { $html .= $this->makeLink($tagArgs['link'], $tagArgs['pages'] - 1, $tagArgs['page']); } else { - $html .= '
  • …
      '."\n"; + $html .= '
    • …
        '."\n"; $k = 0; $step = intval(ceil(($tagArgs['pages'] - $right) / self::SHOW_SUB_LINKS)); diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index a45706968b..935b019b4a 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -521,8 +521,8 @@ - - + +