mirror of
https://github.com/pa11y/pa11y-dashboard.git
synced 2025-09-24 22:31:15 +00:00
Responsify-ay-ay-ay
This commit is contained in:
perryharlock
File diff suppressed because one or more lines are too long
@@ -1,15 +1,25 @@
|
||||
/* Media queries */
|
||||
@media (max-width:991px) {
|
||||
h1 {
|
||||
font-size:32px;
|
||||
.h1, h1 {
|
||||
font-size:floor(@font-size-base * 2.15); // ~32px;
|
||||
}
|
||||
h2 {
|
||||
font-size:28px;
|
||||
.h2, h2 {
|
||||
font-size:floor(@font-size-base * 1.9); // ~28px;
|
||||
}
|
||||
.task-header .h4 {
|
||||
font-size:floor(@font-size-base * 1.15); // ~17px;
|
||||
}
|
||||
.header {
|
||||
margin-bottom:2rem;
|
||||
padding-bottom:1rem;
|
||||
}
|
||||
.btn-full-width {
|
||||
margin-top:0;
|
||||
}
|
||||
.ruled {
|
||||
padding-bottom:1.5rem;
|
||||
margin-bottom:2rem;
|
||||
}
|
||||
.task-header .run-details {
|
||||
text-align:left;
|
||||
}
|
||||
@@ -22,34 +32,29 @@
|
||||
margin-bottom:3px;
|
||||
}
|
||||
.date {
|
||||
margin-top:2px;
|
||||
margin-top:10px;
|
||||
float:right;
|
||||
font-size:;
|
||||
}
|
||||
.action-buttons button {
|
||||
width:49%;
|
||||
margin-right:2%;
|
||||
float:left;
|
||||
}
|
||||
.action-buttons button:last-child {
|
||||
margin-right:0;
|
||||
.other-tasks {
|
||||
.sr-only();
|
||||
}
|
||||
}
|
||||
@media (max-width:640px) {
|
||||
body {
|
||||
font-size:14px;
|
||||
}
|
||||
h1 {
|
||||
font-size:26px;
|
||||
.h1, h1 {
|
||||
font-size:floor(@font-size-base * 1.75); // ~26px;
|
||||
}
|
||||
h2 {
|
||||
font-size:24px;
|
||||
.h2, h2 {
|
||||
font-size:floor(@font-size-base * 1.6); // ~24px;
|
||||
}
|
||||
.action-buttons button {
|
||||
width:100%;
|
||||
margin-right:0;
|
||||
float:none;
|
||||
.task-header .h4 {
|
||||
font-size:floor(@font-size-base * 1.1); // ~16px;
|
||||
}
|
||||
.label, .badge {
|
||||
font-size:11px;
|
||||
font-size:floor(@font-size-base * 0.75); // ~11px;
|
||||
padding:7px;
|
||||
}
|
||||
.rule-name .badge {
|
||||
@@ -58,12 +63,66 @@
|
||||
.graph {
|
||||
margin-bottom:3rem;
|
||||
}
|
||||
.task-stats li a {
|
||||
padding:11px 0;
|
||||
font-size:ceil(@font-size-base * 1.25); // ~18px
|
||||
line-height:1.1;
|
||||
}
|
||||
.btn-full-width {
|
||||
margin-top:8px;
|
||||
margin:0;
|
||||
}
|
||||
.delete-button {
|
||||
font-size:floor(@font-size-base * 1.35); // ~20px;
|
||||
top:10px;
|
||||
right:25px;
|
||||
}
|
||||
.standards-lists {
|
||||
.tooltip {
|
||||
&.top .tooltip-inner {
|
||||
max-width:400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tasks-list {
|
||||
li {
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width:480px) {
|
||||
.graph {
|
||||
height:200px;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
.series-checkboxes li {
|
||||
font-size:floor(@font-size-base * 0.8); // ~12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:360px) {
|
||||
.task-stats li a {
|
||||
padding:8px 0;
|
||||
}
|
||||
.delete-button {
|
||||
display:block !important;
|
||||
font-size:floor(@font-size-base * 1); // ~15px;
|
||||
top:5px;
|
||||
right:20px;
|
||||
.opacity(0.7)
|
||||
}
|
||||
.standards-lists {
|
||||
.checkbox {
|
||||
font-size:floor(@font-size-base * 0.9); // ~13px;
|
||||
}
|
||||
.tooltip {
|
||||
&.top .tooltip-inner {
|
||||
max-width:260px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.task-stats li a {
|
||||
padding:11px 0;
|
||||
font-size:floor(@font-size-base * 1.1); // ~16px;
|
||||
line-height:1.3;
|
||||
}
|
||||
}
|
||||
@@ -38,7 +38,6 @@
|
||||
}
|
||||
.btn-full-width {
|
||||
width:100%;
|
||||
display:block;
|
||||
margin-top:15px
|
||||
}
|
||||
.dropdown-menu {
|
||||
@@ -167,14 +166,12 @@
|
||||
}
|
||||
|
||||
/* Task details page*/
|
||||
|
||||
.task-header h2 {
|
||||
word-wrap:break-word;
|
||||
}
|
||||
.date {
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
.tasks-list {
|
||||
padding:15px;
|
||||
margin-bottom:30px;
|
||||
@@ -255,6 +252,7 @@
|
||||
|
||||
.checkbox {
|
||||
cursor: pointer;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
Add a new url
|
||||
{{/content}}
|
||||
|
||||
<form class="col-md-12 col-xs-" action="/new" method="post">
|
||||
<form class="col-md-12" action="/new" method="post">
|
||||
|
||||
<legend>Add a new url</legend>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<div class="form-group clearfix">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="col-md-8 col-sm-8 col-xs-10">
|
||||
<label class="control-label" for="new-task-url">URL</label>
|
||||
<input class="form-control" id="new-task-url" type="url" placeholder="URL" name="url" value="{{task.url}}"/>
|
||||
</div>
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
<div class="form-group clearfix">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-4 col-xs-6">
|
||||
<label class="control-label" for="new-task-standard">Standard</label>
|
||||
<select data-role="new-task-select" class="form-control" id="new-task-standard" name="standard">
|
||||
{{#standards}}
|
||||
|
||||
@@ -35,14 +35,6 @@
|
||||
|
||||
{{#if results}}
|
||||
<div class="col-md-12 clearfix">
|
||||
<div style="position:relative">
|
||||
<div class="tooltip in">
|
||||
<div class="tooltip-arrow"></div>
|
||||
<div class="tooltip-inner">
|
||||
This is the content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="graph-container ruled">
|
||||
<div data-role="graph" class="graph"></div>
|
||||
<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom" data-role="series-checkboxes"></ul>
|
||||
@@ -55,32 +47,42 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 aside">
|
||||
{{#if results}}
|
||||
<div class="btn-group block-level clearfix">
|
||||
<button data-toggle="dropdown" class="btn-full-width btn btn-primary dropdown-toggle" type="button">{{date-format lastResult.date format="DD MMM YYYY"}} <span class="glyphicon glyphicon-calendar"></span> <span class="caret"></span></button>
|
||||
<ul role="menu" class="dropdown-menu">
|
||||
{{#results}}
|
||||
<li><a href="#">{{date-format date format="DD MMM YYYY"}}</a></li>
|
||||
{{/results}}
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-xs-6">
|
||||
<div class="btn-group block-level clearfix">
|
||||
<button data-toggle="dropdown" class="btn-full-width btn btn-primary dropdown-toggle" type="button">{{date-format lastResult.date format="DD MMM YYYY"}} <span class="glyphicon glyphicon-calendar"></span> <span class="caret"></span></button>
|
||||
<ul role="menu" class="dropdown-menu">
|
||||
{{#results}}
|
||||
<li><a href="#">{{date-format date format="DD MMM YYYY"}}</a></li>
|
||||
{{/results}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-xs-6">
|
||||
<ul id="top" data-role="task-list" class="clearfix list-unstyled floated-list task-stats">
|
||||
{{#lastResult}}
|
||||
<li class="danger"><a href="#errors" title="See errors">{{count.error}}</a></li>
|
||||
<li class="warning"><a href="#warnings" title="See warnings">{{count.warning}}</a></li>
|
||||
<li class="info"><a href="#notifications" title="See notifications">{{count.notice}}</a></li>
|
||||
{{/lastResult}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="top" data-role="task-list" class="clearfix list-unstyled floated-list task-stats">
|
||||
{{#lastResult}}
|
||||
<li class="danger"><a href="#errors" title="See errors">{{count.error}}</a></li>
|
||||
<li class="warning"><a href="#warnings" title="See warnings">{{count.warning}}</a></li>
|
||||
<li class="info"><a href="#notifications" title="See notifications">{{count.notice}}</a></li>
|
||||
{{/lastResult}}
|
||||
</ul>
|
||||
|
||||
<!-- ########### Functionality to be done ############## -->
|
||||
<div class="action-buttons clearfix">
|
||||
<button class="btn-full-width btn btn-default">Download CSV <span class="glyphicon glyphicon-download"></span></button>
|
||||
|
||||
<button class="btn-full-width btn btn-default">Download JSON <span class="glyphicon glyphicon-download"></span></button>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="row">
|
||||
<div class="action-buttons clearfix">
|
||||
<div class="col-md-12 col-xs-6">
|
||||
<button class="btn-full-width btn btn-default">Download CSV <span class="glyphicon glyphicon-download"></span></button>
|
||||
</div>
|
||||
<div class="col-md-12 col-xs-6">
|
||||
<button class="btn-full-width btn btn-default">Download JSON <span class="glyphicon glyphicon-download"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<!-- List of other urls -->
|
||||
<div class="other-tasks well">
|
||||
|
||||
Reference in New Issue
Block a user