Overhauled cookie policy notice

diff --git a/com.woltlab.wcf/templates/footer.tpl b/com.woltlab.wcf/templates/footer.tpl
index 96e051433be4b6ec83ebd6af5f5e4246e5984bd8..c8d8956f111078c4362c6831a1449c5ca0ef2def 100644 (file)
--- a/com.woltlab.wcf/templates/footer.tpl
+++ b/com.woltlab.wcf/templates/footer.tpl
@@ -103,21 +103,26 @@
 
 <div class="pageFooterStickyNotice">
        {if MODULE_COOKIE_POLICY_PAGE && $__wcf->session->isFirstVisit() && !$__wcf->user->userID}
-               <p class="info cookiePolicyNotice">
-                       {lang}wcf.page.cookiePolicy.info{/lang}
-                       <span class="icon icon24 fa-times jsTooltip jsOnly pointer cookiePolicyNoticeDismiss" title="{lang}wcf.global.button.close{/lang}"></span>
-                       <script data-relocate="true">
-                               elBySel('.cookiePolicyNoticeDismiss').addEventListener(WCF_CLICK_EVENT, function() {
-                                       elRemove(elBySel('.cookiePolicyNotice'));
-                               });
-                       </script>
-               </p>
+               <div class="info cookiePolicyNotice">
+                       <div class="layoutBoundary">
+                               <span class="cookiePolicyNoticeText">{lang}wcf.page.cookiePolicy.info{/lang}</span>
+                               <a href="{page}com.woltlab.wcf.CookiePolicy{/page}" class="button buttonPrimary small cookiePolicyNoticeMoreInformation">{lang}wcf.page.cookiePolicy.info.moreInformation{/lang}</a>
+                               <a href="#" class="button small jsOnly cookiePolicyNoticeDismiss">{lang}wcf.global.button.close{/lang}</a>
+                               <script data-relocate="true">
+                                       elBySel('.cookiePolicyNoticeDismiss').addEventListener(WCF_CLICK_EVENT, function() {
+                                               elRemove(elBySel('.cookiePolicyNotice'));
+                                       });
+                               </script>
+                       </div>
+               </div>
        {/if}
        
        {event name='pageFooterStickyNotice'}
        
        <noscript>
-               <p class="error javascriptDisabledWarning">{lang}wcf.page.javascriptDisabled{/lang}</p>
+               <div class="layoutBoundary">
+                       <span class="javascriptDisabledWarningText">{lang}wcf.page.javascriptDisabled{/lang}</span>
+               </div>
        </noscript>
 </div>
 

diff --git a/wcfsetup/install/files/style/ui/alert.scss b/wcfsetup/install/files/style/ui/alert.scss
index 2095948de9e32a8132a72a57222cce5f092fe413..f597ccbc780abe1892bf5d010d4e79a9437eae7a 100644 (file)
--- a/wcfsetup/install/files/style/ui/alert.scss
+++ b/wcfsetup/install/files/style/ui/alert.scss
@@ -75,7 +75,6 @@
        left: 0;
        right: 0;
        position: fixed;
-       text-align: center;
        
        .error,
        .info,
@@ -85,6 +84,40 @@
                border-top-width: 1px;
                border-top-style: solid;
                margin-top: 0;
