Skip to content
This repository was archived by the owner on Aug 26, 2024. It is now read-only.

Commit f2868b1

Browse files
botanicveliousbotanicvelious
authored
Merge pull request #84 from sounak98/ui-revamp
Revamp UI
2 parents 8285f42 + 2f903d9 commit f2868b1

13 files changed

+422
-371
lines changed

‎gsoc/static/css/article.css

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
article {
2+
background: mintcream;
3+
padding: 1em 1.5em;
4+
margin: 1em 0;
5+
}
6+
7+
.aldryn-newsblog-detail > article {
8+
background: white;
9+
}
10+
11+
.img-responsive {
12+
width: 100%;
13+
height: auto;
14+
}
15+
16+
article > heading {
17+
color: #489eba;
18+
}
19+
20+
.lead {
21+
font-family: 'Source Serif Pro', serif;
22+
text-align: justify;
23+
font-style: italic;
24+
}
25+
26+
.article-content {
27+
text-align: justify;
28+
font-family: 'Source Serif Pro', serif;
29+
}
30+
31+
.text-center {
32+
text-align: center;
33+
}
34+
35+
.categories {
36+
margin-top: 10px;
37+
}
38+
39+
.categories > a {
40+
text-decoration: none;
41+
}
42+
43+
.category {
44+
background: lightsalmon;
45+
padding: 5px 15px;
46+
border-radius: 30px;
47+
color: white;
48+
}
49+
50+
.aldryn-newsblog-pagination {
51+
text-align: center;
52+
}
53+
54+
.aldryn-newsblog-pagination > ul {
55+
display: inline-block;
56+
margin: 0;
57+
padding: 0;
58+
list-style-type: none;
59+
overflow: hidden;
60+
}
61+
62+
.aldryn-newsblog-pagination > ul > li {
63+
padding: 5px 15px;
64+
float: left;
65+
background: lightseagreen;
66+
}
67+
68+
.aldryn-newsblog-pagination > ul > li:first-child {
69+
border-radius: 30px 0 0 30px;
70+
padding-left: 20px;
71+
}
72+
73+
.aldryn-newsblog-pagination > ul > li:last-child {
74+
border-radius: 0 30px 30px 0;
75+
padding-right: 20px;
76+
}
77+
78+
.aldryn-newsblog-pagination > ul > li a {
79+
text-decoration: none;
80+
color: white;
81+
}
82+
83+
.aldryn-newsblog-pager {
84+
text-align: center;
85+
}
86+
87+
.aldryn-newsblog-pager > ul {
88+
display: inline-block;
89+
margin: 0;
90+
padding: 0;
91+
list-style-type: none;
92+
overflow: hidden;
93+
}
94+
95+
.aldryn-newsblog-pager > ul > li {
96+
padding: 5px 15px;
97+
float: left;
98+
background: lightseagreen;
99+
}
100+
101+
.aldryn-newsblog-pager > ul > li:first-child {
102+
border-radius: 30px 0 0 30px;
103+
padding-left: 20px;
104+
}
105+
106+
.aldryn-newsblog-pager > ul > li:last-child {
107+
border-radius: 0 30px 30px 0;
108+
padding-right: 20px;
109+
}
110+
111+
.aldryn-newsblog-pager > ul > li a {
112+
text-decoration: none;
113+
color: white;
114+
}

‎gsoc/static/css/python-gsoc.css

+87-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ label {
88
color: #489eba;
99
}
1010

