noscript support

Add support for environments without scripts
main
André Zanghelini 8 years ago
parent 58923f25d9
commit 3a2a32ad2e

@ -81,3 +81,37 @@ 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;
}
}

@ -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>

@ -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>

@ -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>

@ -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>

@ -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).

@ -10,9 +10,13 @@
<i component="user/status" class="fa fa-circle status {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i>
</a>
</div>
<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 component="topic/quickreply/text" class="form-control" rows="5"></textarea>
<textarea name="content" 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>
<button type="submit" component="topic/quickreply/button" class="btn btn-primary pull-right">Post quick reply</button>
</form>
</div>
<!-- ENDIF loggedIn -->

@ -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>

Loading…
Cancel
Save