+               padding: 10px 0;
+               
+               @include screen-sm-down {
+                       @include wcfFontSmall;
+               }
+       }
+       
+       .cookiePolicyNotice {
+               .layoutBoundary {
+                       display: flex;
+                       align-items: center;
+                       
+                       @include screen-sm-down {
+                               flex-wrap: wrap;
+                       }
+               }
+               
+               .cookiePolicyNoticeText {
+                       flex: 1 1 auto;
+                       
+                       @include screen-sm-down {
+                               flex-basis: 100%;
+                               margin-bottom: 5px;
+                       }
+               }
+               
+               .cookiePolicyNoticeMoreInformation,
+               .cookiePolicyNoticeDismiss {
+                       flex: 0 0 auto;
+               }
+               
+               .cookiePolicyNoticeDismiss {
+                       margin-left: 5px;
+               }
        }
 }
 

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index ab0660daf1a525ca21fa96d833ddefb1dd9f30d9..1991340d22840ae56ded021bdf653c20c6c61a93 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -2832,7 +2832,8 @@ Fehler sind beispielsweise:
                <item name="wcf.page.pagePosition"><![CDATA[Seite {#$pageNo} von {#$pages}]]></item>
                <item name="wcf.page.javascriptDisabled"><![CDATA[In {if LANGUAGE_USE_INFORMAL_VARIANT}deinem{else}Ihrem{/if} Webbrowser ist JavaScript deaktiviert. Um alle Funktionen dieser Website nutzen zu können, muss JavaScript aktiviert sein.]]></item>
                <item name="wcf.page.requestedPage"><![CDATA[Aufgerufene Seite]]></item>
-               <item name="wcf.page.cookiePolicy.info"><![CDATA[Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite {if LANGUAGE_USE_INFORMAL_VARIANT}erklärst du dich{else}erklären Sie sich{/if} damit einverstanden, dass wir Cookies setzen. <a href="{page}com.woltlab.wcf.CookiePolicy{/page}">Weitere Informationen</a>]]></item>
+               <item name="wcf.page.cookiePolicy.info"><![CDATA[Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite {if LANGUAGE_USE_INFORMAL_VARIANT}erklärst du dich{else}erklären Sie sich{/if} damit einverstanden, dass wir Cookies setzen.]]></item>
+               <item name="wcf.page.cookiePolicy.info.moreInformation"><![CDATA[Weitere Informationen]]></item>
                <item name="wcf.page.copyright"><![CDATA[<a href="https://www.woltlab.com/de/" rel="nofollow"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>Community-Software: <strong>WoltLab Suite&trade;{if SHOW_VERSION_NUMBER} {@WCF_VERSION}{/if}</strong></a>]]></item>
                <item name="wcf.page.onlineLocation.com.woltlab.wcf.Article"><![CDATA[Artikel <a href="{$article->getLink()}">{$article->getTitle()}</a>]]></item>
                <item name="wcf.page.onlineLocation.com.woltlab.wcf.CategoryArticleList"><![CDATA[Artikel-Kategogie <a href="{$category->getLink()}">{$category->getTitle()}</a>]]></item>

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 5235c3edb23afaf7f2ae3abbd6a88cca72824b1c..d361890f788ef5dcfc271fa609ac45e5091706ce 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -2787,7 +2787,8 @@ Errors are:
                <item name="wcf.page.pagePosition"><![CDATA[Page {#$pageNo} of {#$pages}]]></item>
                <item name="wcf.page.javascriptDisabled"><![CDATA[Your browser has JavaScript disabled. If you would like to use all features of this site, it is mandatory to enable JavaScript.]]></item>
                <item name="wcf.page.requestedPage"><![CDATA[Requested Page]]></item>
-               <item name="wcf.page.cookiePolicy.info"><![CDATA[This site uses cookies. By continuing to browse this site, you are agreeing to our use of cookies. <a href="{page}com.woltlab.wcf.CookiePolicy{/page}">More details</a>]]></item>
+               <item name="wcf.page.cookiePolicy.info"><![CDATA[This site uses cookies. By continuing to browse this site, you are agreeing to our use of cookies.]]></item>
+               <item name="wcf.page.cookiePolicy.info.moreInformation"><![CDATA[More Details]]></item>
                <item name="wcf.page.copyright"><![CDATA[<a href="https://www.woltlab.com" rel="nofollow"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>Powered by <strong>WoltLab Suite&trade;{if SHOW_VERSION_NUMBER} {@WCF_VERSION}{/if}</strong></a>]]></item>
                <item name="wcf.page.onlineLocation.com.woltlab.wcf.Article"><![CDATA[Article <a href="{$article->getLink()}">{$article->getTitle()}</a>]]></item>
                <item name="wcf.page.onlineLocation.com.woltlab.wcf.CategoryArticleList"><![CDATA[Article category <a href="{$category->getLink()}">{$category->getTitle()}</a>]]></item>