ollien/spectabular
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add basic styling of tab list

Browse source 
Right now it has a weird margin bug when the scrollbar appears, but I feel like this might be a chrome for linux bug. Will need to investigate further
This commit is contained in:
Nick Krichevsky 2018-06-25 22:23:51 -04:00
parent f0d31654c9
commit 61e87dd764
4 changed files with 30 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/scss/browser-action.scss Normal file
View file

@ -0,0 +1,5 @@
html {
width: 400px;
height: 600px;
margin: 0;
}

15
src/scss/tab-list.scss Normal file
View file

@ -0,0 +1,15 @@
#tab-list {
padding-left: 0;
margin: 0;
list-style: none;
padding: 0 8px;
//Prevent margin breakout of lis
overflow: auto;
}
.tab {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 10px 0;
}

2
src/twig/browser-action.html
View file

@ -1,6 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<link href="../css/browser-action.css" rel="stylesheet">
<link href="../css/tab-list.css" rel="stylesheet">
<script src="../js/browser-action.js" type="text/javascript"></script>
</head>
<body>

12
src/twig/tab-list.html.twig
View file

@ -1,7 +1,11 @@
{% block tab_list %}
<ul id="tabs">
{% for tab in tabs %}
<li tab-id={{ tab.id }}>{{ tab.title }}</li>
{% endfor %}
<ul id="tab-list">
{% for tab in tabs %}
<li class="tab" tab-id={{ tab.id }}>
<span class="title">
{{ tab.title }}
</span>
</li>
{% endfor %}
</ul>
{% endblock %}