Browse Source

Modified popup styling to be more readable

master
Teknikode 3 years ago
parent
commit
b8ced22ee7
3 changed files with 26 additions and 13 deletions
  1. 13
    0
      css/popup.css
  2. 4
    4
      scripts/popup.js
  3. 9
    9
      views/popup.html

+ 13
- 0
css/popup.css View File

@@ -0,0 +1,13 @@
body {
min-width: 200px;
max-width: 400px;
font-size: 12px;
background: #fefefe;
color: #333;
font-family: helvetica, arial, sans-serif;
padding-left: 7px;
padding-right: 7px;
overflow-y: hidden;
overflow-x: hidden;
width: calc(100% - 30px);
}

+ 4
- 4
scripts/popup.js View File

@@ -21,14 +21,14 @@ function fillItems(items) {
if ($('#process-item-' + item.id).length) {
// It already exists, so let's update it
var itemDiv = $('#process-item-' + item.id);
itemDiv.find('#process-type').html(item.type);
itemDiv.find('#process-url').html(item.url);
itemDiv.find('#type').html(item.type);
itemDiv.find('#url').html(item.url);
}
else {
var itemDiv = $('#process-item-template');
itemDiv.attr('id', 'process-item-' + item.id);
itemDiv.find('#process-type').html(item.type);
itemDiv.find('#process-url').html(item.url);
itemDiv.find('#type').html(item.type);
itemDiv.find('#url').html(item.url);
itemDiv.find('#open').click(function () {
openItem(item.url);

+ 9
- 9
views/popup.html View File

@@ -2,7 +2,8 @@

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/common.css"/>
<link rel="stylesheet" href="../css/popup.css"/>
@@ -18,16 +19,15 @@
</div>
<div id="templates" style="display: none">
<div id="process-item-template">
<div class="panel-section panel-section-header">
<div class="text-section-header" id="process-type"></div>
<div class="text-section-header" id="url"></div>
<div id="process-item-template" class="item-panel">
<div class="item-details">
<h2 class="item-title" id="type"></h2>
<div class="item-url" id="url"></div>
</div>
<div class="panel-section panel-section-footer">
<button id="open" class="panel-section-footer-button">Open</button>
<div class="panel-section-footer-separator"></div>
<button id="remove" class="panel-section-footer-button default">Remove</button>
<div class="item-actions">
<button id="open" class="item-button">Open</button>
<button id="remove" class="item-button">Remove</button>
</div>
</div>
</div>

Loading…
Cancel
Save