Skip to content

Commit a9f7990

Browse files
dittosdittos
committed
Use Bootstrap 3 for primary pages
1 parent a3c2e81 commit a9f7990

File tree

5 files changed

+123
-234
lines changed

5 files changed

+123
-234
lines changed

‎logviewer/static/style.css

Lines changed: 46 additions & 177 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,41 @@
1-
body { margin: 0; font-size: 13px; font-family: Malgun Gothic, 맑은 고딕, sans-serif; }
2-
a { color: #36c; text-decoration: none; }
3-
a:hover { background-color: #def; }
4-
h1, h2 { font-family: Helvetica, Arial, sans-serif; }
5-
h1 { font-size: 2.5em; margin-top: 0; }
6-
h2 { font-size: 1.6em; font-weight: normal; }
7-
p, pre, li { line-height: 1.8; }
8-
pre { background-color: #eee; margin: 1.5em 2em; padding: 0.5em; font-size: 0.9em; }
9-
code { font-family: Bitstream Vera Sans Mono, Consolas, monospace; }
10-
#nav { color: #333; }
11-
#nav a { color: #333; text-decoration: underline; }
12-
#nav a:hover { background-color: transparent; }
13-
form p { margin: 0; text-indent: 0; }
1+
body {
2+
padding-top: 50px; /* navbar */
3+
}
4+
5+
.form-login {
6+
width: 330px;
7+
margin: 0 auto;
8+
}
9+
10+
.navbar-global {
11+
margin-bottom: 0;
12+
position: absolute;
13+
top: 0;
14+
width: 100%;
15+
}
16+
17+
.navbar-log.affix-top {
18+
margin-bottom: 0;
19+
position: static;
20+
}
21+
.navbar-log .nav li { float: left; }
22+
.navbar-log .current-channel,
23+
.navbar-log .date {
24+
font-size: 1.2em;
25+
font-weight: bold;
26+
}
27+
.navbar-log .date.navbar-text {
28+
margin-top: 13px;
29+
margin-bottom: 13px;
30+
}
31+
32+
#flags { position: fixed; right: 0; bottom: 0; margin: 10px; background-color: #fff; width: 280px; padding: 10px; border: 1px solid #000; opacity: 0.4; }
33+
#flags h3 { margin-top: 0; }
34+
#flags:hover { opacity: 1; }
35+
#flags ul { margin: 0; padding: 0; list-style: none; }
36+
#toggle-flag-mode { margin-top: 1em; }
37+
a.flaggable { font-weight: bold; color: #7a0; }
38+
1439
table { border-collapse: collapse; margin-bottom: 0; width: 100%; }
1540
tr {
1641
-webkit-transition: 0.1s background-color ease-in;
@@ -22,173 +47,10 @@ td { padding: 0.5em 1em; border-bottom: 1px solid #ddd; line-height: 1.4; }
2247
.time a { color: #999; text-decoration: none; }
2348
.time a:hover { background-color: #ccc; color: #fff; }
2449
.nickname { font-size: 0.9em; text-align: right; padding-right: 0; }
50+
.nickname i { font-size: 0; color: transparent; }
2551
.link { border: 1px solid #ddd; background-color: #f8f8f8; padding: 0.5em; margin-bottom: 2em; }
2652
.new { font-size: xx-small; vertical-align: super; color: #000; }
2753
.highlight { background-color: #ff0; }
28-
#update a { font-size: 1.2em; text-align: center; border: 1px solid #ccc; background-color: #f4f4f4; display: block; padding: 0.5em; }
29-
i { font-size: 0; color: transparent; }
30-
#navbar { position: fixed; top: 0; right: 0; background-color: #eee; box-shadow: 0px 2px 5px #888; padding: 10px 20px; opacity: 0.8; }
31-
#navbar h1 { font-size: 1em; font-weight: normal; }
32-
#navbar h2 { margin: 0; }
33-
#only-recent { padding: 10px 20px; background-color: #ffc; margin: 0; border-bottom: 1px solid #ccc; }
34-
#enable-chat a { padding: 15px; font-size: 1.1em; text-align: center; display: block; background-color: #eee; }
35-
#enable-chat a:hover { background-color: #ddd; }
36-
#say { padding: 10px; font-size: 0.9em; color: #333; background-color: #eee; }
37-
#eol { text-align: center; }
38-
#flags { position: fixed; right: 0; bottom: 0; margin: 10px; background-color: #fff; width: 280px; padding: 10px; border: 1px solid #000; opacity: 0.4; }
39-
#flags h3 { margin-top: 0; }
40-
#flags:hover { opacity: 1; }
41-
#flags ul { margin: 0; padding: 0; list-style: none; }
42-
#toggle-flag-mode { margin-top: 1em; }
43-
a.flaggable { font-weight: bold; color: #7a0; }
44-
45-
@media (max-width: 767px) {
46-
#navbar { position: static; padding: 10px; text-align: center; box-shadow: none; }
47-
#flags { position: static; border: none; margin: 0; width: 100%; }
48-
.time { display: none; }
49-
.nickname, .message { padding-left: 5px; }
50-
.message { word-wrap: break-word; }
51-
#msg { width: 100%; }
52-
}
53-
54-
body {
55-
margin: 0;
56-
padding: 0;
57-
}
58-
59-
.langdev__nav {
60-
background-color: #222;
61-
background-repeat: repeat-x;
62-
background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
63-
background-image: -moz-linear-gradient(top, #333333, #222222);
64-
background-image: -ms-linear-gradient(top, #333333, #222222);
65-
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
66-
background-image: -webkit-linear-gradient(top, #333333, #222222);
67-
background-image: -o-linear-gradient(top, #333333, #222222);
68-
background-image: linear-gradient(top, #333333, #222222);
69-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
70-
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
71-
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
72-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
73-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
74-
font-size: 13px;
75-
font-weight: normal;
76-
line-height: 18px;
77-
color: gray;
78-
}
79-
.langdev__nav_inner {
80-
margin: 0 20px;
81-
zoom: 1;
82-
}
83-
.langdev__nav_inner::before, .langdev__nav_inner::after {
84-
display: table;
85-
content: "";
86-
}
87-
.langdev__nav_inner::after {
88-
clear: both;
89-
}
90-
.langdev__nav_inner a {
91-
color: #bfbfbf;
92-
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
93-
text-decoration: none;
94-
}
95-
.langdev__nav_inner a:hover {
96-
background-color: #333;
97-
background-color: rgba(255, 255, 255, 0.05);
98-
}
99-
.langdev__nav_inner h3 {
100-
margin: 0;
101-
padding: 0;
102-
border: 0;
103-
position: relative;
104-
font-size: 18px;
105-
font-weight: bold;
106-
line-height: 36px;
107-
color: #404040;
108-
}
109-
.langdev__nav_inner h3 a {
110-
float: left;
111-
display: block;
112-
padding: 8px 20px 12px;
113-
margin-left: -20px;
114-
color: white;
115-
font-size: 20px;
116-
font-weight: 200;
117-
line-height: 1;
118-
}
119-
.langdev__nav_inner ul {
120-
display: block;
121-
float: left;
122-
margin: 0 10px 0 0;
123-
padding: 0;
124-
border: 0;
125-
position: relative;
126-
left: 0;
127-
}
128-
.langdev__nav_inner li {
129-
margin: 0;
130-
padding: 0;
131-
border: 0;
132-
display: block;
133-
float: left;
134-
line-height: 18px;
135-
color: gray;
136-
}
137-
.langdev__nav_inner li a {
138-
display: block;
139-
float: none;
140-
padding: 10px 10px 11px;
141-
line-height: 19px;
142-
text-decoration: none;
143-
}
144-
.langdev__nav_inner li.active a {
145-
background-color: #222;
146-
background-color: rgba(0, 0, 0, 0.5);
147-
}
148-
.langdev__nav_inner li:hover a, .langdev__nav_inner li.active a {
149-
color: white;
150-
}
151-
152-
.section-channel {
153-
width: 46%;
154-
padding: 0 2%;
155-
float: left;
156-
}
157-
/* clearfix */
158-
.section-channel:before, .section-channel:after { content:""; display:table; }
159-
.section-channel:after { clear:both; }
160-
/* For IE 6/7 (trigger hasLayout) */
161-
.section-channel { zoom:1; }
162-
163-
.section-channel h2 { margin-bottom: 0; }
164-
.section-channel h2 a { display: block; padding: 0.25em 0.5em; }
165-
.section-channel table { border-top: 2px solid #999; }
166-
167-
@media (max-width: 767px) {
168-
.section-channel {
169-
width: 96%;
170-
float: none;
171-
}
172-
}
173-
174-
.dropdown-target {
175-
color: #08c;
176-
cursor: pointer;
177-
padding: 4px;
178-
border-radius: 4px;
179-
}
180-
181-
.dropdown-target:after {
182-
font-family: Consolas, Courier New, Arial, sans-serif;
183-
content: '↓';
184-
margin-left: 6px;
185-
color: #08c;
186-
}
187-
188-
.dropdown-target:hover { background: #fff; }
189-
.dropdown-target.dropdown-open { background: #888; color: #FFF; }
190-
.dropdown-target.dropdown-open:after { color: #FFF; }
191-
19254

19355
/* http://jsbin.com/ijanas */
19456
tr.color-0 .nickname { color: hsl(0, 90%, 35%); }
@@ -213,3 +75,10 @@ tr.color-8.selected, html.js tr.color-8 .nickname span:hover { background-color:
21375
tr.color-9.selected, html.js tr.color-9 .nickname span:hover { background-color: hsl(342, 85%, 93%); }
21476
html.js tr.selected .nickname span:hover { background-color: white; }
21577
html.js tr .nickname span { padding: 4px; border-radius: 8px; cursor: pointer; }
78+
79+
@media (max-width: 767px) {
80+
#flags { position: static; border: none; margin: 0; width: 100%; }
81+
.time { display: none; }
82+
.nickname, .message { padding-left: 5px; }
83+
.message { word-wrap: break-word; }
84+
}

‎logviewer/templates/base.html

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,33 @@
44
<script type="text/javascript">document.documentElement.className += ' js';</script>
55
<meta charset="UTF-8" />
66
<title>#langdev log: {% block title %}{% endblock %}</title>
7-
<meta name="viewport" content="width=device-width" />
7+
<meta name="viewport" content="width=device-width">
8+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
89
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css">
9-
<link rel="stylesheet" href="{{ url_for('static', filename='jquery.dropdown.css') }}" type="text/css">
10-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
10+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
1111
<script type="text/javascript" src="{{ url_for('static', filename='socket.io/socket.io.min.js') }}"></script>
12-
<script type="text/javascript" src="{{ url_for('static', filename='jquery.dropdown.js') }}"></script>
1312
</head>
1413
<body>
15-
<div class="langdev__nav">
16-
<div class="langdev__nav_inner">
17-
<h3><a href="http://langdev.org/">LangDev</a></h3>
18-
<ul>
19-
<li><a href="http://langdev.org/posts/">Forum</a></li>
20-
<li class="active"><a href="http://log.langdev.org/">Log</a></li>
21-
<li><a href="http://topics.langdev.org/">Topics</a></li>
22-
<li><a href="http://links.langdev.org/">Links</a></li>
23-
<li><a href="http://docs.langdev.org/">Docs</a></li>
24-
</ul>
25-
</div>
14+
<div class="navbar navbar-default navbar-static-top navbar-inverse navbar-global hidden-xs">
15+
<div class="navbar-header">
16+
<a class="navbar-brand" href="http://langdev.org/">LangDev</a>
17+
</div>
18+
<ul class="nav navbar-nav">
19+
<li><a href="http://langdev.org/posts/">Forum</a></li>
20+
<li class="active"><a href="http://log.langdev.org/">Log</a></li>
21+
<li><a href="http://topics.langdev.org/">Topics</a></li>
22+
<li><a href="http://links.langdev.org/">Links</a></li>
23+
<li><a href="http://docs.langdev.org/">Docs</a></li>
24+
</ul>
25+
<ul class="nav navbar-nav navbar-right">
26+
<li class="navbar-text"><i class="glyphicon glyphicon-user"></i> {{ username }}</li>
27+
<li><a href="{{ url_for('logout') }}">로그아웃</a></li>
28+
</ul>
2629
</div>
2730
{% block content %}
2831
{% endblock %}
2932
<a name="bottom"></a>
33+
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
3034
<script type="text/javascript">
3135
function apply_noreferrer(element) {
3236
$(element).find('a:not([rel~="noreferrer"])').each(function(i, e) {

‎logviewer/templates/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
{% from 'macros.html' import message_rows %}
33

44
{% block content %}
5+
<div class="container">
56
{% for i in logs %}
6-
<div class="section-channel">
7+
<div class="col-sm-6">
78
<h2><a href="{{ url_for('channel', channel=i.log.name) }}">#{{ i.log.name }}</a></h2>
89

910
<table>
1011
<tbody>{{ message_rows(i.message, log_url=i.log.url()) }}</tbody>
1112
</table>
1213
</div>
1314
{% endfor %}
15+
</div>
1416
{% endblock %}

0 commit comments

Comments
 (0)