Added beter support for use without Javascript

This commit is contained in:
TimZ99 2019-03-30 22:22:15 +01:00
parent 9915a112e5
commit 59be9f2b6d
No known key found for this signature in database
GPG Key ID: 4D8268DC68E8339D
8 changed files with 70 additions and 13 deletions

View File

@ -35,7 +35,7 @@
<main role="main" class="container">
<noscript>
<div class="alert alert-danger" role="alert">
<b>Javascript is disabled!</b> For PHP Server Monitor to work properly enabling javascript is required!
<b>Javascript is disabled!</b> PHP Server Monitor works best with JavaScript enabled!
</div>
</noscript>
{% if not user_level %}<h1>{{ subtitle }}</h1>{% endif %}
@ -56,7 +56,7 @@
<div class="container">
<span class="text-muted">
Powered by
<a href="http://www.phpservermonitor.org/" target="_blank" rel="noopener">
<a href="https://github.com/phpservermon/phpservermon/" target="_blank" rel="noopener">
PHP Server Monitor {{ version }}.
</a>
{{ update_available }} <a href="#" class="float-right">{{ label_back_to_top }}</a>

View File

@ -107,8 +107,10 @@
{% endmacro button_save %}
{% macro table_search(label) %}
<noscript><div hidden></noscript>
<div class="searchbar mb-3">
<input class="search_input" type="search" name="" maxlength="255" placeholder="{{ label }}..." aria-label="{{ label }}">
<a href="#" class="search_icon"><i class="fas fa-search"></i><p>0</p></a>
</div>
<noscript></div></noscript>
{% endmacro table_search %}

View File

@ -5,8 +5,21 @@
</li>
{% endfor %}
</ul>
<noscript>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_profile|raw }}">{{ label_profile }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_logout|raw }}">{{ label_logout }}</a>
</li>
<span class="navbar-text">{{ label_usermenu }}</span>
</li>
</ul>
</noscript>
<noscript><div hidden></noscript>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ label_usermenu }}
@ -16,9 +29,10 @@
<a class="dropdown-item" href="{{ url_logout|raw }}">{{ label_logout }} </a>
</div>
</li>
<!--
<!--
<li class="nav-item">
<i class="text-white fas fa-universal-access fa-lg nav-link"></i>
</li>
-->
-->
</ul>
<noscript></div></noscript>

View File

@ -5,13 +5,15 @@
<canvas id="{{ graph.id }}">Your browser does not support the canvas element.</canvas>
</div>
<div class="col-md-2">
<noscript><div hidden></noscript>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
{% for button in graph.buttons %}
<label class="btn btn-secondary {{ button.class_active }}">
<input type="radio" name="{{ graph.button_name }}" value="{{ button.time }}" id="{{ button.unit }}" autocomplete="off" {% if button.class_active %} checked {% endif %}> {{ button.label }}
</label>
{% endfor %}
</div>
{% for button in graph.buttons %}
<label class="btn btn-secondary {{ button.class_active }}">
<input type="radio" name="{{ graph.button_name }}" value="{{ button.time }}" id="{{ button.unit }}" autocomplete="off" {% if button.class_active %} checked {% endif %}> {{ button.label }}
</label>
{% endfor %}
</div>
<noscript></div></noscript>
</div>
{% if graph.id == 'history_short' %}
<script>

View File