11+
html.cms-toolbar-expanded > #layout {
12+
margin-top: 46px;
13+
}
14+
1115
.warning {
1216
background: wheat;
1317
color: #16536e;
@@ -56,7 +60,7 @@ label {
5660
font-weight: 400;
5761
text-transform: uppercase;
5862
letter-spacing: 0.1em;
59-
margin: 2em 0 1em;
63+
margin: 1em 0;
6064
}
6165

6266
/* This is a modifier class used when the content-head is inside a ribbon */
@@ -88,9 +92,91 @@ label {
8892
div.ok {
8993
border-bottom: 2px solid #8aab00;
9094
}
95+
9196
div.waiting {
9297
border-bottom: 2px solid #fecb01;
9398
}
99+
94100
div.problem {
95101
border-bottom: 2px solid #b44601;
96102
}
103+
104+
/* Notification */
105+
.notification {
106+
margin-bottom: 0 !important;
107+
}
108+
109+
.notification-box {
110+
background: lightcoral;
111+
color: white;
112+
margin: 1em 0;
113+
padding: 1em 2em;
114+
}
115+
116+
.notification-box-light {
117+
background: wheat;
118+
color: #16536e;
119+
margin: 1em 0;
120+
padding: 1em 2em;
121+
}
122+
123+
/* Login Bar */
124+
#topnav {
125+
position: fixed;
126+
left: 0;
127+
right: 0;
128+
height: 46px;
129+
background: #16536e;
130+
}
131+
132+
.vertical-filler {
133+
height: 46px;
134+
}
135+
136+
.login-container {
137+
display: inline-block;
138+
float: right;
139+
}
140+
141+
.pure-form {
142+
padding: 5px;
143+
}
144+
145+
.small-screen {
146+
display: none;
147+
}
148+
149+
@media screen and (max-width: 50em) {
150+
.large-screen {
151+
display: none;
152+
}
153+
154+
.small-screen {
155+
display: block;
156+
}
157+
158+
.menu-toggle {
159+
display: inline-block !important;
160+
}
161+
162+
.small-screen .login-button {
163+
margin: 5px;
164+
}
165+
}
166+
167+
#topnav .pure-menu {
168+
height: 100%;
169+
}
170+
171+
#topnav .pure-menu-list {
172+
height: 100%;
173+
}
174+
175+
#topnav .pure-menu-link.pure-menu-heading {
176+
margin-top: 6px;
177+
color: #aaa;
178+
}
179+
180+
#topnav .pure-menu-link.pure-menu-heading:hover {
181+
background: #16536e;
182+
}

‎gsoc/static/css/side-menu.css

+4-7
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ appears on the left side of the page.
8383
margin-left: -150px; /* "#menu" width */
8484
width: 150px;
8585
position: fixed;
86-
top: 0;
86+
top: 46px;
8787
left: 0;
8888
bottom: 0;
8989
z-index: 1000; /* so the menu or its navicon stays above all content */
@@ -129,7 +129,7 @@ appears on the left side of the page.
129129
*/
130130
#menu .pure-menu-selected,
131131
#menu .pure-menu-heading {
132-
background: #16536e;
132+
background: #1f8dd6;
133133
}
134134
/*
135135
This styles a link within a selected menu item `<li>`.
@@ -161,7 +161,7 @@ small screens.
161161
.menu-link {
162162
position: fixed;
163163
display: block; /* show this only on small screens */
164-
top: 0;
164+
top: 46px;
165165
left: 0; /* "#menu width" */
166166
background: #000;
167167
background: rgba(0,0,0,0.7);
@@ -201,16 +201,13 @@ small screens.
201201
margin-top: 0.6em;
202202
}
203203

204-
.sub-menu {
205-
margin-left: 20px;
206-
}
207204

208205
/* -- Responsive Styles (Media Queries) ------------------------------------- */
209206

