From 3a2a32ad2e6e2acd21d4ab3481c5ad1c56945385 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Zanghelini?= <an_dz@simutrans-forum> Date: Sun, 2 Apr 2017 22:17:03 -0300 Subject: [PATCH] noscript support Add support for environments without scripts --- less/noscript.less | 34 +++++++++++++++++++++++ templates/category.tpl | 3 +- templates/header.tpl | 1 + templates/login.tpl | 4 ++- templates/partials/menu.tpl | 25 ++++++++++++++--- templates/partials/noscript/warning.tpl | 2 +- templates/partials/topic/quickreply.tpl | 12 +++++--- templates/partials/topic/reply-button.tpl | 3 +- 8 files changed, 72 insertions(+), 12 deletions(-) diff --git a/less/noscript.less b/less/noscript.less index 706238c..d1f3d2b 100644 --- a/less/noscript.less +++ b/less/noscript.less @@ -80,4 +80,38 @@ noscript { } } } +} +.noscript { + display: none !important; +} +#user-control-list-check:checked + #user-control-list { + display: block; +} +label.dropdown-toggle { + cursor: pointer; +} +.dropdown-menu > li > form > button { + text-align: left; + width: 100%; + background: none; + border: none; + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: @line-height-base; + color: @dropdown-link-color; + white-space: nowrap; // prevent links from randomly breaking onto new lines + + &:hover, + &:focus { + text-decoration: none; + color: @dropdown-link-hover-color; + background-color: @dropdown-link-hover-bg; + } +} +html[data-dir="rtl"] { + .dropdown-menu > li > form > button { + text-align: right; + } } \ No newline at end of file diff --git a/templates/category.tpl b/templates/category.tpl index 7056c7d..4b55e9c 100644 --- a/templates/category.tpl +++ b/templates/category.tpl @@ -8,7 +8,8 @@ <div class="clearfix"> <!-- IF privileges.topics:create --> - <button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button> + <a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic_no_script" class="btn btn-primary noscript">[[category:new_topic_button]]</a> + <button component="category/post" id="new_topic" class="btn btn-primary yescript">[[category:new_topic_button]]</button> <!-- ELSE --> <!-- IF !loggedIn --> <a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a> diff --git a/templates/header.tpl b/templates/header.tpl index 555159a..fd9f385 100644 --- a/templates/header.tpl +++ b/templates/header.tpl @@ -5,6 +5,7 @@ <!-- BEGIN metaTags -->{function.buildMetaTag}<!-- END metaTags --> <link rel="stylesheet" type="text/css" href="{relative_path}/assets/stylesheet.css?{config.cache-buster}" /> <!-- IF bootswatchCSS --><link id="bootswatchCSS" href="{bootswatchCSS}" rel="stylesheet" media="screen"><!-- ENDIF bootswatchCSS --> + <noscript><style type="text/css">.noscript{display:block!important}.noscript.btn{display:inline-block!important}.yescript{display:none!important}</style></noscript> <!-- BEGIN linkTags -->{function.buildLinkTag}<!-- END linkTags --> <script> diff --git a/templates/login.tpl b/templates/login.tpl index 75d56cc..ffc083e 100644 --- a/templates/login.tpl +++ b/templates/login.tpl @@ -10,7 +10,7 @@ <p>{error}</p> </div> - <form class="form-horizontal" role="form" method="post" target="login" id="login-form"> + <form class="form-horizontal" role="form" method="post" id="login-form"> <div class="form-group"> <label for="username" class="col-lg-2 control-label">{allowLoginWith}</label> <div class="col-lg-10"> @@ -32,6 +32,8 @@ </div> </div> </div> + <input type="hidden" name="_csrf" value="{config.csrf_token}" /> + <input type="hidden" name="noscript" id="noscript" value="true" /> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <button class="btn btn-primary btn-lg btn-block" id="login" type="submit">[[global:login]]</button> diff --git a/templates/partials/menu.tpl b/templates/partials/menu.tpl index 0be4ccd..d0b1977 100644 --- a/templates/partials/menu.tpl +++ b/templates/partials/menu.tpl @@ -26,7 +26,10 @@ <ul id="logged-in-menu" class="nav navbar-nav navbar-right"> <li class="notifications dropdown text-center hidden-xs" component="notifications"> - <a href="#" title="[[global:header.notifications]]" class="dropdown-toggle" data-toggle="dropdown" id="notif_dropdown"> + <a href="{relative_path}/notifications" title="[[global:header.notifications]]" class="dropdown-toggle noscript" data-toggle="dropdown" id="notif_dropdown_no_script"> + <i component="notifications/icon" class="fa fa-fw fa-bell-o" data-content="0"></i> + </a> + <a href="#" title="[[global:header.notifications]]" class="dropdown-toggle yescript" data-toggle="dropdown" id="notif_dropdown"> <i component="notifications/icon" class="fa fa-fw fa-bell-o" data-content="0"></i> </a> <ul class="dropdown-menu" aria-labelledby="notif_dropdown"> @@ -44,7 +47,10 @@ <!-- IF !config.disableChat --> <li class="chats dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown"> + <a class="dropdown-toggle noscript" data-toggle="dropdown" href="{relative_path}/user/{user.userslug}/chats" title="[[global:header.chats]]" id="chat_dropdown_no_script" component="chat/dropdown"> + <i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span> + </a> + <a class="dropdown-toggle yescript" data-toggle="dropdown" href="#" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown"> <i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span> </a> <ul class="dropdown-menu" aria-labelledby="chat_dropdown"> @@ -62,11 +68,17 @@ <!-- ENDIF !config.disableChat --> <li id="user_label" class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown" title="[[global:header.profile]]"> + <a class="dropdown-toggle yescript" data-toggle="dropdown" href="#" id="user_dropdown" title="[[global:header.profile]]"> <img component="header/userpicture" src="{user.picture}" alt="{user.username}"<!-- IF !user.picture --> style="display: none;"<!-- ENDIF !user.picture --> /> <div component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor};<!-- IF user.picture --> display: none;"<!-- ENDIF user.picture -->">{user.icon:text}</div> <span id="user-header-name" class="visible-xs-inline">{user.username}</span> </a> + <label class="dropdown-toggle noscript" data-toggle="dropdown" id="user_dropdown" title="[[global:header.profile]]" for="user-control-list-check"> + <img component="header/userpicture" src="{user.picture}" alt="{user.username}"<!-- IF !user.picture --> style="display: none;"<!-- ENDIF !user.picture --> /> + <div component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor};<!-- IF user.picture --> display: none;"<!-- ENDIF user.picture -->">{user.icon:text}</div> + <span id="user-header-name" class="visible-xs-inline">{user.username}</span> + </label> + <input type="checkbox" class="hidden" id="user-control-list-check"> <ul id="user-control-list" component="header/usercontrol" class="dropdown-menu" aria-labelledby="user_dropdown"> <li> <a component="header/profilelink" href="{relative_path}/user/{user.userslug}"> @@ -123,7 +135,12 @@ <!-- ENDIF showModMenu --> <li role="presentation" class="divider"></li> <li component="user/logout"> - <a href="#"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></a> + <form class="noscript" method="post" action="{relative_path}/logout"> + <input type="hidden" name="_csrf" value="{config.csrf_token}"> + <input type="hidden" name="noscript" value="true"> + <button type="submit"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></button> + </form> + <a href="#" class="yescript"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></a> </li> </ul> </li> diff --git a/templates/partials/noscript/warning.tpl b/templates/partials/noscript/warning.tpl index 64dc5da..94528cb 100644 --- a/templates/partials/noscript/warning.tpl +++ b/templates/partials/noscript/warning.tpl @@ -1,7 +1,7 @@ <noscript> <div class="alert alert-danger"> <p> - Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in <strong>read-only mode</strong>. + Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you may not be able to execute some actions. </p> <p> Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript). diff --git a/templates/partials/topic/quickreply.tpl b/templates/partials/topic/quickreply.tpl index 41345f4..4fc785a 100644 --- a/templates/partials/topic/quickreply.tpl +++ b/templates/partials/topic/quickreply.tpl @@ -10,9 +10,13 @@ <i component="user/status" class="fa fa-circle status {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i> </a> </div> - <div class="quickreply-message"> - <textarea component="topic/quickreply/text" class="form-control" rows="5"></textarea> - </div> - <button component="topic/quickreply/button" class="btn btn-primary pull-right">Post quick reply</button> + <form method="post" action="{config.relative_path}/compose"> + <input type="hidden" name="tid" value="{tid}" /> + <input type="hidden" name="_csrf" value="{config.csrf_token}" /> + <div class="quickreply-message"> + <textarea name="content" component="topic/quickreply/text" class="form-control" rows="5"></textarea> + </div> + <button type="submit" component="topic/quickreply/button" class="btn btn-primary pull-right">Post quick reply</button> + </form> </div> <!-- ENDIF loggedIn --> \ No newline at end of file diff --git a/templates/partials/topic/reply-button.tpl b/templates/partials/topic/reply-button.tpl index b464a1e..c3ee61d 100644 --- a/templates/partials/topic/reply-button.tpl +++ b/templates/partials/topic/reply-button.tpl @@ -1,5 +1,6 @@ <div component="topic/reply/container" class="btn-group action-bar <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->"> - <button class="btn btn-primary" component="topic/reply">[[topic:reply]]</button> + <a href="{config.relative_path}/compose?tid={tid}&title={title}" component="topic/reply" class="btn btn-primary noscript">[[topic:reply]]</a> + <button class="btn btn-primary yescript" component="topic/reply">[[topic:reply]]</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>