@ -4,12 +4,16 @@
<div class="card-body d-flex align-items-center justify-content-center">
{% if status|lower == 'on' %}
<i class="fas fa-check-circle fa-6x"></i>
<noscript><h1>&#10003</h1></noscript>
{% elseif status|lower == 'warning' %}
<i class="fas fa-exclamation-triangle fa-6x"></i>
<noscript><h1>&#9888</h1></noscript>
{% elseif status|lower == 'off' %}
<i class="fas fa-times-circle fa-6x"></i>
<noscript><h1>&#10005</h1></noscript>
{% else %}
<i class="fas fa-question-circle fa-6x"></i>
<noscript><h1>&#8263</h1></noscript>
{% endif %}
</div>
</div>
@ -247,50 +251,65 @@
{{ label_monitoring }}:
{% if active|lower == 'yes' %}
<i class="fas fa-eye float-right"></i>
<noscript>&#10003</noscript>
{% elseif active|lower == 'no' %}
<i class="fas fa-eye-slash float-right"></i>
<noscript>&#10005</noscript>
{% else %}
<i class="fas fa-question-circle float-right" title="Value from database should either be yes or no."></i>
<noscript>&#8263</noscript>
{% endif %}
</li>
<li class="list-group-item">
{{ label_email }}:
{% if email|lower == 'yes' %}
<i class="fas fa-bell float-right"></i>
<noscript>&#10003</noscript>
{% elseif email|lower == 'no' %}
<i class="fas fa-bell-slash float-right"></i>
<noscript>&#10005</noscript>
{% else %}
<i class="fas fa-question-circle float-right" title="Value from database should either be yes or no."></i>
<noscript>&#8263</noscript>
{% endif %}
</li>
<li class="list-group-item">
{{ label_sms }}:
{% if sms|lower == 'yes' %}
<i class="fas fa-bell float-right"></i>
<noscript>&#10003</noscript>
{% elseif sms|lower == 'no' %}
<i class="fas fa-bell-slash float-right"></i>
<noscript>&#10005</noscript>
{% else %}
<i class="fas fa-question-circle float-right" title="Value from database should either be yes or no."></i>
<noscript>&#8263</noscript>
{% endif %}
</li>
<li class="list-group-item">
{{ label_pushover }}:
{% if pushover|lower == 'yes' %}
<i class="fas fa-bell float-right"></i>
<noscript>&#10003</noscript>
{% elseif pushover|lower == 'no' %}
<i class="fas fa-bell-slash float-right"></i>
<noscript>&#10005</noscript>
{% else %}
<i class="fas fa-question-circle float-right" title="Value from database should either be yes or no."></i>
<noscript>&#8263</noscript>
{% endif %}
</li>
<li class="list-group-item">
{{ label_telegram }}:
{% if telegram|lower == 'yes' %}
<i class="fas fa-bell float-right"></i>
<noscript>&#10003</noscript>
{% elseif telegram|lower == 'no' %}
<i class="fas fa-bell-slash float-right"></i>
<noscript>&#10005</noscript>
{% else %}
<i class="fas fa-question-circle float-right" title="Value from database should either be yes or no."></i>
<noscript>&#8263</noscript>
{% endif %}
</li>
</ul>

View File

@ -1,4 +1,5 @@
<div class="row">
<noscript><div hidden></noscript>
<div class="float-right btn-group btn-group-sm mb-3" role="group">
<button type="button" class="btn btn-secondary {% if block_layout_active %} active {% endif %}"
id="block-layout" aria-label="Block layout"
@ -11,4 +12,5 @@
<i class="fas fa-bars"></i>
</button>
</div>
<noscript></div></noscript>
</div>

View File

@ -4,6 +4,7 @@
<div class="row">
{% for server in servers_offline %}
<div class="col-sm-4 col-md-3">
<noscript><a href="{{ server.url_view|raw }}"></noscript>
<div class="card text-white bg-danger mb-3" onclick="window.location.href='{{ server.url_view|raw }}'">
<div class="card-header">{{ server.label }}<span class="sr-only"> ({{ label_offline }})</span></div>
<div class="card-body">
@ -13,10 +14,12 @@
</p>
</div>
</div>
<noscript></a></noscript>
</div>
{% endfor %}
{% for server in servers_online %}
<div class="col-sm-4 col-md-3">
<noscript><a href="{{ server.url_view|raw }}"></noscript>
<div class="card text-white bg-success mb-3" onclick="window.location.href='{{ server.url_view|raw }}'">
<div class="card-header">{{ server.label }}<span class="sr-only"> ({{ label_online }})</span></div>
<div class="card-body">
@ -27,6 +30,7 @@
</p>
</div>
</div>
<noscript></a></noscript>
</div>
{% endfor %}
{% if not servers_offline and not servers_online %}
@ -35,7 +39,7 @@
{% endif %}
</div>
</div>
<div id="list-layout" class="{{ list_layout_active }}" aria-labelledby="block-layout">
<div id="list-layout" class="{{ list_layout_active }}" aria-labelledby="block-layout" style="display:none;">
<div class="row table-responsive">
{% if servers_offline or servers_online %}
<table class="table table-bordered table-hover">

View File

@ -30,7 +30,10 @@
<td>{% for server in user.emp_servers %} {{ server.label }}<br /> {% endfor %}</td>
<td>
<div class="item-action dropdown">
<a data-toggle="dropdown" class="icon"><i class="fas fa-ellipsis-v"></i></a>
<a data-toggle="dropdown" class="icon">
<i class="fas fa-ellipsis-v"></i>
</a>
<noscript><div hidden></noscript>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ user.url_edit|raw }}" title="{{ label_edit }}">
<i class="fas fa-edit"></i> {{ label_edit }}
@ -40,6 +43,17 @@
<i class="fas fa-trash"></i> {{ label_delete }}
</a>
</div>
<noscript>
</div>
<a href="{{ user.url_edit|raw }}" title="{{ label_edit }}">
&#9998
</a>
<br>
<a href="{{ user.url_delete|raw }}" title="{{ label_delete }}" data-modal-id="delete"
data-modal-param="{{ user.user_name }}">
&#10005
</a>
</noscript>
</div>
</td>
</tr>