210207
/*
211208
Hides the menu at `48em`, but modify this based on your app's needs.
212209
*/
213-
@media (min-width: 48em) {
210+
@media (min-width: 50em) {
214211

215212
.header,
216213
.content {

‎gsoc/static/js/menu.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
(function (window, document) {
2+
3+
var layout = document.getElementById('layout'),
4+
menu = document.getElementById('menu'),
5+
menuLink = document.getElementById('menuLink'),
6+
content = document.getElementById('main');
7+
8+
function toggleClass(element, className) {
9+
var classes = element.className.split(/\s+/),
10+
length = classes.length,
11+
i = 0;
12+
13+
for(; i < length; i++) {
14+
if (classes[i] === className) {
15+
classes.splice(i, 1);
16+
break;
17+
}
18+
}
19+
// The className is not found
20+
if (length === classes.length) {
21+
classes.push(className);
22+
}
23+
24+
element.className = classes.join(' ');
25+
}
26+
27+
function toggleAll(e) {
28+
var active = 'active';
29+
30+
e.preventDefault();
31+
toggleClass(layout, active);
32+
toggleClass(menu, active);
33+
toggleClass(menuLink, active);
34+
}
35+
36+
menuLink.onclick = function (e) {
37+
toggleAll(e);
38+
};
39+
40+
content.onclick = function(e) {
41+
if (menu.className.indexOf('active') !== -1) {
42+
toggleAll(e);
43+
}
44+
};
45+
46+
}(this, this.document));

‎gsoc/templates/aldryn_newsblog/article_detail.html

+22-44
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,29 @@
11
{% extends "aldryn_newsblog/base.html" %}
22
{% load i18n cms_tags apphooks_config_tags %}
33

4-
{% block title %}
5-
{{ article.title }} - {{ block.super }}
6-
{% endblock %}
4+
{% block title %}{{ article.title }} - {{ block.super }}{% endblock %}
5+
{% block breadcrumb %}{% endblock %}
76

87
{% block newsblog_content %}
9-
<style>
10-
.header {
11-
text-align: center;
12-
top: auto;
13-
margin: 3em auto;
14-
}
15-
16-
.sidebar {
17-
background: rgb(61, 79, 93);
18-
color: #fff;
19-
}
20-
21-
.brand-title,
22-
.brand-tagline {
23-
margin: 0;
24-
}
25-
.brand-title {
26-
text-transform: uppercase;
27-
}
28-
.brand-tagline {
29-
font-weight: 300;
30-
color: rgb(176, 202, 219);
31-
}
32-
</style>
33-
<div id="layout" class="pure-g" >
34-
35-
<div class="content pure-u-1 pure-u-md-20-24">
36-
{% include "aldryn_newsblog/includes/article.html" with detail_view="true" %}
37-
8+
<div class="aldryn-newsblog-detail">
9+
{% include "aldryn_newsblog/includes/article.html" with detail_view="true" %}
10+
</div>
3811
{% static_placeholder "newsblog_social" %}
3912

40-
<ul>
41-
{% if prev_article %}
42-
<li><a href="{{ prev_article.get_absolute_url }}">{% trans "Previous Article" %}</a></li>
43-
{% endif %}
44-
<li><a href="{% namespace_url "article-list" %}">{% trans "Back to Overview" %}</a></li>
45-
{% if next_article %}
46-
<li><a href="{{ next_article.get_absolute_url }}">{% trans "Next Article" %}</a></li>
47-
{% endif %}
48-
</ul>
49-
</div>
50-
</div>
51-
{% endblock %}
13+
<div class="aldryn-newsblog-pager">
14+
<ul class="pager">
15+
{% if prev_article %}
16+
<li class="previous"><a href="{{ prev_article.get_absolute_url }}"><span aria-hidden="true">&larr;</span> {% trans "Previous" %}</a></li>
17+
{% else %}
18+
<li class="previous"><span class="text-muted"><span aria-hidden="true">&larr;</span> {% trans "Previous" %}</span></li>
19+
{% endif %}
20+
<li><span class="pager-back"><a href="{% namespace_url "article-list" %}">{% trans "Overview" %}</a></span></li>
21+
{% if next_article %}
22+
<li class="next"><a href="{{ next_article.get_absolute_url }}">{% trans "Next" %} <span aria-hidden="true">&rarr;</span></a></li>
23+
{% else %}
24+
<li class="next"><span class="text-muted">{% trans "Next" %} <span aria-hidden="true">&rarr;</span></span></li>
25+
{% endif %}
26+
</ul>
27+
</div>
28+
{% static_placeholder "newsblog_comments" %}
29+
{% endblock %}

0 commit comments

Comments
 (0)