Skip to content
Snippets Groups Projects
Commit a5c7c3d1 authored by didierfred's avatar didierfred
Browse files

improve responsive design

parent 5f31b7ef
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
popup/config.css 0 → 100644
+ 45
− 0
View file @ a5c7c3d1
.title{
color: #008CBA;
}
.select_field{
font-size: 14px;
height: 30px;
}
.input_field_small{
font-size: 14px;
height: 30px;
border: 1px solid #AAAAAA;
border-radius: 3px;
width: 170px;
}
.input_field_medium{
font-size: 14px;
height: 30px;
border: 1px solid #AAAAAA;
border-radius: 3px;
width: 230px;
}
.input_field_large{
font-size: 14px;
height: 30px;
border: 1px solid #AAAAAA;
border-radius: 3px;
width: 340px;
}
.input_url {
border: none;
border-bottom: 1px solid #AAAAAA;
width:600px;
}
.standard_table {
width:1130px;
}
popup/config.html
+ 57
− 62
View file @ a5c7c3d1
......@@ -5,32 +5,10 @@
<title>Simple Modify Headers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<style type="text/css">
.title{
color: #008CBA;
}
.select_field{
font-size: 14px;
height: 30px;
}
.input_field{
font-size: 14px;
height: 30px;
border: 1px solid #AAAAAA;
border-radius: 3px;
}
.input_url {
border: none;
border-bottom: 1px solid #AAAAAA;
}
</style>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="config.css">
<link rel="stylesheet" media="screen and (max-width: 1200px) and (min-width: 1001px)" href="config_medium_screen.css" />
<link rel="stylesheet" media="screen and (max-width: 1000px)" href="config_small_screen.css" />
</head>
<body>
......@@ -40,33 +18,36 @@
<div class="container">
<!-- MAIN SCREEN -->
<div id="main_screen">
<div class="row">
<div class="col-sm-6"> <h2 class="title"> SIMPLE MODIFY HEADERS </h2> </div>
<div class="col-sm-6"> <img id="start_img" src="img/start.png" align="right" valign="top"> </img> </div>
</div>
<br/>
<div id="main_screen">
<center>
<div class="row">
<div class="col-sm-8">
<b> Url Patterns* : </b> <input size="50" id="targetPage" class="form_control input_url" type="text" value="">
</div>
<div class="col-sm-4" align="right">
<a href="#" id="export_button" class="btn btn-primary btn-sm" >
<span class="glyphicon glyphicon-export"></span> Export
</a>
<a href="#" id="import_button" class="btn btn-primary btn-sm" >
<span class="glyphicon glyphicon-import"></span> Import
</a>
<a href="#" id="parameters_button" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-cog"></span> Parameters
</a>
</div>
</div>
<table class="standard_table">
<tr>
<td align="left" ><h2 class="title"> SIMPLE MODIFY HEADERS </h2> </td>
<td align="right"> <img id="start_img" src="img/start.png" align="right" valign="top"> </img> </td>
</tr>
</table>
<br/>
<br/>
<table class="standard_table">
<tr>
<td align="left" > <b> Url Patterns* : </b> <input id="targetPage" class="form_control input_url" type="text" value=""> </td>
<td align="right">
<a href="#" id="export_button" class="btn btn-primary btn-sm" >
<span class="glyphicon glyphicon-export"></span> Export
</a>
<a href="#" id="import_button" class="btn btn-primary btn-sm" >
<span class="glyphicon glyphicon-import"></span> Import
</a>
<a href="#" id="parameters_button" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-cog"></span> Parameters
</a>
</td>
</tr>
</table>
<br/> <br/>
<br/>
<center>
<table id="table_config" class="table table-condensed " >
<thead>
<tr id="config_table_head">
......@@ -85,17 +66,31 @@
<tbody id="config_tab">
</tbody>
</table>
</center>
<center>
<a href="#" id="add_button" class="btn btn-primary btn-sm" style="width:100px">
<span class="glyphicon glyphicon-plus"></span> New line
</a>
<a href="#" id="save_button" class="btn btn-primary btn-sm" style="width:100px">
<span class="glyphicon glyphicon-save"></span> Save
</a>
</center>
<table class="standard_table"> <tr><td align="center">
<a href="#" id="add_button" class="btn btn-primary btn-sm" style="width:100px">
<span class="glyphicon glyphicon-plus"></span> New line
</a>
<a href="#" id="save_button" class="btn btn-primary btn-sm" style="width:100px">
<span class="glyphicon glyphicon-save"></span> Save
</a>
</td></tr></table>
<br/>
<table class="standard_table">
<tr>
<td align="left" >
<i style="font-size:10pt"> * Informations on url pattern can be found <a href="https://developer.chrome.com/extensions/match_patterns" target="_blank"> here.</a> <br> An empty string on the field will select all urls. It's possible to select mutliple url patterns using semicolon(;) separator </i>
</td>
<td align="right">
<a href="https://github.com/didierfred/SimpleModifyHeaders/tree/V1.5" target="_blank"> <span class="glyphicon glyphicon-question-sign"></span> About </a>
</td>
</tr>
</table>
</center>
<!--
<div class="row">
<div class="col-sm-10">
......@@ -107,7 +102,7 @@
<a href="https://github.com/didierfred/SimpleModifyHeaders/tree/V1.5" target="_blank"> <span class="glyphicon glyphicon-question-sign"></span> About </a>
</div>
</div>
</div> -->
</div>
<!-- PARAMETERS SCREEN -->
......
popup/config.js
+ 18
− 28
View file @ a5c7c3d1
......@@ -18,6 +18,9 @@ let header_name_field_size= 20;
let header_value_field_size= 28;
let comments_field_size= 28;
let input_field_style="form_control input_field_small";
window.onload = function() {
// load configuration from local storage
let config = JSON.parse(localStorage.getItem("config"));
......@@ -88,13 +91,13 @@ function useUrlContainsClick() {
function appendLine(url_contains,action,header_name,header_value,comment,apply_on,status) {
let html = "<td";
if (!use_url_contains) html=html+" hidden";
html = html + "><input class=\"form_control input_field\" size=\""+ url_contains_field_size+ "\" id=\"url_contains"+ line_number + "\"></input></td>";
html = html + "><input class=\""+ input_field_style+ "\" id=\"url_contains"+ line_number + "\"></input></td>";
html = html + "<td><select class=\"form_control select_field\" id=\"select_action" + line_number + "\" disable=false><option value=\"add\">Add</option><option value=\"modify\">Modify</option><option value=\"delete\">Delete</option></select></td>";
html = html + "<td><input class=\"form_control input_field\" size=\"" + header_name_field_size + "\" id=\"header_name"+ line_number + "\"></input></td>";
html = html + "<td><input class=\"form_control input_field\" size=\"" + header_value_field_size + "\" id=\"header_value"+ line_number + "\"></input></td>";
html = html + "<td><input class=\"" + input_field_style + "\" id=\"header_name"+ line_number + "\"></input></td>";
html = html + "<td><input class=\"" + input_field_style + "\" id=\"header_value"+ line_number + "\"></input></td>";
html = html + "<td";
if (!show_comments) html=html+" hidden";
html = html + "><input class=\"form_control input_field\" size=\""+ comments_field_size+ "\" id=\"comment"+ line_number + "\"></input></td>";
html = html + "><input class=\""+ input_field_style + "\" id=\"comment"+ line_number + "\"></input></td>";
html = html + "<td><select class=\"form_control select_field\" id=\"apply_on" + line_number + "\"><option value=\"req\"> Request </option><option value=\"res\">Response</option></select></td>";
html = html + "<td><a href=\"#\" title=\"Activate/Descativate rule\" id=\"activate_button" + line_number + "\" class=\"btn btn-primary btn-sm\">ON <span class=\"glyphicon glyphicon-ok\"></span></a></td>";
html = html + "<td><a href=\"#\" title=\"Move line up\" id=\"up_button" + line_number + "\" class=\"btn btn-default btn-sm\"> <span class=\"glyphicon glyphicon-arrow-up\"></span></a></td>";
......@@ -157,36 +160,23 @@ function switchActivateButton(button_number) {
function reshapeTable() {
let th_elements = document.querySelectorAll("#config_table_head th");
let tr_elements = document.querySelectorAll("#config_tab tr");
if (show_comments) {
if (use_url_contains) {
url_contains_field_size= 18
header_name_field_size= 18;
header_value_field_size= 20;
comments_field_size= 20;
}
else {
header_name_field_size= 20;
header_value_field_size= 28;
comments_field_size= 28;
}
if (use_url_contains) input_field_style = "form_control input_field_small";
else input_field_style = "form_control input_field_medium";
}
else {
if (use_url_contains) {
url_contains_field_size= 28
header_name_field_size= 20;
header_value_field_size= 28;
}
else {
header_name_field_size= 34;
header_value_field_size= 42;
}
if (use_url_contains) input_field_style = "form_control input_field_medium";
else input_field_style = "form_control input_field_large";
}
for (i=0;i<tr_elements.length;i++) {
tr_elements[i].childNodes[4].childNodes[0].size=comments_field_size;
tr_elements[i].childNodes[4].childNodes[0].className=input_field_style;
tr_elements[i].childNodes[4].hidden = (!show_comments);
tr_elements[i].childNodes[3].childNodes[0].size=header_value_field_size;
tr_elements[i].childNodes[2].childNodes[0].size=header_name_field_size;
tr_elements[i].childNodes[0].childNodes[0].size=url_contains_field_size;
tr_elements[i].childNodes[3].childNodes[0].className=input_field_style;
tr_elements[i].childNodes[2].childNodes[0].className=input_field_style;
tr_elements[i].childNodes[0].childNodes[0].className=input_field_style;
tr_elements[i].childNodes[0].hidden = (!use_url_contains);
}
th_elements[4].hidden = (!show_comments);
......
popup/config_medium_screen.css 0 → 100644
+ 23
− 0
View file @ a5c7c3d1
.input_field_small{
width: 120px;
}
.input_field_medium{
width: 170px;
}
.input_field_large{
width: 250px;
}
.input_url {
width:500px;
}
.standard_table {
width:930px;
}
popup/config_small_screen.css 0 → 100644
+ 20
− 0
View file @ a5c7c3d1
.input_field_small{
width: 80px;
}
.input_field_medium{
width: 110px;
}
.input_field_large{
width: 170px;
}
.input_url {
width:200px;
}
.standard_table {
width:750px;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment